すごく気持ち良い質感のビジュアルで思わずカーソルを動かしたくなる Haoqi Wen さんのポートフォリオ
こだわりのディストーション
今回ご紹介するのは Haoqi Wen さんというエンジニアの方のポートフォリオサイトです。
デザインも開発もなんでもできるタイプの方なのかなという感じがしますが、今回のポートフォリオサイトもデザイン的にも技術的にも非常におもしろい内容になっています。
カーソルを動かしたときのディストーションが素晴らしくて、ついついカーソルをブンブンと動かしたくなりますね。
リンク：
突き詰めていったその先
今回のサイトでは、いろんな意味でビジュアルやインタラクションにこだわりが感じられます。
言葉でテキストとして説明しても、なかなか伝わらないんじゃないかなという感じがしていて、実際に見て・触ってみてもらうのが、一番いいような気がします。
サイトのトップページ、冒頭のキービジュアルからその素晴らしさは誰もが感じると思います。
半透明の文字をかたどったオブジェクトは、後ろにステッカー状のスプライトが重なるとその様子が屈折しつつ透けて見えます。
この透けた感じもすごくいいんですが、そこにカーソルを動かしたときのエフェクトが重なって、より不思議な質感になっていますね。
流体というのとも違うし、よく見るタイプのディストーションエフェクトとも違うし、ディストーションとモーションブラーを合体させたような雰囲気で、とても個性的な質感の演出になっています。
事例を紹介するセクションでも、スクリーンショットではちょっと伝わりにくいと思いますが、画像が立体的に湾曲するような表現が入っています。
基本的に演出が多いというか、そのまま DOM を置いただけのスタティックなシーンは少ないのですが、かといって、うるさいという感じは全然しないですね。
このあたりも、すごく丁寧に味付けされているからこそのものなんだろうなと個人的には感じました。
物理的なレンズにクロスフィルターをつけたときみたいな、独特な光の表現も非常におもしろいですし、ビジュアルに個性というか、味みたいなものがあるんですよね。
いわゆるディストーションさせる、とか、屈折して後ろが見える、みたいなのはいまどき全然珍しくないのですが、やっぱり人間が細かく作り込んだものには一種の神がかった個性が宿るのだなということを、あらためて感じさせてくれる事例です。
すごく完成度が高くて、参考にできるところも多そうです。
ぜひチェックしてみてください。
