
統一感のある演出を WebGL にも DOM にも反映した Guillaume Colombel さんのスタイリッシュなポートフォリオ
ハイレベルな案件の数々に関わってきた経歴
今回ご紹介するのは Guillaume Colombel さんのポートフォリオサイトです。
どうやらもともと makemepulse に所属されていた方のようで、サイト内に配置されている案件も、どれもハイレベルなものばかりです。
もともとはデザイナーさんだったようですが、現在は Interactive Developer という肩書で活動されているようです。
リンク:
Guillaume Colombel - Interactive Developer
スクロールに連動してダイナミックに変化
今回のサイトは、WebGL を使っていると言ってもサイト全体にそれを適用している感じではなさそうです。
トップページは WebGL 的な演出が見事に実装されていますが、下層ページなどでは、むしろ WebGL を用いることなくコンテンツが構築されています。
ページがロードされた直後、最初に表示されるページの部分が WebGL 実装になっていて、スクロール操作やスワイプ操作を行うと画像や文字が歪んで表示されるようになっています。
スクリーンショットで見ても、その迫力がなかなか伝わりませんね……
実際に動いている様子はすごく滑らかで、歪む量も比較的大きいのでとても迫力があり、疾走感を感じる軽快な動作です。
画面の右上あたりに下層ページへのリンクがあるのですが、トップページ以外は WebGL は使っている様子はありません。ですが WebGL 実装とは違った意味で非常に技巧的な作りになっていて、インタラクティブな要素が多く存在しています。
静止画では伝えることができないのですが、テキストが表示される際に表示されるエフェクトなど、サイト全体で統一感のある動きが設定されています。
フォントの大きさのメリハリも強めにきいていて、すごくかっこいいデザインですよね。
インタラクティブな要素がそのかっこよさを加速させている感じがあり、WebGL 抜きでも見応えのある仕上がりとなっています。
スクロールに応じて要素が歪む、というのは WebGL 実装では王道中の王道であり、そんなに珍しいものではないと思います。
ただそのような見慣れた演出であっても、それぞれにエフェクトのスピード感やどれだけ過敏に反応するか、余韻をどのように残すのかなど、味付けには工夫を凝らす余地が多くあります。
今回のサイトのエフェクトには、WebGL 実装に限らずそのあたりのこだわりが強く感じられる部分が多く、個人的には見た目のシンプルさ以上に本格派だなと感じました。
ぜひチェックしてみてください。