Talk
Overseas / US16:9 · 101p
Managing Design Systems (Smashing NY 2024)
Nathan Curtis (Directed Edges)の登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
見出しはパンくずで、章名と話題を1行に並べる。
Nathan Curtisのデザインシステム運用の登壇資料は、濃いグラファイトの地に白い仕様書の紙面を並べ、2段の見出しで現在地を示しながら101ページを進める。
パンくずの見出しがよく効いてるんだよね。章名を灰色で先に言って、話題を白で言う順番だから、101ページの長丁場でも話の階層を見失わない。目次を毎ページ背負ってる感じ。
- 1左上の見出しは、灰色の章名と白の太字の話題を斜線で区切る。いまどこかが一目でわかる
- 21枚の図形は中央値56個。仕様書や表を縮小して並べ、細部より量と形で実例を見せる
- 3表紙の点と線の図が、中扉では細い灰色の曲線として続く。話の枝分かれを線で表す
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上129 右158 下69 左106
- 1枚の文字量
- 中央値 約230字
- 多いページ
- 約835字
- 写真・画像の面積
- 約0%
公開PDFの101ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上51・下11・左48・右27px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 1.2:1
Typography
書体と文字サイズ（実測）
見出し・本文・注記
- 使用
- グロテスク系サンセリフ（推定）
- 代替
- Inter
- 表紙・中扉の大見出し資料の型 Aa96px · PPT 48pt
- ページ見出し資料の型 Aa36px · PPT 18pt
- 本文資料の型 Aa18px · PPT 9pt
- 注釈・出典資料の型 Aa16px · PPT 8pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
濃い地の左に題名を2行、灰色の副題を2行、下に名前・会場・日付を小さく。右には点と線の枝分かれの図を置き、パステルの点で分岐を色分けする。
中扉
灰色の細い曲線を画面の端から端へ流し、ピンクの点を1つ置く。その下に用語の見出しと言い換えを灰色で、定義を白で2行。下端に仕様書の縮小を横一列に並べる。
図解
左上に章名と話題の見出し。下に3種類の仕様書の紙面を白い縦長の紙として並べ、黄色の吹き出しで要所を指す。
本文
濃い地の中央に部品の画面を1つ、紫の枠で囲んで置く。左下にプラグインの設定画面を小さく重ね、道具と結果を同じ画面に収める。
本文
左に仕様書の紙面を縦長に置き、右に緑のチェックと黄色の注意の記号で5項目を並べる。できていることと課題を記号の色で分ける。
比較・表
白地に切り替え、左に部品の正しい例と誤りの例を色の見出しで3つ、右に番号つきの点検項目を細かく並べる。
Reproduce
この型で資料を作るには
- 01地は#21262aの濃いグラファイト。資料の紙面は白で置く
- 02見出しは左上に固定し、章名と話題を斜線で区切る
- 03本文18px・見出し36px（1920px換算）。細かい実例は縮小して並べる
- 04記号は緑のチェックと黄色の注意の2種類
- 05左下にロゴと著作権表記を小さく固定する
- 06章名／話題の2段の見出しをテンプレートに組み込む
- 07仕様書や表は白い紙として縮小して並べ、黄色の吹き出しで要所を指す
- 08表紙の点と線の図を、中扉の曲線として使い回す
- 09書体はInterなど1ファミリーの太さ違いで揃える
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
Managing Design Systems (Smashing NY 2024)についてよくある質問
Managing Design Systemsのスライドのデザインの特徴は？
濃いグラファイトの地に、仕様書や表を白い紙面として縮小して並べています。左上の見出しは章名と話題を斜線で区切ったパンくずの形で、101ページのどこにいるかを示しています。
どんなフォントを使っている？
埋め込み書体名は取得できませんでした。画像からは、見出しから注記までグロテスク系のサンセリフ1ファミリーで組まれていると推定できます。
何ページある？文字の量は？
16:9で101ページです。1ページの文字数は中央値230字、多いページでは830字ほどあり、1920px換算で本文18px・見出し36pxです。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
