さりげなく散りばめられた演出がどれも個性的でおもしろい Clément Arzoumanian さんのポートフォリオ
派手さよりもさわり心地
今回ご紹介するのは Clément Arzoumanian さんというデザイナーであり開発者でもある方のポートフォリオサイトです。
UI デザイナーと開発者を兼任されている方みたいなのですが、サイトのデザインもどこか洗練された感じがあっておしゃれです。
演出もいくつか盛り込まれているのですが、派手さを強調したものというよりはさわり心地の良さを追求したような感じでスマートに仕上がっています。
リンク：
ほどよいインタラクションを楽しもう
今回のサイトの演出には、あまり一貫性みたいなものはありません。
いや、わたしが感じ取れていないだけで実際には一貫性のあるなにか仕込みがあるのかもしれませんが、少なくともいくつかの演出のそれぞれの方向性はかなり違います。
トップページはスクロール操作はできませんが、画面左側に並べられた事例の部分にカーソルをホバーさせるとモザイクを用いたトランジションを見ることができます。
このモザイクっぽいトランジションがすごくおしゃれな感じでかっこいいですね。
さらに、カーソルを画像の上に持っていくとノイズを用いたホバーエフェクトが発動するようになっているのですが、モザイクのトランジションとは全然印象の違うビジュアルになっています。
これだけ印象の違うグラフィックスなのに、派手さが抑えられているからなのか、あんまりチグハグな印象を受けないのが不思議です。
また、スクリーンショットを見比べてみてもらうとわかると思うのですが、背景の色が明るいブルーから暗い濃紺のような色に変わっています。
よく、サイトにダークモードとライトモードが実装されているのを見かけますが、今回のサイトにはさらにブルーを加えた３パターンが用意されている感じですね。
About ページに相当する Bio のページではパーティクルを使った表現がされていたり、ここでもやっぱり絵の方向性がまったく違う演出が使われています。
パーティクルが固まって写真になるという演出なのですが、カーソルを動かすとダイナミックにパーティクルが散らばるようになっていて、これもなかなか個性的な演出だなと思います。
全体的に WebGL を活用していろんな演出をしているのに、それぞれのトーンが比較的落ち着いているために、あまり散らかった印象を受けないのがおもしろいです。
各種事例の詳細を記した下層ページでも、モザイクを使ったトランジションエフェクトがあったりして、非常に凝った作りになっています。
ぜひチェックしてみてください。
