WebGL を使った疑似立体表現が面白い! フランスで人気のお菓子のブランド Whaou のウェブサイト

doxas : 2019-01-22 13:58:34

市販されているお菓子のブランド

今回ご紹介するのは、フランスでは(恐らく)メジャーなお菓子のブランドのウェブサイトです。

Whaou という名前のブランドで、そのブランド名がそのままキリンの男の子のキャラクターの名前ににもなっているのかな? 日本では見かけないので海外には進出していないブランドだと思うのですが、フランスでは結構人気のあるっぽい雰囲気です。

今回のサイトでは Whaou のお家がテーマになっていると思われるのですが、かなりコンテンツの量も多く、非常に手のこんだ作りになっています。

疑似立体表現がすごく高品質で楽しい

今回のサイトには、WebGL を利用した立体的な 3D ビューの他に、あえて平面的な画像を利用して描画される疑似立体表現のビューも用意されています。

これらの絶妙な使い分けが非常に面白くて、しかも合理的です。

3D ビューは、Whaou の家がテーマのコンテンツなので、その外観を描画する際に使われています。

この縦に長い、キリンの首のようなものが彼の家みたいです。

そしてこの細長い家の中に、様々な部屋が用意されていて、それぞれにコンテンツがぎっしり用意されています。

たとえばキッチンのシーンでは、下の画像にあるような画面が出てくるのですが、ここは実際にはプリレンダリングされた 2D のシーンですね。つまりリアルタイムにキッチンの様子が CG としてレンダリングされているわけではありません。

しかし微妙にマウスカーソルの動きに追従するようになっていることと、手前の方に描かれているマグカップなどがちょっと異なる移動の仕方をするので、妙に立体的に見えます。

さらに、壁に貼られている紙や棚に並べられている調味料などは、クリックしたりすることで何かしらの反応を起こすようになっています。

調味料を混ぜ合わせてお菓子を完成させていくようなアプローチがあったり、ユーザーに親しみを抱かせるような内容のコンテンツが多くなっていますね。

Whaou という製品自体は、やっぱりどちらかというと子供に人気の商品なんだろうと思いますので、キャラクターの暮らしに想像をふくらませられるような、生活感のあるコンテンツがあえて用意されているのだと思います。

日本のお菓子で、割とキャラクターを全面に押し出したプロモーションがされるものって、あんまり思い浮かばないのですが……

この Whaou に関しては、キリンの男の子のキャラクターが結構象徴的な存在として扱われている感じもしますね。

家の中の様子や、インタラクティブなコンテンツの作りは、見た目の子供っぽさとは裏腹にかなり手の込んだ内容になっています。特に個人的には、疑似立体表現や 3D と 2D の使い分けに、本当に感心させられました。

とても楽しいサイトになっていると思いますので、ぜひチェックしてみてください。

リンク:

Whaou! - Ton goûter avec les crêpes et gâteaux de Whaou!

share

follow us in feedly

search

search

monthly

sponsor

social