すごくポップで軽快な味付けのインタラクションがすてきな John Jattoh さんのポートフォリオサイト
サクサクとテンポよく
今回ご紹介するのは、Product Designer の John Jattoh さんのポートフォリオサイトです。
サイトのタイトルに Product Designer という肩書のほかにも UX/UI Specialist とも記載があるので、開発者というよりはデザイナーさんという感じだと思います。
今回のサイト上からはなんとも個性的な方なんだろうなという雰囲気が伝わってくるのですが、各種インタラクションもスイスイとスムーズで、非常に軽快に閲覧することができるようになっています。
リンク:
John Jattoh - Product Designer | UX/UI Specialist | Design Strategist
クリッカブルな要素が実は結構ある
今回のサイトは、スクロール操作で上から下に向かって見ていくようなレイアウトなのですが、ぐいぐいと勢いよくスクロールしてしまうと、あっという間に下端に到達してしまいます。
一見、コンテンツ量が少ないようにも感じるかもしれませんが、実際はクリックできる要素が結構あります。
意図的に隠されているというわけではないのかなと思いますが、ちょっと宝探し的なおもしろさもあって、そういうところもユニークだなと感じます。
ご覧のとおり、ファーストインプレッションからしてもう普通じゃない感じが(もちろんいい意味で)出てますよね。
カーソルの位置を追従するように頭がぐいぐいと動くのですが、手の指先など、自動で定期的にアニメーションし続けている部分もあります。
スクロールすることで違った 3D シーンが出てくるのですが、それぞれのシーンごとにインタラクションは個別に設定されていて丁寧な感じ。
パーティクルの効果などもあって、視覚的な情報量は終始多めです。
冒頭の方にも書きましたが、結構クリックできる部分はたくさんあるのですが、そこまで大きな文字で書かれているわけではないことや、どうしても背景の大迫力な様子に視線が持っていかれる感じがあって、初見では通り過ぎてしまうこともあるかもしれません。
パスワードを入力しないと見ることができないコンテンツなどもあって、ほんといい意味で遊び心にあふれたポートフォリオだなという感じがします。
サイト内のあらゆる動き、インタラクションなど、結構全体的にイージングの掛け方なんかもシュッとしていてスピード感や爽快感が強い味付けです。
トップページのファーストビューの印象が、もしかしたら見る人によっては、ふざけた感じに見えてしまうことがあるかもしれません。
でもサイト内をじっくりと見てみれば、実際にはかなりしっかりとした作り込みがされた、工夫の凝らされたウェブサイトであることがわかると思います。
BGM は初期状態ではオフになっていますが、個人的には再生した状態で見てやったほうが雰囲気がさらに良くなるなと感じました。
ぜひチェックしてみてください。
リンク:
John Jattoh - Product Designer | UX/UI Specialist | Design Strategist