小粋な演出が光るデニム製品を中心に展開するファッションブランド G-Star RAW のウェブサイト
canvas とその他の DOM とのシームレスな連携が見事
今回ご紹介するのは、デニム製品を主軸に商品展開を行っているファッションブランド、G-Star RAW のウェブサイトです。
私はファッションとかブランドにほんとに疎くて……ちょっとこのブランドのイメージとかはよくわからないのですが、渋谷にも専門店があったりするみたいなので、結構有名なブランドなのかな?
今回のサイトでは、ジースターロウの主力であるデニムの新製品が紹介されているのですが、その製品紹介ページの大部分が WebGL によるレンダリングによってビジュアルを作っています。
WebGL 以外の部分の、普通の DOM との連携が本当に見事です。
ドラッグ操作などを行うと滑らかに動く
今回のサイトは、あまり 3D 表現っぽさはありません。二次元的な処理が中心なのですが、使われているのは three.js みたいですね。
デニムのブランドだけあって、今回の新製品のシリーズも外見的な特徴がかなり多彩なデニム製品になっています。
ひとつひとつの製品にコンセプトが付けられていて、そのコンセプトにそったキーワードが、製品のうえにマウスカーソルをホバーさせることで表示されるようになっています。
カーソルもデフォルトのものをそのまま利用するのではなく、網目っぽい見た目の独自のものに変化するようになっており、ファッションブランドらしい見た目にこだわった仕上がりになっていると思います。
まるで無造作に床に投げ捨てられたかのような感じで、たくさんのデニムが並べられているような外見をしていますが……
この状態で画面内をドラッグ操作すると、ヌルっと滑るような感じでシーン全体が動きます。
ちょっと面白いのは、製品が並べられている範囲の外側の部分の演出でしょうか。
上の画像を見ると、画面の上のほうからなにか黒っぽいエリアがはみ出してきているように見えるのがわかるでしょうか。
この画像にあるように、製品の並べられているエリアの外側にむりやり移動するような感じで操作すると、画面の端に到達していることがわかりやすく表示されます。これはよくモバイル端末のユーザーインターフェースに見られるような表現ですよね。
WebGL でこういった直感的な表現を行っているものって、実は結構珍しいんじゃないでしょうか。
動きも滑らかで面白いので、ぜひ実物をご覧になってみていただきたいところです。
今回のサイトは背景を全面的に canvas にしてしまい、文字や画像といった、普通に DOM として配置されるパーツとうまく連携しています。
シームレスに WebGL の描画と DOM の遷移アニメーションを違和感なく連動させているのが本当に見事で、かなり工夫された作りになっているのが詳細に見ていくと感じられますね。
ファッションブランド系のサイトは、やはりビジュアルにこだわる場合が多いと思いますので WebGL とは親和性が高いと思うのですが、ドラッグ可能なエリアを超過した場合の演出なども含め、様々な点で優れたデザインになっていると思います。
WebGL の事例としても、非常に面白い内容だと思います。
ぜひチェックしてみてください。