Talk
Overseas / AT16:9 · 104p
Breaking with Habits
Manuel Matuzovićの登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
表紙は白地に黒の大文字3行、飾りはなし。
Manuel Matuzovićの登壇資料「Breaking with Habits」は、Pangeaの大文字とFira Codeだけで104ページを進め、CSSの話をコードと表示結果の対比で見せる。
表紙の大文字、行間をほぼ詰め切ってるのに窮屈じゃない。下に余白をまるごと残したからだ。コードはFira Codeだけで勝負。書体を2つに絞る潔さ、……いいね！！
- 1表紙は1920px換算で200pxの大文字を左寄せで3行。名前と日付は左下に小さく置くだけ
- 2上半分に暗い地のコード、下半分に白地の表示結果。書いたものと見え方を1枚で対応させる
- 3紹介するサイトには、左下に橙のラベルでURLを添える。画面と行き先を同時に渡す
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上36 右55 下216 左190
- 1枚の文字量
- 中央値 約68字
- 多いページ
- 約289字
- 写真・画像の面積
- 約0%
公開PDFの104ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上36・下96・左118・右52px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 18.9:1
Typography
書体と文字サイズ（実測）
見出し・名前（Medium / Regular / Bold）
- 使用
- Pangea
- 代替
- Inter
コード
- 使用
- Fira Code
- 代替
- Fira Code
PDFに埋め込まれた書体: FiraCode-Regular（80%）、Pangea-Medium（12%）、Pangea-Regular（6%）、Pangea-Bold（2%）
- 表紙・中扉の大見出し資料の型 Aa200px · PPT 100pt
- 本文資料の型 Aa36px · PPT 18pt
- 注釈・出典資料の型 Aa21px · PPT 11pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
白地の左上から、黒の太いサンセリフの大文字で題名を3行。下に大きく余白を残し、左下に名前・イベント・日付を1行で小さく置く。
図解
上半分を暗い紺の地にしてコードを色分けで組み、下半分の白地にその表示結果のフォームを並べる。右上に自分のアカウントを小さく入れる。
本文
中央にサイトの画面を影つきの窓で置き、左下に橙のラベルでURLを添える。右上のアカウント表記はどのページも同じ位置。
本文
計算ツールのサイトの画面を大きく置き、入力欄まで写す。画面そのものを資料として扱い、説明の文字は足さない。
本文
開発ツールを開いたブラウザの画面を黒い縁で囲み、中央に置く。細部を読ませるより、作業中の様子を見せる。
比較・表
黒地に、2つの色空間の立体図を左右に並べ、それぞれの上に名前を白で添える。形の大きさの違いだけで差を見せる。
Reproduce
この型で資料を作るには
- 01見出しはPangeaの太い大文字、コードはFira Code
- 02コードは暗い紺#252235の面に、ピンクや緑の色分けで組む
- 03本文36px、表紙の見出し200px（1920px換算）
- 04右上にアカウント、左下にURLのラベル。位置を固定する
- 05飾りは入れず、白地・黒文字・コード画面の3要素で組む
- 06コードの面と表示結果の面を上下に分けるテンプレートを作る
- 07コードはFira Codeで組み、暗い地でも読める明るい色で色分けする
- 08見出しは太い大文字のサンセリフ（Pangeaの代わりにInterのBoldなど）
- 09外部サイトの紹介では、URLのラベルを決まった位置に置く
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
Breaking with Habitsについてよくある質問
Breaking with Habitsのスライドのデザインの特徴は？
白地に黒の太い大文字の見出しと、暗い紺の面に色分けしたコードだけで組んでいます。コードとその表示結果を上下に並べ、書いたものと見え方を1枚で対応させています。
どんなフォントを使っている？
見出しはPangea（Medium・Regular・Bold）、コードはFira Codeです。文字量の約8割がFira Codeで、1920px換算で本文36px、表紙の見出しは200pxです。
何ページある？
16:9で104ページです。1ページの文字数は中央値68字です。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
