マウスカーソルによるインタラクションとブラーを活用した表現が楽しい Supersolid のウェブサイト
演出のバランス感
今回ご紹介するのは、シドニーを拠点に活動するエージェンシー Supersolid のウェブサイトです。
WebGL を用いたインタラクティブな演出がいい味を出していて、そこに CSS を活用した演出が上手に組み合わされています。
WebGL や CSS のいずれかの個性が立っているというよりは、それらが渾然一体となって相乗効果を発揮している、というかんじのほうが印象としては近いかもしれません。
リンク：
Supersolid | Independent Creative Agency in Sydney
大胆なディストーション
今回のサイトのトップページ、その冒頭では、最もわかりやすく WebGL による演出が行われています。
カーソルを動かすとロゴの部分が大きく歪むというものなのですが、RGB シフトによる効果も合わさることで非常に視覚的な効果が強い演出になっています。
ディストーションが発生したあと、それが元に戻っていく様子もほどよいゆったり感で手触りがいいですね。
ページの冒頭は WebGL を用いてかなりビジュアルにわかりやすい効果が発生しますが、それはあくまでも冒頭部分のキービジュアル（重要な部分）だからこそという感じがあります。
というのは、他の部分に演出が盛り込まれていないわけじゃなく、サイト全体を俯瞰して見てみるとなにかしらのインタラクションや演出が適用されていない部分のほうがむしろ少ないんですよね。
演出がもりもりのサイトだからこそ、それらの演出それぞれに意図的に温度差みたいなものが設定されている感じがあり、そのバランス感が見事だなと感じます。
スクロールに連動するタイプの演出もたくさん
これも完全に個人の印象の話になってしまいますが……
CSS を用いて演出している部分のいくつかには、ブラーの効果を上手に利用しているものが見られます。
実際はほとんどの要素に対する変化は一瞬なので、その個々の事象をはっきりと目で捉えられることはむしろ稀ですが、全体としてのトーンには統一感があるように思いました。
いわゆる 3D 的な表現はほとんどありませんが、平面的なレイアウトのなかに美しく配置された各要素と、それらに適用される各種エフェクトがすごくバランスよく組み立てられています。
スクリーンショットこそ撮りませんでしたが、シーン遷移の際に発生するトランジションエフェクトもかなりスピード感があって爽快で、一見の価値があります。
ぜひチェックしてみてください。
