まるで実写映像のような微細な質感の表現が見事な BLEU DE CHANEL のウェブサイト

doxas : 2025-11-10 12:25:21

これよく話が通ったな……

今回ご紹介するのは、世界的な知名度を持つファッションブランド、シャネル（CHANEL）のウェブサイトです。

いわゆる香水の製品用サイトだと思うのですが、すごく質感を重視した WebGL 実装が静謐な雰囲気を上手に演出しています。

写実的な方向性の CG を使った表現となっており、個人的には映像ではなく WebGL でやるという決断をしたであろう関係者に敬意を評したい気持ちです。

WebGL でやるか、静止画や動画でやるか、というのはウェブ制作（とりわけ WebGL 開発）に携わっていればいつも考えさせられるテーマのひとつです。

多くの場合、質感をとにかく重視するという方向性のケースでは動画やプリレンダリングの CG が用いられることが圧倒的に多いと思います。

要は、WebGL でリアルタイムに CG を描画することのメリットがなにかしらあったとしても、それが品質や表現したい質感に及ばない、あるいは負荷が高すぎるなどの理由で採用が見送られるケースが多いわけです。

今回のサイトでは、その壁を突破すべくいろいろ工夫を凝らしたのだと勝手に想像してしまいます。

たぶん、質感を重視してスタジオで撮影した美麗な実写映像とかを用いるほうが一般的ですし、それを WebGL で代替するというのは（もちろん商材次第というところはあるにしても）結構ハードルが高いと感じます。

今回のサイトの WebGL 実装はすごくそのあたりよくできていて、インタラクティブ性があるのに実写映像のようにも見えなくはない…… というところまで品質が磨かれていると思いました。

もちろん、目の肥えているひとがじっくり観察したら CG だなってわかっちゃうと思いますが、一般的なユーザー層では実写と勘違いする人もいてもおかしくないかんじに仕上がっていると思います。

個人的には、この上のスクリーンショットにあるような「すごくカメラが寄った状態の絵」を見せているのがすごいなと思いました。

瓶の光沢、ロゴの文字部分の微妙な質感の違い、光の加減とカメラとの関係のなかで生まれる外観の違いが見事に表現されていると思います。

自分は映像的な知識がないので完全な素人の意見ですが、見せ方がすごく「映像的」な気がします。

CG 的な見せ方の正解や王道はもちろんあって、そこから逸脱しているというわけでもないのですが、専用のスタジオでしっかりとした機材を使って撮影された映像のような、現実と虚構の曖昧な中間領域を見せられている気持ちになりました。

高級なファッションブランドの関係者がゴーサインを出すだけの品質を、WebGL を使って実現したというのはすごいことだと思います。