# Gil Huybrecht｜ポートフォリオのWebデザイン参考

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

- URL: https://gilhuybrecht.com/
- 解説ページ: https://katapick.com/sites/gil-huybrecht
- カテゴリ: ポートフォリオ / 地域: 海外（BE）/ 業種: フリーランスデザイナー・アートディレクター
- テイスト: ダーク、ミニマル、グリッド、モノクロ、3D/WebGL
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

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

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

## 配色
- #000000 Void Black（背景）
- #ffffff Paper White（テキスト）
- #2c2c2f Graphite（切替ボタンの背景）
- #5c5e5f Smoke Gray（半透明のトグル地）
- #898b8d Ash Gray（非選択のトグル文字）

## フォント
- 全テキスト（名前・ナビ・案件名・受賞歴）: sans（独自に定義されたグロテスク系サンセリフ）（代替: Inter Tight）

## よくある質問
### Gil Huybrechtのサイトで使われているフォントは？
「sans」という名前で独自に定義されたグロテスク系のサンセリフ書体が、全体に1書体で使われています。無料で近い雰囲気を出すなら Inter Tight や Geist がおすすめです。

### Gil Huybrechtのような作品一覧はどう作る？
案件名と連番のキャプションを付けた画像タイルを、CSS Grid の7カラムに続けて並べます。案件ごとに見出しや余白で区切らず、1つのグリッドに流し込むのがポイントです。

### どんな業種の参考になる？
フリーランスのデザイナーやアートディレクター、Web制作スタジオなど、作品数と受賞歴で実力を示したいポートフォリオの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/gil-huybrecht からダウンロードできます。
出典: Katapick（https://katapick.com）