立体的なレイアウトが独特なユーザー体験を生み出す Robin Noguier さんのポートフォリオ
2D と 3D を変幻自在に行き来する
今回ご紹介するのは、フランス在住のフリーランスのデザイナー Robin Noguier さんのポートフォリオサイトです。
当サイトで過去に紹介したことがある WebGL 事例にも複数携わっていた方のようで、WebGL を利用したウェブサイトのデザインスキルにも優れたデザイナーさんみたいです。
今回のサイトでも 3D 的な表現が使われており、しかもそれがシームレスに 2D へと移行する場面はスムーズで非常に見事です。
リンク:
Robin Noguier - Interactive Designer
次元を越える動きを観察してみよう
今回のサイトを最初に開いた瞬間には、黒い背景で描かれるイントロ演出が発生します。
画面の奥の方から滑るようにサムネイル画像が登場するのですが、一番先頭の画像が画面に収まった状態になると、そこからスルッとサムネイル画像の位置が変化して、記事冒頭のスクリーンショットと同じ状態になります。
言葉で書くとちょっとわかりにくいと思うのですが、実際に動く様子をサイト上で見ていただくと、心地よいアニメーションになっていることがすぐにわかると思います。
イントロシーンでは、画面の奥からスルスルと流れるようにサムネイル画像が現れる。
トップページが完全に表示されたアイドル状態になると、サムネイル画像が右側に、少し傾いた姿勢で並んだ状態になります。
左側には大きめのフォントサイズでタイトル、小さめのフォントサイズで概要が記述されており、とてもおしゃれな雰囲気に仕上がっていますよね。
右側に並んでいるサムネイル画像は、単純に板ポリゴンにテクスチャを貼り付けたもの、というよりは、空間を切り取って窓越しに別の空間を覗いているような感じです。
実物はゆっくりと動いているのですが、そういった細かな動きの部分も含めて、とても落ち着いた雰囲気です。
これらのトップページに並べられた事例は、OPEN CASE STUDY と書かれた部分やサムネイル画像の部分をクリックすると、より詳細な個別ページへとシーンが遷移します。
このときの遷移アニメーションが実によくできていますね……
今まで傾いたような姿勢をしていたサムネイル画像が、スッと動いて画面の中央に移動、さらに平面的なレイアウトにピタッと収まった状態になります。
これも言葉で説明すると野暮ったい感じですが、実際にサイトでご覧いただくと、そのスムーズな流れるような動きの心地よさを体験できると思います。
今回のサイトでは、デザインの素晴らしさやインタラクティブ性の高さはもちろんなのですが、事例ごとにテーマカラーが美しく別れていたり、またそのテーマカラーに応じて favicon が変化したり……
いろんな遊び心も盛り込まれていて、とにかく完成度が高いサイトとなっていますね。
Robin Noguier さんご自身がデザインされたサイトなのかなと想像しますが、本当に 2D 的な表現と 3D 的な表現のバランスが良く、空間的な広がりの感じられるハイレベルな仕上がりになっています。
ぜひチェックしてみてください。