TalkOverseas / US16:9 · 93p

The Illustrated Guide to Node.js

David Neal（ReverentGeek）の登壇資料 — 資料デザインの参考

元の資料を見るspeakerdeck.com

David Neal（ReverentGeek）「The Illustrated Guide to Node.js」の1ページ目（表紙） — 出典: David Neal（ReverentGeek）「The Illustrated Guide to Node.js」（speakerdeck.com）。解説のために一部のページ（6枚）を縮小して引用しています。全ページは元の資料でご覧ください。

David Neal（ReverentGeek）「The Illustrated Guide to Node.js」の6ページ目（メッセージ） — 出典: David Neal（ReverentGeek）「The Illustrated Guide to Node.js」（speakerdeck.com）。解説のために一部のページ（6枚）を縮小して引用しています。全ページは元の資料でご覧ください。

Editor's note — 編集部の視点

表紙の題字まで、ぜんぶ手描き。

David Nealの登壇資料は、気持ちを伝えるページを手描きのレタリングと棒人間で描き、手順のページは白地に黒い端末の箱と等幅体で淡々と組むことで、絵と画面を行き来させている。

LeoMotion & Direction

手描きの棒人間が、コードのページの隅にひょっこり顔を出す！真面目な説明の途中でカメラが脇役を抜くみたいで、会場が一瞬ゆるむのが目に浮かぶ！

1全ページの下端に黒い帯とハンドル名。どこを撮られても、誰の資料かが残る
2コマンドは黒い箱に等幅の白文字で。スライドがそのまま端末の画面に見える
3本文は1920px換算で40px、見出し64px。コードも大きく組み、後ろの席でも追える

Measured

判型・余白・文字量（実測）

本文・見出しを置く範囲

余白（1920px換算）: 上117 右421 下240 左82
1枚の文字量: 中央値約119字
多いページ: 約354字
写真・画像の面積: 全面に画像（判定不可）

公開PDFの93ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から上31・下124・左82・右181px）。

Color

配色

実測の面積比（代表ページ）

本文の文字色と背景のコントラスト: 21:1

Typography

書体と文字サイズ（実測）

コマンド・コード

使用: JetBrains Mono
代替: JetBrains Mono

見出し・箇条書き（Light / Regular / Medium）

使用: Poppins
代替: Poppins

表紙の題字・メッセージ

使用: 手描きレタリング（推定・画像）
代替: Caveat

PDFに埋め込まれた書体: JetBrainsMono-Regular_Me（87%）、DistrictPro-Thin（7%）、Poppins-Light（3%）、Poppins-Regular（2%）

表紙・中扉の大見出し資料の型 Aa118px · PPT 59pt
ページ見出し資料の型 Aa64px · PPT 32pt
本文資料の型 Aa40px · PPT 20pt

px は横1920pxに換算した値。見本は半分の大きさで表示しています。

Page types

ページの型

表紙
白地の上にリボン形の手描きの題字、中央に緑の大きな技術名のロゴを置き、リボンの上に棒人間を座らせる。下端は全ページ共通の黒い帯。
メッセージ
手描きの大文字を上下2行に分け、その間に描いた地球を1つだけ置く。文字で絵を挟む対称の組み方で、一言を1枚に収める。下端の帯以外は何も足さない。
本文
左に見出しと5行の箇条書きを Poppins で、右半分にロケットに乗ったカメのイラストを置く。文字と絵を左右できっぱり分ける。
本文
左上に Poppins の見出しを1行、その下に黒い箱を1つ置き、中に等幅の白文字でコマンドと出力を並べる。端末の画面を再現し、箱の外には何も置かない。
本文
同じ黒い箱の型に、見出しの右へ手描きのアイコンを1つ添える。型を守ったまま小さな絵でページごとに変化をつけ、手順のページが続いても飽きさせない。
本文
上端の黒いタブ風の帯にファイル名、下に色分けしたコードを行ごとに並べる。1行目だけ黄色の帯で強調し、右下に棒人間を立たせる。

Reproduce

この型で資料を作るには

01下端には全ページ共通の黒い帯。左にアイコン、右にハンドル名
02気持ちを伝えるページは手描き、手順を伝えるページは等幅体と黒い箱
03コマンドとコードは JetBrains Mono。本文40px・見出し64px（1920px換算）
04見出しは Poppins で左上に1行。箇条書きは5行前後まで
05右側の余白は421px前後と広めに取り、そこにイラストを置く
06全ページの下端に、名前とアイコンだけの細い帯をつくる
07コマンドは黒い箱に等幅体の白文字で、端末の画面のように見せる
08章の区切りや気持ちのページだけ、手描きの文字と絵に切り替える
09本文ページも右側を空け、小さなキャラクターを1体置く

スライドのデザイン分析MDに含まれるもの

実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）