
ゆるくじわっと発生するディストーションエフェクトが心地よい Rodolfo Sarno さんのポートフォリオサイト
なんとも言えない不思議な質感
今回ご紹介するのは、Rodolfo Sarno さんという UI デザイナーさんのポートフォリオサイトです。
デザイナーさんらしい、というのも変ですがとにかくスタイリッシュでかっこいいウェブサイトとなっています。
WebGL は演出上のアクセントとして上手に盛り込まれていて、派手すぎない、ほどよいインタラクティブ要素として機能を果たしています。
リンク:
使うべきタイミングで適切に
今回のサイトでは WebGL はそこまで中心的な役割を担っていません。
演出を行う上での最低限のアクセントとして、さりげなくそれが盛り込まれているという感じがします。
ロードが終わって表示されるのが works のページで、これがトップページを兼ねている形なのですが、そのトップページ部分でのみ WebGL の演出を見ることができます。
この静止画のスクリーンショットを見ても、どの部分にエフェクトが発生しているのかほとんどわからないかもしれません。
先述したとおり、今回のサイトの演出は必要最低限という感じで、それほど派手に味付けされているわけではないんですよね。
ただ、実際に動いている様子はなかなか印象的なビジュアルをしていて、カーソルが動いた位置にほんのわずかな RGB ディストーションが発生するようになっています。
この上のスクリーンショットでは、中央に置かれた画像の白いラインが歪み、RGB のそれぞれの色が別々に描かれているのがわかりやすいと思います。
このディストーション、ゆるっと優しく空間がわずかにずれるような感じの動きになっていて、派手ではないですが手触りというか質感が素晴らしいです。
サイト全体のデザインが余白を上手に活用したスマートな雰囲気なので、WebGL エフェクトのテイストもこれにマッチするように調整されているのだろうなと思いました。
フォントによる表現と、余白による表現、さらにインタラクティブな表現など、あらゆるものに意味や役割があるかのようで、すごく美しいウェブサイトだと思います。
RGB ディストーションは WebGL では王道的でよく見かける表現ですが、そのインタラクティブ性の味付け次第で本当にさまざまな質感を表現することができますね。
今回のサイトの場合は全体のトーンの統一感が素晴らしく、WebGL もまさにサイトと一体となって機能しています。
ぜひチェックしてみてください。