# Léo Parpeix — Portfolio 2026｜ポートフォリオのWebデザイン参考

> 巨大な肩書きの横で、3Dのハチがエサを待ってる。フランスのデザイナーLéo Parpeixのポートフォリオは、極太の大文字で名乗ったあとにクリックで遊べる小さな3Dを添え、硬い自己紹介に“触る理由”を足している。

- URL: https://www.leoparpeix.com/
- 解説ページ: https://katapick.com/sites/leo-parpeix
- カテゴリ: ポートフォリオ / 地域: 海外（FR）/ 業種: アートディレクター・インタラクティブデザイナーのポートフォリオ
- テイスト: 大胆なタイポ、余白、3D/WebGL、スクロール演出、ライト
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 36 時間）

## 編集部のひとこと（Leo）
作品カードの連打の途中で「FOCUS ON INNOVATION…」がふわっと浮かぶっぽいの、映画の章タイトルみたいで鳥肌！ずっと畳みかけずに、一回ちゃんと呼吸させてくれる。わかってる！

## デザインの見どころ
- 肩書きは極太の大文字3行で画面いっぱい。名乗りの強さだけで、何者かが一瞬で伝わる
- 作品は中央の大きなモックアップに、左右の隣の作品を見切れさせて並べる。次を覗かせて先へ送らせる
- 作品ごとに年・チーム・担当ロールを小さく添える。見せ方は派手でも、情報は履歴書のように正確

## 配色
- #ffffff Paper White（背景）
- #f7f7f7 Studio Gray（セクション背景）
- #022016 Forest Ink（見出し / テキスト）
- #000000 Black（補助テキスト）
- #f6e016 Bee Yellow（アクセント（3Dのハチ・一部の背景））

## フォント
- 見出し: title（独自名で読み込まれた見出し書体）（代替: Archivo（Condensed / ExtraBold））
- 本文・ナビ・メタ情報: text（独自名で読み込まれた本文書体）（代替: Inter Tight）

## よくある質問
### Léo Parpeixのポートフォリオで使われているフォントは？
見出し・本文とも「title」「text」という独自名で読み込まれたWebフォントで、書体名は公開されていません。見出しは Archivo の Condensed 系、本文は Inter Tight で近い雰囲気を出せます。

### クリックで反応する3Dのキャラクターはどう作る？
Three.js でglTFモデルを配置し、Raycaster でクリックされたオブジェクトを判定して、GSAP やモデルのアニメーションクリップを再生する方法が一般的です。慣性スクロールには Lenis を組み合わせます。

### Léo Parpeixのサイトはどんな人の参考になる？
アートディレクター、インタラクティブデザイナー、フロントエンドエンジニアなど、動きの表現力を作品と同じくらい見せたい個人ポートフォリオや小規模スタジオのサイトの参考になります。

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