質感重視の WebGL 実装と動画を上手に組み合わせた表現が秀逸な LaPrairie のデジタルショールーム

doxas : 2022-12-12 13:23:01

ウィンドウの縦横比には注意

今回ご紹介するのは、スイスの化粧品メーカー、LaPrairie のスペシャルサイトです。

体裁としては恐らくですがデジタルショールームのような感じのコンテンツだと思うのですが、エキシビジョンや研究室みたいなちょっと製品や技術を深掘りするような面白いコンテンツも用意されています。

WebGL 実装としてはとてもレベルが高いように感じますが、なぜかウィンドウの縦横比がある程度横長になるとレイアウトが崩れてしまうようなので（もしかしたら一時的な不具合かもですが）気をつけてください。

今回のサイト、コンテンツの量が比較的多いので、もしこのメーカーのファンであればいろんな情報をたっぷり堪能できると思います。

製品に込められたコンセプトやテーマ、あるいはそこに使われている成分や技術などもある程度は把握できるように細かくコンテンツが用意されています。

サイトに訪れるとまず画面に表示されるのが全体のハブとなる湖のシーン。

ここから３つほど用意されている各下層コンテンツにアクセスできます。

水面の表現がなんとも美しい色合いで、静止画ではちょっとわからないと思いますが水面はゆったりと水が流れているような感じで絶えず動いています。

特定の部屋を選択して VISIT と書かれたボタンから中に入ると、そこには部屋ごとにまったく違った内容のコンテンツが用意されています。

たとえば研究室風の CAVIAR LAB ではフラスコなどのいかにもそれっぽいオブジェクトが登場するなど、雰囲気のあるシーンづくりがされています。

今回のサイトの特徴的な部分として、CG だけでなく動画をうまく組み合わせて１つのコンテンツとしてまとめている、ということが挙げられるかもしれません。

なかには 3D シーンの手前に動画のレイヤーが現れ、グリーンバックで撮影されたとおぼしき人物がいろいろ話をするような動画が再生されたりする場面もあります。

また WebGL ではリアルタイムに処理するのが難しいようなリッチな表現はいっそ動画で再生してしまい、画面が光って白飛びした瞬間にしれっと WebGL 実装に置き換わっている、みたいな場面もあります。

このあたり、ユーザーの体験を重視した様々な割り切りがされているなと感じました。

今回のサイトはブランドイメージの向上や、熱心なファンに向けたユーザー体験の向上、さらには新規ユーザーへのプロモーションなどいろいろな意図を込めて作られたウェブサイトだと思います。

やや俯瞰して単に WebGL の事例として見てみると描画結果は非常に美しく、プリレンダリングと見間違えるほど…… とは言えないものの、あまり CG に詳しくない一般ユーザーであれば、その違いがわからない程度には見事なビジュアルを実現していると思います。

スクリーンの縦横比によっては表示が崩れるなど、なんか微妙によくわからない難点があるんですが、とは言えレベルの高い実装ではあると思います。