UXデザイン原則
UI/UX設計時のユーザビリティ検証基準とビジュアルデザインの原則。
目的
UI/UX設計時の検証基準として使用する。厳密なルールではなく、設計判断の拠り所となる経験則である。
ニールセンの10ユーザビリティヒューリスティクス
Jakob Nielsen（1994）が提唱した、インターフェース設計の経験則である。
- システム状態の可視性: 現在何が起きているかを、適切なフィードバックで妥当な時間内にユーザーに伝える。例: 保存中のスピナー、送信完了のトースト、進捗バー
- システムと現実世界の一致: システム寄りの用語ではなく、ユーザーが馴染みのある言葉・概念を使う。例: 「レコードを削除」ではなく「タスクを削除」
- ユーザーの制御と自由: 誤操作から抜け出す「非常口」を常に用意する。例: 取り消し・やり直し、モーダルの閉じるボタン、フォームのキャンセル
- 一貫性と標準: 同じ操作・状況に対して、同じ言葉・動作・見た目を使う。プラットフォームや業界の慣習に従う。例: 削除は常に赤、保存ボタンは常に同じ位置
- エラーの予防: エラーが起きやすい状況を設計で排除する。例: 危険な操作の前に確認ダイアログを出す、無効な入力を受け付けないフォーム
- 記憶よりも認識: 選択肢・操作・情報を可視化し、ユーザーが記憶に頼らなくてよいようにする。例: ドロップダウンで選択肢を提示する、直前の操作をパンくずリストで示す
- 柔軟性と効率性: 初心者にも上級者にも使いやすくする。例: キーボードショートカット、よく使う操作のデフォルト値
- 美的で最小限のデザイン: 画面上の情報は本質的なものに絞る。情報が増えるほど、重要な情報の相対的な視認性が下がる
- エラーの認識・診断・回復の支援: エラーメッセージはエラーコードではなく平易な言葉で、原因を明示し、具体的な対処法を伝える
- ヘルプとドキュメント: 理想はドキュメントなしで使えることだが、必要な場合は検索しやすく、タスク指向で、簡潔に提供する
その他の設計原則
ヒックの法則
選択肢の数が増えるほど意思決定にかかる時間が対数的に増加する（Hick, 1952）。選択肢を絞り、段階的に提示することで意思決定を速める。ただし等確率の選択肢に適用される法則であり、使用頻度に明確な差がある場合は当てはまらない。
認知負荷の最小化
一度に処理させる情報量を減らす（Sweller, 1988）。設計上重要なのは「外的負荷」（不適切な設計による不要な認知コスト）の排除である。例: 関連情報をまとめて提示する、入力フォームを論理的なセクションに分ける。
段階的開示
最初は最も重要な情報・操作のみを見せ、詳細は必要に応じて展開する（Carroll, 1984; Nielsen, 1995）。ユーザーは「多機能」と「シンプル」の両方を求めるため、操作の階層を分けることで両立させる。例: 「詳細設定」ボタンで高度なオプションを隠す。
アクセシビリティ
WCAG 2.2の4原則（知覚可能・操作可能・理解可能・堅牢）に基づく。最低限、AAレベルを意識する。例: テキストと背景のコントラスト比4.5:1以上、キーボードのみで操作可能、画像に代替テキスト。
デザインの4原則
視覚的な構造と情報の整理に関する基本原則（Williams, 1994）。4原則は相互に補完し合い、組み合わせて使う。
- 近接（Proximity）: 関連する要素を近くにまとめ、無関係な要素は離す。余白でグループの境界を作り、情報の構造を視覚的に伝える。例: フォームのラベルと入力欄を近づけ、セクション間には広い余白を取る
- 整列（Alignment）: すべての要素に視覚的なつながりを持たせる。要素を見えない線に沿って配置し、無秩序な印象を避ける。中央揃えは視覚的な辺が弱くなるため、左揃えまたは右揃えを優先する
- 反復（Repetition）: 色・フォント・スタイル・間隔・レイアウトパターンを繰り返し使い、一貫性と統一感を作る。例: 見出しのスタイル、ボタンの色、カード型レイアウトの統一
- コントラスト（Contrast）: 異なる要素は明確に差をつける。中途半端な違いは意図ではなくミスに見える。例: 見出しと本文のフォントサイズ差、主要ボタンと副次ボタンの色差
アニメーション設計原則
アニメーションはフィードバック・状態変化・空間関係のいずれかを伝える目的がある場合にのみ使用する。装飾目的のアニメーションは避ける。
持続時間
応答時間の知覚閾値（Nielsen, 1993）に基づき、以下の範囲で設定する。
| 種類 | 推奨値 |
|---|---|
| 即時フィードバック（ホバー、トグル） | 100ms以下 |
| 小規模なUI変化（ボタン、チェックボックス） | 100–200ms |
| 標準的な遷移（モーダル、パネル展開） | 200–300ms |
| 大規模な画面遷移 | 300–500ms |
500msを超えるとユーザーが遅延と感じるため、上限とする。進入は退出より若干長くする（例: 進入300ms、退出200ms）。退出はユーザーの次のアクションを妨げないよう素早く完了させる。
イージング
位置の移動には必ずイージングを適用する。linearは機械的に見えるため、色やopacityの変化にのみ使用する。
| 用途 | イージング |
|---|---|
| 画面に進入する要素 | ease-out（素早く動き出し、ゆっくり着地する） |
| 画面から退出する要素 | ease-in（ゆっくり動き出し、加速して去る） |
| 画面内で完結する移動 | ease-in-out |
| 色・opacityの変化 | linear |
パフォーマンス
アニメーション対象は transform と opacity に限定する。この2つはブラウザのComposite層のみで処理され、メインスレッドをブロックしない。width、height、margin、top等はリフローが発生するため避ける。top/leftの代わりに transform: translate() を使う。
アクセシビリティ
prefers-reduced-motion: reduce に必ず対応する（WCAG 2.1 SC 2.3.3）。前庭障害を持つユーザーにとって、動きはめまいや吐き気を引き起こす可能性がある。完全な除去ではなく、移動・回転をopacityのフェードに置き換えることで、情報伝達機能を維持しつつ刺激を軽減する。