大胆なレイアウトと瞬発力の高いエフェクトが気持ちいい Thibault Guignand さんのポートフォリオサイト

doxas : 2026-05-21 12:14:27

静と動というコントラスト

今回ご紹介するのは Thibault Guignand さんのポートフォリオサイトです。

ウェブのフロントエンドでクリエイティブデベロッパーとして活動されている方みたいなのですが、デザインも非常に洗練されたかっこいいポートフォリオサイトに仕上がっています。

一見すると、余白が広くて線も細く、どこかミニマリズムみたいなものがあるのですが、動きの部分で非常に強い刺激が実装されていて静と動の使い分けが素晴らしいサイトとなっています。

今回のサイトは、当記事のタイトル画像にあるようにサイトを開いた直後は暗い背景に蝋燭の火が灯るシーンから始まります。

この蝋燭のシーン自体は動画ですが、すごくシンプルなイントロですよね。

ロードが終わるとボタンが押せるようになり、それをクリックすることでサイト内に入ってコンテンツを表示させることができます。

ボタンを押した直後、それまで黒が支配的だった背景部分に一気に色が入ってきます。

この背景の部分は動画素材に由来するビジュアルですが、WebGL によって描かれていますね。

動画をわざわざ WebGL を介して描画しているのにはきちんと理由があって、それはユーザーの操作に対してエフェクトを発生させたいからです。

ちなみに、背景の動画素材だけでなく画面の中央に配置されるタイトル文字の部分も WebGL によって描かれており、こちらもカーソルを動かすと歪んで描画されるエフェクトが発生します。

この上のスクリーンショットを見ると、文字がなんだかぐにゃぐにゃと曲がっているのがわかると思うのですが、このようなタイトル文字に対するエフェクトが WebGL による演出の１つです。

WebGL による演出はそれ以外にもあり、各事例へのリンクとなる画面の上下に配置されたブロックにカーソルがホバーすると、エフェクトが発生します。

こちらはちょっと野暮かもと思いましたがその瞬間をスクリーンショットに収めてみました。強烈な RGB シフトが発生するエフェクトになっていてすごく派手ですね。

今回のサイトは、一見すると細いラインや文字の印象はすごく地味で控えめです。

ですがホバーエフェクトなどの動的な部分に印象の強いエフェクトが使われており、それがいい意味で見ている人に驚きを与えます。

最初、イントロのシーンの状態でも画面の上下に並ぶひし形の数字などは画面上にすでに配置されているので、ユーザーは反射的にそこにカーソルを乗せてみたりクリックしてみたりすると思うんですよね。でもイントロの時点では、ホバーやクリックにはそれらの要素は反応しません。

一方で、サイトの本編が始まると先程まで無反応だった要素がほんの少しのきっかけで大きなフィードバックを返してくるので、そういう意味でもインタラクティブ性に起伏があり、すごく新鮮な驚きやおもしろさを感じられるようになっていると思いました。