Talk
Overseas / GB16:9 · 102p
Be the browser’s mentor, not its micromanager
Andy Bell（Set Studio）の登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
青と白を、地と文字で入れ替えるだけ。
Andy Bellの登壇資料は、ウルトラマリンと薄い灰の2色を反転させながら Inter の太字を左上に置き、コードや画面はウィンドウごと中央に載せることで、102枚を1つの規律で通している。
濃いウルトラマリンって、インク瓶の色みたいで落ち着く。それを白と入れ替えるだけで100枚を飽きさせないのがいい。作例の画面まで同じ青なのも、ぬかりない感じ。
- 1青地に白文字、灰地に青文字。2色の反転だけで、話の切り替わりを知らせる
- 2見出しは左上に Inter の太字で1行、132px（1920px換算）。残りの画面は空けておく
- 3コードは白いウィンドウに入れ、左上に3つの点。画面の中の画面として見せる
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上67 右248 下137 左97
- 1枚の文字量
- 中央値 約0字
- 多いページ
- 約64字
- 写真・画像の面積
- 約53%
公開PDFの102ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上67・下123・左97・右215px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 2.3:1
Typography
書体と文字サイズ（実測）
見出し・本文（ExtraBold / Bold / SemiBold / Medium）
- 使用
- Inter
- 代替
- Inter
コード（Medium）
- 使用
- Operator Mono
- 代替
- JetBrains Mono
PDFに埋め込まれた書体: Inter-ExtraBold（42%）、Inter-Medium（35%）、Inter-Bold（8%）、Inter-SemiBold（6%）
- 表紙・中扉の大見出し資料の型 Aa132px · PPT 66pt
- ページ見出し資料の型 Aa53px · PPT 27pt
- 本文資料の型 Aa27px · PPT 14pt
- 注釈・出典資料の型 Aa23px · PPT 12pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
青の全面の下に白い大きな弧を入れ、左上に題を白の太字で2行、会場名を1行。名前とURLは白い弧の中に小さく置く。弧が画面を横切り、青1色の面に動きを出す。
メッセージ
薄い灰の地に、青の太字で一言を大きく、下に細めの文字で補足を1行置く。表紙と地と文字の色を反転させる。左上揃えは表紙と同じで、位置は変えない。
本文
青の地の中央に縦長のコードのウィンドウを1枚。白い地に行番号つきの等幅体で組み、青い地との対比で目を引く。コードは小さめにして、全体の形で見せる。
中扉
青の全面の左上に、白の太字の見出しを1行だけ置く。ほかに何も置かず、章の変わり目を示す。画面の大半を空けることで、次のページへの間をつくる。
本文
青の地に横長のコードのウィンドウを1枚、中は4行だけ。短いコードは横に長く置き、上下に余白を残す。ウィンドウの左上には3つの点を置き、画面らしさを出す。
写真
薄い灰の地に、ブラウザの画面を枠ごと中央に置く。画面の中も同じ青なので、資料と作例の色がつながる。画面の周りには灰の余白を広めに取る。
Reproduce
この型で資料を作るには
- 01色は青（#0041bf）と薄い灰（#f3f3f3）の2色。地と文字で入れ替える
- 02見出しは Inter の太字で左上揃え
- 03コードはウィンドウの形の白い面に、Operator Mono で組む
- 04赤（#b41700）は注意を促すページだけ
- 05半数以上のページは文字を持たない。説明はコードと画面に任せる
- 06濃い青と薄い灰の2色を決め、ページごとに地と文字を入れ替える
- 07見出しは太いサンセリフで、いつも左上に置く
- 08コードはウィンドウの形の白い面に入れ、中央に置く
- 09注意のページだけ3色目を使う
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
Be the browser’s mentor, not its micromanagerについてよくある質問
1色で統一した登壇資料のデザイン例は？
Andy Bellの「Be the browser’s mentor, not its micromanager」は、ウルトラマリンと薄い灰の2色を地と文字で入れ替えながら、見出しを Inter の太字で左上に置いて統一しています。
どんなフォントを使っている？
見出しと本文は Inter（ExtraBold・Bold・SemiBold・Medium）、コードは Operator Mono です。
何ページある？
16:9で102ページです。1920px換算で見出しは132px前後、本文27pxです。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
