付録B　出典と書籍

連載の入口 → UI設計の基礎

この連載で引いた出典の一覧です。すべて、連載を書いた時点で開けることを確認しています。

日本語で読める指針

ソシオメディア「ヒューマンインターフェース ガイドライン」 — https://www.sociomedia.co.jp/category/shig

一項目が短く、そのまま画面レビューの観点にできます。この連載で引いた項目:

• シンプルにする
• シグニファイア
• 一貫性
• ユーザーの主導権
• 視覚ゲシュタルト
• ユーザーの言葉を使う
• ユーザーの記憶に頼らない
• エラーを回避する
• フィッツの法則
• ヒックの法則
• メンタルモデル、マッピング、モードレス、フリップフロップ問題を避ける
• プリコンピュテーション、タスクコヒーレンス、ショートカットを用意する、モバイルでは包括的より階層的に
• 複雑性保存の法則、ユーザーがとれる操作がひとつしかないなら自動化する、整合性を損なうような操作をユーザーに求めない、値を入力させるのではなく結果を選ばせる、ユーザーが入力したものはユーザーのもの

デジタル庁デザインシステム — https://design.digital.go.jp/

部品ごとの使い方とアクセシビリティ。この連載で引いたページ:

• ボタン: 使い方、ボタン: アクセシビリティ
• スイッチ、チェックボックス: 使い方、インプットテキスト: 使い方
• カラー、タイポグラフィ、余白
• ウェブアクセシビリティ
• ステップナビゲーション、パンくずナビゲーション: 使い方、プログレスインジケーター、ディスクロージャー
• インプットテキスト: 使い方 — 入力値の文字種を限定しない

ウェブアクセシビリティ基盤委員会（WAIC）「WCAG 2.1（日本語訳）」 — https://waic.jp/translations/WCAG21/。「WCAG 2.2（日本語訳）」 — https://waic.jp/translations/WCAG22/（第8章で引く達成基準3.3.7 冗長な入力項目、3.3.8 アクセシブルな認証）。WCAG はウェブコンテンツ・アクセシビリティ・ガイドラインの略

Apple「Human Interface Guidelines」（日本語） — https://developer.apple.com/jp/design/human-interface-guidelines/。第8章で引くページ: データの入力、取り消し/やり直し

導線・ログイン・入力の基準（第7・8章）

• GOV.UK Design System「Back link」 — 入口が多いなら「戻る」ではなく行き先を書く

• 米国国立標準技術研究所（NIST）「SP 800-63B 第4版 Digital Identity Guidelines: Authentication and Authenticator Management」 — パスワードの表示、貼り付けとパスワードマネージャー、構成ルールと定期変更を求めない
• web.dev「ログイン フォームのベスト プラクティス」 — 入力を重複させない、表示の切り替え
• GOV.UK Design System「Passwords」 — 貼り付け、長さの下限、定期変更を求めない

NN/g（ニールセン・ノーマン・グループ）の記事

英語です。原則の名前と要点だけ押さえれば十分で、本文はブラウザの翻訳で読めます。

• 10 Usability Heuristics for User Interface Design — 10原則の本体
• Jakob’s Law of Internet User Experience — 利用者は他のサイトと同じ動きを期待する
• How Users Read on the Web — 人は読まない、拾い読みする
• Recognition vs. Recall in UX — 記憶より認識
• Icon Usability — アイコンにはテキストラベル
• Toggle-Switch Guidelines — スイッチのラベルと使いどころ
• Confirmation Dialogs Can Prevent User Errors — If Not Overused — 確認は重大なときだけ、ボタンは結果が分かる言葉で
• Error-Message Guidelines — エラー文の書き方
• The Principle of Proximity in Gestalt Psychology — 近いものはまとまって見える
• Fitts’s Law and Its Applications in UX — 大きく近いものは押しやすい
• Progress Indicators Make a Slow System Less Insufferable — 処理中の表示と待ち時間の目安
• Breadcrumbs: 11 Design Guidelines for Desktop and Mobile — パンくず
• Designing Empty States in Complex Applications: 3 Guidelines — 空の画面
• Mental Models and User Experience Design — メンタルモデル
• Progressive Disclosure — 段階的開示
• The Power of Defaults — 初期値の力
• Wizards: Definition and Design Recommendations — ウィザードの向き不向き
• Flexibility and Efficiency of Use — 10原則の7番目
• Help and Documentation — 10原則の10番目
• Preventing User Errors: Avoiding Unconscious Slips — 制約、提案、初期値、寛容な形式
• Preventing User Errors: Avoiding Conscious Mistakes — 取り消し
• Website Forms Usability: Top 10 Recommendations — フォームの基本
• Stop Password Masking — パスワードを隠したままにしない

書籍

書籍	向いている目的
D. A. ノーマン『誰のためのデザイン？ 増補・改訂版 — 認知科学者のデザイン原論』新曜社、2015年	人が操作に迷う理由と、分かりやすいデザインの原理を理解する。シグニファイア・フィードバック・制約・概念モデル・対応づけの出どころ
Jenifer Tidwell『デザイニング・インターフェース 第2版』オライリー・ジャパン、2011年	画面構成・ナビゲーション・入力などの解決パターンを実務で引く。画面例には時代を感じるが、パターンの体系は今も使える

前者は考え方の土台、後者はパターン集です。まず一冊なら前者です。

道具

• eslint-plugin-jsx-a11y（React）、eslint-plugin-vuejs-accessibility（Vue） — アクセシビリティの基本を lint で指摘する
• Chrome「Lighthouse の概要」 — ブラウザからアクセシビリティ診断を実行する

---

連載の入口 → UI設計の基礎