まるでボクセルで構築されたゲームのような世界観！アプリファクトリーはるni株式会社のコーポレートサイト

doxas : 2023-06-23 13:34:01

導線が見事につなぎ合わされた構造

今回ご紹介するのは、ゲーム開発などの事業を行っているアプリファクトリーはるni株式会社のコーポレートサイトです。

いわゆるボクセルで作られたキャラクターや建物が 3D で描画される非常にポップで楽しい雰囲気のウェブサイトになっています。

3D 一辺倒という感じでもなく、普通に平面的な DOM と 3D シーンがシームレスに共存しているのが素晴らしく、とてもよく考え込まれたインターフェースとなっています。

今回のサイトでは、ゲーム開発を手掛けている企業らしく 3D シーンやゲームを連想させるさまざまなオブジェクトが登場します。

遠巻きにシーン全体を見ているだけでも楽しいですが、今回のサイトでは見ている角度やセクションに応じて、必要に応じて DOM で構築されたカード状のポップアップなどが出てきます。

トップページではスクロール操作も可能なのでユーザーが行うことができる行動がすごく柔軟に作られていますね。それでも UI が破綻せず、自然にサイトを閲覧できるようになっているのが本当にすごいです。

この上の画像を見るとわかるように、3D シーン側のオブジェクトや構造物が「画面に描画されている位置」と、DOM によって表現されるオブジェクトが「指し示す位置」がしっかりとリンクするようになっています。

こういった 3D シーンと 2D シーンがシームレスに繋がっているようなインターフェースもとてもゲーム的なかんじで本当にしっかり作られています。

またサイト内のコンテンツの一部は、下層ページではなく 3D シーンそのものがセクションと紐付けられている場合があり、ダイナミックなカメラワークや滑らかなアニメーションも含め、この導線のつなぎ方がめちゃくちゃ気持ちいいです。

カメラがグッと寄っても違和感のない高いクオリティの 3D シーン。

スクリーンショットには撮っていませんが、DOM と CSS で制御される下層ページやポップアップもデザインのテイストは統一されたトーンがあり、とても完成度が高いです。

複雑な導線によっていろいろなコンテンツが相互に接続しているような構造なのに、しなければならないことがわからなくなったり、目的のコンテンツにたどり着けなかったりといったことがほとんどありません。（もちろん体感的なものなので個人差はあるかもしれません）

3D と 2D をビュンビュンと行き来する感じは本当に素晴らしい体験なので、ぜひ実際にサイトに言って味わってみていただくことをおすすめします。

ゲームの開発会社らしさが存分に引き出されており、まるでなにか、ちいさなゲームの世界に入り込んでしまったかのような印象さえ受けるウェブサイトです。

何度も同じことを書いてしまうようで恐縮なのですが、3D らしさを十分に活かしながら 2D のインターフェースがうまく融合している感じは本当に見事です。

2D だけでウェブサイトを構築する場合でも、接続が複雑になってくるとどんどん UI/UX が煩雑になってきます。今回はそれを 2D と 3D を相互に接続する形で実現していて、高い技術力やデザイン力を感じる事例となっています。