トンネル風の事例紹介が独特で面白い! パリを拠点に活動する Uncanny Valley Studio のウェブサイト
シンプルなデザインと面白い見せ方
今回ご紹介するのはフランス・パリで活動しているデジタルスタジオのウェブサイトです。
Uncanny Valley Studio の頭文字から、UVS という感じで自分たちのことを称しているようで、ウェブサイト上にも、この三文字の略称が大きく使われています。
サイト全体ではないのですが、かなり大胆に WebGL を使った作りになっており、スクロールに連動してトンネルの中を進んでいくかのように事例が次々と紹介される様子が非常に面白いです。
スクロールに連動して事例集が飛び出してくる
今回のサイトでは、彼らの手掛けた事例を紹介する work のリンクも置かれていますが、それとは別に WebGL を用いた事例紹介が、ちょっと独特な外見で実現されています。
ページのロードが完了すると、かなり大胆な UVS という文字の一部が見える状態になります。
そこからスクロール操作して下に向かって移動していくと、UVS の文字がスクロールして画面上へと消えていくあたりから、WebGL を使った事例紹介の演出がスタートします。
まるでトンネルの奥のほうから飛び出してくるかのような感じで、彼らの手掛けた事例に関する写真やタイトルが現れます。
全体的に背景の白い色が強調されているのでちょっとキャプチャ画像だとわかりにくいかもしれないですが、筒状になったオブジェクトの内側に、画像や文字列がピタッと張り付いたような感じの動きになっています。
実際にアニメーションさせてみるとわかるのですが、要するにトンネルの中にテクスチャが貼られているような、そんな感じの形状ですね。
ウェブブラウザの世界では普通にスクロール操作すると上下の動きになるわけですが、このサイトでは、それが奥から手前、あるいはその逆といったように、前後の動きになっているわけですね。
これはシンプルな方法ですが、上下を前後に変える非常に効果的に見せ方なんじゃないかなと思いました。
トンネルの内側にテクスチャが貼られているような感じ。
今回のサイトはいわゆるポートフォリオ的な位置づけのサイトだと思うのですが、WebGL 以外の部分も適切・丁寧に実装されており、デザインも含めて非常にきれいにまとまっています。
ウェブのコンテンツだけでなく様々な事例に関わっているスタジオみたいなので、そのあたりは実際にサイトに行って確認してみてもらえたらと思います。
途中でも書きましたが、今回のサイトは WebGL が 3D で奥行きまで表現できるということを非常に上手に利用していると思います。ウェブの世界に WebGL という新しい表現手段が誕生して久しいですが、まだまだウェブで 3D 表現をしっかり活用できているサイトに出会うのは稀です。
その点、今回のサイトはかなりシンプルな構図ながら、そのあたりのひとつの答えを見せてくれているようにも思いますね。
上下だけでなく、奥行きという広い空間をイメージさせるコンテンツづくりに、参考になるのではないでしょうか。
ぜひチェックしてみてください。