有機質と無機質のハイブリッドな質感が面白い Cobo のウェブサイトに見るメタボール表現

doxas : 2022-06-16 12:54:57

シンプルだけどビジュアルのインパクトが強い

今回ご紹介するのは、スニーカーなどのフットウェアの、いわゆる靴底、ソールの部分を製造している企業のウェブサイトです。

人々の暮らしに欠かせないアイテムでありながら、実はそのデザインの多彩さや造形の複雑さは、たぶんみなさんも想像できるのではないでしょうか。

今回のサイトでは WebGL を利用してメタボール風の表現がされているのですが、なんとも言えない独特な質感に仕上がっていてすごく印象的です。

今回のサイトで WebGL が使われている部分は、サイトのトップページに置かれているキービジュアルの部分だけです。

そこには大きく球体状のオブジェクトが描かれるのですが……

ゆっくりと波打つように動いているその姿は存在感も含めて思わずジッと眺めたくなるような迫力があります。

スクリーンショットではちょっとわかりにくいと思うのですが、メタボールの上には１～４までの数字が書かれたアイコンが重なって描画されています。

それぞれのアイコンは下層ページへアクセスするためのボタンになっていて、それらをクリックすることで画面左側にコンテンツが現れ、またメタボールの部分も大きく波打つように外見が少し変化します。

どこか SSS（Subsurface scattering）を感じさせるような質感なんですが、うーん、たぶん SSS ではなくてどちらかというとリムライトに近い感じのシェーディングなんじゃないかなと思いますが、いずれにせよ雰囲気がいいですよね。

シューズのソール部分って、正直私には予備知識がまったくないので詳しく言及することが難しいのですが……

今回のサイト内のコンテンツをつぶさに見ていくと、そこに込められた情熱や、企業努力、あるいは信念みたいなものまで伝わってくるような感じがします。

原料の再利用を始めとする環境問題にも取り組んでいることが示されていますし、かっこいいデザインに目が行きがちですが全体的にすごくメッセージ性の強いテキストがたくさん用意されているなと個人的には感じました。

WebGL とは無関係ですが、画像をうまく利用したコンテンツの装飾も見事です。

キービジュアルの部分にあるメタボール、無機質なプラスチックのようでもあり、一方でどこか有機的な感じもする不思議な透明感みたいなものが同時にあり、なんとも言えない質感ですごくよくできているなと感じました。

サイト内には横方向にスワイプするような操作を行う UI がいくつか出てくるのですが、スワイプ時のオブジェクトの動きなんかもかなりこだわりが感じられる動きになっていて、ただインタラクティブに反応を返してくるだけではない、それ以上の体験を味わうことができるサイトとなっています。