Gil Huybrecht

1. 01

   ヘッダー

   左から名前、「Available September 2026」、Services（3項目）、Recognition（受賞歴7行）、Profile、Email me を横一列に置いた文字だけのヘッダー。下に大きな黒い余白を取る。

2. 02

   作品グリッド

   7カラムのグリッドに、案件名（Studio DADO、The Lookback、DoThings、Ray®、53 West 53 など）と1〜6の連番を付けたページキャプチャを、案件の切れ目なく流し込む。

3. 03

   表示切替トグル

   画面左下に「Grid / Gallery」、右下に「Normal / Star Wars」の切替ボタンを固定表示。

4. 04

   SP版

   2カラムに組み替え、案件名を大きめの見出しにする。ナビは Profile と Email me の2つだけに絞る。

5. 05

   フッター

   ©2026、Privacy Policy、Instagram・Twitter(X)・Savee・Youtube、Course、Newsletter を横一列に並べる。

• 「Grid / Gallery」の切替で、一覧表示とギャラリー表示を入れ替える仕組みと思われる。表示モードの状態を1つ持ち、CSS Grid と横並びレイアウトのクラスを差し替えることで再現可能
• スタックに Three.js / WebGL があるため、「Normal / Star Wars」は作品タイルを奥へ傾けて流す3D表示の切替と思われる。タイルを平面メッシュとして並べ、カメラを傾けることで再現可能
• Lenis による慣性スクロールで、数十枚のタイルが続く一覧でもスクロールが重く感じにくい

スクロールのコマ撮りLenis · 200–300ms

検出された技術:Three.jsLenisNuxtWebGL

• 01背景は純黒 #000000、文字は白1色・ほぼ1サイズに絞り、色は作品サムネイルだけに持たせる
• 02grid-template-columns: repeat(7, 1fr) の中に、案件名と連番のキャプションを付けたタイルを区切りなしで流し込む
• 03タイル画像は各案件のページキャプチャを縦横比そのままで置き、高さを無理にそろえない
• 04受賞歴は「Awwwards SOTD (15x)」のように回数を括弧で添え、短い行で縦に積む

1---
2title: "Gil Huybrecht デザイン分析書"
3source: https://gilhuybrecht.com/
4katapick: https://katapick.com/sites/gil-huybrecht
5category: ポートフォリオ
6region: 海外 (BE)
7tags: [ダーク, ミニマル, グリッド, モノクロ, 3D/WebGL]
8launched: 2026-09
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# Gil Huybrecht — デザイン分析書
16 
17> 作品はぜんぶサムネで一気見させる。ベルギーのデザイナーGil Huybrechtのポートフォリオは、案件名と番号だけを添えたページキャプチャを黒地に隙間なく流し込み、説明より先に仕事の量と目利きを見せつける。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22