ウェブサイトを構成する要素としての一体感ある流体表現が素晴らしい Seiste のウェブサイト
質感と文脈
今回ご紹介するのは、Seiste というチョコレートブランドのウェブサイトです。
非常に美しい写真素材と、その上で展開されるシェーダによるインタラクティブ表現とが、見事な一体感を生んでいます。
流体の流れるような表現も見事ですし、AI を用いたちょっと変わったインターフェースなども見どころかなと思います。
リンク：
じっくり楽しみたいエフェクト
今回のサイトは、チョコレートブランドのウェブサイトということもあってか、すごく高級感のある、手触りの心地よさにこだわったウェブサイトという感じがします。
サイトを訪れたひとの誰もが真っ先に気がつくであろう、流体のようなエフェクトが素晴らしくいい質感になっていますね。
これはまあ…… 文章では伝えようがない感じがあるのですが、とにかく柔らかく滑らかな、とてもリッチな感触の流体表現になっています。
これは完全に個人の感想に過ぎませんが、今回のサイトの流体表現はそれこそチョコレートのような、あるいは水飴なんかも質感として近いと思いますが、粘度の高い流体という感じがします。
おそらくは、意図的にこういう味付けの流体にしているんだと思いますが、ウェブサイトの文脈に見事にマッチするエフェクトですよね。
よくよく観察してみると、背景の画像だけでなく文字の部分にもエフェクトが掛かっているのがわかると思います。
細かいところまでしっかり作り込まれています。
また、これもよ～く観察してみるとわかることですが、単に UV がずれて画像が歪むというだけでなく、ほんの僅かに明度が加算されるような効果も流体表現には盛り込まれているようです。
これによって暗いトーンの画像や背景の上でカーソルが動いた際にも、そこに流れが発生していることがわかりやすく視覚化されていると思います。
流体表現を取り入れた WebGL 実装のウェブサイト自体は最近では珍しくありませんけれども、ここまで文脈や、あるいはその質感にこだわって作られているケースはちょっと稀有な事例かもしれません。
AI をサイト内に盛り込んで、ブランドのことや創業者のことを調べることができるというのもおもしろいですよね。
ビジュアルは確かにインパクトが強いというか、すごく目を奪われる感じがあるんですが、だからといってコンテンツの邪魔にならないように気を配っている感じもします。
チョコレートっぽい質感の流体表現は WebGL 実装としてもレベルが高く、必見です。
ぜひチェックしてみてください。
