
楽しい仕掛けとポップなテイストがおもしろいクリエイティブデベロッパー Adrien Lamy さんのポートフォリオサイト
遊び心たっぷり
今回ご紹介するのは、クリエイティブデベロッパーとして活動されている Adrien Lamy さんのポートフォリオサイトです。
赤いビビッドな背景色と可愛らしいイラストが特徴的なウェブサイトで、いわゆる普通のウェブとは異なる、いい意味で個性が前に出ている事例なんじゃないかなと思います。
楽しい仕掛けがたくさんあるので、この記事内のスクリーンショットを見てしまう前に、ぜひその目でサイトに行って体感してみてください。
リンク:
カーソル連動のエフェクトもやっぱり個性的
今回のサイトは全体的に WebGL が活用されていますが、3D 的な技工を凝らしたものという感じではなく、2D のエフェクトや質感、あるいはインタラクティブ性のために WebGL を活用している感じがあります。
たぶんですが、人物の顔(おそらくご本人を模したもの)を構成するパーツが WebGL によってスプライト的に描かれており、それを動的に切り替えたり、カーソルの位置に応じて動かしたりしているのだと推測します。
カーソルをぼんやりと動かしているだけでも本当におもしろいです。

静止画ではどうしても伝わらない触り心地みたいなものがあって、それが本当に秀逸なんですよね。
また、カーソルをただ動かすだけでなく、クリックしたままホールドしつつ動かしてやると、まるでマスク処理みたいな効果が発動するようになっています。
人物の顔の部分やメッセージの一部が変化するようになっていて、これもぜひ実際に動いている様子を見てみることをおすすめします。

その他にも、画面の右側にある手のイラストは指をつまんで引っ張ることができるようになっていて……
ある一定以上の量を引っ張ってやると About ページのようなポップアップが画面内に引き込まれてきます。
このあたりの一連のインタラクションやモーションもすごく丁寧かつ心地よく仕上げられており、すごくいい感じです。

どう形容したらいいのか、わたしの語彙力では表現しきれないところがあるんですが、なにかこう…… 日本で言えば教育番組向けのコンテンツを触っているかのような、独特でポップな質感が本当にすごいです。
こういう感じのコンテンツって、触っている側はごくごく自然に見過ごしてしまいがちなんですが、実際に自分で作ってみると「自然と受け入れられるモーションやインタラクション」って実はすごく難易度が高いものであることがわかります。
おそらくそういう発想や経験を持っている方であれば、今回のサイトはすごくびっくりするところがたくさんあるんじゃないでしょうか。
ぜひチェックしてみてください。