布が波打つような表現など柔らかなインタラクションが面白い Alexandre Frison de Isla さんのポートフォリオ

doxas : 2021-09-13 13:29:02

さりげなく、でも印象的な演出

今回ご紹介するのは、パリを拠点に活動しているフリーランスの web developer である Alexandre Frison de Isla さんのポートフォリオサイトです。

ベージュっぽいカラーリングですごく落ち着いた雰囲気に仕上がっており、ところどころに差し込まれる独特な WebGL 表現も良いアクセントになっています。

ページ遷移の際の演出にもこだわりが感じられる、味わい深いサイトとなっています。

今回のサイトは、いろいろな様式の存在する WebGL 実装のなかでも、DOM を CSS や画像などで装飾しているレイヤーと、WebGL のレイヤーとの、その境界が意図的に曖昧にされているタイプの実装だと思います。

ハッキリとここが WebGL で実装されていますね～という感じではなく、あちらこちらに、WebGL の演出が散りばめられているという感じです。

そのさり気なさみたいなものがすごく心地よいバランスになっていて、ごく自然な手触り感で仕上げられています。

ページがロードされた直後は、ポートフォリオサイトらしく手掛けた事例が紹介されているのですが、画面の右側にある歪んだようなスクリーンショットはまさに WebGL で描かれている部分ですね。

スクロール操作に連動して画像が切り替わるようになっているのですが、もともと斜めに歪んだ状態になっているので、その部分の画像が切り替わる際もなんか不思議な（ある種、見慣れない感覚の）質感になっていますね。

静止画ではわかりにくいのですが、布がゆらゆらと風に揺れるような、微妙なディストーションも掛かっています。

また、個別の事例詳細ページも一見しただけでは、WebGL が使われていることがわかりにくいのですが……

画像の部分は実は WebGL 実装になっているんですよね。

画面の左右両端に表示される矢印をクリックするなど操作を行うと、詳細ページ間でのページ遷移が起こるのですが、このときもノイズを利用したディストーションエフェクトのような効果を見ることができます。

全体的にエフェクト関係に適用されているトランジションに独特なゆったり感があり、デザインと動きが見事にマッチしているなと感じました。

ポートフォリオサイトって自分自身の顔のようなものですし、すごく性格や趣向が強く現れるタイプのウェブサイトだと思います。

もちろん感じ方はひとそれぞれだと思いますが、私個人は、今回のサイトを見て Alex さんはすごくオシャレで、ユーモアのある人なんだろうなと感じました。

割とどこにでもありそうで、かといって、ありきたりというわけでもない、独特な雰囲気の演出が多いなと思いました。特に、トップページの画像を斜めに歪ませるのとか、かなりユニークですよね。