浄水器のメーカーが配信する飲料水を巡るショートストーリー風の WebGL デモ

doxas : 2016-11-01 13:45:33

要はストレートな広告だけどよくできてる

今回ご紹介するのは、浄水器のメーカーが配信しているとある WebGL コンテンツです。

内容的にはほとんど直球で、水道水が蛇口から出てくるまでのちょっとしたストーリーを見せるコンテンツとなっています。

途中、ちょっと消費者の不安を煽るような感じの内容も出てきますが、デモの雰囲気やシェーダを使った水の表現などは非常に丁寧に作られていますね。

飲料水をテーマにした、面白いコンテンツだと思います。

今回のコンテンツはほとんど一本道のショートストーリー風になっていますが、物語を進めるたびに、ユーザー側のクリックなどのなにかしらのアクションが必要です。

ゲームというほどではないですが、ユーザーとまるで対話するかのようにストーリーが進められていきます。

一部のメッセージなどを除いて、基本的には先に進むにはなにかしらのアクションが必要なので、逆に言えば気になるシーンは時間をかけてじっくりと閲覧することも可能です。

ある程度シェーダが書けないと表現できないような、ちょっとした工夫もいろいろと見受けられますね。

まず最初に居住地を入力するフェーズがあるのですが、当然のことながら、日本の地名を入力しても意味がありません。

上の画像は、入力された場所は対象範囲に入ってませんよ！というお知らせの様子ですね。この画面には最寄りの場所を選択するボタンなどもあるので、場合によってはそちらを選択するか、あるいはアメリカの地名を入れてやる必要があります。

地域の入力に応じてコンテンツが変化するというのは面白い仕組みですね。

恐らく、水道整備の状況などによって、メッセージや距離を表す数値などが変化するようになっているのだと思います。

全体的に統一された印象として、常に澄んだ水中のシーンが描画されていきます。

泡のようなパーティクルがふわふわと水の流れにたゆたう様子や、上のほうから差し込んでくる光のラインなど、とても美しく描画できていると思います。

ウェブサイトを閲覧している間は、水中にいるかのような効果音も絶えず再生されているので、リアルに水というものを意識できるような雰囲気になっています。

最終的に水道の蛇口までたどり着くことでコンテンツが終わりになりますが、現在の進捗状況などは画面の右側に表示されています。

ゴールに辿り着くまでの行程では、様々な飲料水に関する知識が文章として提示されます。

なかには、水道管のなかには汚染物質もあるんだぜ！みたいな、ちょっといかにも浄水器メーカーが言いそうな内容のものもありました。

水の安全が健康にどれほど影響するのかということを、コンテンツを通じて伝えようとしているのだと思いますが、実際のところアメリカの水道事情って、どうなんでしょうね。

ちょっと気になります。

水が少しずつ水道を通り抜けていくようなイメージの部分では、まさに水が渦を巻きながら流れていくような、そんなエフェクトの掛かっているシーンもあります。

静止画ではちょっとわかりにくいですが、奥に向かって勢い良く流れていく様子が再現されています。

最終的に、コンテンツを全て閲覧し終わると、製品の名前やウェブサイトへのリンクなどが画面に登場します。

意図としては、最後は要するに宣伝のためのサイトなのだと思いますが、それにしても結構しっかり作ってあって、なかなか見応えがあります。

地名からインタラクションに構成が変化するコンテンツや、ユーザーのインタラクションへの意識の高さ、WebGL の部分だけを見ても透明度の高い透き通った水中の様子を再現したシーン構成など、見どころは多いと思います。