柔らかくゆっくり流れるようなどこか有機的な動きがおもしろい Eric Huguenin さんのポートフォリオサイト
ちょっとめずらしい触り心地
今回ご紹介するのはクリエイティブ・デベロッパーとして活動されている Eric Huguenin さんのポートフォリオサイトです。
WebGL ならではの複雑な変形効果を演出に盛り込んでおり、これがなかなか見事な質感を表現しています。
サイト全体としての完成度も高く、見ていてすごく心地よいウェブサイトです。
リンク：
Eric Huguenin — Creative Front-End Developer - Freelance
ほどよく丸みを帯びたスタイリング
今回のサイトのデザインは、角を取ったような形というか、直線と曲線を上手に組み合わせた表現が特徴的です。
この曲線的な柔らかい印象は WebGL の演出にも盛り込まれていて、線形にまっすぐ歪ませたり変化させたりという感じよりも、どこか有機的な印象を受ける効果が意識的に実装されている感じがします。
トップページはそのまま works を並べた一覧にもなっており、それぞれの事例のスクリーンショットが縦に連続して配置されています。
トップページ部分でスクロール操作を行ってやると、下のほうから各種事例のサムネイルがせり上がってきます。
このとき、それぞれの画像がまるで柔らかい布かなにかのようにゆるっと変形します。
これ静止画で見ていてもちょっと伝わりにくいかなと思うのですが、波打つような動きは程よいゆったり感で変形するようになっていて優しい手触りです。
中途半端な位置でスクロール操作をやめた場合も、画面の中心に一番近い事例がスッと動いて、中央に収束するように動きます。
この事例が中央に配置された状態になると、それに連動して背景色も変化するようになっていて静と動を上手に活用してコンテンツの閲覧体験が組み立てられている感じがします。
ここでもやっぱりカーソルを事例のサムネイル画像の上にホバーさせると波打つようなホバーエフェクトが発生するようになっていて、演出に一貫性がありますね。
WebGL を用いた事例に限った話ではありませんが、演出というのはいろんな視点で多面的に見てみるとさまざまな発見があったりします。
今回のサイトでは、要素の角を丸く面取りするような感じでスタイリングしつつ、そこにマッチするような優しく柔らかいインタラクションを組み合わせています。
さらに言えば、付与されているモーションのスピード感やそれが収束していく際のトランジションなど、あらゆる部分が綿密に計算されているような印象を受けました。
ぜひチェックしてみてください。
