きちんと文脈もあって技術としてもおもしろい流体表現が楽しい OAKSUN Studio のウェブサイト
ポップでなおかつかっこいい
今回ご紹介するのは、OAKSUN Studio というスタジオのウェブサイトです。
WebGL を使っている箇所は極めて限定的なウェブサイトなのですが、そこに実装されている流体表現が個人的に非常に興味深かったので、ご紹介しようと思います。
とてもポップで可愛らしい雰囲気もありつつクールでかっこいいウェブサイトとなっています。
リンク：
OAKSUN Studio | Modern Web Design & Development
とっても心地よい
今回のサイトの冒頭部分、キービジュアルは一見すると WebGL で動いているのかなと感じる外見をしています。
ただ残念ながら、このキービジュアルの背景については WebGL 実装ではなくて動画ですね。
とは言え、このトップページの冒頭部分ではアルファベットを掴んで移動させることができるようになっており、すごく遊び心に溢れたトップビューだと思います。
この冒頭の動画背景の部分は、そこから少しスクロールしたときに見えてくる領域と、シームレスに（見た目上は）つながっています。
そしてその少しスクロールした部分にある領域が、WebGL 実装です。
ここでは薄い赤系の色の上にテキストがあり、背景部分にはカーソルの動きに応じた流体エフェクトが発生します。
驚くことに、この流体表現は同時にテキストにも影響が起こるようになっていて、文章が崩れるように動きます。
いや～ これすごくおもしろいですよね。
WebGL の流体エフェクトは、最近は比較的オープンな実装も増えていますしそういう意味でも昔に比べて再現しやすくなっている背景がありますし、AI による補完の精度が上がっていることなどもありバーゲンセール状態です。
なかには、ただ適当にサイト上に流体を乗せただけみたいなケースも散見されると個人的には感じています。
一方で今回のサイトの場合を考えてみると、ここまで文脈としてしっかりウェブサイトの演出に盛り込まれているケースはかなり珍しいように感じます。
誤解のないように書いておくと、流体を適当に乗せただけじゃダメなのかと問われると、それはケース・バイ・ケースじゃないかなというふうに思います。
なんかかっこいい、というのは事実ですし、実際見栄えがしますよね。
一方で、今回のサイトのようにデザインやコンテキストも踏まえて意図を持って流体実装が盛り込まれているケースもあり、そこには一段上の納得感、一体感があるように個人的には感じました。
ぜひチェックしてみてください。
