3D から 2D まで多彩で豊富な WebGL のユースケースが詰まった Numéro.8 のウェブサイト
表現の見本市のような WebGL 実装たち
今回ご紹介するのは、株式会社 Numéro.8(ヌメロ・エイト)のウェブサイトです。
大きなスコープで「音」をテーマにした事業を多数展開している企業で、有名なタイトルにも多数関わっているので、もしかしたら社名をご存知の方もいらっしゃるかもしれません。
今回のサイトでは WebGL で 3D から 2D まで、多種多様な表現が盛り込まれています。
リンク:
Numéro.8 - ヌメロエイト | 「音」に関連する様々な事業を展開しています。
トップページはまるで楽譜のような
今回のサイトのトップページには、まず 3D のビューがバーンと出てきます。
パッと見た印象は 3D のオブジェクトがまず視界に入ってくると思うのですが、背景の部分にも演出が施されていて、細かなラインが何十にも重なる様子はどこか楽譜を想像させてくれます。
音を大きなテーマとして扱っている組織らしい、見事なキービジュアルだなと思います。
マウスカーソルを動かしてやるとパーティクルが流れてくるようなインタラクティブな演出も盛り込まれています。
色が淡いのでちょっとスクリーンショットでは見えにくいかもしれないですが、パーティクルが背景を流れています。
トップページこそ 3D 的な表現になっていましたが、今回のサイトの場合は WebGL は 2D 的な表現にも用いられています。
わかりやすいのは Works のページなどに見られるジャケットのイラストや写真の画像が、スクロールに連動して動く部分でしょうか。ここではスクロールの向きに応じて、画像が慣性でたわんだような感じになります。
さらに、各画像の部分をクリックして下層ページに行く際には、画像が布のように引き伸ばされる演出が発生したりもします。
ここまでの内容だけでも結構いろんな形で WebGL を活用しているな~ という感じなのですが、今回のサイトはまだこれでは終わりません。
Members のページには、ホバーエフェクトとしての WebGL 実装もあります。
こちらはカーソルを画像に乗せた瞬間に、別の画像に切り替わるようなエフェクトなのですが、まるでクリスタルのようなディストーションが掛かりつつ、モノクロからカラーに一気に見た目が変化する面白い演出となっています。
WebGL というと 3D 的な表現をするためのツールとして捉えられる場合も多いですが、2D 的な表現にも様々な活用法があります。
今回のサイトでは、そういった WebGL の万能性と言いますか、様々な表現ができるんだなということがひしひしと伝わってくるような、そういう使われ方をしていますよね。
1つ1つの演出自体はシンプルなものが多いと思うのですが、こうやって組み合わさって使われているのは実は結構珍しいかもしれないですね。
ぜひチェックしてみてください。