Talk
Overseas / NL16:9 · 102p
The future of UX is green
Hidde de Vriesの登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
緑の話を、ほんとうに緑の地から始める。
Hidde de Vriesの登壇資料「The future of UX is green」は、ミントの地とコンデンス体のBildを軸に、青い面と黄色の中扉で要点を区切り、環境負荷の話を明るく語る。
ミントの地に、青と黄色が交互に出てくるのがすき。春先の公園みたいに軽いのに、いちばん濃い緑は表紙に取っておいてるっぽい。テーマの色を安売りしない感じがいい。
- 1表紙は緑の地に青い札を重ね、題名の最後の一語だけをミントで大きく。色が主題を言う
- 2中扉は黄色一色に紺のコンデンス体。太字と細字の2段で、一言と補足を分ける
- 3出典のURLは等幅のFira Monoで下端の帯に置く。本文とは別の声で参照先を示す
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上114 右168 下82 左71
- 1枚の文字量
- 中央値 約46字
- 多いページ
- 約204字
- 写真・画像の面積
- 約0%
公開PDFの102ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上51・下45・左25・右102px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 12.4:1
Typography
書体と文字サイズ（実測）
見出し・本文（太字 / 細字）
- 使用
- Bild Variable
- 代替
- Barlow Condensed
URL・サイト名
- 使用
- Fira Mono
- 代替
- Fira Mono
PDFに埋め込まれた書体: BildVariablev5-Regular（39%）、Times-Roman（30%）、BildVariablev5-Regular_B（12%）、FiraMono-Regular（9%）
- 表紙・中扉の大見出し資料の型 Aa500px · PPT 250pt
- ページ見出し資料の型 Aa55px · PPT 28pt
- 本文資料の型 Aa36px · PPT 18pt
- 注釈・出典資料の型 Aa20px · PPT 10pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
緑の地に題名の単語を薄く大きく敷き詰め、中央に青い角丸の札を黒い影の札とずらして重ねる。札の中は題名を2段で組み、最後の一語だけをミントで極端に大きくする。
数字
ミントの地に青い面を2枚、少しずらして置く。左はアイコンと数値と短い説明を2組、右は入力欄つきの計算結果。左上に等幅でサイト名を添える。
中扉
黄色一色の地の左上に、紺のコンデンス体で太字の一行と細字の補足を2行。ほかには何も置かない。
写真
端末で予約画面を開いた写真を全面に敷き、下端に淡い帯を引いて等幅のURLを置く。
数字
同じ写真を上に小さく残し、下に数値の箇条を4つ、2列で並べる。前のページの写真の中身を、数で言い換える。
比較・表
スマホのサイト画面と開発ツールの通信一覧を並べ、転送量の合計だけを黒い帯で拡大して重ねる。下に紺の一行で結論を添える。
Reproduce
この型で資料を作るには
- 01地はミント#d4fdf5。表紙は緑#007b4c、中扉は黄色#fbda00
- 02見出しと本文はBild。太字と細字の2段で強弱をつける
- 03出典やURLはFira Monoで、下端か左上に置く
- 04文字は紺#041892を基本にする
- 05本文36px・見出し55px（1920px換算）、1枚の文字は中央値46字
- 06ミント・緑・青・黄の4色に、背景・表紙・カード・中扉の役割を決める
- 07見出しと本文をコンデンス体1ファミリーで組む（Bildの代わりにBarlow Condensedなど）
- 08数値は青い面のカードにまとめる
- 09URLは等幅の帯として下端に置く
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
The future of UX is greenについてよくある質問
The future of UX is greenのスライドのデザインの特徴は？
ミントの地を基本に、表紙は緑、数値は青い面のカード、中扉は黄色一色と、色ごとに役割を分けています。見出しと本文はコンデンス体のBildで、URLは等幅の書体で下端に置いています。
どんなフォントを使っている？
見出しと本文はBild（可変フォント）、URLやサイト名はFira Monoです。1920px換算で本文36px・見出し55pxです。
何ページある？
16:9で102ページです。1ページの文字数は中央値46字です。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
近い資料
登壇資料Programmable colors: bridging design and code
Irina Nazarova & Arthur Objartel (Evil Martians)デザイン
登壇資料Decolonizing Your Design System
Michelle Chinデザイン
登壇資料The Journey of a Byline
Alice Bartlett (Financial Times)プロダクト
登壇資料Designing APIs: How to ensure accessibility in design system components
Feli Bernutz開発