相変わらず異次元のすごさ！ makemepulse の 2018 年アニバーサリーサイトがすごい！
ちょっとしたゲーム風の楽しいウェブサイト
今回ご紹介するのは、フロントエンドや WebGL に関しては世界的に見ても最先端を突っ走り続けている makemepulse の手がけたウェブサイトです。
いわゆるプロモーション案件などの、一般的な制作事例ということではなく、2018 年を迎えたことを単純に祝うアニバーサリーサイト的なデモサイトですね。
ちょっとしたゲームのようなギミックが詰め込まれた WebGL デモは、ほんとに異次元の出来栄えで驚かされること間違いなしです。
音と動きで楽しく遊べる
今回のサイトは、2018 年のアニバーサリーサイトという感じなので、2 という数字から始まり、0、1、8 というように、西暦の数値に合わせたシーンで構成されています。
最初のシーンは 2 をテーマにしたものですが、こちらはクリック操作をページ内で行うと、筒のような形をしたオブジェクトからボールがひとつ吐き出されてきます。
このボールは物理演算で処理されており、現実世界のボールと同じように飛び跳ねたり転がったりするのですが、カーソルを動かしてオブジェクトの傾斜などを操作しつつ、まるでゴルフをプレイするような感じでボールをホールへと導いていくのが目的となります。
描かれる各種オブジェクトの質感も見事ですが、柔らかいものや硬いものなど、見た目の質感だけではなく感触に近い部分にも差がつけられており、本当に素晴らしいですね。
ボールがスロープのような木目の板の上を転がっている様子がわかるでしょうか。
見事、旗の立っているホールのなかにボールが入れられればこのシーンはクリアです。
クリアと言っても、厳密にはゲームのように一定の条件を満たさなければ次に進めないということではないのですが、ある程度操作を行わないと次には進まないようになっています。
続いてのシーンに向かう場合は、画面の向かって右上のほうに出ている、緑色の「大なり記号」のようなオブジェクトをクリックしましょう。
2 の次は、0 に関する場面、そしてその次には 1 に関する場面、というように続いていきます。
明るい空間の中に配置されているオブジェクトは、メタリックなものや、石の表面のようなものなど、多彩なマテリアルをまとっていて見ているだけで楽しい気持ちになりますよね。
ふたつ目の、0 をテーマにしたシーンではまるで打楽器を叩くような感じで、効果音をシーンに追加できます。
1 をテーマにしたシーンでは、まるでピンボールのようにボールを発射することができたり、本当に遊び心溢れる作りです。
8 がテーマのシーンはマウスボタンのホールドによって、高速に光の帯を伴って動くボールの様子を見ることができます。
摺りガラスのような屋根付き通路がなんとも Cool。
makemepulse といえば、WebGL を使っているかどうかにかかわらず、フロントエンド界隈では実力派として有名だと思います。
WebGL を使っている作品についても、本当に目を見張るような高品質な作品を多く輩出しており、今回の作品も単なるアニバーサリーサイトにしては完全にやりすぎ感漂っています……
様々な質感などの表現、さらにはインタラクティブに操作できる楽しさもすごいのですが、これだけ多彩なオブジェクトを描画しているのにもかかわらずロード時間が驚くほど短く、なんというか……スキがないですね……
2018 年は、彼らにとっていったいどんな一年になるんでしょうね。
もしかしたら期間限定公開かもしれませんし、気になる方はぜひチェックしてみてください。
