印象的なグリッチエフェクトが多数出現! 空港について様々な視点から考えるサミット Wecargo のサイトがすごい
ベルギーにて11月開催
今回ご紹介するのは、Wecargo という空港に関係した様々な公演などが行われるサミットの特設サイトです。
背景の部分の多くが WebGL によるグラフィックスによって成り立っており、グリッチエフェクトを始めとする様々な演出が多数盛り込まれています。
ユーザーのマウス操作やクリック操作によって劇的に変化するシーンは非常に見応えがあります。
リンク:
Airport Innovation Lab & Summit | Wecargo
細かいところまでよく観察してみよう
今回のサイトは WebGL による描画と DOM との連携が素晴らしくて、本当に両者の切れ目がないというか、素晴らしい一体感が見る人を圧倒するようなサイトだと思います。
トップページ部分というか、まずロードが完了したあとのイントロ演出がすごく良く出来ており、最初からグリッチエフェクト全開で目に飛び込んできます。
トップページ部分でも、絶えず背景が変化し続けるようになっていて、ノイズを活用した独特なビジュアルになっています。
上の画像だと、ちょうど「LIEGE AIRPORT」と書かれている部分に、なんかブロック状のちょっと色が明るい部分があると思うのですが、こんな感じでブロック状のグリッチノイズが絶えず画面に現れるようになっています。
また、同じページにある「Get tichkets now」と書かれたボタン、あるいはページ最上部にあるリンク文字など、あらゆるものに対してシームレスに演出が発生するため、いったいどこまでが DOM で、どこからが WebGL なのかが一見しただけではわからないですね。
このような WebGL っぽさをうまく隠蔽する実装ってすごく大変だと思うので、その時点でだいぶ驚きます……
また、この上の画像を見ると、真ん中の写真が縦に細かくブレてしまったようなノイズが乗っているのがわかると思います。
このようなノイズの演出が乗っていることからもわかるかと思いますが、素直に画像がそのまま配置されているという状況はほぼなくて、すべて WebGL によってレンダリングされたグラフィックスで表現されています。
静止画ではわかりにくいですが、画面上のあらゆるグラフィックスは時間の経過と共になにかしらゆっくりと動くようになっており、インタラクティブな演出だけでなく、絶えず情報が更新されて可視化されています。
うーん、こだわりがすごいです……
カーソルのホバーによる演出や、クリック時のシーン遷移の演出などにも、とにかくノイズとグリッチがうまく取り入れられていて、本当に細かいところまでしっかりと作り込みがなされています。
個人的には、ページが切り替わるときの演出が「ただ単に始まって終わる」というのではなく、複数のアニメーションが複雑に組み合わさって「気がついたらページの内容が変わっていた」ように見えるのがすごいなと思いました。
どうしても、ページ遷移って「開始と終了」という2つの点をつなぐイメージで考えてしまいがちだと思うのですが、今回のサイトの場合はそのあたりのシーン遷移が芸術的な美しさに仕上がっていると思いました。
ぜひチェックしてみてください。