白く輝く陶器のような質感と柔らかな動きのバランスがすてきな BizUp Agency のウェブサイト

doxas : 2022-10-28 12:59:58

とろけるような不思議な表現

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

登場するオブジェクトはアブストラクトな印象のものばかりですが、陶器のような、あるいは無重力な空間に浮かんだミルクのような、不思議な質感のオブジェクトの表現がおもしろい WebGL 実装がなされています。

シンプルなデザインと見事にマッチしたビジュアルを実現しています。

今回のサイトは LP ではないのですが、トップページからずーっと下に向かってスクロールしていく、縦に長い構成になっています。

WebGL によって描かれるオブジェクトには、白い陶器のような質感のもの以外にも、ラインで描画されるものなどがありますが、いずれもスクロールに連動してインタラクティブに変化が表れるようになっています。

まず冒頭で出てくるのは、まるで陶器のような質感のオブジェクトのほうですね。

白い液体のような…… あるいは陶器のような……

なんとも言えない美しさをたたえたビジュアルですよね。

カーソルを重ねてやるとほんの少しだけ変形するというか、カーソルの位置に向かって引き伸ばされるような動きをします。

またスクロール操作に合わせて波打つ量が多くなったり、いくつかの層が重なった状態になったりと、外見的な変化は結構いろいろなバリエーションがあります。

ちょっとだけ技術的な話をすると、単に球体に対してライトを当てるような処理を行っただけでは、こんなに陶器っぽい感じの見た目にはなりません。

具体的には環境マップのような周囲の風景が映り込む系の処理を加えることで、表面のツルッとした感じがより強調されます。

今回のケースだと SSS（Sub Surface Scattering）は適用していないと思いますが、使っている環境マップがとてもシンプルで絶妙な色の濃淡になっていますね。どこか透明感みたいなものさえ感じるほどよいテイストだなと思いました。

白い背景に、白いオブジェクト。

一見すると簡単そうに見えて、実はとてもきわどいバランスを攻めているレベルの高いウェブデザインだなと感じます。

3D 表現を主体とした WebGL 実装のサイトにおいて、登場するオブジェクトが球体だけっていうのは比較的よくあるケースだと思いますが、今回のケースのように陶器っぽい感じで表現しているケースは結構珍しいかもしれないですね。

シンプルな中に思わず見入ってしまうような計算された美しさがほどよくブレンドされた事例だなと思います。