掲載事例の量だけを見てもすごいのだが……Clément Chenebault さんの平面と立体を感じさせる見事なポートフォリオサイト
とにかくよく動き、そして見やすい
今回ご紹介するのは Clément Chenebault さんのポートフォリオサイトです。
Clément Chenebault さんは Pixi.js の生みの親でもある Goodboy Digital に所属してらっしゃるようで、今回のサイトは同僚と一緒に作ったものみたいですね。
グリッド状に区切られた形でたくさんの事例が掲載されており、その量だけを見ても彼が多くの事例に関わってきたことがわかります。
さらに、サイトのインタラクティブでダイナミックな動きの数々にはたくさんの驚きと楽しさが込められており、非常に楽しいポートフォリオサイトとなっています。
ぐりぐりと紙や布のように引っ張って動かせる
今回のサイトは、一見すると等間隔にタイルが並べられたような感じに仕上げられており、そのマス目のひとつひとつが何かしらの事例や、ポートフォリオの主である Clément Chenebault さんについて説明した一種のカードのような役割になっています。
ランダムに配置された一枚一枚のカードには、アイコン調のイラストが描かれているものと、事例のスクリーンショットが使われているものとがありますが、アイコン調のイラストのほうは一般的なポートフォリオサイトでいうところの About ページのように、彼自身を紹介するような内容になっています。
まずこのコンテンツの見せ方としてのデザインが特徴的ですよね。
さらに、マウスカーソルをクリックしたままホールドして、ドラッグ操作を行ってやると……
これ、わかりますかね……
カーソルが映り込んでいないのでちょっとわかりにくいかもしれませんが、グリッド状に並んだマス目が歪んでいるのがわかると思います。
まるで紙や布など、柔らかい素材を手のひらで掴んだかのような、ギュッと潰れるというか、縮むような、そんな動き方をするようになっています。
さらに引っ張ってそのままカーソルを動かすと、無限にスクロールして次々とタイル状のマス目が現れ、非常にたくさんのコンテンツが絶え間なく目に飛び込んできます。迫力もありますし、すごくいいですね。
また、各コンテンツのカードはクリックすることでリンクを取得したり、詳細な説明を見たりすることができるようになっています。
もしも、コンテンツが混在しすぎていてよくわからないぞ? と思ったら、画面の左上にあるチェッカーマークのアイコンをクリックしてみましょう。
すると、各カテゴリごとに分類して、一部だけをフィルタリングして表示することができるカテゴリ選択ページが出てきます。
いわゆる普通の About ページが用意されていない代わりに、こうしてカードの種類をフィルタすることでコンテンツを集約し、ひとつの大きなコンテンツ群として表示するわけですね……
これはほんとによく工夫されています。
今回のサイトの実装は、WebGL を使ったスムーズなレンダリングで非常にダイナミックなビジュアルを実現していると同時に、それに完全に重なるように DOM を操作しつつ、ユーザーが自然とコンテンツに身を委ねられるように工夫されています。
最初は少し雑然と感じるかもしれませんが、コンテンツをカテゴリごとに分類することができたり、事例を紹介するのではないパーソナルなカードに対してはアイコンを一貫して利用しているなど、デザインとしての品質の高さも目を見張るものがあると思います。
動きもシンプルながら大胆で、本当によく出来てます。
ぜひチェックしてみてください。