独特なディストーションエフェクトがグリッチとも違う雰囲気を醸し出す I-Creativ Studio のウェブサイト
なんとも言えない不思議な歪み
今回ご紹介するのは I-Creativ Studio というクリエイティブスタジオのウェブサイトです。
WebGL を使って独特な演出を行っているのですが、唯一無二というか、他のサイトでは見たことがないような個性的なディストーションエフェクトが実装されています。
そんなに派手な感じというわけでもないのですが、不思議と惹きつけられます。
リンク：
Design & Web Development Studio | Digital Artisans | I-Creativ Studio - Web Design and Development
統一感ある見せ方
今回のサイトでは画像が登場する多くの場面で、WebGL を利用したディストーションエフェクトが用いられています。
インタラクティブな表現でもありつつ、画像全体に効果が及ぶ瞬間も結構あって、動いている様子が視界に入るとかなり目を引きます。
RGB ディストーションが同時に適用される場合もあり、いずれも視覚効果としてはなかなか迫力があります。
なんか自分で書いていても若干矛盾しているような気がしないでもないのですが、目を引く演出でありながら派手という感じではない絶妙な味付けになっているんですよね。
カーソルが動いたときや、スクロール操作で画像が初めて画面内に入ってきた瞬間など、特定のユーザーの操作に反応するなどして瞬間的に演出が起こりますが、あまり余韻が長いわけではないのでそれでどこかスッキリした印象が残るのかもしれません。
なにか理路整然と組み立てられた印象を受けるのは、サイト全体のレイアウトのせいもあるかもしれないです。
ディストーションする際には、グリッチエフェクトとも違うどことなくソリッドな模様が見えます。
また、画像の上に細かい斜線が並んだようなレイヤーが重なっていることもあったりして、ほんとになんか不思議な空気感なんですよね。
こういう個性の出し方もあるんだなと興味深く感じました。
キャプチャこそ掲載していませんが、ページが切り替わる際のトランジション演出なんかもかなりかっこよくて見応えがあります。
ディストーションエフェクトは WebGL の技術的な側面から言えば全然難しいことをしているわけではなく、どちらかというと入門者向けのテクニックをちょっと発展させたようなものだと想像します。
その割に、どうしてこんなに個性的な印象を受けるのか、他とは全然違った固有の雰囲気があり、そのあたりを気にしつつじっくり観察してみるといろんな発見がありそうです。
ぜひチェックしてみてください。
リンク：
Design & Web Development Studio | Digital Artisans | I-Creativ Studio - Web Design and Development
