いずれの作品もその高い完成度に驚かされる Patrick Heng さんのポートフォリオサイト
若き才能に思わず嫉妬
今回ご紹介するのは、WebGL 関連の作品をたくさん作っている Patrick Heng さんのポートフォリオサイトです。
ポートフォリオサイトなので、彼が手掛けた事例や、関わった事例が掲載されているのですが……
3D や 2D のいずれかに特化するということもなく、時には 3D で、時には 2D でと、用途や要求に応じてかなり細かく WebGL を制御できる点からも高い技術力を感じさせられます。
フランスのハイレベルな WebGL 系サイトの一角を担う、若き才能。どうやら彼も Gobelins 出身っぽいですね……
シンプルなのに心地よいデザイン
今回のポートフォリオサイトは、WebGL を利用していますが Pixi.js をベースにした 2D の表現が中心です。
ロード画面からして一風変わった作りになっていて、これはどうしてもキャプチャ画像では伝えられないので、ぜひ実際にサイトに行ってご覧いただけたらと思いますね。
ロード中から一貫してこのサイトの表現方法のひとつとして使われるのが、微妙にフォントの色をシフトさせる演出なのですが、これが見事なイージングアニメーションになっており、とても心地よいです。
アニメーションが徐々に収束して、イージングが静止状態になると一見普通の DOM だけで構成されたウェブサイトのような見た目になるのですが、インタラクティブに動く様子を含めて全体のデザインがなされており、本当にお見事。
傾くような動きと RGB シフトが同時に行われているが、いずれもアニメーションが心地よい動き。
全体的に大きな余白を設けた構成ですが、けして味気ない感じにはなっていません。
彼自身が About のページのところでも語っているとおりで、インタラクティブ性に非常に強いこだわりが感じられる、優れたデザインがなされています。
こういうサイトの表現の仕方って、理論や勉強でどうにかできるもの……なんでしょうか……
私はそういうことを(特に意識して)学んだことは無いのですが、それだけに、どうしてもこういう部分ってその人の持つ、持ち前のセンスみたいなものに思ってしまいます。
実際は、センスと技術の組み合わせなんだとは思うのですが、本当にアニメーションの心地よさと、それを邪魔しない適切な演出の組み合わせが見事です。
また、WebGL の使い方こそ控えめになりますが、About ページもなかなか興味深いです。
大きく自身の名前を配置した About ページでは、DOM に CSS で微妙に動きを加えつつ、スクロールが横方向に固定されたようなコンテンツの配置がなされています。
マウスボタンをホールドしながら、スワイプするように横に動かしてやると不思議な動きでコンテンツが流れていく様子が面白いです。
また、名前のところにある手紙のアイコン部分にもちょっとした仕掛けがしてあって、マウスをホバーしてやるとそれらを見ることができるでしょう。
この記事を書くためにキャプチャ画像を撮っていて気がついたのですが、トップページ部分の事例集のページと、About ページとでは、本当に微妙にですが背景の白の色合いが違いますね……
これは RGB をシフトさせる演出をより際立たせるための意図した背景色の変更だと思うのですが、デザイナーさんたちって(考えてみれば当たり前ですが)そういうところまで気を配ってデザインをされているのですよね……
私のようなデザインには一切知見のない人間からすると、本当に驚かされる部分ばかりで、圧倒的なレベルの差を痛感させられました。
Merci-Michel に所属し、世界でも一線級のウェブサイトを作り続ける若き才能を感じられる、そんなポートフォリオになっています。
ぜひチェックしてみてください。