流体のようなエフェクトが思わず心を引き付けて離さない！ The Sight のウェブサイトがすごい！

doxas : 2023-10-05 13:11:48

めちゃくちゃハイエンドなビジュアル

今回ご紹介するのは The Sight というエージェンシーのウェブサイトです。

青を基調とした暗めの背景色に、光り輝く光の帯のようなオブジェクトがなんともかっこいいトップページから、サイト内の多くの場面で WebGL がガッツリ使われています。

実際には、そこまで多様な表現が仕込まれているわけでもないのですが、そのビジュアルとしての完成度の高さは何度も繰り返し触ってみたくなる凄みがあります。

今回のサイトで用いられている 3D 表現は、基本的にアブストラクトと言いますか、かなり抽象的な表現が多いです。

具体的になにか現実世界にあるような登場人物やオブジェクトが出てくる感じではないのですが、明と暗をしっかりと踏まえた表現は見ごたえがあります。

トップページ部分では、光が引き伸ばされてラインのような外見になっています。

この上のスクリーンショットを見ると、光のラインの部分がぐにゃりと歪んでいるのがわかるでしょうか。

このエフェクト、カーソルを動かしたときに発生するのですが、まるで流体のような独特な風合いがあり、すごく気持ちいいですね。

流れているというよりは、波立っている、という感じのエフェクトなのですがサイト全体のグラフィックスの雰囲気に絶妙にマッチしていて、歪んだ世界もこれまたすごく美しく描き出されています。

事例紹介のページなどでは、その背景の部分に同様の流体風エフェクトが発生し続けます。

いわゆる SPA のようにシームレスにページが切り替わる仕組みになっているので WebGL の実装を背景に置いたまま違和感なくページが切り替わります。

光のラインのようなものがそこに存在しなくても、明暗だけを使って上手にエフェクトの模様や機微が伝わるように調整されていて、すごく美しいインタラクションを楽しむことができます。

流体風の表現のインパクトがすごく強いのでそこにばかり目が行ってしまいがちですが、光りのラインやパーティクルを使った表現も卒なく実装されており、本当にレベルの高い WebGL 実装だと思います。

一般に、流体的な表現というのは計算コストが大きいのでリアルタイムのエフェクトとして盛り込む際はいろいろな点に注意しなければなりません。

今回のケースのように、実際には流体ではないけども、一見した印象が流体っぽいもの、というのを上手に使うことで負荷が高くなりすぎないようにしつつもリッチなビジュアルを実現できますので、参考にしてみるのもいいのではないでしょうか。