繊細さと大胆さが共存する流体表現が見る者を魅了する Arnaud Rocca さんのポートフォリオサイト
派手なだけじゃないよ！
今回ご紹介するのは Arnaud Rocca さんのポートフォリオサイトです。
クリエイティブデベロッパーとして活動されている方のようで、たしか以前にも、当サイトでポートフォリオサイトを紹介したことがあったような気がします。
今回のサイトでは流体エフェクトを上手に活用したトップページがあり、非常に完成度の高い仕上がりとなっています。
リンク：
Arnaud Rocca — Freelance creative developer
動きに対するこだわりを感じる
今回のサイトはトップページ部分に WebGL による派手めな流体表現が実装されているのですが、サイト内の各事例ページなど、場所によっては WebGL を使わずに実装されている部分も多くあります。
全体的に、WebGL を使っているかどうかにかかわらず動きに強いこだわりが感じられ、すごく丁寧に作り込まれています。
トップページ部分はユーザーがなんの操作もしなくてもエフェクトが発生するようになっています。
この上のスクリーンショットは、ページのロードが終わった直後のイントロ演出なのですが、真っ黒な背景にふわりと光が差すように色彩が広がります。
インクが滲むような感じともまた違った独特な質感があっておもしろいですね。
トップページ部分は時間の経過と共に事例がどんどん切り替わっていくようになっていますが、ユーザーがカーソルを動かすことで流体エフェクトを発生させることもできます。
流体エフェクトにも厳密には２つの種類があります。
１つはカーソルを普通に動かした場合。このときは、小さめの波紋が出るだけであまり大きく像が歪んだりはしません。
ただもう１つのパターンとして、マウスのボタンを押したままカーソルを動かしてやると、つまりスワイプのような操作をしてやると、より大きな波紋が発生します。
いわゆる普通のカルーセルインターフェースのように水平方向のスワイプで事例が切り替わるのですが、流体エフェクトのほうがあまりに見た目のインパクトが強いので、スワイプで事例が切り替わっていることが若干伝わりにくいかもしれません。
ユーザーが操作をしなくても自動的に発生するエフェクトと、ユーザーが操作をしたときにインタラクティブに発生するエフェクト、どちらも非常にビジュアルとしてのインパクトが強いです。
視覚的には非常に派手でかっこよくて、完成度も高いですね。使いやすさや UX みたいな意味で言うと、意見は分かれる場合があるかもしれません。
個人的には、こういう派手なエフェクトってすごく好きです。だってシンプルに、かっこいいじゃんって思います。
ぜひチェックしてみてください。
