数値の早見表
現場でいちばん引かれるのは数字です。規格に根拠があるものと、経験則とを分けて並べています。
図の中身を文字で読む
- 迷ったらこの値から始める
- コントラスト比 押せる大きさ 画面の折り返し
- 4.5:1 本文（AA） 24 WCAG 2.2 の下限 375 下限として必ず見る幅
- 3:1 24px以上の文字、UI部品と図形の境界 768 1段組と2段組の境目あたり
- 44 指で押す前提の実務値
- 7:1 AAA。長文を読ませる面はここを狙う 1280 版面が伸びきる目安
- 半透明と写真の上は、合成後の実画素で測る 見た目が小さくても、当たり判定を広げれば足りる 端末名で決めず、中身が崩れる幅で決める
- 行 余白の刻み 動きの時間
- 1.7〜1.9 和文本文の行間 100ms 色・不透明度
- 1.3〜1.5 見出しの行間 4 8 12 16 24 32 48 64 96 240ms 開閉・切替
- 35〜45 和文1行の全角文字数 この階段の中からしか選ばない。 420ms 全画面
- 中間の値を作った時点で、統一は崩れる。 入るのは ease-out、出るのは ease-in で入りより短く
- 字間は本文では触らない。詰めるのは見出しだけ 見出しの上は下の2〜3倍あける 動かすのは transform と opacity だけ
- 速度（実利用者の75パーセンタイル） 文字の大きさ
- 2.5秒 LCP。最大の要素が出るまで 16px 本文の下限。これ未満にしない
- 0.1 CLS。表示のずれの累積 1.2〜1.25 見出しの階段の比率
- 200ms INP。操作してから画面が応えるまで 4段 1ページで使う大きさの数の上限
- 画像を表示寸法の2倍以下に縮めるだけで、たいてい LCP は入る px ではなく rem。利用者の設定に追従させる
- どれも出発点であって、守るべき下限は WCAG に由来するものだけ。根拠は各ページの出典にある。
コントラスト比#
| 対象 | 必要な比 | 出どころ |
|---|---|---|
| 本文 | 4.5:1 | WCAG 1.4.3（AA） |
| 24px 以上、または太字18.66px 以上 | 3:1 | WCAG 1.4.3（AA） |
| UI部品と図形の境界 | 3:1 | WCAG 1.4.11（AA） |
| 本文を AAA にする | 7:1 | WCAG 1.4.6（AAA） |
| フォーカスの枠 | 3:1 | WCAG 1.4.11 |
半透明の要素と、写真の上の文字は、CSS の値ではなく合成されたあとの実画素で測ります。
押せる大きさ#
| 値 | 意味 |
|---|---|
| 24×24 | WCAG 2.2 の下限（2.5.8・AA） |
| 44×44 | 指で押す前提の実務値 |
| 8px | 隣り合う操作要素のあいだに空ける最小の距離 |
見た目は小さくてかまいません。当たり判定を padding か擬似要素で広げれば足ります。 擬似要素で広げたときは、要素の箱を測っても値が変わりません。確かめるときは、その座標に何があるかを document.elementFromPoint(x, y) で見ます。
24×24 には除外があります。次のものは、この基準の対象外です（WCAG 2.5.8 の Exceptions）。
| 除外 | 例 |
|---|---|
| 文中のリンク | 段落の中に置いたリンク |
| 同じ操作が別の場所にもある | 小さなアイコンと、同じ働きの大きなボタンが同居する |
| 見た目が法令や慣行で決まっている | 地図の凡例など |
| 中身の意味が大きさに含まれる | 地図のピン、文章そのもの |
除外に当たるものでも、指で押す画面なら 44×44 に近づけるほうが親切です。基準を満たすことと、押しやすいことは別の話です。
文字と行#
| 項目 | 値 | 根拠 |
|---|---|---|
| 本文の下限 | 16px | 経験則。これ未満は拡大しないと読めない |
| 見出しの階段 | 比 1.2〜1.25 | 経験則 |
| 1ページで使う大きさ | 4段まで | 経験則 |
| 和文本文の行間 | 1.7〜1.9 | 経験則 |
| 見出しの行間 | 1.3〜1.5 | 経験則 |
| 和文1行の文字数 | 全角35〜45 | 経験則 |
| 欧文1行の文字数 | 45〜75 | WCAG 1.4.8 は80字以下（AAA） |
| 段落間 | 行間の0.8〜1.2倍 | 経験則 |
指定は px ではなく rem で。利用者のブラウザ設定に追従させます。
余白#
4か8を単位にした階段から選びます。あいだの値を1つ作った時点で、揃いは崩れます。
4 8 12 16 24 32 48 64 96 128| 場面 | 目安 |
|---|---|
| 文字と、そのラベル | 4〜8 |
| 組の中の要素どうし | 8〜16 |
| 組と組のあいだ | 24〜48 |
| 章と章のあいだ | 64〜128 |
| 小見出し（h3）の上 | 下の2〜3倍 |
| 章の見出し（h2）の上 | 節と節の余白（64〜96）をそのまま |
角丸#
規格はありません。だから案件で1つ選び、--radius に入れて通します。値を2つ持った時点で、どちらを使うかの判断が部品ごとに発生します。
| 値 | 使いどころ |
|---|---|
| 0 | 罫線と直角で組む紙面。表・フォーム・資料 |
| 2px | 面と罫線が混ざる画面の既定 |
| 4px | 写真や図版の角を落とすとき |
| 999px / 50% | 丸そのものが意味を持つとき。アバター、丸ボタン、バッジ |
この資料は 2px を選んでいます。1pxの罫線と並べても角が潰れて見えず、小さなチップから大きなカードまで、寸法を変えずに同じ値のまま成立するからです。
影#
規格はありません。段の数だけ決めます。1案件で3段まで。段を増やすほど、どの部品がどの段かの判断が部品ごとに発生します。
| 段 | 使いどころ | 層の数の目安 |
|---|---|---|
--shadow-1 | 押せるもの。ボタン、チップ | 2 |
--shadow-2 | 紙面から少し浮くもの。カード、ドロップダウン | 3 |
--shadow-3 | 前面に出るもの。ダイアログ、ドロワー | 4 |
1段は1枚の影ではなく、ぼかしの違う層を重ねて作ります。近い層は小さく濃く、遠い層は大きく薄く。色は無彩色の黒でなく、地の色相をわずかに借りると紙になじみます。暗い地では影が沈むので、層を減らして面の明るさで段を出します。値は影の作業台で、光の向き・柔らかさ・濃さから作ります。
画面の折り返し#
| 幅 | 何を見るか |
|---|---|
| 375px | 下限。ここで横スクロールが出ないこと |
| 768px | 1段組と2段組の境目 |
| 1024px | サイドバーが成立し始める |
| 1280px | 版面が伸びきる目安 |
| 1280pxで400%拡大 | WCAG 1.4.10（AA）のリフロー。320px相当 |
端末の名前では決めません。中身が崩れる幅で決めます。
動きの時間#
| 用途 | 時間 | 曲線 |
|---|---|---|
| 色・不透明度の変化 | 100ms前後 | ease-out |
| 開閉、切り替え、要素の出入り | 200〜300ms | 入り ease-out／出 ease-in |
| 画面全体が動く | 400〜500ms | ease-in-out |
| 順次表示のずらし幅 | 40〜60ms | 上位の数件だけ |
500ms を超える動きを操作の途中に置くと、待たされていると感じられます。動かすのは transform と opacity だけです。
速度#
実際の利用者の75パーセンタイルで判定します。手元の1回の計測ではありません。
| 指標 | 良好 | 要改善まで |
|---|---|---|
| LCP | 2.5秒以下 | 4.0秒 |
| CLS | 0.1以下 | 0.25 |
| INP | 200ms以下 | 500ms |
| 目安 | 値 |
|---|---|
| 画像の書き出し寸法 | 表示寸法の2倍まで |
| 1ページの画像の合計 | 1MB以下を目標 |
| Webフォント | 1書体。数百KBを超えるならサブセット |
色#
| 項目 | 目安 |
|---|---|
| 1画面で使う色相 | 1〜2 |
| 強調色 | 1色。面積は画面の5%以下 |
| 明度の段 | 5〜9段（100〜900） |
| ダークモードの彩度 | 明るい地の値から10〜20%落とす |
重ね順#
| 段 | 用途 |
|---|---|
| 0〜9 | 通常の重なり |
| 10〜99 | 固定ヘッダー、sticky |
| 100〜999 | ドロップダウン、ツールチップ |
| 1000以上 | モーダル、トースト |
値を直接書かず、名前を付けて持ちます。