質感にもインタラクティブ性にも極限までこだわった MSI のゲーミングギア・スペシャルサイト

doxas : 2022-08-02 12:51:20

ゲーミングギアにふさわしい派手ビジュアル

今回ご紹介するのは、PC 関連製品などで世界的に知られる MSI のスペシャルサイトで、特にゲーミングギアを紹介するウェブサイトのようですね。

マウス、キーボード、そしてヘッドホンが掲載されているのですが、それぞれに個性的なミニゲームまで用意されており、めちゃくちゃ気合が入っています。

WebGL の実装としてのレベルも高く、非常に見応えのあるウェブサイトとなっています。

今回のサイトの WebGL 実装は、ゲーミング用の機器を扱うウェブサイトらしいガッツリとビジュアル重視で作り込まれたサイトになっています。

トップページでは、３つの製品が円筒形に配置されており、左右に向いた矢印のアイコンで切り替えることができます。

それぞれのアイテムは 3D モデルで立体的に表示されていて、選択すると詳細が表示されるような構造です。

この上の画像を見ると、文字とキーボードの 3D モデルが交差しているのがわかると思います。

今回のサイトでは DOM として表示される文字の他に、この例のように三次元空間にスプライトとして文字が配置されているケースもあり、3D 表現に対するこだわりが感じられる場面が多く見受けられますね。

背景に表示されている壁の部分も光の反射などがすごくリアルに作られており、フォトリアル系の CG としてかなり本物志向で作られています。

各製品のページを一番下までスクロールするとミニゲームへ移行できるボタンが表示されます。

ミニゲームはそれぞれの製品ごとに、つまり全部で３つ用意されていて、内容もすべて異なります。

たとえば、上の画像はマウスのページに用意されているミニゲームのスクリーンショットなのですが、基盤のような床の上に通路が表示され、この通路からはみ出さないように微細なマウス操作を求められる、というような内容です。

オートスクロールのスピードがどんどん上がっていくので、いかに長く通路から飛び出さないようにマウスを操作できるかというのは、いかにもゲームギアらしいミニゲームの内容だなと思いました。

ヘッドホンやキーボードにも、それぞれの特性を想起させるようなミニゲームが用意されています。

とにかく全編に渡って CG に対する気合の入り方が尋常じゃないですね……

ミニゲームも完成度が高く、それぞれのゲームごとに求められるものも見せ方もまったく違い、飽きずに楽しめるよう工夫されていますね。

ある程度フォトリアル寄りな表現に終止しつつも、どこかバーチャル空間のような独自の世界観を演出していて、そのあたりのブランド戦略みたいな部分も徹底されています。