WebGL を活用して和紙のような質感や濃淡を見事に再現！八 by PRESS BUTTER SAND のウェブサイト

doxas : 2022-06-10 13:01:14

横スクロールのインターフェースも面白い

今回ご紹介するのは、BAKE INC. が展開しているお菓子のブランドのスペシャルサイトです。

BAKE INC. は実は昔から WebGL を活用したプロモーションを行っている企業で、当サイトでも何度かご紹介したことがあります。

今回のサイトも WebGL を利用してグラフィックスを処理しているようで、和紙のような質感を上手に表現していますね。3D 的な表現こそありませんが全体に丁寧な作りで、WebGL が飛び抜けて主張をしている感じではなくて、サイト内全体の表現の一部として一体になっている感じがします。

今回のサイトでは、どこからどこまでが WebGL 実装なのかパッと見ただけだとわからないと言いますか……

良い意味で WebGL がサイト上の表現としてなじんでいて、演出をするための WebGL というよりは、パフォーマンスを考慮したり、あるいは求める表現を実現するための手段として WebGL を部分的に採用しているんだろうなという感じがします。

ページがロードされた直後に見られるオブジェクトが浮き上がってくるような演出なんかは WebGL であることがわかりやすい部分かもしれません。

霧が晴れていくような独特な演出ですが、実物の和紙が持つ少しまだらな濃淡を想起させるようなエフェクトで、すごくサイト全体の雰囲気とマッチしていますよね。

あんまり細かくは調べていないので想像で書く感じになっちゃうのですが、たぶん背景の模様とか、画像がマスクされている部分とか、そのあたりが WebGL 実装されているのかなと思います。

全部が WebGL で描画されているというわけではなく、適切に CSS の効果も活用しながら、必要な部分だけを厳選して WebGL で処理しているような感じがします。

サイト全体のデザインが横スクロールを前提にしているレイアウトなのですが、画面の右端に縦スクロール用のスクロールバーが出ており、サイト全体のどの程度まで閲覧してきたのかが視覚的にわかるようになっています。

こういうユーザーの体験を考慮した実装みたいな部分は、WebGL とは直接は関係ない部分ですが本当に卒なく細かいところまで配慮されていてすごいですね。

また噂によるとこのサイトの WebGL 実装は Pixi.js や three.js ではなく、独自の WebGL ライブラリを使って実装されているらしいです…… ヤバいですね……

BAKE INC. のウェブサイトは、季節ごとや、ブランドごとに、かなり瞬発力の高いブランディングが行われているイメージがあります。

実際、過去にはポップな雰囲気が売りの商品・ブランドでは、ミニゲームが仕込まれていたサイトなんかもあったんですよね。

その点今回のサイトや、そのサイト上に見られるブランドイメージを観察してみると、和紙の質感をベースに落ち着いた和の雰囲気がしっとりとサイト全体を覆っていて、そこに横スクロールが不思議とマッチしていて面白いです。