優しく軽やかに漂うボールのようなオブジェクトが楽しい OFF+BRAND のウェブサイト

リニューアルしても質感は損なわれず

今回ご紹介するのは、off brand という制作会社のウェブサイトです。

実はこのサイト、過去にもまったく同じ URL のウェブサイトをご紹介したことがありました。つまり、そのときと比較すると今回のサイトはデザインが刷新されているということですね。

ただ、WebGL としての表現は同じような文脈が感じられる仕上がりとなっていて、彼らの持つマインドはしっかりと引き継ぎつつリニューアルされた形になっています。

リンク：

OFF+BRAND | Design, Development, Branding, Digital Marketing & WebGL

スフィアのたぷたぷ感

今回のサイトではなんといっても一番目立つ WebGL で描かれるオブジェクトがあるのですが、それが柔らかい質感を持つスフィア（球体）です。

このスフィアは色の明暗や色相が絶えず変化することに加え、まるで柔らかいゴムボールみたいな感じで波打ちます。

波紋が広がる様子はなんとも見事で、すごく軽やかな雰囲気に仕上がっています。

カーソルをスフィアの上で滑らせると、カーソル位置に波紋が発生するようになっています。

なにもユーザーが干渉しない場合も一定の割合いで勝手に波紋が発生するようになっているのですが、やっぱりそこはどうしても触ってみたい欲求が生まれます。あるいは、不意にカーソルが動いて自然とスフィアを撫でてしまうこともあるでしょう。

そのときに発生する波紋のエフェクトはなんとも目を引きますし、すごく面白い質感です。

画面上のどの場所に、どのくらいの大きさでスフィアが描かれているとしても、しっかりとカーソルの位置に波紋が発生するようになっていて、このあたりはかなり丁寧に実装してある印象を受けます。

WebGL の実装だけでなく、全体的なデザインも洗練されていてすごくかっこいいですよね。

リニューアルされる前のデザインも同じようなトーンと方向性を持っていたように感じるのですが、大事な軸はブレることなく見事にアレンジされているように思います。

登場する 3D オブジェクトは、スフィアという CG の世界ではありふれた幾何学形状です。

にもかかわらず、インタラクティブな反応によって得られるその存在感は、いろんな意味でウェブサイトに面白さや楽しさ、そしてコンテキストとしての奥深さを演出しているなと感じました。

ウェブのフロントエンド実装全体やデザインという意味でも、高い完成度を誇っていると思います。

ぜひチェックしてみてください。

リンク：

OFF+BRAND | Design, Development, Branding, Digital Marketing & WebGL