Talk
Japan16:9 · 24p
noteの目指す世界とプロダクトマネジャー
note株式会社の登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
白と黒だけ、色はほぼ使わない。
noteのプロダクトマネジャー向け登壇資料は、太い見出しと線画の人物だけで1枚1論点を押し通し、要所で黒地のページを挟んで会場の視線を話し手に引き戻している。
白いページが続いて、ふっと黒地に一言だけ出てくる流れ！ライブで照明が落ちて、次の曲のイントロが鳴る瞬間みたいなんだ！線画の人たちが並ぶページは、出演者の顔見せっぽくてワクワクする！
- 1見出しは1920px換算で64px、本文32px。後ろの席からでも、見出しだけで話の筋が追える
- 2問いかけのページは黒地に白文字1行。白いページが続いた後なので、暗転のように効く
- 3人物は白黒の線画で統一。写真を使わない分、どのページもロゴと同じ温度に収まる
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上157 右149 下181 左154
- 1枚の文字量
- 中央値 約72字
- 多いページ
- 約326字
- 写真・画像の面積
- 約6%
公開PDFの24ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上141・下54・左154・右145px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 18.9:1
Typography
書体と文字サイズ（実測）
和文の見出し・本文（Regular / Bold）
- 使用
- Noto Sans JP
- 代替
- Noto Sans JP
一部の本文
- 使用
- MS PGothic
- 代替
- BIZ UDPゴシック
一部の見出し・図中の文字
- 使用
- Zen Kaku Gothic New
- 代替
- Zen Kaku Gothic New
数字（Bold）
- 使用
- Roboto
- 代替
- Roboto
PDFに埋め込まれた書体: NotoSansJP-Regular（43%）、NotoSansJP-Bold（24%）、MS-PGothic（19%）、ZenKakuGothicNew-Regular（4%）
- 表紙・中扉の大見出し資料の型 Aa93px · PPT 47pt
- ページ見出し資料の型 Aa64px · PPT 32pt
- 本文資料の型 Aa32px · PPT 16pt
- 注釈・出典資料の型 Aa27px · PPT 14pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
白地の左上に演題を太字2行、左下にイベント名と登壇者名を小さく、右下にロゴを大きく置く。色も写真も使わず、文字の大小だけで組む。
数字
左半分をロゴとノートPCの写真にして、右に短い説明と指標を4行。指標名は左、数字は右に太く大きく寄せ、下に細い灰の線を引いて表の代わりにする。
本文
太い見出し1行、2行の説明、その下に街のイラストと要点の段落を左右に並べる。イラストだけに色を許し、文字は黒で通す。イラストの横幅は本文の段落と揃える。
図解
黒い矢羽根3つで価値の流れを横に並べ、その下で矢印と短い文を左から右へつなぐ。最後に灰の帯で結論を1行にまとめる。矢印は細い灰の線で描く。
メッセージ
上に小さなラベルと2行のミッション、下に線画の人物を6人横一列に並べる。人物の持ち物を変えて、いろいろな書き手がいることを見せる。
中扉
白地の左に問いかけを大きく1行、右に考え込む線画の人物を1人。文字と絵の2要素だけで、次の話題の入口をつくる。余白を広くとり、間を置かせる。
Reproduce
この型で資料を作るには
- 01色は白と黒とグレーだけ。色が入るのはイラストと写真の中に限る
- 02見出しは64px前後、本文は32px前後（1920px換算）。1枚の文字は中央値72字
- 03人物は線画で描き、写真は使わない（登壇者の紹介を除く）
- 04上下左右に150px前後の余白をとり、文字を中央寄りに集める
- 05話を切り替える問いは黒地に白文字1行で見せる
- 06見出しは Noto Sans JP の Bold で大きく、1枚に1つの論点だけを置く
- 07人物は白黒の線画で統一し、ポーズと持ち物でバリエーションをつける
- 08数字のページは表を使わず、ラベルと数字の間に細い線を引くだけにする
- 09話の山場の前に黒地のページを1枚挟む
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
noteの目指す世界とプロダクトマネジャーについてよくある質問
noteの登壇資料のデザインの特徴は？
白と黒だけで組み、太い見出しで1枚1論点を示す構成です。人物は線画で描き、話の切り替えには黒地に白文字のページを挟んでいます。
どんなフォントを使っている？
和文は Noto Sans JP（Regular・Bold）が中心で、一部に Zen Kaku Gothic New、数字に Roboto が使われています。本文は1920px換算で32px前後です。
何ページある？
16:9 の横長で24ページです。1ページの文字数は中央値で72字と少なめです。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
