輝く光や流れる星々を見事に表現した WebGL 演出が雰囲気を盛り上げる！スターガーディアン 2022 のウェブサイト

doxas : 2022-07-25 13:24:47

CG として美しいのはもちろん操作性もよい

今回ご紹介するのは、ゲームのシリーズとして世界的人気を誇るリーグオブレジェンドの関連コンテンツ、スターガーディアン 2022 のウェブサイトです。

リーグオブレジェンドは Riot Games が提供する大人気タイトルで、よく LoL と略して表記されます。

残念ながら私はあまりゲームそのものやその内容には詳しくないのですが、このスターガーディアンというコンテンツは LoL 関連タイトルを横断的に扱うスペシャル企画みたいな感じっぽいですね。

その最新版として企画されているスターガーディアン 2022 のスペシャルサイトということで、かなり凝った演出が盛り込まれています。

今回のサイト、いわゆる有名なタイトルに関連したウェブサイトなので、動画や静止画の素材重視なかんじなのかなと思って見ていたら……

WebGL 実装の部分が妙に凝っているというか、むしろかなりガチな香りを感じる完成度になっています。

有名タイトルの人気企画に関するサイトだけあって、さすがにお金かかってますね……

いわゆる 2D 的なエフェクト表現が使われているとおぼしき部分があったかと思うと、立体的にオブジェクトが動く 3D 的な表現も見受けられます。

スペースキーやボタンの押しっぱなしで動作するといったインタラクティブな要素もあり、ゲーム関連サイトとしてのユーザーを楽しませるような工夫も随所に見受けられます。

流れ星のようなオブジェクトの表現はじっくり観察するとかなりしっかり作り込まれていて、スピード感を表現するための光の表現などすごく迫力があります。

また、これらの一連の演出が終わったあとに表示される、タイムラインのようなページの完成度もエグいですね……

ここでは、スターガーディアン 2022 やそれに関連した告知、あるいはティザー映像などが、まるで天の川の上に時系列順に並べられているかのような感じで描かれます。

このタイムライン部分の操作性がすごく滑らかで、カーソルをホバーさせたときの演出、クリックしたときの演出など、とにかく隙がない感じで実装されています。

見た目が派手なだけではなく、ウェブサイトのインターフェースとしてもかなり完成度が高いと感じました。

世界的に人気のあるゲームに関連するウェブサイトだけあって、用意されている言語の数も相当な種類があり、もちろん日本語サイトもあります。（今回は日本語サイトにリンクしています）

こういったビッグタイトルのウェブサイトでは、もちろん予算が潤沢にあるわけで WebGL が使われるケースも珍しくないのかもしれませんが、ここまでガチな 3D インターフェースが用意されているケースは珍しいような気もします。

一見するとイロモノっぽい雰囲気に見えるかもしれませんが、操作感や演出の仕方など、とにかく参考にできるポイントが無数にあるウェブサイトだなと感じました。