PortfolioOverseas / BEPicked 2026.09.26

Gil Huybrecht

ポートフォリオのWebデザイン参考 — フリーランスデザイナー・アートディレクター

出典: gilhuybrecht.com

Editor's note — 編集部の視点

作品はぜんぶサムネで一気見させる。

ベルギーのデザイナーGil Huybrechtのポートフォリオは、案件名と番号だけを添えたページキャプチャを黒地に隙間なく流し込み、説明より先に仕事の量と目利きを見せつける。

BrunoStructure & IA

案件ごとに見出しで区切らず、名前と番号だけで7列に流し込んでるんだよね。普通なら迷子になる構成だけど、連番があるから「いま何枚目か」はちゃんと分かる。これはうまい。

1案件ごとの区切りはなし。名前と連番だけでタイルが続き、作品の量そのものが実績になる
2ヘッダーに受賞歴を回数付きで並べる。自己紹介文は書かず、信頼の根拠だけを先に置く
3文字は白のサンセリフ1書体・ほぼ同サイズ。声を消した分、色を持つのは作品のサムネだけ

Color

Gil Huybrechtの配色

Typography

使用フォントと無料の代替

全テキスト（名前・ナビ・案件名・受賞歴）

Aa あア

使用: sans（独自に定義されたグロテスク系サンセリフ）
代替: Inter Tight

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型16.3px · 1.11 · 500
ボタンKatapick 型16.3px · 1.11 · 500

Structure

ページ構成（上から順）

01
ヘッダー
左から名前、「Available September 2026」、Services（3項目）、Recognition（受賞歴7行）、Profile、Email me を横一列に置いた文字だけのヘッダー。下に大きな黒い余白を取る。
02
作品グリッド
7カラムのグリッドに、案件名（Studio DADO、The Lookback、DoThings、Ray®、53 West 53 など）と1〜6の連番を付けたページキャプチャを、案件の切れ目なく流し込む。
03
表示切替トグル
画面左下に「Grid / Gallery」、右下に「Normal / Star Wars」の切替ボタンを固定表示。
04
SP版
2カラムに組み替え、案件名を大きめの見出しにする。ナビは Profile と Email me の2つだけに絞る。
05
フッター
©2026、Privacy Policy、Instagram・Twitter(X)・Savee・Youtube、Course、Newsletter を横一列に並べる。

Interaction

アニメーション・インタラクション

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

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

検出された技術:Three.jsLenisNuxtWebGL

Reproduce

再現するときのポイント

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

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全5セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

gil-huybrecht.katapick.md

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-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# Gil Huybrecht — 再現用デザイン仕様書
17 
18> 作品はぜんぶサムネで一気見させる。ベルギーのデザイナーGil Huybrechtのポートフォリオは、案件名と番号だけを添えたページキャプチャを黒地に隙間なく流し込み、説明より先に仕事の量と目利きを見せつける。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22