Talk
Overseas / US16:9 · 38p
Design in an AI World
Tracy Appsの登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
章ごとに、背景の色と地形が変わる。
Tracy Appsの登壇資料は、うねる色面のグラデーションを章扉ごとに塗り分け、見出しは Graphik の太い大文字、補足は等幅体で組むことで、4部構成の話を色で案内している。
紫の夜空に橙の砂丘みたいな章扉、夕暮れのキャンディみたいで甘すぎないのがすき。次の章は緑の森みたい。色の温度で章の気分を切り替えてるのが、とてもいい。
- 1章扉は緑、紫と橙、パステルと毎回ちがう色面。色が変わるだけで、次の章に入ったと分かる
- 2用語の定義は等幅体の小さな文字で。辞書のような手ざわりが、見出しの太字と対比する
- 3右上にAIを示す線画のアイコンを章扉ごとに置く。色が変わっても同じ資料だと分かる
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上76 右259 下178 左102
- 1枚の文字量
- 中央値 約180字
- 多いページ
- 約448字
- 写真・画像の面積
- 全面に画像（判定不可）
公開PDFの38ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上76・下30・左34・右145px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 1.1:1
Typography
書体と文字サイズ（実測）
見出し・本文（Semibold / Bold / Medium / Light）
- 使用
- Graphik
- 代替
- Inter
定義・補足
- 使用
- Blex Mono
- 代替
- IBM Plex Mono
PDFに埋め込まれた書体: Graphik-Semibold（37%）、Graphik-Light（25%）、Graphik-Bold（15%）、Graphik-Medium（9%）
- 表紙・中扉の大見出し資料の型 Aa102px · PPT 51pt
- ページ見出し資料の型 Aa58px · PPT 29pt
- 本文資料の型 Aa38px · PPT 19pt
- 注釈・出典資料の型 Aa20px · PPT 10pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
水色から緑、黄、橙へのグラデーションの全面に、白い線画のアイコンを上に1つ、黒の太い大文字で題、下に副題を1行置く。副題も大文字にして、文字の形をそろえる。
中扉
暗い紫の地の下半分に、マゼンタの波の色面を敷く。左上に章番号と白の大文字の見出し、右下に等幅体の定義文を置く。定義文は辞書の項目のように組む。
写真
サーバー室の写真を全面に敷き、中央にピンクで縁取った雲のアイコンを重ねる。比喩を、写真とアイコンの組み合わせで見せる。雲の下に白文字で短い一言を2行添える。
中扉
緑の濃淡の有機的な色面だけを全面に敷く。左に章番号と見出しを白で置き、右上にアイコンを添える。写真も図も入れず、色面の揺らぎだけで章の気分をつくる。
中扉
紫の空と橙の丘のような色面に、見出しを白の大文字で置き、否定の1語だけを黄色にする。前の章扉と同じ位置に見出しを置き、色だけを入れ替える。
中扉
パステルの色面を重ねた地に見出しを黒で置き、下に短い一言をピンクの帯で強調する。地が明るい章扉だけ見出しを黒に替え、読みやすさを保つ。
Reproduce
この型で資料を作るには
- 01章扉ごとに色面の配色を変える。アイコンの位置は右上で固定
- 02見出しは Graphik の太い大文字。本文38px、見出し58px（1920px換算）
- 03定義や補足は Blex Mono の等幅体
- 04強調は黄（#ffd500）の文字かピンクの帯。1枚1か所
- 05本文ページは色面の上に白い面を置き、文字を読ませる
- 06章ごとに2〜3色の有機的なグラデーションを1枚ずつつくる
- 07見出しは太い大文字のサンセリフ、補足は等幅体で役割を分ける
- 08章扉の右上に同じアイコンを置き、資料の目印にする
- 09本文ページは色面の上に白い面を重ねて読ませる
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
Design in an AI Worldについてよくある質問
カラフルな登壇資料で参考になる配色は？
Tracy Appsの「Design in an AI World」は、章扉ごとに緑、紫と橙、パステルと色面を変えています。強調は黄の文字かピンクの帯に絞っています。
どんなフォントを使っている？
見出しと本文は Graphik、定義や補足は等幅体の Blex Mono（IBM Plex Mono の派生）です。
何ページある？
16:9で38ページです。1ページの文字数は中央値180字で、本文ページには白い面を敷いて読ませています。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
