流れる流体！ 弾ける炭酸！ Buttermax のインタラクティブ WebGL デモコンテンツ Slosh Seltzer がすごい
びっくりするくらい気持ちいい
今回ご紹介するのは、WebGL の事例をこれまでにもいくつか公開している Buttermax のデモコンテンツです。
完成度が異常に高く、もうどこを触っても気持ちの良いステキなコンテンツに仕上がっています。
一応、体裁としてはアルコール飲料っぽい製品のプロモーションサイト風になっていますが、あくまでも技術デモとして公開されているものみたいです。
そういう遊び心もおもしろいですよね。
リンク：
インタラクティブコンテンツとしての完成度の高さ
今回のサイトは実際に存在する製品のプロモーションサイトではありませんが、こういう見せ方はどうですかという Buttermax なりの提案というか、プレゼンテーションなんでしょうね。
非常にインタラクティブ性の高いコンテンツとなっており、クリックやホールド、スクロールにカーソル移動など、あらゆるユーザーのアクションに対してなにかしらのフィードバックが起こるようコンテンツが設計されています。
静止画で見てもちょっと伝わらないと思いますが、画面上に描かれるあらゆるものが、まるで生きているかのように生々しく動きます。
流体のような流れるものはまさに本物の液体であるかのように滑らかに、かつ揺らめくように動きまくります。
カーソルを動かすと背景の部分には流体エフェクトが動的に発生しますし、とにかくビジュアルの圧がすごいです。
画面内に表示されるインターフェースまで流体エフェクトで歪んで描かれたりして、ウェブコンテンツというよりはどこか映像作品を見ているかのような、没入感の高いコンテンツに仕上がっています。
一部、クリックしたままホールドするようなコンテンツもあるのですが、それらの操作を行った結果としてどのような場面の変化があるのかなど、ちょっとしたゲーム感覚で楽しめるセクションもあります。
とにかくポップで可愛らしい世界観も見事ですし、視覚効果をとことん追求したある意味 WebGL 実装のお手本と言いますか、１つの極致みたいな感じのコンテンツだと感じました。
こういった技術デモ系のコンテンツを公開しているスタジオは、海外には時折ありますが……
実案件ではない部分にこれだけ情熱を注ぎ込めるというのは、本当にすごいですよね。
おそらくこういう技術デモを公開することで、それが実際に案件につながることも多くあるのだと頭では理解できますが、とはいえやっぱりこういうのを見てしまうとよくやるな～ という感心の気持ちのほうが大きく働いてしまいます。
インタラクティブ性やサイト全体のトーンなど、UI/UX も含めてかなり体験として面白い内容になっています。
ぜひチェックしてみてください。
