Talk
Overseas / LU16:9 · 95p
A Designer’s Guide to Documenting Accessibility & User Interactions
Stéphanie Walterの登壇資料 — 資料デザインの参考
Editor's note — 編集部の視点
見出しは黄色のマーカー、章は紫と黄色の面で切る。
Stéphanie Walterのアクセシビリティ文書化の登壇資料は、自作の線画アイコンと黄・紫の色の約束事で、95ページの長い手引きを迷わず追える形にしている。
目次の4色と中扉の色がちゃんと対応してるんだよね。Interactionsは黄色、Way-findingは濃い紫。章の居場所を色で先に渡しておくから、95ページあっても迷子にならない。
- 1表紙の題名は語ごとに黄色の帯を敷く。マーカーで引いたような、手作業の温度が残る
- 2中扉は黄か紫の面に、ずらした細い線の枠を重ねる。章の変わり目が遠目にもわかる
- 3見出しは1920px換算で48px、本文30px。見出しの下の短い線が全ページの目印になる
Measured
判型・余白・文字量（実測）
- 余白（1920px換算）
- 上122 右81 下66 左111
- 1枚の文字量
- 中央値 約51字
- 多いページ
- 約233字
- 写真・画像の面積
- 約19%
公開PDFの95ページから計測。余白は本文サイズ以上の文字を置く範囲の外側です（ページ番号などの小さな文字は端から 上52・下49・左51・右63px）。
Color
配色
実測の面積比（代表ページ）
本文の文字色と背景のコントラスト: 12.8:1
Typography
書体と文字サイズ（実測）
見出し・中扉（Bold）
- 使用
- Booster Next FY
- 代替
- Lexend
本文・箇条書き（Regular / Bold）
- 使用
- Libre Franklin
- 代替
- Libre Franklin
PDFに埋め込まれた書体: BoosterNextFY-Bold（43%）、LibreFranklin-Regular（23%）、Roboto-Regular（19%）、Roboto-Medium（5%）
- 表紙・中扉の大見出し資料の型 Aa120px · PPT 60pt
- ページ見出し資料の型 Aa48px · PPT 24pt
- 本文資料の型 Aa30px · PPT 15pt
- 注釈・出典資料の型 Aa12px · PPT 6pt
px は横1920pxに換算した値。見本は半分の大きさで表示しています。
Page types
ページの型
表紙
左に線画の人物と、画面・スマホ・アイコンを組んだ挿絵。右に題名を4行で置き、語ごとに黄色の帯を敷く。下に細い線を引き、名前・サイト・年を1行で添える。
目次
画面を4つに割り、薄紫・黄・濃い紫・紫の面にそれぞれ線画のアイコンと項目名を置く。項目名の下に短い線を引き、4つの観点を色で覚えさせる。
中扉
黄色の面の中央に章題を2行、下に白い短い線。細い紫の線の枠を面から少しずらして重ね、紙を重ねたような奥行きをつける。
中扉
同じ型を濃い紫の面と白文字で組む。面の色は目次の4色と対応させ、型は変えずに章の居場所だけを色で示す。
本文
左にサイトの画面を大きく、右に見出しと箇条書きを4項目。各項目の頭の語に下線を引き、参照先の一覧として使えるようにする。
本文
左右に作業画面と配布物のキャプチャを並べ、右下に短い説明を1行添える。道具の紹介を1枚にまとめる。
Reproduce
この型で資料を作るには
- 01強調は黄色#fdda2aの帯か、見出しの下の短い線に限る
- 02中扉は黄か紫の面に、ずらした線の枠を重ねる
- 03見出しはBooster Next FY、本文はLibre Franklin
- 04見出し48px・本文30px（1920px換算）、1枚の文字は中央値51字
- 05挿絵とアイコンは同じ太さの線画で揃える
- 06語ごとに黄色の帯を敷く見出しのスタイルを1つ作る
- 07中扉の型を1つ決め、面の色だけを目次の色に合わせて替える
- 08アイコンは線の太さと色数をそろえて自作する
- 09見出しの下に短い線を引き、ページの型を統一する
スライドのデザイン分析MDに含まれるもの
実測の判型・余白・文字サイズ（PowerPoint / Google スライドの pt 換算つき）・文字量 / カラートークンとコントラスト / ページの型 / AIっぽさを消すルール / Claude・ChatGPT・Gemini 用の生成プロンプト / Web資料（HTMLスライド）の実装方針 / 盗用を避ける差し替えリスト（Pro: 色・文字・余白を反映済みの Web資料のひな形・Marp テーマCSS・tokens.json）
A Designer’s Guide to Documenting Accessibility & User Interactionsについてよくある質問
Stéphanie Walterのアクセシビリティの登壇資料のデザインの特徴は？
白に近い地に、黄色のマーカー風の帯と紫系の面を組み合わせています。目次の4色が中扉の色と対応しており、挿絵とアイコンは同じ太さの線画で統一されています。
どんなフォントを使っている？
見出しはBooster Next FY（Bold）、本文はLibre Franklinです。1920px換算で本文30px・見出し48pxです。
何ページある？
16:9で95ページです。1ページの文字数は中央値51字で、参照先をまとめたページでは230字ほどになります。
安心してお使いいただくために
- 引用の範囲で掲載
- 代表ページ数枚を縮小して、解説と実測値に添えています。出典と元資料へのリンクを必ず表示します。
- PDF・画像は配布しません
- 資料そのもののダウンロードは提供していません。原本は公開元のページでご覧いただけます。
- MDは数値と構造だけ
- デザイン分析MDに、元資料の文章・画像・図版は含みません。差し替え必須のものも明記しています。
- 人物写真に配慮
- 一般の社員・来場者など、私人が大きく写るページは掲載しません。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
近い資料
登壇資料The Illustrated Guide to Node.js
David Neal（ReverentGeek）開発
登壇資料Designing APIs: How to ensure accessibility in design system components
Feli Bernutz開発
登壇資料デザイン組織を進化させるための仕組み化の要諦（Designship 2024）
ファインディ株式会社人材 / エンジニア向けサービス
登壇資料Building Experiences: Design Systems, User Experience, and Full Site Editing
Michelle Schulp HuntUX