タイル状に分割された空間が織りなすディストーションの魔法！ Zerotrillion のウェブサイトがおもしろい
素材もいいんだよな
今回ご紹介するのは Zerotrillion というクリエイティブ・エージェンシーのウェブサイトです。
そこはかとなく漂うこの洗練されたおしゃれさ…… これはいったいなんなのか？ わたしの語彙ではうまく言語化することができません。
ただわかるのは、まず写真や動画などの素材がとてもいいですね。さらに言えば、そこに適用されている WebGL のエフェクトも大変素晴らしい質感です。
リンク：
こういうガラスは誰もが見たことあるはず
今回のサイトに出てくる WebGL のエフェクトには大きく分けて２つのパターンがあります。
１つ目は、サイトの冒頭にあるキービジュアルでも用いられている「カーソルを動かすとタイル状に UV がずれる」という表現です。
こちらはサイト内のあらゆる画像に対して同様のエフェクトが適用されており、とても統一感のあるベースとなる表現になっています。
この上のスクリーンショットを見ていただいてもエフェクトの効果はほとんどわからないかもしれません。一応、右側の花のあたりが段差のようにズレているのはよく見ればわかるかも……
画面内を小さなタイル状に区切り、カーソルが通過したその軌跡の部分にだけ像がずれるようなエフェクトを掛けている感じですね。
この手の UV がずれるエフェクトって昨今よく見かけるようになりましたが、サイト内をスクロールしていくと現れる画像が出てくる瞬間のエフェクトの方は、逆にあまり見たことのない、なかなか芸術的な仕上がりです。
ちょっと野暮かなとは思いましたが、エフェクトの途中経過をスクリーンショットとしてキャプチャしたのがこの上の画像です。
これ、静止画で見るとなにが起こっているのかわかりにくいと思うのですが、タイル状に区切って UV をずらす、という基本的な原則は１つ目のパターンと同じでありながら、疾走感のある非常にかっこいいエフェクトに仕上げています。
同じタイプの演出なのに手触りが全然違っており、すごく印象的でかっこいいです。
サイト内の写真素材や映像素材がどれもセンスよくて、それがサイトの雰囲気をだいぶ強く下支えしている感じがします。
加えてそこにインタラクティブな WebGL の演出が適用されていることで、動的な楽しさや驚きがプラスされてより印象的なウェブサイトになっています。
特にスクロールに連動して画像が表示される瞬間のエフェクトは、やっていること自体はすごくシンプルなんですがめちゃくちゃかっこいいです。
このあたりは、イージングの掛け方や画像をずらす量の調整など、言葉で簡単には言い尽くせない工夫が無数に凝らされているのだと感じました。
ぜひチェックしてみてください。
