WebGL 実装の常連 adidas UK！今回は再利用できる素材を利用した新しいシューズの特設ページ

doxas : 2019-04-24 14:34:26

今回も相変わらずの安定品質

今回ご紹介するのは、いつも WebGL で実装された販促サイトをローンチしてくることで（私的には）おなじみの adidas UK です。

今回のサイトで紹介されているのは Futurecraft という名前の新製品。

こちらの製品は TPU という素材を用いることで再利用性に優れた特性を持っているらしく、リサイクルができるということを大々的に紹介するような内容となっています。

今回のサイトでは、新製品である Futurecraft の特徴がいくつかのフェーズに分けて紹介されています。

画面の左側に変則スクロールバーみたいなインターフェースが表示されているのですが、ページ数と、ページ内の現在のスクロール量が一度に視認できる面白い表現だなと思いました。

WebGL 実装以外の部分も、かなりこだわって作られたサイトだなあという感じがします。

描画される 3D モデルは、基本的にシューズの形状が１種類だけのシンプルなものです。

上の画像を見るとわかるかなと思うのですが、TPU という素材を使っていることが製品自体の大きなポイントになっているためか、見た目はプラスチックのような無機質な印象に描かれています。

シューズの上にアイコンが表示されたりすることもあって、実際にはシューズ以外のオブジェクトも 3D 的に処理されているのですが、あまりにも自然な感じでオブジェクトや背景が描かれるので、閲覧している側にはまったく違和感を感じさせない作りになっているように思います。

ご覧の通り、パーティクルを使った演出もなかなか派手でかっこいいですよね。

やや大きめの印象的なフォントをサイト全体で利用していることや、アクセントカラーが目を引く赤になっていることもあって、サイト全体の色のコントラストがそれほど高くないにもかかわらずのっぺりした印象は感じさせません。

実際にはパーティクルとかもグリグリ動いているので、どちらかというと派手なくらいで本当に見ていて楽しいサイトになっていますね。

今現在、世界中でプラスチックを規制する動きや、企業がその利用を自粛するような発表を行っていたりして、環境問題としてプラスチックにフォーカスが当たることが多くなっている気がします。

恐らく、アディダスとしてもそういった環境を考慮した取り組みのひとつとして、今回の製品のような再利用しやすい、環境に優しい商品の開発を行っているのだと思います。

WebGL の実装としては「王道の技術をしっかり丁寧に実装した」という印象ですが、ユーザーインタラクションをよく考えた、完成度の高い実装になっていると思います。