タイプの異なるディストーションエフェクトとインタラクションがおもしろい Studio375 のウェブサイト
色を用いたさまざまな表現
今回ご紹介するのは Studio375 というスタジオのウェブサイトです。
たぶんウェブのデザインや制作を行うスタジオだと思うのですが、色の使い方に独特なセンスを感じる演出が多く、すごく興味深いです。
いわゆる UV を操作する系のエフェクトが使われているかんじだと思うのですが、工夫が凝らされていておもしろい演出が多いです。
リンク：
Studio375 | Communications, Web, and Graphic Design Agency | Vicenza
カーソルに連動するものとスクロールに連動するもの
今回のサイトの演出には、カーソルに連動するタイプのものとスクロールに連動するタイプのものがあります。
ページを開いて最初に表示される冒頭シーンは、カーソルに連動するタイプのエフェクトが用意されており、カーソルが動くことでかなり大胆に見た目が変化します。
いわゆるブロック状になった領域ごとに UV がズレる感じの演出ですね。
この演出、ブロック状のディストーションのほうに目が行ってしまいがちですが、たぶんグラデーションがゆったりと時間を掛けて変化するようになっていて、完全なモノクロともカラーとも違う独特な質感を持っています。
また、スクロールしていくと現れる別の領域では、ブロック状のディストーションは起こらなくなるのですが今度はスクロールに連動したエフェクトが発生するようになっていて芸が細かいんですよね。
スクロールに連動するタイプは、画面の下のほうに限定したディストーションが発生するようになっています。
ちょっと静止画で見るとわかりにくいかもしれませんが、画面の画角のなかに画像が入ってくると、その下端の部分にのみ RGB ディストーションが発生するような感じです。
これ結構見たことない感じですごくおもしろい演出だなと思いました。
その他にも、細かい部分ですがスクロールに連動して黒い領域が広がってくるような見せ方や、カード状のオブジェクトがパッと散らばるような演出など、視覚に訴えかけるような演出が多く実装されています。
あえてモノクロの画像や映像に対してグラデーションエフェクトを掛けてみたり、スクロールに連動して RGB ディストーションが収束していくような演出をしてみたり……
すごくビジュアルに工夫を凝らしたウェブサイトになっていておもしろいです。
今回のサイトの演出に使われているような WebGL の処理って、いまだと AI とか使ったらサクッと実装できてしまうものなんでしょうか？ というのも、今回のサイトの演出にケチを付ける意図はまったくないのですが、最近こう…… もう少し手作業で詰めてやればもっとよくなるのになと感じる演出が増えてきている気がします。
言われるがままにそのままウェブサイトに盛り込みました、みたいな WebGL 実装が増えているように感じるんですよね。まあ単にわたしの気のせいかもしれないですが……
一方で今回のサイトの場合はすごく演出の１つ１つに凝った作りで、すごくおもしろいなと感じました。
ぜひチェックしてみてください。
リンク：
Studio375 | Communications, Web, and Graphic Design Agency | Vicenza
