Talk
Overseas / DE16:9 · 69p
Designing APIs: How to ensure accessibility in design system components
Feli Bernutzの登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
黒地に紙吹雪、中身はきっちり図解。
Feli Bernutzの登壇資料は、表紙の青とピンクの図形で明るく入り、本文は紺の面に部品の構造を点線で描く組み方へ切り替えることで、アクセシビリティの話を軽やかに運んでいる。
暗い地で、水色とピンクの棒がぽんぽん跳ねてる表紙。ラムネの瓶みたいに涼しくてすき。中の図解は紺に落ち着くから、はしゃぎすぎない感じもいい。
- 1表紙は斜めの棒と丸と三角だけ。図形の色で、暗い地でも入口を明るくする
- 2部品の構造図は紺の面に点線の枠で描き、名前は細い線で外へ引き出す。図を文字で汚さない
- 3本文は1920px換算で36px、最大114px。1枚の文字は中央値61字に抑えている
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上71 右208 下45 左169
- 1枚の文字量
- 中央値 約61字
- 多いページ
- 約386字
- 写真・画像の面積
- 全面に画像（判定不可）
公開PDFの69ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上71・下44・左155・右81px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 16.7:1
Typography
書体と文字サイズ（実測）
見出し・本文（Bold / Regular / Light / Thin Italic）
- 使用
- Spotify Mix
- 代替
- Figtree
コード
- 使用
- Menlo
- 代替
- JetBrains Mono
中扉の対比する語
- 使用
- 手書き風の筆記体（推定）
- 代替
- Caveat
PDFに埋め込まれた書体: Menlo-Regular（49%）、SpotifyMix-Bold（15%）、SpotifyMix-Regular（15%）、SpotifyMix-Light（8%）
- 表紙・中扉の大見出し資料の型 Aa114px · PPT 57pt
- ページ見出し資料の型 Aa50px · PPT 25pt
- 本文資料の型 Aa36px · PPT 18pt
- 注釈・出典資料の型 Aa35px · PPT 18pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
暗い灰の地の左右に、青・ピンク・水色の短い棒と丸と三角を散らす。中央に題と副題、細い線を挟んで名前と会場名を置く。図形は画面の端で切り、外まで続くように見せる。
図解
競技の場面を手描きの線画にして、黄色の床の上に競技名を手書きで置く。写真の代わりに絵で、場面の空気だけを伝える。選手の顔を描き込まずに済むのも絵の利点。
写真
手で触れて使う道具の写真を、斜めから大きく切り取って1枚置く。左下に出典を小さく添え、ほかの文字は置かない。話題の実物を、説明より先に見せる。
中扉
青の面に同じ語を細い書体で何行も敷き詰め、中央の1行だけ手書き風の書体に替えて2つの語を対比させる。繰り返しを地の模様にして、1行だけを浮かせる。
図解
紺の面の左上に部品名の見出し、中央に部品の枠を点線で描く。各スロットの名前は細い引き出し線で枠の外に出す。設計図のように、構造だけを見せる。
比較・表
左に橙の縦長の列、右に青の縦長の列を置き、間を絡まった線でつなぐ。2つの立場の距離を、線のもつれで見せる。列の中の項目は小さく、上下の並びで比べる。
Reproduce
この型で資料を作るには
- 01背景は暗い灰（#1e1e1e）か紺（#18265b）。明るい面は中扉などの要所だけ
- 02図形の色は青系が軸。ピンクと橙は差し色にとどめる
- 03書体は Spotify Mix の太さ違いで、見出しと本文を組み分ける
- 04コードは Menlo。本文は36px前後（1920px換算）
- 05構造図は点線の枠と細い引き出し線で描く
- 06表紙と区切りのページに、同じ形と色の小さな図形を散らしてモチーフにする
- 07本文ページは暗い地に戻し、図形は出さない
- 08部品の構造は点線の枠で描き、名前を引き出し線で外に置く
- 09比べる2つの立場は、色の違う縦長の列で左右に並べる
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
Designing APIs: How to ensure accessibility in design system componentsについてよくある質問
ダークテーマの登壇資料で参考になるデザインは？
Feli Bernutzの「Designing APIs」は、暗い灰と紺を地にして、表紙だけ青とピンクの図形を散らしています。本文は点線の枠と引き出し線の構造図で組んでいます。
どんなフォントを使っている？
見出しと本文は Spotify Mix の Bold・Regular・Light・Thin Italic、コードは Menlo です。本文は1920px換算で36px前後です。
何ページある？
16:9で69ページです。1ページの文字数は中央値61字です。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
