オリジナルの 3D 表現を組み込んだインタラクティブなシーンづくりがお見事！ ui-unicorn のウェブサイト

doxas : 2020-06-17 14:40:43

サイト制作から映像制作まで手掛けるプロフェッショナル

今回ご紹介するのは、Bolton（イギリス）で活動している ui-unicorn のウェブサイトです。

実は、当サイトでは過去にも彼らのサイトを紹介したことがあるのですが、新しくリニューアルされ、外見もガラリと変わっています。

今回のリニューアルでは、日本の侍（サムライ）や忍者をイメージさせるような独自の 3D モデルが登場し、迫力のある 3D シーンを見ることができます。

今回のサイトでは、3D モデルを大きく配置した背景がまずあり、その手前にコンテンツが配置されるような構造になっています。

とは言え、背景部分に表示される 3D モデルよりもさらに後ろの領域に文字が描かれる場合もあり、かなり奥行きを活用した構成になっていますね。

ページのロードが終わると表示される 3D シーンは、まるで日本の殺陣（たて）のワンシーンのような臨場感です。

ちょっとシーン全体が暗いのでわかりにくいかもしれませんが、刀を持ったキャラクターたちが、躍動感のある姿勢でシーンに配置されています。

この 3D モデル自体がアニメーションするわけではないのですが、それでもすごく迫力のあるビジュアルになっています。

ページ上でスクロール操作などを行うと、カメラアングルが変化するのと同時に、コンテンツやキービジュアルが次々に現れます。

特に、以下の画像に示した大きなフォントでキービジュアルが描かれる場面では、それぞれの文字にうっすらと影が落ちており、やや立体的な配置になっていてかっこいいですね。

このキービジュアルのシーン、実はマウスカーソルを文字の上にホバーさせてやると、バウンドするようにアニメーションします。

静止画ではその動きを伝えるのが難しいと思ったのでスクリーンショットこそ撮りませんでしたが、すごく大きくダイナミックにアニメーションしますので、ぜひ実際にサイトに行ってご覧になってみていただきたいところです。

その他、各事例を紹介するページなども黒をベースにしたシンプルなデザインで、とても丁寧に作られています。

海外のウェブ制作会社やデザインスタジオには、3D モデルのオーダーメイドも含めて、WebGL 製のウェブサイト制作をゼロから一手に引き受けるチームが結構いますよね。

おそらく ui-unicorn も、そういったリソースの制作から手掛けることができる本格派のクリエイティブ集団なのだろうと思います。

今回のサイトでは 3D シーンとコンテンツ部分が見事に連動したインタラクティブな演出を楽しむことができます。