一貫性と標準
同じ意味には同じ見た目・同じ言葉・同じ操作を当て、業界の標準（OS・ブラウザ・ARIA の作法）に従う。学んだことが別の場所でも通じる。
Consistency and Standards
なぜ効くか
Nielsen のヒューリスティック 4 が根拠で、内部の一貫性（自サイト内で揃える）と外部の一貫性（他の製品・プラットフォームと揃える）の 2 つがある。人は一度覚えた対応（緑＝成功、赤＝エラー、← →でタブ移動、Esc で閉じる）を別の画面にも当てはめるので、揃っていれば説明が要らず、揃っていないと毎回学び直す。Web UI では、状態色の 4 色を通知・バッジ・入力欄で共通にする、フォーカスリングを全部品で同じ描き方にする、進む・戻るの動きの向きを揃える、といった内部の揃えと、タブやセレクトのキーボード操作を WAI-ARIA の作法に合わせる外部の揃えがある。差分表示の緑と赤のように、業界で定着した色の意味も外部の標準に含まれる。
UIでの当て方
- 01状態の色（情報・成功・警告・エラー）は 1 組に決め、バナー・バッジ・入力欄・トーストで同じ色と同じアイコンを使う。
- 02フォーカスリングは :focus-visible で全部品に同じ太さ・同じ離れ幅で描く。部品ごとに描き方を変えない。
- 03タブ・セレクト・ラジオ・アコーディオンのキーボード操作は WAI-ARIA の作法（矢印で移動・Home/End・Esc）に合わせる。
- 04画面遷移の動きは方向を固定する。進むときは左へ抜け、戻るときは右へ戻る。逆にしない。
- 05同じ操作は同じ言葉で呼ぶ。「削除」「消去」「取り除く」を混在させない。
誤用・反例
- ページごとに別のデザイナーが作った結果、同じ「保存」ボタンの色・位置・文言が画面ごとに違う。
- 独自のキー操作（j/k など）を、標準の操作（矢印キー）を潰す形で入れる。
この原則を体現するパーツ
- クリック
アラート・バナー解説あり
Alert / Banner
情報・成功・警告・エラーの4色のインラインバナー。アイコンと文言、×ボタンで構成し、×を押すとスライドしながら消える。
- JS
- 静的
バッジ解説あり
Badge
ステータスドット（成功／警告／エラー／情報）、アイコンに重ねる件数バッジ、NEWピル、数値の通知バブルを一覧にした見本。状態や件数を小さく添えるための定番部品です。
- CSSのみ
- クリック
フォーカスリングの設計解説あり実例あり
Focus Ring (:focus-visible)
:focus-visible で「キーボードのときだけ」2px のリングを 2px 離して描く。角丸に追従し、ダーク背景では白＋藍の二重輪。マウスクリックでは出ない。
- JS
- クリック
ARIA タブ（roving tabindex）解説あり実例あり
Roving Tabindex Tabs
Tab でタブ列に入り、← → Home End で移動。選択中のタブだけ tabindex=0（roving tabindex）、aria-selected と aria-controls で読み上げが「料金, タブ, 2/4, 選択」になる。
- JS
- クリック
セレクト
Select / Dropdown
ボタンを押すとリストボックスが開くカスタムのセレクト。矢印キー・Enter・Escで操作でき、選択中の項目にはチェックが付く。
- JS
- クリック
ラジオボタン
Radio Group
選択肢をカード状に並べたラジオグループ。ネイティブの input を使うので矢印キーで移動でき、選んだカードだけ枠と丸が色づく。
- JS
- クリック
共有軸トランジション実例あり
Shared Axis Transition
「次へ」で今の画面が左へ、新しい画面が右から入る。「前へ」なら向きが逆になる。進む・戻るの方向を動きで示すので、どこにいるかを見失わない。
- JS
- クリック
変更差分ビュー
Diff View
変更前後のテキストを行単位で比較し、追加行を緑・削除行を朱でハイライト表示する。+/− 記号付きでひと目で差分を把握できる。
- JS
関わるカテゴリ
出典
- Nielsen Norman Group別サイト ↗ヒューリスティック 4「一貫性と標準」。内部と外部の一貫性の区別。
- W3C WAI別サイト ↗ARIA Authoring Practices Guide。タブ・リストボックス等のキーボード操作の標準。