異次元の完成度を誇るミニゲーム風インターフェース! 遊び心満点の bruno simon さんのポートフォリオサイト
バギーを操作して縦横無尽に駆け抜けろ
今回ご紹介するのは、bruno simon さんのポートフォリオサイトです。
アワード系サイトで話題になった WebGL 実装のサイトをいくつも手掛けている Immersive Garden に所属されています。
今回のサイトは個人のポートフォリオだと思いますが、ちょっとした……というかむしろかなりしっかりとした、物理演算などを利用したゲーム風のテイストに仕上がっており、すごく楽しいウェブサイトとなっています。
クオリティが凄すぎる……
リンク:
ボーリングやジャンプ台などギミックがたくさん
今回のサイトは、いわゆる普通のウェブサイトとはかなりインターフェースが異なります。
いわゆるテキストや画像が配置された SPA などとも違い、サイトに訪れたユーザーは小さなラジコンカーのバギーを操作しながら、3D 空間上に配置されたオブジェクトを通してコンテンツを閲覧するスタイルです。
操作は上下左右のアローキー、または WASD キーなどで行うことができます。
サイトが開始された直後から、この小さなバギーを操作する前提でスタートするので最初からこのサイトは一味違うぞという雰囲気を感じると思います。
この 3D のワールド上には、bruno simon さんの趣味趣向といいますか、いくつかの象徴的なオブジェクトが配置されていたり、あるいは制作実績、ちょっとしたミニゲーム風のアトラクションなど、様々なギミックが多数配置されています。
たぶん、ゲームが好きな方なのかな……
ゲームに興じる姿を模した彫像風のオブジェクトなどが置かれています。
ボーリングのボールは、バギーで勢いよく押し込むように動かしてやると、そのままピンに向かって転がっていきます。
もちろん、ピンが倒れたりする様子も、物理演算によって見事に再現されるようになっています。
サイト内に置かれているほぼすべてのオブジェクトは物理演算によって正しく処理されるようになっているので、ブロック塀を破壊してみたり、ジャンプ台を使ってバギーを空高くジャンプさせたり……
とにかくいろんな楽しみ方ができるギミックがたくさん置かれているのでゲームをプレイしているかのような感覚で楽しめます。
また、バギーを特定の枠の中にちょうど収まるようにうまく誘導すると、空中に「Enter」のようなマークが出てくる場所があります。
ちょうど、車を駐車スペースに入れるような感じです。
一般的なリンクをクリックする操作が、そのまま駐車するという行為に置き換わっているわけですね……
すごく凝った作りで、本当に面白いです。
あのサイトやこのサイトも彼の手掛けたものだったのか! と思わずうなりたくなる輝かしい実績の数々も素晴らしいです。
今回のサイトはいろんな意味で異次元というか……
よくこの方法でサイトとしての体裁を保ちつつ、コンテンツとしてまとめたなというのが率直な感想でした……
なんというか、ウェブコンテンツとしてはインターフェースが特殊すぎる一方で、完成度がすごすぎて一般的なサイトと同じ土俵では比較できません(笑)
すごく細かい部分ですが、事例へジャンプするための駐車スペースは、パーソナルなアカウントにジャンプするための駐車スペースより若干広めにスペースが取られているなど、3D 空間上でのコンテンツデザインはかなり考えて作り込まれていると思います。
そのハイエンドな世界観を、ぜひチェックしてみてください。