PortfolioOverseas / FRPicked 2026.09.26

Léo Parpeix — Portfolio 2026

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

出典: leoparpeix.com

Léo Parpeix — Portfolio 2026のPC版ファーストビュー

Léo Parpeix — Portfolio 2026のスマホ版ファーストビュー

Editor's note — 編集部の視点

巨大な肩書きの横で、3Dのハチがエサを待ってる。

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

LeoMotion & Direction

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

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

Color

Léo Parpeix — Portfolio 2026の配色

Typography

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

見出し

Aa あア

使用: title（独自名で読み込まれた見出し書体）
代替: Archivo（Condensed / ExtraBold）

本文・ナビ・メタ情報

Aa あア

使用: text（独自名で読み込まれた本文書体）
代替: Inter Tight

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

特大見出しKatapick 型14px · 1 · 400
見出しKatapick 型162px · 0.9 · 400
小見出しKatapick 型14px · 1.2 · 400
本文The quick brown fox — 参考を型にする14px · 1.2 · 400
ボタンKatapick 型14px · 1 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左に名前、その右に肩書き「Art director, Interactive designer」、右端に Work / About / Playground とメニュー。SPでは丸角のボタン2つに集約する。
02
ヒーロー
白地の左下に「Driven by detail. Obsessed with seamless motion.」の3行と「Scroll down」だけを置く、余白の大きいFV。
03
肩書きステートメント
薄いグレー地に「FRENCH INTERACTIVE DESIGNER」を極太の大文字3行で組み、横に3Dのハチと「(Click to feed the bee)」を添える。上部に拠点や前職の小さな注記。
04
自己紹介
「Bonjour,」から始まる大きめの自己紹介文と、訪問者への短いあいさつ文。右側に白いカードを重ねる。
05
Selected projects
作品ごとに中央の大きなモックアップ写真、左右に隣の作品を見切れさせ、下に番号・名前・分野・年・チーム・ロールを表組み風に並べる。
06
ステートメント
白地に「FOCUS ON INNOVATION AND USER-CENTERED DESIGN.」を大きな大文字で置き、作品一覧の途中に区切りを入れる。
07
Archives・コンタクト
アーカイブの一覧と、「Let's create a remarkable journey」から始まる締めのコピーで問い合わせへつなぐ。

Interaction

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

3Dのハチは Three.js / WebGL のシーンで、クリックに反応すると思われる。Raycaster でクリックを判定し、GSAP でモデルのアニメーションを再生すると再現可能
Lenis による慣性スクロール。ステートメントが薄く写っていることから、スクロール位置に応じて文字がフェードインすると思われる
作品一覧は中央の1枚と左右の見切れで構成したスライダーと思われる。スクロール進捗に合わせて横方向に送る実装で再現可能
SPではナビを丸角のボタン2つにまとめ、メニューをオーバーレイで開く

スクロールのコマ撮りLenis · 350–1400ms

Léo Parpeix — Portfolio 2026をスクロールしたときのフレーム1 — 01

Léo Parpeix — Portfolio 2026をスクロールしたときのフレーム2 — 02

Léo Parpeix — Portfolio 2026をスクロールしたときのフレーム3 — 03

Léo Parpeix — Portfolio 2026をスクロールしたときのフレーム4 — 04

Léo Parpeix — Portfolio 2026をスクロールしたときのフレーム5 — 05

Léo Parpeix — Portfolio 2026をスクロールしたときのフレーム6 — 06

検出された技術:Three.jsLenisWebGL

Reproduce

再現するときのポイント

01見出しは極太のグロテスク体の大文字で行間を詰め、font-size を vw 基準（clamp() で上限下限つき）にして画面幅いっぱいまで広げる
02本文・ナビは細身のサンセリフ1書体に揃え、見出しとのジャンプ率だけで強弱をつける
03色は白・薄いグレー・深緑がかった黒（#022016）に絞り、黄色は3Dのハチのような遊びの要素だけに使う
04作品カードは画像を大きく、年・チーム・ロールは小さな文字で表組み風に揃えて“作品の履歴書”にする

再現MDに含まれるもの

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

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

leo-parpeix.katapick.md

1---
2title: "Léo Parpeix — Portfolio 2026 再現用デザイン仕様書"
3source: https://www.leoparpeix.com/
4katapick: https://katapick.com/sites/leo-parpeix
5category: ポートフォリオ
6region: 海外 (FR)
7tags: [大胆なタイポ, 余白, 3D/WebGL, スクロール演出, ライト]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# Léo Parpeix — Portfolio 2026 — 再現用デザイン仕様書
17 
18> 巨大な肩書きの横で、3Dのハチがエサを待ってる。フランスのデザイナーLéo Parpeixのポートフォリオは、極太の大文字で名乗ったあとにクリックで遊べる小さな3Dを添え、硬い自己紹介に“触る理由”を足している。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22