ものすごく個性的なディストーションエフェクトが心地よい Zoi Ice Tea のウェブサイト
はじめて見る気がする質感
今回ご紹介するのは Zoi Ice Tea というドリンク製品のウェブサイトです。
名前から察するに凍らせるタイプの飲料製品なのかなと思うのですが、冷気や氷、あるいはそれによって発生する結露のような質感を上手に表現しています。
ディストーションエフェクトとしてはかなり凝った事例なのではないでしょうか。
リンク：
Zoi Ice Tea - The Ultimate Experience
複雑な質感と触り心地
今回のサイトのディストーションエフェクトは、サイト全体を通じて共通する演出として盛り込まれています。
特定の、たとえばキービジュアルだけの演出という感じではなく、サイト内の全体で同じエフェクトを採用しているということですね。
トップページの冒頭、キービジュアルの部分のまるで氷のような物体に包まれた製品の映像は、CG ではなく連番の画像（または動画）です。エフェクトの部分だけが WebGL 実装という感じですね。
氷に包まれた製品自体は CG で描かれたジオメトリを持つオブジェクトではないのですが、ここはリアルタイムでやることよりも氷の感じを優先して見せたかったということなのでしょう。
もう少し解像度の高いデータを使えば良さそうな気もしますが、軽量化なども踏まえてこのような仕上がりになっているのだと思います。
スクロール操作を行うと、コンテンツが次々と切り替わっていきます。
ただ先にも書いたとおりで、セクションが変わってもエフェクト自体は同じですね。
ちょっと静止画で見てもわかりにくいかもしれないのですが、このディストーションエフェクトがすごくおもしろいんですよね。
流体ともちょっと違って、カーソルの動いた部分に発生したエフェクトが時間とともに収束していくような感じです。
歪み方がこすごく個性的で、細かくノイジーな感じのディストーションと大きく広めの範囲で発生するディストーションと、それらが組み合わされたような質感です。
サイトの後半、だいぶスクロールした後のセクションでは静止画や動画ではなく WebGL で缶を描画しているセクションなどもあり、見せ方をいろいろ工夫している感じがありますね。
カーソルの位置にエフェクトが発生するというのは WebGL の使い方としては王道的アプローチだと思うのですが、このような表情豊かな印象のディストーションエフェクトは珍しい気がします。
製品の訴求ポイントとも見事にマッチした素敵な演出だと思います。
ぜひチェックしてみてください。
