質感高いオシャレな空間表現やおもしろいギミックが満載！ Jack Daniel’s x Shoe Surgeon コラボサイト

doxas : 2021-05-19 13:33:01

雰囲気満点で思わずリラックス……

今回ご紹介するのは、日本でもおなじみのウィスキーの銘柄、ジャックダニエルズと、スニーカーをオリジナルにカスタムできるサービスを提供する The Shoe Surgeon のコラボサイトです。

The Shoe Surgeon はロサンゼルスに店舗があるシューズのカスタム専用の工房らしいですね…… 私は知らなかったのですが、世界的にも有名なショップらしいです。ジャックダニエルズとのコラボサイトをぶち上げるくらいですから、実際に人気もあるんだと思います。

今回のサイトでは、そんな The Shoe Surgeon やジャックダニエルズの魅力がいろいろな形で垣間見えるようになっており、すごく手の込んだレベルの高い実装となっています。

今回のサイト上では、The Shoe Surgeon の工房のようなスペースとバーのようなスペース、そしてバスケットコートのようなスペースなど、3D 空間がかなり豪勢に作り込まれています。

サイトの冒頭で表示されるのはバーのようなスペースで、ここでは壁にプロジェクターで映像を投影しているような場面が CG で描かれます。

単なるモーダルウィンドウのような見せ方ではなく、壁に映像が投影されるような見せ方を採用している時点ですごく凝った演出ですよね。

3D シーンはマウスなどを使って自由に視線を動かすことができることに加え、スクロール操作を行うことである程度カメラがオートパイロットで移動していってくれます。

基本的には順番にシーン内を巡っていくようなカメラワークですが、要所要所に置かれている光るアイコンのようなオブジェクトをクリックすることで、より詳細なコンテンツにアクセスすることができます。

詳細コンテンツも単なる文章のものだけでなく、動画を見ることができたり、デザインボードを見ることができたりと、すごく手の込んだ作りになっています。

WebGL のコンテンツとしては、かなりガッツリとした 3D シーンで構成されていて見栄えもしますね。

使われている 3D モデルデータがしっかりしているということはもちろんですが……

空間の演出としてあらかじめベイクした陰影を上手に使っていると思います。シーン内に動く光源が無いので正確なことは言えないのですが、たぶん、リアルタイムなシャドウよりはベイクによる陰影付けで質感向上を図ってるんじゃないかなと思います。

一部、窓から差し込む光に対する影とかはリアルタイムなのかな～という感じもしますが、光源もオブジェクトも動かない 3D シーンなので、全部ベイクかライトマップを使ったものなのかもしれません。

ブルームの効果も強めに掛かっており雰囲気が良い。

今回のサイトのような 3D シーンがじっくり作り込まれてるコンテンツは、いわゆる一般的なウェブサイトの制作に比べるとリソースの準備などに工数や費用が掛かることが多いです。

いわゆる普通のウェブデザイナーやウェブのフロントエンドの開発者が、ここまでのレベルの 3D データを用意するのは（普通は）不可能であり、専門家のプロジェクトへの参加が必要になるからですね。

さらに、3D シーンの質感の作り込みや、ユーザーインタラクションのデザインなど、とにかく本格派な 3D コンテンツをウェブ上で実装するのには時間も人手もお金も掛かります。そういう意味で、こういう実装ってそうそうお目にかかれるものじゃないので、じっくり楽しみたいところです。