Talk
Overseas / US16:9 · 101p
The Cost Of JavaScript in 2023
Addy Osmani (Google)の登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
見出しは極太のコンデンス体、写真は切り抜き。
Addy Osmani（Google）の登壇資料「The Cost Of JavaScript in 2023」は、Futuraの極太の大文字と切り抜き写真で、性能の話を広告のように押し切る。
表紙の黄色い財布が、最後のページの右上にまた出てくる！冒頭の小道具をエンドロールでそっと回収する感じ、映画のラストカットみたいでニヤッとする。カチンコまで持ち出すのもずるい！
- 1見出しはFutura Condensed ExtraBoldの大文字。1920px換算で最大214px、幅を埋める
- 2財布や端末は背景を抜いた写真で置く。白地にそのまま載り、物の話がすぐ伝わる
- 3黒地の一覧は、今の項目だけ黄色、ほかは灰色。何の話をしているかを色の差で示す
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上28 右169 下26 左43
- 1枚の文字量
- 中央値 約0字
- 多いページ
- 約28字
- 写真・画像の面積
- 全面に画像（判定不可）
公開PDFの101ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上28・下19・左31・右49px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 1.1:1
Typography
書体と文字サイズ（実測）
見出し（大文字）
- 使用
- Futura Condensed ExtraBold
- 代替
- Anton
補足・説明（Light / Regular）
- 使用
- Helvetica
- 代替
- Inter
端末のページの見出し・説明
- 使用
- Google Sans
- 代替
- Figtree
PDFに埋め込まれた書体: Helvetica-Light（38%）、Helvetica（29%）、GoogleSans-Regular（10%）、Futura-CondensedExtraBol（7%）
- 表紙・中扉の大見出し資料の型 Aa214px · PPT 107pt
- ページ見出し資料の型 Aa38px · PPT 19pt
- 本文資料の型 Aa30px · PPT 15pt
- 注釈・出典資料の型 Aa25px · PPT 13pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
白地の上半分に、極太のコンデンス体で題名を2行、中央揃えで組む。下半分には黄色い財布の切り抜き写真を大きく置き、右下にSNSのアカウントを小さく添える。
メッセージ
白地の左に極太の大文字で3行、その下に灰色の説明を2行。右には端末を持つ手の切り抜き写真を置き、主張と物を左右に分ける。
本文
黒地の左に資源の種類を縦に4つ並べ、今の項目だけ黄色、ほかは灰色にする。右に白の大文字で主張を2行置き、項目と主張の行を揃える。
本文
灰青の地の左に端末の設定画面、右に白い太字の問いを3つ縦に並べる。各問いの下に灰色の補足を1行ずつ置き、下端の脚注で根拠を添える。
比較・表
黒地の左右に、2つのサービスの画面を並べて置く。見出しは入れず、画面同士の対比だけで話を進める。
図解
上端に白の極太の大文字で見出し。その下にコード・ブラウザ・構成図の画面を組み、赤い注記を画面に直接書き込んで見るべき箇所を指す。
Reproduce
この型で資料を作るには
- 01見出しはFutura Condensed ExtraBoldの大文字だけ
- 02地は白と黒が基本。補足は灰色の細い書体で一段下げる
- 03物の写真は背景を抜いた切り抜きで使う
- 04強調色は黄色1色。一覧の今の項目などに限る
- 05本文30px、見出しは最大214px（1920px換算）
- 06見出し用にコンデンスの極太書体を1つ決め、大文字で組む（代わりにAntonなど）
- 07物の写真は背景を抜いて、白地にそのまま置く
- 08補足は灰色の細い書体にして、見出しとの差をはっきりつける
- 09強調色は黄色1色だけにする
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
The Cost Of JavaScript in 2023についてよくある質問
The Cost Of JavaScriptのスライドのデザインの特徴は？
Futura Condensed ExtraBoldの極太の大文字を見出しに使い、背景を抜いた物の写真と組み合わせています。地は白と黒が基本で、強調は黄色1色に絞っています。
どんなフォントを使っている？
見出しはFutura Condensed ExtraBold、補足はHelvetica（Light・Regular）、一部のページはGoogle Sansです。1920px換算で本文30px、見出しは最大214pxです。
何ページある？
16:9で101ページです。多くのページが画像と短い見出しで構成され、画像の面積は平均で9割を超えます。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
