色の変化や歪みが起こる多彩な流体エフェクトを活用したクリエイティブスタジオ Basis のウェブサイト
サイトの雰囲気もかっこいい
今回ご紹介するのは、クリエイティブスタジオ Basis のウェブサイトです。
ブランディングからコンテンツの制作まで手掛けており、クライアントもスタートアップから誰もが知るビッグクライアントまで様々みたいですね。
サイト内には流体を活用したようなエフェクトが実装されており、それ以外の WebGL を使っていない要素も含めて質感高く仕上がっています。
リンク：
色が変化するタイプや歪みを伴うタイプ
今回のサイトの流体エフェクトは、画面全体や、あるいは背景全体といったような、広い範囲に対して適用されているわけではありません。
たとえば画像や写真といった、平面的な一部の領域に対して発生するようになっていることが多いようです。
トップページの最初のセクションでは、画面内にいくつか静止画のカードのようなオブジェクトが浮いているのですが、このカード状のオブジェクトの上にカーソルを動かした際にエフェクトが発生します。
この上のスクリーンショットで、画面の左下あたりにあるカードの部分でまさにそのエフェクトが発生しているのが伝わりますでしょうか。
フォーカスされているカード以外は、薄くブラーが掛かったような感じでトーンも落ちて、対象のカードだけがよりはっきりと知覚しやすく演出されています。
それに加えて発生する流体エフェクトは、単純なディストーションという感じではなくそこに色の反転などの効果が組み合わされており、複雑な色表現になっています。
なんかこう一言では説明できない複雑な質感なんですよね。よく工夫されていると思います。
同じ流体的な表現でも、ちょっと質感が違うケースがあったりもして、統一感を持たせながらも単調にならないように配慮されている感じがします。
たとえば下層ページではピンク色のインクが流れているような感じに見える流体エフェクトなどがあります。
いつかの記事で、最近では流体エフェクトもそこらじゅうで見かけるようになって目新しさがなくなってきたといったようなことを書いたことがありました。
実際、ただ単に画面に流体を流すだけとか、背景全体に絶えず流体が適用されているとか、そういうシンプルなユースケースは斬新な感じがしないからなのかあまり見かけなくなってきているようにも感じます。
同じ流体というアルゴリズムを採用しながらも、多種多様な表現や演出がどんどん出てくるというのは非常に興味深いです。
ぜひチェックしてみてください。
