輝かしい数々の実績と相変わらずのハイクオリティ実装が素晴らしい Patrick Heng さんのポートフォリオサイト

doxas : 2020-07-16 13:57:57

あらゆる要素が生き生きと動く

今回ご紹介するのは、WebGL 界隈ではめちゃくちゃ有名なクリエイティブ・デベロッパー、Patrick Heng さんのポートフォリオサイトです。

過去に、何度か氏の手掛けた WebGL 実装を当サイトでも紹介してきていますが、今回も相変わらずのハイクオリティな仕上がりで、本当に素晴らしいです。

ちょっと触ってみれば、すぐにこのサイトの凄さがわかる、誰にとってもシンプルに楽しいと感じられる、そんなポートフォリオサイトとなっています。

今回のサイトでは、WebGL をあらゆる場面に活用しつつビジュアルを表現しています。

DOM がまったく無いということではなく、クリッカブルな要素などは適宜 DOM を使って実装している箇所もあります。

全体的に、今回のサイトの場合は 2D での表現を中心にしています。

また、主にシルエットで描かれるオブジェクトが登場する形なので、陰影や明暗といった質感の変化というよりは、そのシルエットを動かしたり歪ませたりすることで様々な状態変化を表現していますね。

この上の画像を見ると、画面のやや右寄りに置かれている球体のエッジが、微妙に歪んでいるのがわかるでしょうか？

これは実際にサイトに行ってマウスを動かしていただくとわかりやすいかと思うのですが、カーソルの位置に応じてオブジェクトのエッジがたわむように揺れている様子をキャプチャしたものですね。

サイト内に配置されている様々なオブジェクトが、このたわむような動きで反応を返してくれる他、場合によっては色が変化したり、大きく跳ねるように動いたりと、多彩な表現が用いられています。

また、今回のサイトではページ遷移演出もかなりダイナミックで面白いものになっています。

主に、事例の詳細を閲覧しようとした際のシーンの状態変化などが該当するのですが、画面左下の方から新しいページが一気にめくれ上がってくるような、独特な表現になっています。

アニメーションのイージングの心地よさもさることながら、スピード感や疾走感をも感じさせる、とても迫力のある演出となっています。

静止画でこれを見ても……

正直どういうことなのかわかりにくいと思いますので、ぜひ実際にサイトを訪れて確認してみてください。

Patrick Heng さんは現在はフランスでお仕事をされているとのことですが、関わってきたプロダクトの多くがものすごい完成度で、本当に驚かされます。

WebGL を中心に、インタラクティブなウェブサイトを作る様々なテクニックに習熟していて、今回のサイトを見てもその完成度の高さはすぐにわかるんじゃないでしょうか。