Talk
Overseas / US16:9 · 43p
Decolonizing Your Design System
Michelle Chinの登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
見出しは細長い極太で、帯に押し込む。
Michelle Chinの登壇資料は、シアンの帯に Druk の大文字の見出しを1行で詰め、図は手描き風の線とピンクの塗りで描くことで、重いテーマをポスターの強さで見せている。
Druk みたいな細長い極太は、字間を詰めると黒い塊になる。そこをちゃんと詰めて、帯の高さぴったりに収めてる。横に手書き風の図を並べる度胸も、嫌いじゃない。
- 1見出しはシアンの帯に Druk の大文字で1行。帯の高さが毎ページ同じで、見出しを探させない
- 2グラフは手描き風の線と Fuzzy Bubbles のラベル。数字の硬さを、手の温度でやわらげる
- 3区切りは黄やピンクの全面に一言だけ。帯を外して、流れを一度止める
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上66 右125 下102 左94
- 1枚の文字量
- 中央値 約105字
- 多いページ
- 約267字
- 写真・画像の面積
- 約16%
公開PDFの43ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上66・下75・左78・右65px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 9.3:1
Typography
書体と文字サイズ（実測）
見出し・表紙（Medium）
- 使用
- Druk
- 代替
- Anton
本文（Bold / Extrabold）
- 使用
- Proxima Nova
- 代替
- Montserrat
図のラベル（Bold）
- 使用
- Fuzzy Bubbles
- 代替
- Fuzzy Bubbles
PDFに埋め込まれた書体: ProximaNova-Bold（44%）、Druk-Medium（37%）、FuzzyBubbles-Bold（18%）、ProximaNova-Extrabld（2%）
- 表紙・中扉の大見出し資料の型 Aa220px · PPT 110pt
- ページ見出し資料の型 Aa64px · PPT 32pt
- 本文資料の型 Aa42px · PPT 21pt
- 注釈・出典資料の型 Aa37px · PPT 19pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
シアンの全面に左寄せで、小さな会場名、Druk の大文字で題を2行、副題を1行、名前と肩書を小さく3行。写真も図も入れない。
グラフ
上端にシアンの見出しの帯、下の白地に手描き風の円グラフを2つ並べる。ピンクと水色で塗り分け、矢印とラベルで2つを対応させる。
図解
帯の下の白地に、UIの部品を青緑の手描きの線で抽象化して散らす。具体的な画面を出さず、形だけで話を進める。線の色は青緑の1色に絞る。
比較・表
白地に3つの地域名を Druk で横に並べ、その下に各地域のサイトの画面を縦長に置く。読む向きを手書きの矢印で書き込む。
写真
帯の下の左に現地の写真、右に問いと答えを短い線の箇条書きで3段置く。観察の手順を、そのままページの型にしている。写真と文字は左右でほぼ半分ずつに分ける。
中扉
黄色の全面に、Druk の黒い大文字で一語だけ置く。帯も飾りも外して、区切りの強さを出す。文字は画面の中央いっぱいまで大きく組み、余白を少なくする。
Reproduce
この型で資料を作るには
- 01見出しは Druk の大文字。シアン（#00bff3）の帯に1行で収める
- 02文字はほぼ黒1色（99%）。色は面と図にだけ使う
- 03区切りのページは黄（#ffc617）かピンク（#ff87ba）の全面
- 04図のラベルは Fuzzy Bubbles、本文は Proxima Nova Bold
- 05本文42px、見出し64px、最大220px（1920px換算）
- 06上端に同じ高さの色の帯をつくり、コンデンス体の大文字で見出しを1行入れる
- 07文字は黒1色にして、色は面と図だけで使う
- 08グラフや図のラベルは手書き風の書体にして、線も少し揺らす
- 09区切りのページは帯を外し、全面の色に一言だけ置く
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
Decolonizing Your Design Systemについてよくある質問
海外カンファレンスの登壇資料で参考になるデザインは？
Michelle Chinの「Decolonizing Your Design System」は、シアンの帯に Druk の大文字の見出しを入れる型を全体で守り、図は手描き風の線とピンク・水色の塗りで描いています。
どんなフォントを使っている？
見出しはコンデンス体の Druk、本文は Proxima Nova、図のラベルは手書き風の Fuzzy Bubbles です。
何ページある？文字の大きさは？
16:9で43ページです。1920px換算で本文42px・見出し64px・最大220pxで、1ページの文字数は中央値105字です。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
