Talk
Overseas / US16:9 · 64p
Building Experiences: Design Systems, User Experience, and Full Site Editing
Michelle Schulp Huntの登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
左下の角に、森の波がずっと付いてくる。
Michelle Schulp Huntの登壇資料は、表紙の深緑を左下の波に縮めて全ページに残し、本文は Inclusive Sans と画面キャプチャで組んで、会場の空気と実務の話をつないでいる。
深い緑に朱色の名前って、焚き火のそばの森みたいであたたかい。本文ページは白と灰色で冷静なのに、角の波だけでその温度が残ってるのがすき。
- 1表紙の深緑を、本文では左下の波1つに縮める。テーマを残しつつ画面の邪魔をしない
- 2書体は Inclusive Sans だけ。細字の1行と太字の1行を重ね、強弱を太さでつける
- 3朱色は名前と引用の面だけ。画面キャプチャの多い資料で、要点の場所を知らせる
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上85 右158 下264 左95
- 1枚の文字量
- 中央値 約104字
- 多いページ
- 約527字
- 写真・画像の面積
- 約68%
公開PDFの64ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上75・下198・左91・右135px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 18.9:1
Typography
書体と文字サイズ（実測）
見出し・本文（Regular / Bold / Light / Medium）
- 使用
- Inclusive Sans
- 代替
- Inclusive Sans
PDFに埋め込まれた書体: InclusiveSans-Regular（63%）、InclusiveSans-Bold（30%）、InclusiveSans-Light（3%）、Arial-BoldMT（2%）
- 表紙・中扉の大見出し資料の型 Aa128px · PPT 64pt
- ページ見出し資料の型 Aa32px · PPT 16pt
- 本文資料の型 Aa24px · PPT 12pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
深緑の全面の右側に木や動物の線画を寄せ、左に白の太字で題と副題、朱色で名前と肩書、下に日付。右下に会場のロゴを置く。線画は緑の濃淡が中心で、題の白を邪魔しない。
比較・表
灰色の面に3つのデザインシステムの画面を縦長に並べ、下に名前だけを添える。比べる材料を同じ大きさにそろえ、見出しを置かずに並べた画面そのものに語らせる。
メッセージ
破れた紙の写真を全面に敷き、裂け目の茶色の上に白文字を2行置く。細字の1行と太字の1行で重さを変え、後半の語に重心を置く。左下の波はここでも残す。
図解
暗い面の左にトークンのコード、中央と右に編集画面の設定パネルを2枚並べる。コードが画面の色になる流れを左から右へ見せる。
メッセージ
朱色の全面に白の見出しを1行、下に引用文と出典を小さく置く。出典は太字にして引用文と区別する。引用のページだけ面を朱色にし、他者の言葉だと分かるようにする。
写真
編集画面のスクリーンショットを全面に敷き、枠も説明文も足さない。実物の画面のまま話を進める。設定パネルの細部まで見えるよう、画面いっぱいに大きく載せる。
Reproduce
この型で資料を作るには
- 01左下に深緑（#103135）の波と会場のロゴを全ページ置く
- 02書体は Inclusive Sans の1ファミリー。太さで見出しの強弱をつける
- 03朱色（#dd4d3c）は名前と引用の面に限る
- 04画面キャプチャは枠を足さず、灰色か暗い面に載せる
- 05本文24px、見出し32px、最大128px（1920px換算）
- 06表紙のモチーフを小さな波形に縮め、全ページの同じ角に置く
- 07書体は1ファミリーにして、細字と太字の組み合わせで見出しをつくる
- 08強調色は1色に決め、名前と引用の面だけに使う
- 09画面キャプチャは加工せず、無彩色の面に載せる
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
Building Experiences: Design Systems, User Experience, and Full Site Editingについてよくある質問
カンファレンスのテーマに合わせた登壇資料のデザイン例は？
Michelle Schulp Huntの「Building Experiences」は、表紙の深緑と森の線画を左下の波形に縮めて全ページに残し、本文は白地と画面キャプチャで組んでいます。
どんなフォントを使っている？
Inclusive Sans の1ファミリーで、Regular・Bold・Light・Medium を使い分けています。無料で使える書体です。
何ページある？
16:9で64ページです。1ページの文字数は中央値104字で、画面キャプチャの多いページが続きます。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
