Talk
Overseas / GB16:9 · 95p
The Journey of a Byline
Alice Bartlett (Financial Times)の登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
地の色は5色あるのに、見出しの型は1つだけ。
Financial TimesのAlice Bartlettの登壇資料「The Journey of a Byline」は、見出しとロゴの位置を固定し、地の色だけを替えて95ページにリズムをつくる。
記事の画面を1枚ずつ足していくのがコマ送りみたいで楽しい！前の画面を上に残したまま次をつなぐから、観客はバイラインと一緒に旅してる気分になれる。ロードムービーの地図みたい！
- 1左上の見出しに短い下線、右下にロゴ。この枠を固定したまま、地を5色で塗り替える
- 2記事の画面を右端で裁ち落とし、手描きの曲線で指す。実物を見せながら話を運ぶ
- 3見出しは1920px換算で50px、本文24px。書体はMetric2の太さ違いでほぼ組み切る
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上64 右78 下175 左75
- 1枚の文字量
- 中央値 約85字
- 多いページ
- 約339字
- 写真・画像の面積
- 約3%
公開PDFの95ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上64・下135・左71・右29px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 14.4:1
Typography
書体と文字サイズ（実測）
見出し・本文（Medium / Bold / Regular / Medium Italic）
- 使用
- Metric2
- 代替
- Inter
一部の見出し（Bold・少量）
- 使用
- Financier Display
- 代替
- Source Serif 4
PDFに埋め込まれた書体: Metric2-Medium（66%）、Metric2-Bold（14%）、Metric2-MediumItalic（9%）、Metric2-Regular（6%）
- 表紙・中扉の大見出し資料の型 Aa222px · PPT 111pt
- ページ見出し資料の型 Aa50px · PPT 25pt
- 本文資料の型 Aa24px · PPT 12pt
- 注釈・出典資料の型 Aa16px · PPT 8pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
チャコールの地の左上に社名のロゴ、中央の左寄せに白い太字の題名を1行。題名の下にピンクの短い線を引き、左下に氏名・会場・年月を1行で添える。
メッセージ
黄緑の地に、左上の見出しと白の下線、その下に白い本文を1段で組む。右下にロゴを小さく置き、前置きの断り書きを色を替えた1枚で区切る。
本文
左に見出しと短い定義。右端にはアプリの記事画面を裁ち落としで置き、定義の文から手描きの曲線を画面の該当箇所へ伸ばす。
図解
前のページの画面を上に残したまま、下に著者ページの画面を足し、白い手描きの矢印で2つをつなぐ。画面を1枚ずつ足して流れを追わせる。
比較・表
青の地に、2つの画面の該当箇所だけを小さく切り出して左右に置く。それぞれから白い曲線を引き、下に2行ずつ短い説明を添える。
図解
青の地に白い太い枠でシステムの全体を描き、中の部品を青の箱で並べる。左上と右端には手描きのキャラクターを置き、構成図の硬さをやわらげる。
Reproduce
この型で資料を作るには
- 01見出しは左上に置き、下に短い下線を1本。ロゴは右下に固定
- 02地はチャコール・黄緑・青・ピンク・紙色の5色を使い分ける
- 03書体はMetric2。見出し50px・本文24px（1920px換算）
- 04矢印は手描きの細い曲線で、画面や図と説明をつなぐ
- 05下の余白は175px前後と広く取り、文字を下端に寄せない
- 06見出し・下線・ロゴの位置を固定したテンプレートを、地の色違いで5枚作る
- 07画面キャプチャは裁ち落としで置き、説明と手描きの矢印でつなぐ
- 08構成図は白い線の枠と単色の箱だけで組む
- 09書体は1ファミリーの太さ違いで組む（Metric2の代わりにInterなど）
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
The Journey of a Bylineについてよくある質問
The Journey of a Bylineのスライドのデザインの特徴は？
左上の見出しと短い下線、右下のロゴの位置を固定し、地の色をチャコール・黄緑・青・ピンク・紙色で替えています。記事の画面を裁ち落としで見せ、手描きの矢印で説明とつないでいます。
どんなフォントを使っている？
埋め込み書体はMetric2（Medium・Bold・Regularなど）が中心で、一部にFinancier Displayが使われています。1920px換算で本文24px・見出し50pxです。
何ページある？
16:9で95ページです。1ページの文字数は中央値85字です。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
