WebGL と CSS フィルターを組み合わせたグリッチ表現がエモい Mika Pikazo 個展 REVENGE POP のウェブサイト
イラストの力強さがすごすぎる……
今回ご紹介するのは、Mika Pikazo さんというイラストレーターさんの個展、REVENGE POP のスペシャルサイトです。
Mika Pikazo さんは Twitter のフォロワーが 100 万人近いかなり著名なイラストレーターさんなので、ご存知の方も多いかもしれませんね。
今回のサイトは、オフラインで開催される個展のためにスペシャルサイトを公開しているという形なのだと思いますが、イラストの持つ力強さを損なうことなく、絶妙なバランスで組み込まれた WebGL 製のエフェクトを見ることができます。
リンク：
Mika Pikazo Exhibition “REVENGE POP”
あえて CSS のフィルターを使う表現
ページ全体を見渡したときのコンテンツ量（文章で記載されているもの）は最低限という感じになっていて、とにかく Mika Pikazo さんのイラストとそれらを組み合わせたアニメーションの迫力がすごいです。
その魅力を損なうことなく、効果的に演出にはどうしたらいいかということがすごくよく考えられており、WebGL のエフェクトはあくまでも脇役的に機能していますね。
スクリーンショットで見ても、イラストの持つパワーみたいなものが感じられるのではないでしょうか。
イントロの、ロードが完了した直後の演出では、ちょっとスクリーンショットでは見えにくいかもしれないですが、REVENGE POP という個展のタイトルが画面全体を覆うように重なっています。
しばらく時間が経つとこの画面全体を覆っていたレイヤーは消えて、グリッチノイズのエフェクトが掛かったタイトルロゴが現れます。
こちらはロゴが絶えずグリッチするアニメーションが適用されている他、背景のイラストの色味に応じてネガポジ反転のような効果が掛かるようになっていて、程よくシーン全体に溶け込みながら印象的なタイトルロゴとしてシーンを彩ります。
今回のサイトでは WebGL を使っていますが、演出には CSS も大きな役割を果たしています。
先程説明した、ロゴがネガポジ反転するような効果は WebGL やシェーダの機能ではなく CSS のフィルター効果を使って演出されていますね。
このあたりは無理に全ての演出を WebGL で行うのではなく、CSS で実現可能な部分はブラウザ側の制御に任せるというバランスの取り方なんだと思います。
スクロール操作を行うことによって画面右側から現れる波打つような文字の表現もシンプルですが派手すぎず、ちょうどいいアクセントになっているなと思いました。
スペシャルサイト全体のコンテンツ量はけして多くありません。いわゆる LP のように、トップページがそのまま１つのサイトとして機能するようになっています。
この一種限られた空間のなかに、Canvas が２枚、用途に応じて WebGL が使い分けされており、さらに CSS を駆使したエフェクト、トランジション、スタイリングがなされています。
イラストレーターさん自身の作品の持つ魅力を変に削ぐことも、また過剰に演出することもない、こういう程よいバランスでの WebGL の使い方はむしろかなり難易度が高いと感じます。
細かく観察すればするほどその凄みを感じることがウェブサイトです。
ぜひチェックしてみてください。
