シューズメーカーのウェブサイトにあるランニングシューズをテーマにした WebGL コンテンツ！
スポーティーな演出がなんともかっこよい
今回ご紹介するのは、スポーツ用品メーカーのウェブサイトで、このメーカーは主にランニングシューズやウェアなどを販売しているメーカーみたいです。
ここに置かれている WebGL のデモは、いかにもスポーツ用品らしいというか、とてもスリリングな体験のできるものになっていて、製品の雰囲気にピッタリの、素敵なコンテンツとなっています。
インタラクティブ性の高い、WebGL らしい作品だなと感じる一品です。
マウスボタンをホールドすると別世界に！
今回のコンテンツは、彼らの主力製品であるシューズを立体的に好きな角度から見ることができるビューアとしての役割と、驚きの体験ができるデモとしての役割とを、両方併せ持った作品です。
まずページのロードが終わると、そこにはシューズの 3D モデルが現れます。
マウスカーソルの位置に応じて角度が自動的に変化しますが、ある程度はカーソルの位置を調整しながら、自由にそのデザインを堪能することができます。
シューズを構成するパーツのうちのいくつかは、マウスカーソルをホバーしてやるとどのような素材でできているのかなどが文章として画面の下に表示され、製品についてより深く知ることができるようになっています。
上の画像は、ちょうどシューズの底の部分にマウスカーソルが重なっているのですが、まるでマダラ模様のようになっているのがわかりますね。
この画像のように、カーソルがホバーしている箇所は、ノイズを使ったマダラ模様になるようなアニメーションが起こるようになっていて、対象となる箇所をより強調させるような外見の変化が起こるようになっています。
とてもわかりやすいですね。
ここまでは、単にビューアとしての効果を狙った内容だと思うのですが、今回のコンテンツのすごいところは、さらにマウスボタンを押下して、そのままホールドした状態にすることで見ることができます。
まるでエネルギーが充填されるかのような効果音が響き渡ったかと思うと、一気にシーンが変化してジェットコースターのようなレンダリング結果が現れます。
これはよーく見てみるとわかるかと思うのですが、シューズの底面にある形状と、まったく同じようなデザインのコースになっているんですよね。
シューズのデザインをそのまま流用したこのジェットコースターのような演出は、スピード感溢れる、非常に迫力のある内容になっています。
結構派手な効果音も鳴るので、思わず一瞬ホールドした指を離してしまいそうになるのですが、指を離すとシーンが元に戻るようになっています。
また、元のシーンに戻ると、今度は色違いのモデルが表示され、こちらもやはり同様のカーソルホバーによるインタラクションが仕込まれています。
ただし、マウスホールドから移行できるデモバージョンのシーンはまったく違う内容になっていて、赤いモデルのほうから遷移するシーンの方は、まるでカラフルな雲の中に入ってしまったかのような内容のもの。
こちらも、バウンドするような感じでカメラが動いて、様々にめまぐるしく色彩が変化する様子がとてもダイナミックで面白いです。
スポーツ用品メーカーらしい、非常にスピーディーで迫力のあるデモが特徴的な今回のウェブサイト。
個人的には、やっぱり初めてマウスボタンをホールドして、ジェットコースター風のデモがスタートしたときの衝撃が大きかったです。そして、そのコースデザインがランニングシューズのデザインを踏襲しているというのがわかったときの、妙な納得感も、とても楽しい体験でした。
WebGL のコンテンツのいいところは、やはりこういった一風変わったインタラクションを仕込めるところにあると思います。
なかなか二次元の世界だけでは表現が難しいような、非常に迫力のある演出が組める WebGL は、いろいろ工夫する余地も多く、またユーザーに与える心理的影響も大きいなとあらためて感じました。
とてもかっこよいデモになっています。
ぜひチェックしてみてください。
