炭酸飲料の製造過程をイラスト風のインタラクティブコンテンツで楽しく表現した Pixi.js 製コンテンツ
二次元的なイラストを効果的に利用
今回ご紹介するのは、炭酸を含む飲料の表現を Pixi.js でいかにも楽しげに表現した、ドリンク製品のウェブサイトです。
このサイトで紹介されている製品は、ちょっと自信がないのですが、たぶんお酒じゃなくていわゆるソーダと呼ばれる清涼飲料だと思います。
サイト全体に使われている手描きイラスト風の雰囲気は、とても楽しげで暖かみのある風合いです。一方で、掲載されている写真（画像）のほうはどちらかというと切れ味鋭いというか、エッジの利いた雰囲気になっています。
この雰囲気の違う両者が微妙に混ざり合っている様子が、なんともかっこいい演出効果に繋がっていると思います。
泡がふわふわ混ざり合うような不思議な演出
今回のサイトは、かなりページ数が多いのですが、一見すると SPA のような感じの作りになっています。
まず、最初のロード画面が表示されたところから、ロード完了まで待ってやると下にスクロールしてコンテンツを移動していくことができるようになるのですが……
この一連のスクロール操作で移動できるコンテンツは、SPA のように URL の遷移は行わずに閲覧していくスタイルになっています。※画面右上のメニューからは他のページやコンテンツに移動できます。
ブラウザのスクロール制御ではなく、スクロールイベントを検出したら、中身のコンテンツがインタラクティブに変化するような実装スタイルですね。
手書きのペン画のようなイラストが、なんとも言えない柔らかい雰囲気を作っていると思います。
Pixi.js によって制御されているのは、途中のイラストに度々登場する泡などのオブジェクトです。
たとえば、以下のイラスト部分はソーダ飲料がコップに注がれる直前の部分を、アニメーションの途中でキャプチャしたものです。
まるで炭酸の泡がグラスのなかに注ぎ込まれるようにして動き、最後に氷やフルーツと合わさってひとつの飲料になるところを演出しているわけですね。
このサイトで紹介している商品そのものは、瓶詰めされた炭酸飲料のようですが、四人の異なる分野の専門家たちが意気投合して研究の末に生み出したものみたいです。
ちょっと私の読解力ではもしかしたら誤解があるかもしれないですが、たぶん、アルコールが禁止されていた時代に流行した炭酸飲料にちなんで作られたものっぽいですね。
2 セントで販売されていた炭酸飲料に、フルーツやフレーバーを追加して 3 セントで販売したという当時の歴史にちなみ、このサイトでも Three cents という言葉が使われているのだと思います。
炭酸に向けられた異常なほどのこだわりが、このサイトの Pixi.js を使ったリッチな泡の表現に繋がっているのかなと、個人的には感じました。
WebGL の活用方法として、今回のサイトのような二次元的な表現も、最近では数がかなり増えてきていますね。
特に、Pixi.js を使ったリッチな二次元ベースのグラフィックスは、WebGL の 3D 表現とは異なり、従来からあるウェブの表現を単純に底上げする使い方であり、導入しやすいというところもあるのかなと思います。
三次元的な表現であったり見せ方であったりというのは、どうしてもそれに対する経験値を必要とします。
その点、これまで長いこと積み上げられてきた二次元的なウェブ表現のノウハウがそのまま流用できるこういった WebGL の活用事例は、もっともっと増えていても不思議ではないかなと個人的には思います。
Pixi.js などを使わずに、ピュアな WebGL の実装で同様のことを行うのはもちろん可能ですが、どうしても実装の手間のほうが大きくなってしまいがちです。日本でも、こういった Pixi.js を上手に利用したサイトが、今後はどんどん増えていくのかもしれませんね。
非常に楽しい雰囲気と、鋭くエッジの利いた商品画像のコントラストが見事に一体となった興味深いサイトです。ぜひチェックしてみてください。
