シンプルな表現なのにそれがむしろ心地よい空気感を演出する Quentin Hocdé さんのポートフォリオ

doxas : 2026-05-13 12:14:29

動きのあるウェブサイトなのに落ち着いている

今回ご紹介するのは Quentin Hocdé さんという Interactive Developer のポートフォリオサイトです。

Interactive Developer、というくらいなので、インタラクティブ性の高いウェブサイトやアプリケーションの実装がお仕事なんだろうと思いますが、今回のサイトも動きのある表現が多く用いられています。

動く要素はすごく多いのですが、全体のカラートーンが落ち着いていることもあり、不思議とうるさい感じがしないのがおもしろいです。

今回のサイトでは、背景部分に WebGL によって描画されたグラデーション模様が描かれます。

このグラデーションの部分もカーソルを動かすと若干反応するようになっていて、流体とはちょっと違った、UV が歪むような感じのエフェクトになっています。

そこまで派手に反応するわけでもないのですが、見た目のインパクトは結構強いかもしれないです。

事例紹介のページなどでは、各事例を表す写真や動画が四角い板に投影されて表示されます。

上のスクリーンショットがまさにその状況をキャプチャしたものなのですが、立体的な表現も時には用いつつ、あまり派手になりすぎていない感じは徹底されているような気がします。

静止画では伝えることができない部分ですが、各ページ間の遷移エフェクトも結構凝っていて一見の価値があります。

WebGL の実装とは直接関係がないですが、サイト内の要素がページ上に現れる際にもいろいろなモーション・アニメーションを伴います。

時間の流れが感じられるような、順番に要素が登場してくる一連の演出はなんともほどよい質感に仕上げられており、すごく見応えがありますね。

すごく個人的な感想の話になってしまうのですが、About ページだけが無限スクロールになっているのがどうしてなんだろうと思いました。デザイン的ななにか意図があると思うのですが…… いまのわたしにはちょっとわかりませんでした。不甲斐なし……

WebGL でなにか作ってみようとなったときに、今回のサイトに見られるようなノイズを用いたグラデーションの表現ってすごく手軽な題材というか、比較的実装しやすい表現だと思うんですよね。

でも当然のことではありますが、それをどうして使う必要があるのかといった文脈の部分や、それをどう他の要素と調和させるかといった部分は、言うほど簡単ではありません。

今回のサイトでは、テキストの多くがなにかしらのアニメーションを伴って画面に表示されるようになっており、そういったサイト全体に施された装飾と WebGL の実装とが、いい意味で調和を持って配置されているように個人的には感じました。