透明感のある写真素材の魅力を引き立てる WebGL エフェクトが見事な 8 THE THALASSO u のウェブサイト
美しい写真をより美しく見せる
今回ご紹介するのは、8 THE THALASSO u（エイトザタラソ ユー）というちょっと変わった名前のヘアケア製品のウェブサイトです。
海水に由来する保湿成分を含むなど、様々な特徴のあるシャンプーとトリートメントを紹介するスペシャルサイトという感じですね。（エイトザタラソというのがこのシリーズのブランド名みたいです）
私個人はあまりシャンプーなどのヘアケア製品にこだわりなどは無いタイプですが、こういった製品にこだわりを持っている人は一般的には少なくないと思います。
今回のサイトでは、WebGL のエフェクトを上手に利用して美しい写真素材の良さをさらに引き立てています。
リンク：
【公式】8 THE THALASSO u（エイトザタラソ ユー）｜ タラソCBD処方で、さら・つや髪。
海や水をイメージさせる演出
今回のサイトで扱われている 8 THE THALASSO u（エイトザタラソ ユー）という製品は、先述のとおり海水に由来する保湿成分が入っているということで、サイト全体が海や水をイメージさせる雰囲気に統一されています。
ページ冒頭では白い背景に写真が浮かび上がってくるようなイントロ演出があるのですが、この最初のイントロ演出の時点から、かなり美しさというか透明感のあるきれいな雰囲気が意図的に作られていますね。
１つには、使われている写真素材自体の美しさ、というのもあるのでしょうが……
そこに WebGL の加算合成によるフェード演出が加わることで、より光り輝くような雰囲気が強調されてインパクトの強いビジュアルになっていると思います。
静止画ではちょっとわかりにくいかなとは思うのですが、画像が波打つように歪むような演出も同時に使われています。
以下のキャプチャ画像を見てみると、写真のフチが波打っているのがわかるのではないでしょうか。
サイト内の画像の多くが、最初に画面上に現れる際に「揺らぎ＋加算合成フェードイン」のエフェクト付きで登場してきます。
一部の写真素材は、その登場エフェクトが収束したあとも微妙にグラデーションが強調されるようなエフェクトが掛かっていたりします。
揺らめく水面や、あるいは水面を通して差し込んでくる光、みたいなものが上手に表現されていてシンプルですが効果的な WebGL の使い方だなと思いました。
私自身がスキンケア・ヘアケアなどに詳しければ、成分や効能についてもっと詳細に説明できたのかもしれませんが、そのあたりは実際にサイトに行って確かめてみてください。
オンラインショップなどもあるようなので、今回紹介したサイトからリンクを経由してショップに行って、そのまま製品を購入することもできるようになっています。
今回のサイトの実装は WebGL を使ったサイトとしては（あえて分類するなら）それほど規模の大きなものではないと思いますが、製品の雰囲気やコンセプトを WebGL ならではの効果で上手に強調していて、とてもバランスの良い事例だなと感じました。
ぜひチェックしてみてください。
