Talk
Overseas / GB16:9 · 147p
Site-Speed That Sticks
Harry Roberts（CSS Wizardry）の登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
見出しは小文字の極太、色はピンク1色。
Harry Robertsの登壇資料は、Gotham Ultra の小文字をピンクで画面いっぱいに組み、1枚の言葉を14字前後まで削ることで、147枚をテンポよくめくらせている。
Gotham Ultra を小文字で組むと、角が取れて妙に人懐っこい。極太なのに威圧感がないのは、大文字を捨てたから。……いいね！！
- 1文字の89%がピンク1色。表紙は面をピンクで塗り、本文ページは文字を塗って色を反転させる
- 21枚の文字は中央値14字・1行。147枚をめくる速さそのものが、話のリズムになる
- 3目次も本文と同じ極太で5行。行間を詰め、番号ごと1つの塊として見せる
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上252 右188 下113 左100
- 1枚の文字量
- 中央値 約14字
- 多いページ
- 約59字
- 写真・画像の面積
- 約0%
公開PDFの147ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上82・下100・左100・右104px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 17.9:1
Typography
書体と文字サイズ（実測）
見出し・表紙
- 使用
- Gotham Ultra
- 代替
- Montserrat（Black）
補足（Regular Italic）
- 使用
- New York
- 代替
- Newsreader（Italic）
コード（Medium）
- 使用
- Operator Mono
- 代替
- JetBrains Mono
PDFに埋め込まれた書体: GothamUltra（87%）、NewYork-RegularItalic（6%）、OperatorMono-Medium（6%）、OperatorMono-MediumItali（1%）
- 表紙・中扉の大見出し資料の型 Aa256px · PPT 128pt
- ページ見出し資料の型 Aa96px · PPT 48pt
- 本文資料の型 Aa36px · PPT 18pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
ピンクの全面に、白の極太の小文字で題を2行、左下寄せで置く。名前もロゴも入れず、題の塊だけで立たせる。行間を詰め、2行を1つの形に見せる。
写真
比喩の場面を描いた画像を全面に1枚だけ置く。見出しも説明も重ねず、次に話す内容の前振りとして、絵だけで会場に状況を想像させる。
目次
白地に番号つきの章立てを5行、ピンクの極太の小文字で左寄せにする。行間を詰め、画面の上下いっぱいまで使う。番号も同じ書体・同じ色で組む。
本文
濃い青緑の面の左寄せに、コードを等幅体で数行だけ置く。変えたい値だけ白く太くして、残りは灰色に沈める。説明を書かず、差分の1か所に目を向けさせる。
写真
ブラウザの画面を、タブやアドレスバーごとスクリーンショットで全面に見せる。自分の過去の記事を画面ごと資料に持ち込み、出典の説明を省いている。
写真
花の咲く枝に手榴弾が下がる写真を全面に1枚。本文を置かず、比喩を1枚で見せる。白っぽい背景の写真なので、前後の白地のページともなじむ。
Reproduce
この型で資料を作るには
- 01見出しは Gotham Ultra の小文字。本文ページの見出しは96px（1920px換算）
- 02文字色はピンク（#f33058）1色。面をピンクで塗るのは表紙だけ
- 031枚は1行、中央値14字まで
- 04コードは濃い青緑（#002a34）の面に Operator Mono
- 05上の余白は252px前後と深く取り、文字を画面の中ほどに置く
- 06極太のサンセリフを1書体に決め、見出しはすべて小文字で組む
- 07文字色は1色に絞り、表紙だけ面と文字の色を反転させる
- 081枚に置く言葉は1行まで。話の区切りごとにページを分ける
- 09写真や画面キャプチャのページには文字を重ねない
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
Site-Speed That Sticksについてよくある質問
タイポグラフィ主体の登壇資料の例は？
Harry Robertsの「Site-Speed That Sticks」は、Gotham Ultra の小文字をピンク1色で画面いっぱいに組み、1ページ1行まで言葉を削った資料です。
どんなフォントを使っている？
見出しは Gotham Ultra、補足にセリフ体の New York Italic、コードに Operator Mono です。文字の9割近くが Gotham Ultra です。
何ページある？文字の大きさは？
16:9で147ページです。1920px換算で見出し96px・最大256pxで、1ページの文字数は中央値14字です。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
