レディースファッションブランド Robert Clergerie のいろんな意味でセレブな WebGL デモサイト
リッチなビジュアルに主眼を置いた作り
今回ご紹介するのは、ファッションの本場、フランス・パリを拠点にしているファッションブランド、Robert Clergerie のウェブサイトです。
ロバート・クレジュリー？ と読むのかなと思うのですが、ファンションブランドにはよくあるデザイナーさん本人の名前がそのままブランド名になっているパターンなのかなと思います。
私自身はファッションブランドとかほんとに全然わからんのですが、女性用のブーツなどを主に扱うブランドのようです。
ウェブサイトのほうも、まあなんというか……セレブというか、リッチというか、大きめのリソースを大胆に利用した、一種独特な演出がなされています。
もし、このブランドについて検索してこのページにたどり着いた方は、ブランドについて全く説明してない（そういう趣旨の記事ではない）のでページをそっと閉じましょう。
まずはダウンロードするところから全てが始まる
これまでに当サイトで紹介してきた事例には、本当に様々なものがあります。
なかには、高級ブランドに関するサイトももちろんあるのですが、それら「ブランドの持つ高級感を演出するため」のウェブサイトによくあるのが ブランドイメージを演出するためなら重いとか遅いとか関係ない という実装スタンス。
今回のサイトも、まさにそれです。
はい。
最初のイントロが表示されるまで、軽く2 ～ 3 分は待たされると思ったほうがいいです。というのは、動画を大量に使っているので、その動画が落ちてくるまでに結構な時間が掛かるんですね。
いやはや。
上の画像は、ページのイントロが表示された直後の画面の様子。
こちらは、動画がベースではなくリアルタイムにレンダリングされている CG のように見えます……
見えますが！
これはレンダリング結果ではなく単なる GIF アニメーションです。
しかしここで落胆はせずに、画面の下段あたりに置かれているボタンに書かれているとおり、スペースキーを押しっぱなしにしてホールドします。すると、シーンがどんどんと遷移していくようになります。
次に表示されるシーンは、一見するとリアリティのある WebGL のレンダリング結果のようにも見えなくはないですが……
が！
これも動画です。（なんなの！
ただですね。この動画部分は、単純に動画を表示しているというよりは、動画をテクスチャにして WebGL で板ポリをレンダリングしているものだと推測します。
その根拠は、途中でスペースバーを離してみるとわかります。
画面全体に、まるでズームブラーのような感じのエフェクトが入るんですね。
動画を用いることでブランドの世界観を正確に表現しつつ、それをインタラクティブに変化させるために WebGL（今回の場合は Pixi.js）を使っている感じですね。
また、最終的に表示される製品カテゴリのページでも、最近よく見る水面っぽいゆらゆらエフェクトが使われている場所がありますね。
もともと高級路線のブーツやシューズ、サンダルなどを扱っているブランドだけあり、製品紹介のページも非常に高級感のある仕上がりになっています。
WebGL を利用している場所は一部だけで、あとは CSS を使った自然なアニメーション処理が施されています。
全体として仕事はとても丁寧な感じで、ブランドのイメージを損なわないできばえになっていると思いました。
冒頭でも書いたのですが、今回のサイトの一番の特徴は……
レンダリング結果とかよりもむしろそのダウンロードの待ち時間であるかのように私には思えてしまいました。
以前にポルシェのサイトとかを紹介したときもそうだったんですが、ブランドイメージが非常に大切にされる業界のウェブサイトって、見る人のことをあんまり考えてないというか……
興味のあるヤツだったら表示されるまで気長に待つだろとか、自社ブランドのユーザー（要は富裕層）だったらいい PC 使ってるだろうしめっちゃ重くても大丈夫だろみたいな、そういう感じの雰囲気を放っているサイトがたまにあるんですよね…… もちろんそんなことはどこにも書いてないですが……
ただ、今回のサイトが駄目なサイトなのか、というのとはまた別問題です。動画を単に動画として埋め込むのではなく、WebGL でインタラクティブに操作できるようにしながら利用するというのは発想として非常に素晴らしいと思います。
なにより高級感のあるサイト全体の印象はとても手が混んでいて丁寧です。純粋にフロントエンドの実装例としては、参考になるような部分がたくさんあると思います。
ちょっと個人的な感想としてネガティブな印象のことを書いてしまったのですが、あくまでもそれは私個人が感じたことですので、けして当該ブランドを揶揄する意図はありません。
いろんな意味で興味深いサイトだと思いますので、気になる方はぜひチェックしてみてください。
