スラッシュのようなオブジェクトを中心にした見応えのある 3D シーンが楽しい /nk.studio のウェブサイト
ストーリー性を感じる WebGL 実装
今回ご紹介するのは /nk.studio のウェブサイトです。
これは完全に想像ですが、発音としては NK STUDIO なのだろうと思いますが、スタジオ名の先頭にはスラッシュが置かれており、このスラッシュにちなんだオブジェクトがサイト上でも重要な役割を果たしています。
ネオンカラーのビジュアルもすごくかっこよくて、WebGL 実装としてのレベルも高いです。
リンク：
We empower brands to inspire people — /nk.studio ®
電脳空間のような表現も素敵
今回のサイトでは、インタラクティブに操作できる 3D シーンが絶えず背景に配置されているような構造が取られています。
一部、手前にコンテンツが重なって背景が隠れる部分もありますが、演出の中心には絶えず WebGL 製の 3D シーンが置かれている印象です。
また、コンテンツの内容に応じて 3D シーンが変化する様子も見事で、どこかストーリー性のようなものを感じます。
トップページの背景部分に描画されるシーンでは、スラッシュのような形をしたオブジェクトと、その周辺を漂っている岩のようなオブジェクトの間に雷が走るような演出があります。
カーソルを岩の部分にホバーさせるようにすると発生するみたいなのですが、この演出はあまりほかでは見たことがなくてすごくおもしろいですね。
サイト自体はスクロール操作を続けていくことで閲覧が可能で、セクションが切り替わる際には 3D シーンにも変化が起こります。
大きく空間が歪むような演出が発生したあと、まるで電脳空間へ入り込むような感じで場面が転換する箇所などすごく迫力がありますね。
その他、About ページではまた少し違ったデザインの 3D シーンが用いられていたり、かなりボリュームもあります。
3D を多用しつつもコンテンツが読みにくい・見にくいということはなくて、そのあたりもすごく上手に組み立てられているなと思いました。
明るいグリーンのネオンカラーがなんとも印象的で、3D 空間全体の作り込みだけでなく、インタラクティブ性にも工夫が凝らされたレベルの高い WebGL コンテンツだと思います。
各事例を紹介する下層ページなどでは、演出という意味での WebGL は用いられておらず、そのあたりの押し引きというか、目的に応じて割り切って作り込まれている感じもすごいなと個人的には感じました。
この世界観が好きな人には、かなりグッと来るウェブサイトではないでしょうか。
ぜひチェックしてみてください。
