日本の昆布茶にも影響を受けている？ フランスの不思議なフルーツジュースのウェブサイト
パステルカラーの楽しい雰囲気がステキ
今回ご紹介するのは、フランスのウェブサイトで、フルーツをベースにしたジュース飲料の製品サイトです。
ジュースから連想する液体のようなゆらゆらしたエフェクト、あるいはその原料となっているフルーツの色づかいなど、とっても楽しげな雰囲気溢れるサイトとなっています。
WebGL の利用方法としては比較的控えめな感じではあるのですが、とても完成度の高いサイトだと思います。
リンク：
Kombu | Boisson vivifiante à base de thé
なぜに製品名が Kombu なのか
今回のサイトで紹介されている製品は、その製品名が「Kombu」となっていて、日本人なら自然と「昆布」を連想しますよね。
サイト内に書かれている内容をしっかりと読んでみると「kombucha」という記載がちらほら出てきます。
どうやら、日本の昆布茶にもなにかしらの影響を受けているようで、それがそのまま製品名にも踏襲されているかたちのようです。なかなかおもしろいですね。
画面の中心に缶が表示されるようなシンプルなビューですが、背景の部分にはいくつかのフルーツが並んでおり、これらが横方向にスライドすることによって複数の商品を横断して見ていくことができるようになっています。
スクロール操作を行うと、ちょうど隣にあるフレーバーがプレビューされるようになっているのですが、このときのアニメーションがなかなか秀逸です。
帯のような感じで描かれているカラフルなラインと、その隙間から見えているフルーツの画像がポップなアニメーションで動きます。
想像で書いちゃいますが、たぶん実装は Pixi だと思います。
平面的な処理が中心ですし、Pixi.js のほうが作りやすそうな感じはしますね。
ユーザーの操作に対してなにかしらのインタラクションが発生するようになっていて、閲覧しているだけでもすごく楽しいサイトになっています。
メニュー画面とかも、四分割されたエリアがやっぱりウネウネと動くのですが、すごく遊び心がありますよね。
全体がフランス語になっているのですが、トップページの右下あたりにあるリンク文字から英語版に切り替えることもできます。
文章量はそれほど多いサイトではなく、ビジュアル面で訴えかけて来る部分が演出の中心です。
全体的なカラーリングがすごく心地よいバランスになっていて、本当に明るい気分にさせてくれるサイトだなと思いました。
ぜひチェックしてみてください。
