バレンタインデーのタイミングでリリースされた Jam3 のオリジナルコンテンツ Love Lost

doxas : 2018-02-16 14:13:59

WebGL コンテンツ制作の老舗

今回ご紹介するのは、WebGL コンテンツを多数制作してきた Jam3 の手がけるオリジナルコンテンツのサイトです。

バレンタインデーと言えば、日本でも愛や恋にちなんだ様々なキャンペーンが展開されますが、今回の Jam3 の作品はどうやら失恋をテーマにしたものみたいです。

私の拙い英語力では、なんというか深いニュアンスの部分はちょっとわからないものの、それでも、今回のサイトに込められた短いメッセージを見ると、どこかじんわりと心に染みるような、そんな印象を受けますね……

ビジュアルは非常に美しく、それほど時間もかからずにさっと見ることができるボリュームのデモとなっています。

クリックとホールドだけのシンプル操作

今回のサイトは、すごく短くまとめられたビジュアルノベルのような体裁になっており、グラフィックスの変化と共にいくつかのメッセージが現れる、そんな作りです。

最初にロード画面が終わるとタイトル部分が表示されますが、このタイトルを表示している間も、バックグラウンドでモデルデータの読み込みや初期化処理が行われているようです。

このあたりのシームレスな導線処理は、フロントエンド界隈で名を知られた老舗らしい丁寧な作りだと思いました。

最初に表示される 3D モデルは、まるで岩の塊のような、ゴツゴツとした印象のマテリアルのオブジェクトです。

カーソルが、一点の光る粒のような感じになり、マウスボタンをクリック操作したままホールドすることで、シーンが変化するようになっています。

基本的にユーザーが行えるのはこのホールド操作のみで、いくつかのシーンをこのホールドする操作を加えながら次々に進んでいく形になります。

ボタンをホールドすると、ゴツゴツした岩のようだったオブジェクトが、まるで生きた人間の心臓のように、ドクンと鼓動します。

そうした演出を踏まえて見てみると、実は単なる岩というよりは、それが心臓を模したものであったことが自ずとわかるのではないでしょうか。

一回分のホールド操作を行ってやるごとに、心臓をかたどった岩のようなオブジェクトが、徐々に光を放つような感じに変化していきます。

表面の質感や、亀裂の具合、あるいは棘の立ったような形状など、様々な部分に変化が起こるようになっています。

さらに、一段回の操作が終わるごとに短いメッセージが出てくるのですが、それらのひとつひとつが、誰かを想う愛のメッセージのような感じになっています。

WebGL の技術的な目線で見ると、実はかなりシンプルな実装という感じで、特に難しいことは無いように見えます。一応ポストエフェクトもかかっていますが、最低限の雰囲気づくりのため、といった感じ。

いくつもある引き出しの中から、今回のコンテンツに最良な、本当に必要な小さなパーツだけを取り出してきてうまく組み合わせたような、そんな感じのデモになっていますね。

間の取り方や、ローディングの工夫、そしてそれぞれのシーンごとに細かく計算されたデザインなど、あまり派手さや変化球こそ仕込まれていないのですが全体の印象のまとまりはさすがという感じです。

技術を持っているだけでは作り出せない世界観を、老舗らしい見事な手腕で表現しているなと思いました。

技術的な部分だけ見れば私でも作れそうですが……

このコンテンツとしての完成度を再現するのは、やっぱり難しいです(爆)

印象的で、美しく、どこか物悲しいような、そんなデモになっています。

ぜひチェックしてみてください。

リンク:

Love Lost

Jam3 | A Design & Experience Studio

share

follow us in feedly

search

search

monthly

sponsor

social