柔らかい布のような質感が生き生きとした雰囲気を演出する Shopify Supply のウェブサイト
横方向にスクロール
今回ご紹介するのは、Shopify のスペシャルサイト、Shopify Supply というウェブサイトです。
こちらは横方向にスクロールするという構造になっており、それを活かしたレイアウトや演出が多く見られます。
WebGL はそこにインタラクティブな演出の要素として上手に盛り込まれています。
リンク：
3D 表現と 2D 表現
今回のサイトでは、WebGL は 3D と 2D と両方の文脈で用いられているように思えます。
3D 的な表現のほうは非常にわかりやすく、洋服などのアパレルアイテムが 3D モデルとして画面上に配置されています。
スクロールによってコンテンツが横方向にどんどんスライドしながら画面内に現れてくるのですが、このスクロール操作に対して 3D モデルが反応するようになっています。
この上のスクリーンショットを見て、なんかトレーナーが変な形に捻じ曲がっているように感じるかもしれません。
これ、スクロール操作によってグイッと 3D モデルがしなったところをスクショしたものなんですよね。静止画で見るとちょっと違和感を抱くかもしれませんが、実際に動いている様子はとても滑らかです。
布というよりは、なにかスライムとか粘性の高いゴムやシリコンみたいな質感なのですが、これはこれで演出としては全然アリだなあという感じがします。
登場するすべての 3D モデルがしなって動くということではなく、そこは素材ごとにきちんと違いが設けられています。
たとえばこの上の画像にあるような、比較的しっかりした生地のボストンバッグであれば、変に柔らかいように見せる演出は入っていません。
スクロールに応じてくるくると回転するだけの演出にとどまっており、そのあたりも素材の質感表現などに意図が感じられる作りとなっています。
2D 的な演出、つまり写真に対するエフェクトも入っていたりするので本当に細かいところまで丁寧に作られている感じがあります。
横方向にスクロールするウェブサイト自体は珍しくないと思うのですが、こういう高い品質に仕上がっているケースは結構レアかもしれません。
ウェブという文脈においては横スクロールがそもそもトリッキーな構造なので、中途半端に採用してしまうと破綻してしまうことが多いよな～と個人的に感じているだけかもしれないですが……
柔らかい布の表現も、あえて横スクロールにしているからこその相乗効果があると思います。
ぜひチェックしてみてください。
