独特な質感とカラーリングが楽しい！ アーティストとのコラボサマーパッケージが眩しい！ BAKE Inc. のウェブサイト
光沢感がなんとも気持ちいい
今回ご紹介するのは、日本の製菓メーカーで多数の店舗やブランドを展開している株式会社 BAKE のウェブサイトです。
今回のサイトは特に、チーズタルトが紹介されているのですが……
パッケージに海外でも活躍しているアーティスト山口 歴（やまぐち めぐる）さんのアートワークを用いたオリジナルパッケージが用いられているということで、その特設サイトという形になっています。
サイトデザイン、フロントエンド実装は、BAKE Inc. 所属の小野澤 慶 (@keichup)さんがなさっているとのことで、なんとこのサイト内製なんですね……すごい！
アーティストさんの作風が WebGL を使って見事に再現されていて、その質感やライティングが非常に面白いビジュアルとなっています。
エンボス加工感が鮮明に浮き上がる
今回のサイトはイメージカラーとしてイエローとブルーが使われているのですが、フォントなどが結構大胆に大きめにレイアウトされているからか、色数は少なめでもすごく迫力があります。
トップページのイントロ部分から、背景に大きくアーティストさんの作品を模した WebGL 製のレンダリングが使われているのですが、ライトが周回するように動くようになっていて、光源が移動するのに従って、模様の表面に光沢がきらめき、微妙にデコボコとした印象になっています。
ちょっと自信ないのですが、たぶん、いわゆるノーマルマッピングだと思います。
静止画だと、ちょっとわからないかなと思うのですが……
アーティストさんの迫力のある筆使いと、その絵の具の微妙な盛り上がりというか起伏ですね、これがノーマルマッピングで見事に再現されており、光源が動くたびに微妙にキラキラとスペキュラが輝きます。
不思議な立体感があって、これは結構新しい表現方法かもしれません。
すごく、アート作品の雰囲気がいい意味で再現できてると思いました。
さらに、シーンを進めていくと、今度はサマーパッケージの形をそのまま再現したような、箱型のジオメトリが描画されます。
こちらもやはりちょっとデコボコしたエンボスっぽい表現が使われていて、イントロのシーンとはまた違った印象で面白いですね。
また、フォグの色がイエローになってるというのも、なんだか表現として珍しいというか不思議な世界観の演出として、いいアクセントになっていると思いました。
実際に、写真で本物のサマーパッケージが掲載されているのですが、こんなおしゃれなパッケージのなかにチーズタルトが入ってるなんて……贈答品や差し入れとして、とても重宝されそうです。
今回のサイトは、絵の具の持つ自然な隆起というか凹凸が、ノーマルマッピングで見事に再現されていて、まずその点がすごく表現として面白いです。
私は子供の頃、よく親に連れられて（無理やりでしたがｗ）博物館とか美術館に行っていたのですが、やっぱり本物の絵画やアート作品って独特の迫力や凄みが感じられる部分がありますよね。
今回のサイトでは、写実的というのはちょっと違いますが、オリジナルのサマーパッケージの魅力が存分に再現されていて、非常に素晴らしいと感じました。
ジオメトリ自体はシンプルですが、表現として、非常に参考になる実装だと思います。
ぜひチェックしてみてください。
