流体活用したマスク表現に動画を組み合わせてリッチなビジュアルを実現した Nothin' のウェブサイト
一風変わった個性を感じる
今回ご紹介するのは、クリエイティブスタジオ Nothin' のウェブサイトです。
パリを拠点とするスタジオのようで、だからというわけじゃないですが、一風変わった雰囲気を持ったウェブサイトに仕上がっていてかっこいいですね。
今回のサイトの WebGL 表現はキービジュアル部分に実装された流体を使った演出が中心です。
リンク：
流体モノではちょっと珍しいタイプ
今回のサイトのトップページ、冒頭部分は、流体を使った演出が組み込まれています。
ページのロードがされている状態からの一連のイントロ演出があって、これもなかなか洗練された感じでかっこいいのですが、それが終わるとカーソルの動きに応じて流体が発生するようになります。
流れの発生によって、マスク領域がインタラクティブに広がります。
一般的な流体的なエフェクトというと、色が滲んだり、あるいは波紋に応じて歪んだり、というのが多い気がします。
今回のケースはそういった複雑な色の変化、ということではなく、流れが一定以上発生している箇所がマスクされるような感じなんですよね。
こういう二値的な流体エフェクトはちょっと珍しい気もします。
冒頭で見られる演出もそうですが、流れが発生したところだけ後ろにあるものが見える、というなにか核心的なものが隠されているような印象を受ける演出になっています。
他のセクションに置いてある演出も、なんというか一歩引いたところから、なにかを媒介したうえで世界を見ているというか、不思議な距離感を持った演出が多い気がします。
サイト全体の作りの良さが、こういった不思議な演出にも説得力を持たせているような、なんとなくそんな気がします。
サイト全体を俯瞰して見てみると、そんなに派手にビカビカしているかんじでは全然ないのですが、かといって、落ち着いた動きの少ないサイトかと言われるとそんなことはありません。
事例の詳細を記した下層ページとかでもなにかしらアニメーションする要素が多いですし、どちらかというと動きが多いタイプに分類できるかもしれません。
WebGL の実装はたぶん冒頭のキービジュアルの部分だけだと思いますが、あえてシンプルに二値化したような流体の使い方は潔くてかっこいいですね。
ぜひチェックしてみてください。
