クリスマスツリーに見立てた WebGL デモがあるフランスの化粧品メーカーキャンペーンサイト
シンプルだけど美しい雰囲気
今回ご紹介するのは、フランスの化粧品メーカーのウェブサイトです。
なにせフランス語なので詳細についてはよくわからないのですが、懸賞かなにかに応募するための、ちょっとした仕掛けが施されたデモとなっており、黄色と黒のカラーリングがなんとも美しいウェブサイトになっています。
割りとスタンダードなデモのタイプだとは思うのですが、それだけにキレイに見せるのは結構難しい系統のデモじゃないかなと思います。シンプルですが、美しくまとまっていますね。
パーティクルを美しく見せる秘訣
今回のサイトは非常にシンプルなオブジェクトのみで構成されていて、端的に言うと、丸い、パーティクルのような表現が中心の作品です。
厳密にはパーティクルというよりは小さめの球体形状だと思うのですが、背景に浮かんでいるパーティクルと、丸いオブジェクトで、統一感のある雰囲気を作っています。
カラーリングも含めて、結構徹底されています。
様々な工夫によって、それらのシンプルな形状だけで、美しい世界観を構築することに見事に成功していますね。
トップページでロードが完了すると、タイトルロゴのようなものが一定時間表示されたあと、上の画像にあるように化粧品の画像が出てきます。
いくつかシリーズがあるみたいで、黄色をベースにしたもの以外にも、ピンク色やブルーっぽい感じのやつもありますね。
ただ、サイトのデモの表現としては黄色があくまでもベースになっていて、それ以外の色表現はなさそうです。
そしてどれかひとつの商品を選んで、画面の中央下あたりにあるボタンを押すと、画面がフッと暗くなるように商品の画像が消え、パーティクルによって作られたクリスマスツリーが出てきます。
下の方から徐々に形を成していくアニメーションが美しいです。
そしてこのツリーが表示されている状態では、スクロール操作や、画面の右端に表示されているスライダーに対する操作で、シーンをズームアップすることができるようになります。
といっても、線形に、ただ単に倍率が上がるというズームではなくて、ツリーの周囲を螺旋を描くようにスルスルと動くカメラワークになっています。
これがなかなか気持ちがよい動きです。
単調になりがちなトーンのサイトなので、こうした動きによるアクセントがとてもうまく機能していますね。
また、宙に浮いている丸いオブジェクトを選択することでハンドルネームやメールアドレスを登録するフォームが出てきます。たぶん、このサイトの企画としては、なにかの抽選やプレゼントが行われるものなんでしょう。
フランス語なのでよくわからなかったので、その先に進むとなにが待っているのかまで確かめられていませんが、こういう企画も面白いですね。
日本では、化粧品などの「美しさや優雅さ」が主張される商品でも、あまり WebGL 系のデモを使っているものは見かけません。(過去には事例がいくつかあります)
ブランド品や、高級車なども含め、やはり美しさとか高級感とかが大切な意味を持つ商品の場合は、WebGL で作る高い質感が製品の雰囲気作りにもピッタリとマッチしている感じがしていいですね。
今回のサイトでは登場するオブジェクトが単調というか、シンプルなものばかりなのに、不思議と安っぽさを感じないのではないでしょうか。
これにはいろいろな演出上の工夫があるかと思いますが、距離に応じてブラーを掛けて滲むような色で見せたり、ゆっくりと、漂うように絶えずアニメーションさせるようにしたり、いろいろなところに工夫が凝らされているのを見ることができます。
シンプルな実装ほど、かっこよく、美しく見せるのは容易でない場合が多いです。そういった意味で、今回のサイトは非常に参考にできる部分の多い、素晴らしい出来栄えかなと個人的には思いました。
ぜひチェックしてみてください。