サウンド効果も有効にして楽しみたい！ すてきな世界観を描き出す SOLK のウェブサイト
イントロに演出のほぼすべてが集約
今回ご紹介するのは、SOLK というプロジェクトのウェブサイトです。
いわゆるスニーカーに分類される靴の種類だと思うのですが、ハンドメイドな感じのこだわりのスニーカーという感じがします。
サイト上の演出は主にイントロに集約されており、WebGL を用いた印象的な演出を見ることができます。
リンク：
糸を紡ぐようなアニメーション
今回のサイトのイントロ演出は、WebGL を用いたかなり凝った内容になっています。
おそらくこのプロダクトの世界観をビジュアルによって表現したもので、すごく手の込んだ演出になっていますね。
サイト上の演出として音の効果も非常に重要なので、ぜひ音を有効にして閲覧することをおすすめします。（逆スクロールしたときに、おもしろい効果が現れます）
三次元空間の中に糸が伸びていくような演出とともに、背景も含めて立体的にシーンが変化していきます。
実はこのシーン、静止画ではほとんどわからないのですが流体エフェクトも同時に盛り込まれており、カーソルを動かすとまるで水中で渦を巻く風景を見ているような不思議な質感が実装されています。
ナレーションと効果音、そしてビジュアルが与えてくれる雰囲気がどれも絶妙ですごくいい雰囲気です。
最終的にスクロールしながらシーンを進んでいくと、糸の重なりがシューズのようなシルエットになり、そこから先は製品の詳細を説明するテキストと画像を用いたコンテンツに切り替わります。
WebGL の演出は完全にイントロの演出用という感じで、いったんイントロのセクションが終わると他には WebGL を使っている部分はほとんどありません。
サイトの構造は最後まで閲覧すると最初にまたつながってループするような感じになっており、回遊性のある構造も面白いですね。
WebGL を用いて糸などを表現するケースってこれまでにもいくつか事例があって、結構こういう表現やりたくなることって多いのかもしれないなと個人的には感じます。
とはいえ、今回はそこにかなり流れの収束がゆっくりとした流体表現が組み合わされていて、不思議で個性的な世界観をしっかりと構築していると思います。
イントロだけに演出を振り切った構成も、しっかりとした割り切りと意図があって見事だと思います。
ぜひチェックしてみてください。
