Talk
Overseas / US16:9 · 103p
Tame the Component Multi-verse
Michael Chan (Chromatic)の登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
表紙は臙脂に極太の大文字、中身は白地にセリフ体。
Michael Chan（Chromatic）の登壇資料は、言い切りを色面と極太書体に預け、説明は白地と画面の重ね置きで静かに組んで、103ページに緩急をつける。
臙脂の表紙でいきなり叫んで、中盤は白地で静かに説明。で、黄色の締めで登壇者本人がにっと笑って出てくる！ライブのアンコールで袖から戻ってくるあの感じ、鳥肌！
- 1表紙は臙脂の地に極太の大文字を4行。題名より先に、話の主張を画面いっぱいに言い切る
- 2つなぎのページは白地にCanela Boldで一言だけ。次の展開の前に、会場に間をつくる
- 3コードの窓とツールの窓をずらして重ねる。書いたものと動くものを1枚で見せる
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上70 右69 下14 左94
- 1枚の文字量
- 中央値 約32字
- 多いページ
- 約118字
- 写真・画像の面積
- 約4%
公開PDFの103ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上70・下8・左34・右57px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 1.5:1
Typography
書体と文字サイズ（実測）
つなぎの一言・裏表紙（Bold / Text Regular）
- 使用
- Canela
- 代替
- Fraunces
極太の言い切り・説明（Black / Regular）
- 使用
- Nunito Sans
- 代替
- Nunito Sans
見出し・説明（Regular）
- 使用
- Poppins
- 代替
- Poppins
PDFに埋め込まれた書体: CanelaText-Regular（25%）、Canela-Bold（25%）、NunitoSans-Regular（14%）、Poppins-Regular（14%）
- 表紙・中扉の大見出し資料の型 Aa300px · PPT 150pt
- ページ見出し資料の型 Aa50px · PPT 25pt
- 本文資料の型 Aa40px · PPT 20pt
- 注釈・出典資料の型 Aa32px · PPT 16pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
臙脂一色の地に、明るい灰色の極太サンセリフの大文字を4行、中央に詰めて組む。題名も名前も入れず、主張の一文だけで幕を開ける。
本文
白地の中央にデザインツールの画面を大きく置き、左上に少し傾けたセリフ体で数を添える。下端に出典のURLを小さく入れる。
本文
左にサンセリフの太字の見出しと灰色の説明を2行。右にはコードの暗い窓とツールの白い窓を少しずらして重ね、影で前後をつける。
図解
暗いコードの窓の上に、ブラウザの窓を右にずらして重ねる。テストの手順と画面の結果を、2つの窓の重なりで対応させる。
メッセージ
白地の中央にCanela Boldで短い一言だけ。次の章に入る前の、間をとるためのページ。
裏表紙
黄色の地に、サイト・SNS・参加先のアドレスを黒のセリフ体の太字で3行。右下に登壇者の白黒の切り抜き写真を置く。
Reproduce
この型で資料を作るには
- 01主張のページは色面に極太の大文字、説明のページは白地
- 02つなぎと締めはCanela、画面の説明はサンセリフで分ける
- 03本文40px・見出し50px（1920px換算）。1枚の文字は中央値32字
- 04画面キャプチャは窓の枠と影を残し、少しずらして重ねる
- 05色面は臙脂と黄色の2色に絞る
- 06色面のページと白地のページの2種類だけでテンプレートを作る
- 07言い切りは極太の大文字で、画面の幅いっぱいに組む
- 08画面キャプチャは窓の枠と影を残して重ねる
- 09章の前に、一言だけのつなぎのページを入れる
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
Tame the Component Multi-verseについてよくある質問
Tame the Component Multi-verseのスライドのデザインの特徴は？
表紙は臙脂の地に極太の大文字で主張を言い切り、説明のページは白地にセリフ体とサンセリフで静かに組んでいます。コードとツールの画面は窓のまま少しずらして重ねています。
どんなフォントを使っている？
埋め込み書体はCanela（Bold・Text Regular）、Nunito Sans（Regular・Black）、Poppinsです。1920px換算で本文40px・見出し50px・最大300pxです。
何ページある？
16:9で103ページです。1ページの文字数は中央値32字と少なく、1枚に一つの話題を置く構成です。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
