美しくスムーズなトランジションとエフェクトのセンスが光る YOKAI’S RECORD のウェブサイト

doxas : 2023-01-27 13:08:31

世界観にピタッとハマる演出が見事

今回ご紹介するのは、YOKAI'S RECORD というプロジェクトのウェブサイトで、こちらはどうやらアーティストの waboku さんが手掛ける妖怪をテーマとしたイラストのコレクションのようです。

このイラストのコレクションが NFT として販売されるというのがプロジェクトの大枠かと思いますが、それらのイラストを活用した WebGL の表現がすごくかっこよく演出されており、見ごたえがあります。

各種トランジションのユーザーの操作に応じたインタラクティブな演出が秀逸です。

今回のウェブサイトは、ウェブサイトのドメイン的には psy-clone.jp となっていて、こちらはデジタルアートのために創設されたオンラインギャラリーのようです。

そのオンラインギャラリーの展示の１つとして、今回の waboku さんの一連のコレクションが掲載されている、ということなのかなと思います。

サイトに行くとハブとなるトップページが表示されますが、ここからまずコレクションのいずれかを選択した上で、各作品にアクセスするという構造になります。

トップページでスクロール操作を行うと、記事執筆時点で３つあるコレクションが次々と現れます。

この上の画像は、コレクションが切り替わる瞬間をキャプチャしたものなのですが、UV をずらして画像を歪ませる効果と、それぞれがフェードイン・フェードアウトしながらスッと切り替わる効果が複合的に用いられた、独特なトランジションエフェクトを見ることができます。

静止画としてキャプチャしてしまうと…… なんというかなにが起こってるのかまあわからないと思うのですが、実際に動く様子はスピード感もあってかなり気持ち良い感じに仕上がっていますね。

コレクションを選択すると、そのコレクションに含まれる作品群をスクロールしながら一気に見ることができるモードへと切り替わります。

このシーンが切り替わる際の演出などでノイズを活用したエフェクトが出てくるのですが、これもめちゃくちゃバチッとキマっていますね。

まるで染みが広がるようにノイズを使ったマスクが徐々に消えていくような感じなのですが、なんというか文章ではその魅力や面白さを伝えるのが難しいですね……

ぜひ、実際にサイトに行って見てみてもらえたらと思います。

イラスト作品は縦に螺旋状に並べられており、スクロール操作で次々と作品を閲覧していくことができます。

作品数自体がかなり多く用意されているので、単純にイラストを楽しむという意味でも結構なボリュームを味わうことができるでしょう。

妖怪をテーマにした、特徴的なタッチのイラストが主題のウェブサイトということもあり、ノイズを上手に活用した各種演出が本当にいい意味でマッチしています。

また各演出のトランジションのスピード感、余韻の長さ、明暗などのコントラストの付け方なども絶妙で、触っていて心地よいと感じるような味付けになっているなと個人的には感じました。