色合いも美しく WebGL で描く! 酒造メーカーのキリンが販売するハートランドビールの特設サイト!
イメージカラーであるグリーンを効果的に利用
今回ご紹介するのは国産の WebGL 事例です。
みなさんご存知の、酒造メーカーであるキリン。そのキリンが製造しているハートランドビールが今回のサイトの主役です。
そのビールの名前にもある「ハートランド」は、なんでもシカゴ周辺に生えている大樹のことだそうで、ビール瓶の表面にはラベルが貼られておらず、この大樹をイメージした凹凸のエンボス加工がされているのだとか。
私はお酒についてはまったく知識がないのですが、ハートランドビールの、そのビール瓶の色であるグリーンを効果的に利用した、非常に味わい深い仕上がりのサイトになっています。
大樹と鳥と、瓶ビール
今回のサイトは、WebGL はどちらかというとさりげなく使われている感じの印象です。
画面内を飛び回る鳥をあしらった演出や、ビール瓶がライトアップされている様子などが実に美しく WebGL によって描き出されます。
物量感に頼った派手な演出という感じではないのですが、滑らかなアニメーションや美しい色合いが、製品の雰囲気にも合っていてとてもいいですね。
WebGL 自体が主役になっているわけではなく、あくまでも名脇役になっているところがなんともいい感じです。
ちなみに、下の画像は普通にムービーです。今回のサイトは画像やムービーを効果的に使いながらも、要所要所で WebGL を使った演出を加えて表現されています。
イントロのムービーの再生は結構長い尺が設けられていて、ビールの商品名の由来である大樹が登場する、なかなか凝った映像となっています。
ムービーの再生が終わるとコンテンツを閲覧することができるようになるのですが、基本的には右側に向かって横にスクロールしながらコンテンツが切り替わっていくスタイルになっています。
コンテンツを切り替えていくと、WebGL を使った瓶の輝くような表現などが出てきます。
静止画では伝えられないのですが、マウスカーソルを動かすとそれに連動するようにビール瓶がライトアップされる様子は、とてもキレイです。
また、瓶の一本一本には、印象的な鳥の模様が彫り込まれています。
これがつながることで、まるでパラパラ漫画のように鳥が羽ばたいている様子になったりして、ほんとにアナログな良さというか、レトロさ漂うとても味わい深いコンテンツになっています。
鳥が登場するシーンは他にもあって、シーンの切り替わる際には、まるでパーティクルが舞うかのように、鳥たちが画面を覆い尽くします。
これも、かなり動きが自然ですし、派手すぎず印象的な演出になっています。
和製の WebGL コンテンツの事例は、あまり公式に「WebGL 使ってますよ!」と言われることが少ないということもあって、私がどうも見逃してしまうことが多かったりします。
今回のサイトも、公式の情報を頼りに見つけたのではなく、たまたま関連する Tweet をされている方がいらっしゃって、それで見つけました。
今回のサイトのように、派手すぎず、しかし印象的な WebGL の使い方をするサイトは、世界的な傾向から見ても徐々に増えてきているような気がします。
3D でぐりぐりすることだけが WebGL の活用方法ではない、ということが、徐々に認知されてきているのかなと感じる今日このごろです。
非常に質感がキレイに仕上がっているサイトです。
ぜひチェックしてみてください。