ありとあらゆる演出がリッチでエモーショナル！ Unseen Studio のウェブサイトがすごい
とにかくハイエンドな演出がいっぱい
今回ご紹介するのは、Unseen Studio というクリエイティブスタジオのウェブサイトです。
とにかくリッチな演出が多数用いられていて、なんというか WebGL 演出の全部乗せ…… といっても過言ではないほどビジュアル重視に作り込まれています。
もちろん、インタラクティブ性や操作性、視認のしやすさやナビゲーションなどにも抜かりがなく、とても完成度の高い実装となっています。
リンク：
Unseen Studio® – Brand, Digital & Motion
隅から隅までとにかく丁寧
今回のサイトは基本的に視覚的な情報の多くが WebGL を用いて描かれます。
もちろん DOM や CSS による演出が無いわけではないのですが、WebGL 成分がかなり多いですね。
ここまで WebGL で全部を実装しているケースはかなり珍しい気がします。
たとえばこの上の画像は、トップページのタイトル部分の上でマウスカーソルをぐるぐると動かしてみたところをキャプチャしたものですが、ロゴの部分がまるで柔らかい布のようにぐにゃっと曲がっているのがわかるでしょうか。
普通ならテキストノードで DOM でシンプルに表現するようなところであっても、演出的な素養が含まれる場合はそれが WebGL でバッチリ作られています。
また個々の演出を細かく観察しても、イージングの掛かり方や応答性など、かなりしっかり調整が加えられているのがわかります。
触っていて違和感や不快感を感じるところがありません。
また、彼らの手掛けてきた事例を紹介する下層ページでも、一見普通に画像が置いてあるのかと思うような部分が WebGL で実装されています。
よーく観察していないとわからないかもしれませんが、画像が画面の上下の端に掛かるときだけエフェクトが掛かっていたりするので、じっくり観察してみるといろいろな学びがあると思います。
さらにはギャラリーのような専用ページが用意されていたり、とにかくコンテンツがたくさんある上に１つの抜かりもなく丁寧に WebGL で実装されており、本当に脱帽です……
演出特化型のウェブサイトってたまにありますが、ここまであらゆるものが装飾・演出されているケースは珍しいかもしれません。
サイト内に掲載されている事例を見ても、当サイトで紹介したことがある WebGL を使った事例が多くあり、すごく実力の高い人達なんだろうなと感じます。
ここでは紹介できませんでしたが、音を使った演出や画面遷移も本当に見事でとにかく最初から最後まで開いた口が塞がらない感じのすごい実装だと思います。
ぜひチェックしてみてください。
