Talk
Overseas / IN16:9 · 21p
From π to Pie charts
Rasagy Sharmaの登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
見出しはセリフ体、注記は等幅で組む。
Rasagy Sharmaの登壇資料「From π to Pie charts」は、Playfair DisplayとIBM Plex Monoをクリーム地に置き、数学と技術の話を誌面のように見せる。
等幅の注記まで斜体にしてるのが効いてる。Plex Monoのイタリックって癖が強いのに、Playfairの斜体と並べると妙に仲がいい。組み合わせの勘がある。……いいね！！
- 1見出しはPlayfair Display、注記はIBM Plex Mono。数式の話とコードの話を書体で分ける
- 2区切りの一語は1920px換算で250px。21ページの短い話に、はっきりした山をつくる
- 31枚の文字は中央値26字。語りは声に任せ、画面は見出しと作例の写真に絞る
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上197 右181 下114 左30
- 1枚の文字量
- 中央値 約26字
- 多いページ
- 約200字
- 写真・画像の面積
- 約25%
公開PDFの21ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上159・下76・左27・右124px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 6.6:1
Typography
書体と文字サイズ（実測）
見出し・副題（Medium / Italic）
- 使用
- Playfair Display
- 代替
- Playfair Display
注記・経歴・名前（Regular / Italic / Bold Italic）
- 使用
- IBM Plex Mono
- 代替
- IBM Plex Mono
PDFに埋め込まれた書体: IBMPlexMono-Regular（37%）、PlayfairDisplayRoman-Med（26%）、IBMPlexMono-Italic（21%）、IBMPlexMono-BoldItalic（6%）
- 表紙・中扉の大見出し資料の型 Aa250px · PPT 125pt
- ページ見出し資料の型 Aa40px · PPT 20pt
- 本文資料の型 Aa32px · PPT 16pt
- 注釈・出典資料の型 Aa28px · PPT 14pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
クリーム地の中央に題名を2行で大きく組み、後半の語だけを斜体にする。下に斜体の副題を1行、さらに等幅の小さな文字で名前・会場・日付を3行添える。
人物紹介
淡い青の地に、小さめの前置きと斜体の一語を極端に大きく置く。下と右には講義名や経歴を等幅の小さな文字で並べ、見出しと注記の差を最大にする。
写真
上にセリフ体の見出しを1行。その下に作品の写真を大きさを変えて隙間なく敷き、左端は裁ち落としにする。説明は入れず、作例の数で語る。
図解
見出しの下に地図の作例を左右に2点置き、余白に等幅の短い説明を添える。暗い地図がクリーム地の中で目を引き、どちらが何の図かを注記で結ぶ。
本文
見出しの中で、要の2語だけを斜体に切り替える。下には幾何学の作図と、それをもとに生成した模様の作例を並べ、見出しの主張を絵で受ける。
Reproduce
この型で資料を作るには
- 01書体は2つだけ。見出しはPlayfair Display、注記はIBM Plex Mono
- 02強調は太字にせず、斜体に切り替える
- 03地はクリーム#f6f0ec。区切りのページだけ淡い青#bad6ecにする
- 04文字色は紺と青の2段階で、黒は使わない
- 051枚の文字は30字前後まで。作例の写真を主役にする
- 06Playfair DisplayとIBM Plex Monoを組み、見出しと注記の役割をはっきり分ける
- 07強調したい語は斜体にする、というルールを1つだけ決める
- 08区切りのページは地の色を変え、一語を画面幅いっぱいに組む
- 09作例の写真は余白を詰めて並べ、説明は等幅で短く添える
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
From π to Pie chartsについてよくある質問
From π to Pie chartsのスライドのデザインの特徴は？
クリーム地に紺と青の文字だけで組み、見出しはセリフ体のPlayfair Display、注記は等幅のIBM Plex Monoで分けています。強調は斜体で行い、区切りのページだけ淡い青の地にしています。
どんなフォントを使っている？
Playfair Display（Medium・Italic）とIBM Plex Mono（Regular・Italic・Bold Italicなど）の2ファミリーです。どちらも無料で使えます。
何ページある？文字の大きさは？
16:9で21ページです。1920px換算で本文32px・見出し40px、最大の一語は250pxです。1ページの文字数は中央値26字です。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
