WebGL 事例の１つの到達点！コンテンツの見せ方も品質も圧倒的な adidas CHILE20 のウェブサイト

doxas : 2020-09-25 14:14:24

このレベルには早々お目にかかれない！

今回ご紹介するのは、これまでにも多くの WebGL 事例を夜に送り出してきた adidas のウェブサイトです。

新しいシリーズのプロモーションサイトだと思うのですが、いやはや…… 本当にこれほどのクオリティの WebGL 事例はなかなかお目にかかれない、凄まじい完成度のウェブサイトになっています。

WebGL を利用したサイトにはいろいろあると思うのですが、ある側面においては、間違いなく WebGL 事例の１つの究極系だと思いました。

今回のサイトは言及できるポイントが無限にあるので……

実際にサイトに行ってみていただいて、その目で詳細を確かめていただくのが一番だと思います。

ここでは、いくつかのスクリーンショットを交えつつ、目立ったポイントだけでも紹介できたらなと思います。

まず、ページが表示されローディングが完了すると、おもむろに 3D シーンが現れます。

このシーンでは、３つの製品がシーン内に置かれているのですが、マウスカーソルがホバーすると背景にある柱のようなオブジェクトのカラーが変化するなど、のっけからインタラクティブ性もしっかりと考慮されたシーンづくりがされています。

黒、赤、白と、イメージカラー的な感じで割り振られており、色彩の変化も面白いイントロシーンとなっています。

床に対する映り込みの具合や、シーン全体を覆う広範囲のブラーなど、思いっきりビジュアルにステータスを全フリしたグラフィックスが描き出されます。

とはいえ、それほど重く感じないのは見事ですね……

もちろん、やや古い端末などではちょっと表示が重く感じられる場合もあるかもしれませんが、クオリティを考えるとかなり軽快に動作していると思います。

そして圧巻は、個々の商品をクリックすることで移動できる詳細ページのほう。

こちらはスクロールに連動してシーンが動きます。

指定されている商品を 3D シーンの中心に置き、その周囲を螺旋状にカメラが移動するようなアニメーションが、スクロールに応じて発生します。最後までスクロールすると、自然と冒頭に戻ってくるループ構造になっているのも面白いです。

ここでは一緒にメッセージの文字も回転するようになっており、インターフェースもすごく直感的でわかりやすいですね。

3D ならではのコンテンツ作りが意識して行われているようで、とにかく見やすく、楽しく、説得力のあるコンテンツになっています。

スクリーンショットを撮るのがちょっと難しかったのですが、シーン遷移の際に発生するグリッチエフェクトもめちゃくちゃかっこよくて、一見の価値ありです。

個人的に（本当に超個人的に）アディダスの製品はよく購入するのですが、こんなサイトを見せつけられたら否が応でも欲しくなっちゃいますね……

製品に使われている素材（布）の質感なども実に見事に再現されており、ライトに応じた光沢の変化なども楽しめます。

ポストエフェクトなどもかなり豪勢に使われていますが、たぶんベースになっているのは three.js で、そこにカスタムのシェーダを加えて演出を行っている形なのかなと想像します。

もしかしたら環境によるかもしれませんが、見た目の割にロード時間も比較的短い気がしますし、とにかく完成度の高い事例だと思いました。