ux-principles

UX 原則のスキル

このスキルを使用する場面

次のような場合にこのスキルを適用してください。

• ユーザー中心のインターフェースを設計する：ユーザーのニーズや行動を優先する製品を作成します
• ユーザー調査を実施する：定性的・定量的な調査を計画し、実行します
• ユーザビリティを評価する：確立されたヒューリスティクスやテスト手法を使用してインターフェースを評価します
• アクセシビリティを確保する：多様な能力を持つユーザーが利用できる、インクルーシブな体験を設計します
• ユーザーフローを最適化する：タスク完了率を高め、ユーザーの利用過程における摩擦を減らします
• UX パフォーマンスを測定する：ユーザー体験の質を示す有意義な指標を定義し、追跡します
• デザイン思考を適用する：人間中心のデザインプロセスを通じて複雑な問題を解決します
• 情報アーキテクチャを作成する：ユーザーのメンタルモデルに合った方法でコンテンツを整理します
• ユーザビリティテストを実施する：ユーザーテストセッションを計画、実施、分析します
• ペルソナとジャーニーマップを作成する：ユーザーの行動、ニーズ、課題を記録します

主な概念

ユーザー中心設計（UCD）

ユーザー中心設計とは、調査、設計、テスト、改善を繰り返すサイクルを通じて、設計プロセスの中心にユーザーを置くフレームワークです。

4 つの基本原則：

1. ユーザーとタスクに早い段階から焦点を当てる

   • 設計を始める前に、ユーザーの特性、ニーズ、目標を理解します
   • ユーザーが普段利用する環境で観察します
   • ユーザーが達成する必要のあるタスクを特定します
   • 現在のワークフローと課題を把握します

2. 実証的な測定

   • 実際のユーザーに実際のタスクを実行してもらい、設計をテストします
   • 定量的・定性的なデータを収集します
   • 客観的な指標（タスクの完了、所要時間、エラー）を使用します
   • 主観的なフィードバック（満足度、好み）を集めます

3. 反復的な設計

   • 設計、テスト、測定、再設計を繰り返します
   • 低忠実度のプロトタイプから始めます
   • ユーザーからのフィードバックに基づいて改善します
   • 目標を達成するまで継続的に改善します

4. 統合的な設計

   • ユーザー体験全体を包括的に考慮します
   • ユーザーのニーズ、ビジネス目標、技術的な制約のバランスを取ります
   • 複数の専門分野からなるチームが参加します
   • すべてのタッチポイントで一貫性のある設計にします

デザイン思考

デザイン思考とは、ユーザーのニーズ、技術的な可能性、ビジネスとしての実現性を統合する、人間中心のイノベーションアプローチです。

5 段階のプロセス：

1. 共感する：調査と観察を通じてユーザーを理解します
2. 定義する：調査結果を明確な問題定義にまとめます
3. アイデアを出す：ブレインストーミングを通じて多様な解決策を生み出します
4. プロトタイプを作成する：アイデアを具体的な形にします
5. テストする：フィードバックを集め、解決策を改善します

主な原則：

• 人間の価値観とニーズに焦点を当てます
• 言葉で説明するだけでなく、形にして示します（プロトタイプを使います）
• 複雑なものを明快にします
• 試行錯誤を重ね、リスクを取ります
• プロセスを意識し、まず行動する姿勢を大切にします
• 分野を超えて積極的に協力します

ユーザビリティのヒューリスティクス

Nielsen のユーザビリティに関する 10 のヒューリスティクス

Jakob Nielsen のヒューリスティクスは、インターフェースのユーザビリティを評価するための基本原則です。

1. システムの状態を可視化する

原則：システムは適切なフィードバックを適切なタイミングで提供し、何が起きているかを常にユーザーに知らせる必要があります。

ガイドライン：

• ユーザーの操作にすぐにフィードバックを返します
• 1 秒を超える処理には進行状況インジケーターを使用します
• システムの状態（読み込み中、処理中、保存済み）を明確に表示します
• ナビゲーションで現在の位置を表示します
• 選択項目、アクティブな状態、モードを示します

例：

• データ取得中の読み込みスピナー
• 「保存中...」から「保存済み」への確認表示
• アップロード／ダウンロードの進行状況バー
• 現在のページを示すパンくずリストナビゲーション
• 強調表示されたアクティブなタブやメニュー項目

2. システムと現実世界の一致

原則：システムは、システム指向の用語ではなく、ユーザーにとってなじみのある言葉、表現、概念を使い、ユーザーの言葉で語る必要があります。

ガイドライン：

• ユーザーの領域で使われている用語を使用する
• 現実世界の慣習に従う
• 情報を自然で論理的な順序で提示する
• ユーザーのメンタルモデルに合った比喩を使う
• 専門用語、頭字語、技術用語を避ける

例：

• E コマースのショッピングカートアイコン
• 削除した項目を表すゴミ箱／リサイクルボックス
• ファイル整理用のフォルダー
• 「メッセージキュー」ではなく「受信トレイ」
• ユーザーのロケールに合った日付形式

3. ユーザーのコントロールと自由

原則：ユーザーはシステムの機能を誤って選択することがよくあります。長いやり取りを経ずに望ましくない状態から抜け出せるよう、明確に示された「緊急出口」が必要です。

ガイドライン：

• 元に戻す／やり直す機能を提供する
• ユーザーが操作をキャンセルできるようにする
• 前後に簡単に移動できるようにする
• モーダル状態から抜け出せるようにする
• 終了方法を明確にする

例：

• エディターの元に戻す／やり直すボタン
• フォームのキャンセルボタン
• ナビゲーションの戻るボタン
• モーダルやオーバーレイを閉じる「X」
• Ctrl+Z キーボードショートカット

4. 一貫性と標準

原則：ユーザーが、異なる言葉、状況、操作が同じ意味なのかを迷う必要がないようにします。プラットフォームや業界の慣習に従います。

ガイドライン：

• 全体を通して用語を統一する
• 視覚的な一貫性（色、フォント、間隔）を保つ
• プラットフォームの慣習（iOS、Android、Web）に従う
• 標準的な UI パターンやコンポーネントを使用する
• デザインシステムを構築し、それに従う

例：

• リンクを青色の下線付きテキストで表示する
• 右側に送信ボタン、左側にキャンセルボタンを配置する
• 虫眼鏡を検索アイコンとして使う
• 歯車アイコンを設定に使う
• ボタンのスタイルと動作を統一する

5. エラーの防止

原則：適切なエラーメッセージを表示するよりも、そもそも問題が起きないように慎重に設計するほうが効果的です。

ガイドライン：

• エラーにつながりやすい状況をなくす
• 制約と検証を使用する
• 役立つデフォルト値を設定する
• 破壊的な操作の前に確認を求める
• 間違いを許容できる操作を設計する

例：

• テキスト入力の代わりに日付ピッカーを使う
• 無効な選択肢を無効化する
• フォーム内で入力値を検証する
• 削除時に「本当によろしいですか？」と確認する
• 自動保存機能

6. 想起ではなく認識

原則：オブジェクト、操作、選択肢を見えるようにして、ユーザーの記憶への負担を最小限に抑えます。ユーザーは、やり取りの別の箇所で見た情報を覚えておく必要がないようにします。

ガイドライン：

• 選択肢や操作を見えるようにする
• 最近使用した項目を表示する
• コンテキストと役立つ情報を表示する
• 視覚的な補助要素やプレビューを使う
• ツールチップやインラインヘルプを提供する

例：

• 検索ボックスのオートコンプリート
• 最近開いたファイルの一覧
• 非表示のコマンドではなく、見えるメニュー項目
• 使用可能な色を示すカラーパレット
• 入力例を示すフォームフィールドのプレースホルダー

7. 柔軟性と効率的な利用

原則：初心者には見えないアクセラレーターを用意すると、熟練ユーザーの操作が速くなり、経験の浅いユーザーと経験豊富なユーザーの両方に対応できます。

ガイドライン：

• パワーユーザー向けにキーボードショートカットを提供する
• カスタマイズやパーソナライズを可能にする
• タスクを達成する複数の方法をサポートする
• シンプルな機能と高度な機能の両方を提供する
• 一括操作と自動化を可能にする

例：

• キーボードショートカット（Ctrl+C、Ctrl+V）
• クイックアクションやジェスチャー
• 高度な検索フィルター
• カスタマイズ可能なツールバー
• テンプレートや保存済みの設定

8. 美的でミニマルなデザイン

原則：ダイアログには、関連性のない情報や、必要とされることがまれな情報を含めないようにします。情報を追加するたびに、関連する情報との間で注意が分散し、その視認性が損なわれます。

ガイドライン：

• コンテンツの焦点を絞り、関連性を保ちます
• 不要な要素を取り除きます
• 余白を効果的に使います
• 情報の優先順位を明確にします
• 高度な機能は段階的に表示します

例：

• すっきりとした、雑然としていないインターフェース
• 詳細を折りたたみ可能なセクションにまとめます
• 主要なアクションに焦点を当てます
• 装飾を最小限に抑えます
• 明確な視覚的階層を設けます

9. ユーザーがエラーを認識し、原因を特定して、回復できるようにする

原則：エラーメッセージは平易な言葉で表現し、問題を正確に示し、解決策を建設的に提案する必要があります。

ガイドライン：

• 明確で、ユーザーに読みやすいエラーメッセージを書きます
• 何が、なぜ問題になったのかを説明します
• 具体的な解決策を提案します
• 適切な視覚的な表示（色、アイコン）を使います
• 技術的なコードや専門用語は避けます

例：

• 「メールアドレスが必要です」対「エラー 422」
• エラーのあるフィールドを強調表示します
• 提案：「gmail.com のことですか？」
• 具体的な案内：「パスワードは 8 文字以上である必要があります」
• 回復するためのアクション：「再試行」または「パスワードをリセット」

10. ヘルプとドキュメント

原則：ドキュメントなしでシステムを使えるのが理想ですが、ヘルプが必要になる場合もあります。そうした情報は検索しやすく、ユーザーのタスクに焦点を当て、具体的な手順を示す必要があります。

ガイドライン：

• ヘルプに簡単にアクセスできるようにします
• 状況に応じたヘルプを提供します
• 明確で簡潔な言葉を使います
• 視覚的な例を含めます
• 検索や閲覧ができるようにします

例：

• 状況に応じたヘルプを示す疑問符アイコン
• インタラクティブなチュートリアルやガイド
• 検索可能なナレッジベース
• 動画による実演
• タスク別に整理された FAQ セクション

UI デザインにおけるゲシュタルト原則

ゲシュタルト原則は、人間が視覚要素を個別のコンポーネントではなく、まとまりのあるパターンとしてどのように認識するかを説明します。

主な原則：

1. 近接性：近くにある要素は、関連していると認識されます

   • 関連するフォームフィールドをグループ化します
   • ナビゲーション項目をカテゴリごとに間隔を空けて配置します
   • 関連するコンテンツブロックをまとめます

2. 類似性：類似した要素は、グループの一部として認識されます

   • 関連するアクションには一貫したスタイルを使います
   • 似た機能には同じ色を使います
   • カテゴリ項目には統一された形状を適用します

3. 連続性：線や曲線に沿って配置された要素は、関連していると認識されます

   • フォームのラベルと入力欄を揃えます
   • レイアウトによって視覚的な流れを作ります
   • 関連する項目を線でつなぎます

4. 閉合性：人間は不完全な形を頭の中で補完します

   • 控えめな境界線や背景を使います
   • カードの境界を暗示します
   • ネガティブスペースで領域を定義します

5. 図と地：要素は前景または背景として認識されます

   • コントラストを使って主要なコンテンツを強調します
   • モーダルに注目させるため、背景をぼかします
   • 奥行きを持たせて要素を重ねます

ユーザー心理

認知負荷

認知負荷とは、インターフェースを使用するために必要な精神的労力の量を指します。認知負荷を軽減すると、使いやすさとユーザー満足度が向上します。

認知負荷の種類：

1. 内在的負荷：タスクに固有の複雑さ

   • 排除することはできず、管理することしかできません
   • 複雑なタスクを小さな手順に分割します
   • 足場となる支援やサポートを提供します

2. 外在的負荷：不適切なデザインによって生じる不要な精神的労力

   • 排除でき、また排除すべきです
   • わかりにくいレイアウト、不明確なラベル、一貫性のなさが原因です
   • 優れた UX の実践を通じて軽減します

3. 学習関連負荷：パターンを学び、内面化するために必要な労力

   • 有益な認知負荷です
   • スキルの向上と習熟を促します
   • オンボーディングと段階的な学習に投資します

認知負荷を軽減するための戦略：

• チャンク化：関連する情報をまとめます（電話番号：123-456-7890）
• 想起より認識：記憶に頼らせるのではなく、選択肢を表示します
• 段階的な開示：複雑さを徐々に明らかにします
• デフォルト：妥当な事前選択を用意します
• 視覚的階層：重要な要素に注意を誘導します
• 馴染みのあるパターン：よく知られた慣例やメタファーを使用します
• 明確なラベル：説明的で曖昧さのないテキストを使用します
• 選択肢を最小限に抑える：ヒックの法則を適用します（選択肢が多いほど、決定に時間がかかります）

メンタルモデル

メンタルモデルとは、物事の仕組みに関するユーザーの内的な表現です。効果的な UX デザインは、ユーザーのメンタルモデルに沿っています。

メンタルモデルを理解する：

• これまでの経験や学習を通じて形成されます
• 実際のシステム実装と一致しない場合があります
• ユーザーグループによって異なります
• 期待や予測に影響します
• ユーザーの行動や判断を左右します

メンタルモデルに沿ったデザイン：

1. ユーザーの期待を調査する

   • ユーザーインタビューを実施します
   • タスクの完了を試みる様子を観察します
   • 結果を予測してもらいます
   • ユーザーのワークフローをマッピングします

2. 一致させる、または教える

   • 可能な場合は、デザインを既存のメンタルモデルに合わせます
   • 革新が必要な場合は、新しいモデルを明示的に教えます
   • 馴染みのあるメタファーを橋渡しとして使用します
   • 明確な概念モデルを提示します

3. 前提をテストする

   • テストを通じてメンタルモデルとの整合性を検証します
   • 不一致や混乱が生じる箇所を特定します
   • 整合性を高めるために反復します
   • よくある誤解を記録します

よくあるメンタルモデルの不一致：

• ファイルシステムと検索ベースの整理方法
• 階層型ナビゲーションとネットワーク型の情報
• 直線的なプロセスと柔軟なワークフロー
• 技術的な正確さとユーザーの理解

アフォーダンスとシグニファイア

アフォーダンス：オブジェクトに備わる、そのオブジェクトでどのような操作ができるかを示す性質です。

• UI では、実際のアフォーダンスより、認識されるアフォーダンスが重要です
• ボタンは、その外観によってクリックできることを示します
• テキストフィールドは、カーソルの変化によって入力できることを示します
• スライダーは、見えるつまみによってドラッグできることを示します

シグニファイア：操作を行うべき場所を伝える手がかりです。

• アフォーダンスを示す視覚的な表示
• リンクの下線（クリック可能であることを示します）
• ポインターカーソルの変化（操作可能であることを示します）
• ボタンの陰影や枠線（押せることを示します）
• ドラッグ用のつまみ（移動可能であることを示します）

デザインへの示唆：

• インタラクティブな要素は、操作可能に見えるようにします
• ホバー時とフォーカス時に視覚的なフィードバックを提供します
• インターフェース全体で一貫したシグニファイアを使用します
• インタラクティブでない要素をクリック可能に見せないようにします
• ユーザーによるテストを行い、認識されるアフォーダンスを検証します

フィッツの法則

原則：ターゲットを獲得するまでの時間は、ターゲットまでの距離とターゲットの大きさによって決まります。

数式：T = a + b × log₂(D/W + 1)

• T = ターゲットまで移動する時間
• D = ターゲットまでの距離
• W = ターゲットの幅
• a、b = 実験によって決定される定数

UI デザインへの応用：

1. 大きなターゲット：クリック可能な要素を大きくします

   • 最小タッチターゲット：44×44 ピクセル（Apple）、48×48 ピクセル（Android）
   • 主要なアクションには大きなボタンを使用します
   • ホバー領域を表示境界より広げます

2. 近接性：関連する項目を近くに配置します

   • ツールチップをトリガーの近くに配置します
   • フォームのラベルを入力欄の隣に配置します
   • 関連するアクションをツールバー内でグループ化します

3. 端の活用：画面の端は狙いやすいターゲットです（幅が無限大）

   • macOS のメニューバーを画面上端に配置します
   • Windows のスタートボタンを画面下隅に配置します
   • モバイルのナビゲーションを画面下部に配置します

4. コンテキストメニュー：カーソルの位置に表示します

   • 移動距離がゼロです
   • メニューバーからのナビゲーションより速く操作できます
   • 右クリックまたは長押しのパターンを使用します

ヒックの法則

原則：意思決定にかかる時間は、選択肢の数に応じて対数的に増加します。

数式：T = b × log₂(n + 1)

• T = 意思決定にかかる時間
• n = 選択肢の数
• b = 実験によって決定される定数

デザインへの影響：

1. 選択肢を減らす：必要な選択肢だけを表示します

   • 高度なオプションには段階的開示を使用します
   • スマートなデフォルト値で意思決定を減らします
   • 使用頻度の低い機能を削除します

2. 分類する：選択肢を論理的なカテゴリにグループ化します

   • セクションごとに整理されたメガメニュー
   • 絞り込みに使うフィルターとファセット
   • 段階的なナビゲーション（幅と深さ）

3. 優先順位を付ける：推奨または人気の選択肢を強調します

   • 「最も人気」の表示
   • 「あなたへのおすすめ」の提案
   • よくある選択肢のデフォルト選択

4. 状況に合わせる：現在のタスクに関連する選択肢を表示します

   • 選択内容に基づくコンテキストメニュー
   • 使用状況に基づいて適応するインターフェース
   • 役割に基づくビューと権限

ミラーの法則

原則：一般的な人は、作業記憶に7項目（±2）を保持できます。

デザインへの応用：

1. 情報をチャンク化する：コンテンツを5～9項目にグループ化します

   • ナビゲーションメニューの項目
   • ダッシュボードのウィジェット
   • スクロールが必要になる前のリスト項目

2. 複雑なタスクを分解する：複数のステップに分けます

   • 進捗インジケーター付きの複数ステップフォーム
   • 複雑な設定に使うウィザード
   • 明確な段階を設けたオンボーディングフロー

3. 視覚的な補助を使う：記憶への負担を軽減します

   • テキストラベルに添えるアイコン
   • カテゴリごとの色分け
   • 関連項目の視覚的なグループ化

4. 参照情報を提供する：情報をいつでも確認できるようにします

   • 追加のコンテキストを示すツールチップ
   • インラインヘルプと例
   • 以前の入力内容の概要ビュー

ユーザーリサーチ

リサーチ手法の概要

定性的手法：動機、行動、メンタルモデルを探ります

• ユーザーインタビュー
• コンテキスト調査
• フォーカスグループ
• 日記調査
• 思考発話法

定量的手法：行動を測定し、仮説を検証します

• アンケートと質問票
• 分析と指標
• A/B テスト
• カードソーティング（統計分析を伴う）
• ツリーテスト

ユーザーインタビュー

目的：ユーザーのニーズ、目標、行動、課題を深く理解します。

ベストプラクティス：

1. 準備

   • 調査の質問と目標を定めます
   • ディスカッションガイドを作成します（厳密な台本にはしません）
   • 代表的な参加者を募集します（ユーザーセグメントごとに5～8人）
   • 適切な実施場所を選びます（多くの場合、ユーザーの環境が最適です）

2. インタビュー中

   • 信頼関係を築きます
   • 自由回答形式の質問をします
   • 「5つのなぜ」の手法を使って、さらに掘り下げます
   • 行動や環境を観察します
   • 誘導的な質問は避けます
   • 話すよりも聞くことを重視します（80対20のルール）

3. 質問の種類

   • 背景：「あなたの役割について教えてください……」
   • 行動：「現在、どのように……しているか、順を追って教えてください」
   • 課題：「……について、どのようなことに不満を感じますか？」
   • 目標：「何を達成しようとしていますか？」
   • 回避策：「……のような場合、どのように対処していますか？」

4. 分析

   • 文字起こしを作成するか、詳細なメモを取ります
   • 参加者間のパターンを特定します
   • ペルソナやプレゼンテーションに使う引用を抽出します
   • 調査結果をテーマごとにまとめます
   • 関係者とともに検証します

アンケートと質問票

目的：大規模なサンプルから定量データを収集し、態度、行動、好みを測定します。

設計の原則：

1. 質問の設計

   • 明確で誤解のない表現を使います
   • 2つの質問を1つにまとめた設問は避けます
   • バランスの取れた尺度を使います（リッカート尺度：1～5または1～7）
   • 「回答しない」選択肢を含めます
   • バイアスを減らすため、回答の順序をランダム化します

2. アンケートの構成

   • 簡単で答えやすい質問から始めます
   • 関連する質問をまとめます
   • 属性に関する質問は最後に配置します
   • アンケートはできるだけ短くします
   • 長いアンケートでは進捗インジケーターを表示します

3. 質問の種類

   • 多肢選択（単一選択）
   • チェックボックス（複数選択）
   • 評価尺度（満足度、賛否）
   • 自由回答（定性的な洞察を得るため）
   • 順位付け（優先順位）

4. サンプルサイズ

   • 統計的有意性に必要なサンプルサイズを算出します
   • 回答率（多くの場合10～30％）を考慮します
   • 代表性のある分布を確保します
   • セグメントごとの層化抽出を検討します

ペルソナ

目的：調査に基づいて典型的なユーザー像を作成し、設計上の意思決定を導き、ユーザー中心の姿勢を維持します。

構成要素：

1. 人口統計情報

   • 名前と写真（記憶に残るものにします）
   • 年齢、職業、学歴
   • 居住地と生活状況
   • 家族構成

2. 心理的特性

   • 目標と動機
   • 行動と習慣
   • 課題と不満
   • 価値観と態度
   • 技術的な習熟度

3. コンテキスト

   • 利用シナリオと状況
   • 使用するデバイスとプラットフォーム
   • 製品を使用する時間や場所
   • 使用頻度

4. 引用

   • ペルソナの本質を捉えた、記憶に残る発言
   • 実際のユーザー調査データに基づくもの
   • ペルソナに人間味を持たせます

ベストプラクティス：

• 思い込みではなく、実際の調査データに基づいて作成します
• 主要なペルソナは3～5人にします（多くしすぎないようにします）
• 設計に関わる重要な違いに焦点を当てます
• ユーザーについて新たに分かったことに応じて更新します
• チームや関係者に広く共有します
• 設計レビューや意思決定で活用します

ジャーニーマッピング

目的：あらゆるタッチポイントにおけるユーザー体験全体を可視化し、課題や機会を明らかにします。

構成要素：

1. ステージ：ユーザージャーニーの各フェーズ

   • 認知 → 検討 → 購入 → 利用 → ロイヤルティ
   • またはタスクに応じて：発見 → 比較 → 選択 → 決済

2. アクション：各ステージでユーザーが行うこと

   • 情報を検索する
   • 選択肢を比較する
   • 購入する
   • 製品を利用する

3. タッチポイント：やり取りが発生する場所

   • ウェブサイト、モバイルアプリ
   • メール、ソーシャルメディア
   • カスタマーサポート
   • 実店舗

4. 思考と感情：ユーザーの感情状態

   • 興奮、混乱、苛立ち、満足
   • 期待や懸念
   • 喜びや苦痛を感じる瞬間

5. 課題：摩擦や問題

   • ユーザーが苦労する箇所
   • 離脱するポイント
   • 苦情や回避策

6. 機会：改善できる領域

   • 摩擦を減らす方法
   • 期待を上回る機会
   • 新しい機能やタッチポイント

作成プロセス：

1. 範囲を定めます（対象のジャーニー、対象のペルソナ）
2. 調査データを収集します（インタビュー、分析データ、サポートチケット）
3. ステージとアクションをマッピングします
4. タッチポイントを特定します
5. 感情と課題を追加します
6. 関係者と協力して検証します
7. 改善の優先事項を特定します
8. 改善の進捗を継続的に追跡します

アクセシビリティ

WCAG ガイドライン

Web Content Accessibility Guidelines（WCAG）は、障害のある人がウェブコンテンツを利用できるようにするための標準を定めています。

4 つの原則（POUR）：

1. 知覚可能：ユーザーが知覚できる方法で情報を提示する必要があります

2. 操作可能：インターフェースのコンポーネントを操作できる必要があります

3. 理解可能：情報と操作を理解できる必要があります

4. 堅牢：支援技術で動作するのに十分な堅牢性をコンテンツに持たせる必要があります

適合レベル：

• レベル A：最低限のアクセシビリティ（基本）
• レベル AA：主な障壁に対応（推奨目標）
• レベル AAA：最高水準のアクセシビリティ（理想）

主なアクセシビリティ要件

1. テキストによる代替（1.1.1、レベル A）

要件：テキスト以外のコンテンツにテキストによる代替を提供します。

実装：

• 画像の代替テキスト：<img alt="Description of image">
• 装飾画像の空の代替テキスト：<img alt="">
• 音声の文字起こし
• 動画のキャプション
• フォーム入力欄のラベル

2. キーボード操作（2.1.1、レベル A）

要件：すべての機能をキーボードで利用できるようにします。

実装：

• 論理的なタブ順序を確保する
• フォーカスインジケーターを視認できるようにする
• キーボードトラップをなくす
• ナビゲーションをスキップするリンクを設ける
• よく使う操作にキーボードショートカットを用意する

3. 色のコントラスト（1.4.3、レベル AA）

要件：通常のテキストでは最低 4.5:1、大きなテキストでは 3:1 のコントラスト比を確保します。

実装：

• コントラストチェッカーツールでテストする
• すべての状態（ホバー、フォーカス、無効）で十分なコントラストを確保する
• 情報を伝える際に色だけに頼らない
• 追加の指標（アイコン、テキスト、パターン）を用意する

4. テキストの拡大（1.4.4、レベル AA）

要件：コンテンツや機能を損なうことなく、テキストを最大 200% まで拡大できるようにします。

実装：

• ピクセルではなく相対単位（em、rem）を使用する
• さまざまなズームレベルでテストする
• スクロールが適切に機能することを確認する
• コンテンツが切り取られる固定サイズのコンテナーを避ける

5. 見出しとラベル（2.4.6、レベル AA）

要件：見出しとラベルで、トピックや目的を説明します。

実装：

• セマンティックな見出し階層（h1 → h2 → h3）を使用する
• 説明的なフォームラベルを付ける
• ボタンのテキストを明確にする
• 意味のあるリンクテキストを使う（「ここをクリック」ではなく）

6. フォーカスの可視化（2.4.7、レベル AA）

要件：キーボードフォーカスインジケーターを視認できるようにします。

実装：

• 代替手段なしにアウトラインを削除しない
• フォーカスインジケーターに十分なコントラストを確保する
• フォーカスインジケーターの一貫性を保つ
• キーボードでのナビゲーションの流れをテストする

7. ARIA ランドマーク（1.3.1 に暗黙的に含まれる）

要件：ARIA ランドマークとロールを使用して、ページの各領域を定義します。

実装：

<header role="banner">
<nav role="navigation">
<main role="main">
<aside role="complementary">
<footer role="contentinfo">

インクルーシブデザインの原則

1. 同等の体験を提供する

• すべてのユーザーがタスクを完了できるようにします
• 能力に応じて異なる方法を使用できます
• 例：聴覚障害のあるユーザー向けの字幕、視覚障害のあるユーザー向けの音声解説

2. 状況を考慮する

• 障害は状況によって生じることがあります（明るい日差し、騒がしい環境など）
• 一時的な制限や状況に応じた制限を考慮して設計します
• 例：大きなタッチ領域は、運動機能に障害のあるユーザーや移動中の乗り物に乗っている人にも役立ちます

3. 一貫性を保つ

• 馴染みのある慣習を使用します
• 製品内の一貫性を維持します
• プラットフォームの標準を活用します
• 認知負荷を軽減します

4. 操作の自由を確保する

• ユーザーが体験をカスタマイズできるようにします
• さまざまなニーズに応じた選択肢を提供します
• アニメーションを無効にできるようにします
• システムの設定（ダークモード、モーションの軽減など）を尊重します

5. 選択肢を提供する

• タスクを完了するための複数の方法を用意します
• さまざまな操作方法に対応します
• キーボード、マウス、タッチ、音声
• さまざまなコンテンツ形式

6. コンテンツを優先する

• 中核となるコンテンツと機能に重点を置きます
• プログレッシブエンハンスメント
• モバイルファーストの考え方
• 明確な階層

7. 付加価値を提供する

• アクセシビリティ機能はすべての人に役立ちます
• 字幕は騒がしい環境で役立ちます
• パワーユーザー向けのキーボードショートカット
• 複数の作業を同時に行う際の音声操作

支援技術

スクリーンリーダー：デジタルテキストを音声または点字に変換します

• JAWS（Windows）
• NVDA（Windows、無料）
• VoiceOver（macOS、iOS）
• TalkBack（Android）

設計上の考慮事項：

• セマンティックな HTML 構造
• 適切な見出し階層
• 内容を適切に説明する代替テキスト
• ARIA のラベルと説明
• ナビゲーション用のスキップリンク
• フォームのラベルとエラーの関連付け

画面拡大：画面の一部を拡大します

• ZoomText
• OS に組み込まれている拡大鏡

設計上の考慮事項：

• テキストのサイズ変更に対応します
• 小さなタッチ領域を避けます
• 十分なコントラストを確保します
• レスポンシブレイアウト

音声操作：音声でナビゲーションや操作を行います

• Dragon NaturallySpeaking
• Voice Control（iOS、macOS）
• Voice Access（Android）

設計上の考慮事項：

• 音声コマンドと一致する、視認できるラベル
• 大きく、判別しやすいクリック領域
• 明確なフォーカスインジケーター
• ホバー時のみ機能する操作を避けます

スイッチアクセス：1つまたは2つのスイッチを使ったスキャン操作

• 重度の運動障害のある人が使用します

設計上の考慮事項：

• すべての機能をキーボードで操作できること
• 論理的なタブ順序
• 明確なフォーカスインジケーター
• 操作に十分な時間を確保します

ユーザーテスト

ユーザビリティテスト

目的：実際のユーザーがタスクに取り組む様子を観察し、ユーザビリティ上の問題を特定します。

種類：

1. モデレーター付きテスト

   • ファシリテーターがセッションを進行します
   • 掘り下げたり、追加の質問をしたりできます
   • 発話思考法のプロトコルを使用します
   • 時間はかかりますが、より深い知見が得られます

2. モデレーターなしのテスト

   • ユーザーが個別にタスクを完了します
   • 規模を拡大しやすく、費用対効果に優れています
   • 得られるコンテキストや追加情報は限られます
   • ツール：UserTesting、Maze、Lookback

3. リモートと対面

   • リモート：より広い地域のユーザーに参加してもらえ、自然な環境で実施できます
   • 対面：より詳しく観察でき、参加者との信頼関係を築きやすくなります

プロセス：

1. 計画

   • 目的と調査の質問を定義します
   • タスクのシナリオを特定します
   • テスト用スクリプトとタスクを作成します
   • 参加者を募集します（1回の反復につき5～8人）
   • プロトタイプまたは製品を準備します

2. セッションの実施

   • 参加者を迎え、プロセスを説明します
   • 同意を得て、録画の許可をもらいます
   • テスト前の質問をします
   • タスクを1つずつ提示します
   • 考えを声に出してもらいます
   • 介入せずに観察します
   • 追加の質問をします
   • 振り返りを行い、参加者に感謝を伝えます

3. 分析

   • 録画とメモを確認します
   • 参加者間のパターンを特定します
   • 深刻度に応じて問題を分類します
   • 成功率とタスク所要時間を算出します
   • 根拠を添えて調査結果を記録します
   • 修正する問題に優先順位を付けます

4. 報告

   • エグゼクティブサマリー
   • 方法論
   • 動画クリップを添えた主な調査結果
   • 深刻度の評価
   • 推奨事項
   • 生データを含む付録

深刻度の評価：

• 重大：タスクの完了を妨げ、すべてのユーザーに影響します
• 深刻：大幅な遅延や不満を引き起こします
• 軽微：見た目上の問題、または少数のユーザーに影響します
• 改善の機会：問題ではありませんが、改善の余地があります

A/Bテスト

目的：定義した指標に基づいて2つのバージョンを比較し、どちらのパフォーマンスが高いかを判断します。

ベストプラクティス：

1. 仮説の設定

   • 明確で検証可能な仮説を立てます
   • 例：「顧客レビューを追加すると、コンバージョンが10％増加する」
   • 調査やデータから得られた知見に基づきます
   • 具体的で測定可能な結果を設定します

2. テストの設計

   • 一度に変更する変数は1つにします
   • バリエーションへの割り当てがランダムになるようにします
   • 必要なサンプルサイズを決定します
   • 成功指標を事前に定義します
   • 最小検出可能効果を設定します
   • テスト期間を算出します

3. 統計的有意性

   • p値 < 0.05をしきい値として使用します
   • 多重比較を考慮します
   • 実用上の有意性と統計的有意性を考慮します
   • テストを早期に終了しないでください（途中経過を見て判断する問題）

4. 一般的な指標

   • コンバージョン率
   • クリック率
   • タスク所要時間
   • エラー率
   • ユーザーあたりの収益
   • エンゲージメント指標

5. 避けるべき落とし穴

   • バリエーションをテストしすぎること（多変量テストは控えめに使用します）
   • テストを早期に終了すること
   • 外部要因（季節性、マーケティングキャンペーンなど）を無視すること
   • 新規ユーザーとリピーターを区別しないこと
   • 調査ではなく勘に基づいてテストすること

アナリティクスと行動データ

目的：定量データを通じて、大規模なユーザーの実際の行動を把握します。

主な指標：

1. エンゲージメント指標

   • 日次／月次アクティブユーザー数（DAU/MAU）
   • セッション時間
   • 1 セッションあたりのページ数
   • 再訪頻度
   • 機能の採用率

2. パフォーマンス指標

   • ページの読み込み時間
   • インタラクティブになるまでの時間
   • Core Web Vitals（LCP、FID、CLS）
   • エラー率

3. コンバージョン指標

   • ファネルの各段階におけるコンバージョン率
   • 離脱ポイント
   • カート放棄率
   • 目標達成率

4. ユーザーフロー分析

   • 入口ページ
   • ナビゲーション経路
   • 離脱ページ
   • ファネルの可視化

ツール：

• Google Analytics
• Mixpanel
• Amplitude
• Heap
• Hotjar（ヒートマップ、セッション録画）

ベストプラクティス：

• ビジネス目標に沿ってイベントと目標を定義する
• ユーザーをセグメント化して、より深いインサイトを得る
• 「なぜ」を理解するために、定性的な調査と組み合わせる
• 異常を検知するアラートを設定する
• インサイトを定期的に確認し、対応する
• プライバシーに準拠したトラッキング（GDPR、CCPA）

情報アーキテクチャ

カードソーティング

目的：ユーザーが情報をどのように頭の中で整理し、分類しているかを理解します。

種類：

1. オープンカードソーティング

   • ユーザー自身がカテゴリを作成する
   • ユーザーのメンタルモデルを発見する
   • IA の設計初期に実施する
   • 予想外のグループ分けが明らかになる

2. クローズドカードソーティング

   • ユーザーが既定のカテゴリに分類する
   • 既存の構造を検証する
   • 代替の分類方法を比較する
   • より焦点を絞ったインサイトが得られる

3. ハイブリッドカードソーティング

   • 既定のカテゴリに加えて、新しいカテゴリを作成できる選択肢を用意する
   • 構造と発見のバランスを取る

プロセス：

1. 準備

   • コンテンツ項目を表すカードを作成する
   • 一般的なカード数は 30～60 枚
   • 明確で代表的なラベルを使用する
   • 15～30 人の参加者を募集する

2. 実施

   • オンラインツール：OptimalSort、Miro、UserZoom
   • 対面：物理的なカードを使用する
   • 参加者が個別に作業できるようにする
   • 考えていることを声に出すよう促す

3. 分析

   • 類似度マトリクス（項目が一緒にグループ化される頻度）
   • デンドログラム（階層的クラスタリング）
   • よく使われるカテゴリ名
   • 合意のパターン

4. 適用

   • 調査結果に基づいてサイトマップを作成する
   • ナビゲーション項目にラベルを付ける
   • コンテンツの階層構造に反映する
   • ツリーテストで検証する

ツリーテスト

目的：ユーザーがコンテンツを見つけられるかをテストして、ナビゲーション構造を検証します。

プロセス：

1. 設定

   • テキストベースの階層構造を作成する（視覚デザインなし）
   • タスクを定義する（例：「X はどこにありますか？」）
   • 20～50 人の参加者を募集する
   • ツールを使用する：Treejack、UserZoom

2. 指標

   • 成功率（正しい場所を見つけたか）
   • 直接性（戻らずに直接進めたか）
   • 完了までの時間
   • 最初のクリック（ユーザーが最初に選んだ場所）

3. 分析

   • 問題のある経路を特定する
   • 失敗率の高いタスク
   • ユーザーが抜け出せなくなる遷移先
   • わかりにくいラベル

4. 反復

   • 調査結果に基づいて構造を修正する
   • 成功率が許容範囲に達するまで再テストする
   • 通常は成功率 70% 超を目標とする

ナビゲーション設計

種類：

1. グローバルナビゲーション：サイト全体で一貫して表示される

   • メインメニュー／ヘッダー
   • フッターナビゲーション
   • ユーティリティナビゲーション（アカウント、カート、検索）

2. ローカルナビゲーション：コンテキストに応じて表示される

   • サイドバーメニュー
   • ページ内ナビゲーション
   • 関連リンク

3. コンテキストナビゲーション：コンテンツに応じて動的に変わる

   • 関連記事
   • おすすめ商品
   • 次のステップ

ベストプラクティス：

• グローバルナビゲーションは 7±2 項目に抑える
• 明確で説明的なラベルを使用する
• 現在の場所を示す
• 階層が深い場合はパンくずリストを使用する
• 複雑なサイトには検索機能を用意する
• モバイルでは、ハンバーガーメニューまたはタブバーのパターンを使用する
• 幅が広く階層の浅い構造にはメガメニューを使用する
• すぐにアクセスできるよう、ナビゲーションを固定表示する

UX 指標

タスク成功率

定義：タスクを正常に完了した割合です。

測定方法：

• 二値評価：ユーザーはタスクを完了しましたか？（はい／いいえ）
• 部分評価：完了度を0～100％で評価
• タスクごと、および全体の成功率を記録

ベンチマーク：

• 78％超：許容範囲
• 90％超：優秀
• 70％未満：深刻なユーザビリティの問題を示します

活用方法：

• デザインやバージョンを比較する
• 時間の経過に伴う改善を追跡する
• 問題の優先順位を決める（成功率が低いものを最優先）
• 改善目標を設定する

タスク所要時間

定義：ユーザーがタスクを完了するまでにかかる時間です。

測定方法：

• タスクの開始時にタイマーを開始する
• ユーザーが完了を示すか、諦めた時点で停止する
• 平均値、中央値、範囲を算出する
• 外れ値を考慮する

考慮事項：

• 速ければ常に良いとは限りません（例：コンテンツを読む場合）
• ベースラインやベンチマークと比較する
• 平均だけでなく分布を見る
• コンテキストが重要です（熟練ユーザーと初心者ユーザー）

活用例：

• 非効率なワークフローを特定する
• 代替デザインを比較する
• 熟練ユーザーと初心者ユーザーのパフォーマンスを追跡する
• 改善によるコスト削減を算出する

System Usability Scale（SUS）

定義：ユーザビリティを簡単に評価するための10項目のアンケートです。

質問（5段階のリッカート尺度：まったくそう思わない～強くそう思う）：

1. 私はこのシステムを頻繁に使いたいと思います。
2. このシステムは不必要に複雑だと感じました。
3. このシステムは使いやすいと思いました。
4. このシステムを使うには、技術に詳しい人のサポートが必要だと思います。
5. このシステムのさまざまな機能は、よく統合されていると感じました。
6. このシステムには、一貫性のない部分が多すぎると感じました。
7. ほとんどの人は、このシステムの使い方をすぐに習得できると思います。
8. このシステムはとても使いにくいと感じました。
9. このシステムを使うことに、とても自信がありました。
10. このシステムを使い始める前に、多くのことを学ぶ必要がありました。

スコアの算出：

• 奇数項目：スコアから1を引く
• 偶数項目：5からスコアを引く
• すべてのスコアを合計して2.5を掛ける
• 結果：0～100の尺度

解釈：

• 80超：優秀
• 68～80：良好
• 51～68：普通
• 51未満：不良
• 製品全体のSUS平均スコア：68

Net Promoter Score（NPS）

定義：顧客ロイヤルティと満足度を測定します。

質問：「[product]を友人や同僚に勧める可能性はどのくらいありますか？」（0～10の尺度）

算出方法：

• 推奨者：9～10
• 中立者：7～8
• 批判者：0～6
• NPS = 推奨者の割合 - 批判者の割合
• 範囲：-100～+100

ベンチマーク：

• 50超：優秀
• 0超：良好
• 0未満：改善が必要

限界：

• 理由はわかりません
• UX以外の要因の影響を受けます
• 必ずフォローアップの質問「なぜですか？」を追加します

顧客満足度（CSAT）

定義：特定の体験ややり取りに対する満足度を測定します。

質問：「[experience]にどの程度満足しましたか？」（1～5の尺度）

算出方法：

• 4または5を選択した回答者の割合
• または平均スコア

測定のタイミング：

• やり取りの直後
• 購入後
• サポートチケットの解決後
• オンボーディングの終了時

活用例：

• 機能ごとの満足度を比較する
• 時間の経過に伴う改善を追跡する
• 問題点を特定する
• スコアが低い場合にフォローアップを行う

エラー率

定義：タスクの完了中にユーザーがエラーを起こす頻度です。

種類：

• スリップ：意図は正しいものの、誤った操作をすること
• ミステイク：誤った意図により、誤った操作をすること

測定方法：

• タスクごとにエラー数を数える
• 種類ごとに分類する
• ユーザーがエラーから回復したかを記録する
• 回復にかかった時間を記録する

分析：

• エラー率が高い = ユーザビリティの問題
• 複数のユーザーに同じエラーが繰り返し見られる = デザインの問題
• 回復時間は、エラーの認識しやすさを示します
• エラーの防止 > 検出 > 回復

エンゲージメント指標

セッション時間：ユーザーが製品を利用する時間

• 長ければよいとは限りません
• 状況によって異なります（タスクの効率性とコンテンツの利用など）

機能の利用率：機能を利用するユーザーの割合

• 利用率の推移を追跡します
• 利用されていない機能を特定します
• オンボーディングの効果を測定します

リテンション率：再訪するユーザーの割合

• 日次、週次、月次のリテンション率
• コホート分析
• 離脱率（リテンション率の逆）

定着度：DAU/MAU 比

• ユーザーがどのくらいの頻度で利用するかを測定します
• 高いほど、習慣化されていることを示します
• 目標値は製品の種類によって異なります

UX 原則の例

例 1：段階的な情報開示 - TurboTax

原則：必要になるまで複雑さを隠し、情報を段階的に示します。

実装： TurboTax の対話形式の確定申告では、一度に簡単な質問を 1 つずつ行い、ユーザー固有の状況に関係する場合にのみ複雑な情報を提示します。

設計上の決定：

• 画面ごとに質問を 1 つ表示
• 税務用語ではなく、平易な言葉を使用
• 「これはあなたに当てはまりますか？」という分岐ロジック
• 高度なオプションはデフォルトで非表示
• 重要な節目で概要画面を表示

メリット：

• 認知負荷を軽減します
• ユーザーが圧倒されるのを防ぎます
• 簡単なケースでは完了までの時間を短縮します
• ユーザーのニーズに合わせて複雑さを調整します
• 離脱率を低減します

指標：

• 標準的な申告では完了までの時間を 30％短縮
• ヘルプのリクエストを 45％削減
• 従来のフォームと比較して完了率が向上

例 2：状況に応じたヘルプ - Slack

原則：ユーザーが必要とする場所とタイミングでヘルプを提供します。

実装： Slack では、インラインのヒント、ツールチップ、状況に応じた提案を使って、ユーザーがワークフローを離れずに操作できるよう案内します。

機能：

• 例を含むスラッシュコマンドの自動補完
• 新しいメッセージがない場合に「最新の状態です」というメッセージを表示
• インラインの Markdown プレビュー
• チャンネルの目的と説明を表示
• ホバー時にキーボードショートカットのヒントを表示
• 検索構文の候補を表示

メリット：

• 外部ドキュメントの必要性を減らします
• その場で学習できます
• ワークフローを中断しません
• 利用しながら機能を発見できます
• サポートの負担を軽減します

効果：

• ユーザーの 80％がトレーニングなしで機能を発見
• オンボーディング時間を 40％短縮
• 機能の利用率が向上

例 3：取り消しの文化 - Gmail

原則：操作を簡単に取り消せるようにし、間違いを犯す不安を軽減します。

実装： Gmail では、送信、アーカイブ、およびほとんどの操作を、黄色いバナーの通知から取り消せます。

デザインパターン：

• 操作をすぐに実行（楽観的 UI）
• 「取り消す」リンク付きの黄色いバナーを表示
• 取り消し可能な時間は 5～30 秒
• 期限を過ぎた場合は適切に処理
• 確認ダイアログの必要性を軽減

心理的効果：

• ユーザーの自信を高めます
• 試すことを促します
• 間違いへの不安を軽減します
• 確認ダイアログが不要になり、ワークフローが速くなります

指標：

• 送信されたメールの 20％が取り消されています
• 誤削除を 60％削減
• ユーザー満足度スコアが向上

例 4：スマートなデフォルト設定 - iOS Camera

原則：ユーザーの 80％に適したデフォルトを設定し、選択の手間を減らします。

実装： iOS Camera アプリは、適切なデフォルト設定で撮影できる状態で起動します。

スマート機能：

• 必要に応じて HDR を自動設定
• 暗い場所ではナイトモードを有効化
• ポートレートモードで最適な距離を提案
• グリッド線はデフォルトでオフ（設定で変更可能）
• 自動手ぶれ補正
• スマートな構図の提案

メリット：

• ほとんどのユーザーは設定が不要です
• 専門知識がなくても優れた結果を得られます
• 上級ユーザーはカスタマイズできます
• 瞬間をすばやく撮影できます
• カジュアルユーザーの成功率が高まります

効果：

• ユーザーの 95％は設定を変更しません
• 写真の満足度評価が向上
• アプリを開いてから撮影するまでの時間を短縮

例 5：フィードバックと確認 — Stripe ダッシュボード

原則：ユーザーの操作に対して、即座に明確なフィードバックを提供します。

実装： Stripe は、あらゆる操作とシステム状態に対して優れた視覚的フィードバックを提供します。

フィードバックのパターン：

• フォームフィールドでのインライン検証
• 操作完了時の成功アニメーション
• 非同期処理中の読み込み状態
• 具体的な解決策を示すエラーメッセージ
• バックグラウンド処理に関するトースト通知
• 楽観的 UI 更新

デザインの詳細：

• 成功を示す緑色のチェックマーク
• 具体的なエラーメッセージ（「カードが拒否されました」と「支払いに失敗しました」の違い）
• 該当する場合は再試行ボタン
• 複数ステップの処理に対する進行状況インジケーター
• 常に表示されるシステムステータス

ビジネスへの影響：

• サポートチケットを 35% 削減
• 問題解決の迅速化
• 支払い成功率の向上
• 開発者エクスペリエンスの向上

例 6：制約に基づくデザイン — Airbnb の日付選択ツール

原則：制約を利用してエラーを防ぎ、ユーザーを有効な選択肢へ誘導します。

実装： Airbnb の日付選択ツールは、選択できない日付を無効化し、視覚的なフィードバックを提供します。

制約：

• 過去の日付をグレー表示
• 空きがない日付を無効化
• 最低宿泊日数の要件を適用
• 日付範囲の料金を表示
• 週末を視覚的に強調
• 人気の日付範囲を提案

メリット：

• 無効な選択を排除
• 予約時のエラーを削減
• 空き状況をより明確に把握
• 意思決定を迅速化
• 予約の失敗を削減

指標：

• 無効な日付の選択を 50% 削減
• 予約完了までの時間を 25% 短縮
• 日付選択時の離脱率を低減

例 7：想起より認識 — Spotify

原則：記憶に頼らせるのではなく、情報を目に見える形で提示します。

実装： Spotify は、アルバムアート、最近再生した項目、状況に応じたプレイリストをあらゆる場所に表示します。

デザイン上の決定：

• 認識しやすい大きなアルバムアート
• ホーム画面に「最近再生した項目」を表示
• 視覚的なプレイリストカバー
• 検索結果にアーティストの画像を表示
• キューに次の曲を表示
• 再生に合わせて歌詞を同期

メリット：

• お気に入りのコンテンツへすばやく移動
• 忘れていた音楽を発見
• 検索の手間を軽減
• ブラウジング体験の向上
• エンゲージメントの向上

影響：

• 再生の 70% は検索ではなく視覚的なブラウジング経由
• セッション時間の延長
• プレイリストのエンゲージメント向上

例 8：一貫性 — Apple Human Interface Guidelines

原則：予測しやすさを高めるため、プラットフォーム全体で一貫性を保ちます。

実装： Apple は、iOS アプリ全体で厳格な UI の一貫性を徹底しています。

一貫した要素：

• 戻るボタンは常に左上
• 共有アイコンは常に同じ
• タブバーは下部
• ナビゲーションバーは上部
• スワイプジェスチャーは統一
• システムカラーとタイポグラフィ

メリット：

• 新しいアプリでも学習が不要
• 予測しやすい操作
• アプリ間で活用できる操作の記憶
• プロフェッショナルな外観
• ユーザーの信頼感

開発者への影響：

• デザインシステムがコンポーネントを提供
• 標準に従うことで開発を迅速化
• ガイドラインに準拠したアプリの App Store 評価が向上

例 9：エラーの防止 — Grammarly

原則：リアルタイムの支援により、エラーが起きる前に防ぎます。

実装： Grammarly は、エラーを防ぐためにリアルタイムの文章作成提案を提供します。

機能：

• インラインのスペルチェック
• 文法の提案
• トーンの検出
• 明瞭さの改善
• 盗用の検出
• 文脈に応じた修正

防止策：

• 問題の可能性がある箇所にすぐ下線を引く
• 指摘の理由を説明
• 具体的な修正案を提示
• ユーザーの選択から学習
• 文体に適応

影響：

• 公開前にエラーの 95% を検出
• 文章作成への自信が向上
• 文章作成の迅速化
• コミュニケーションの成果が向上

例10：美的でミニマルなデザイン - Dropbox

原則：本質的なコンテンツに焦点を当て、不要な要素を取り除きます。

実装： Dropboxは雑然としたデザインからミニマルなデザインへと進化し、ファイルに焦点を当てています。

ミニマルなデザイン：

• すっきりとしたファイル一覧表示
• 広々とした余白
• 限定されたカラーパレット
• 必要な場合にのみアイコンを表示
• 高度な機能は非表示
• 段階的な情報開示

変遷：

• メイン画面から宣伝バナーを削除
• ナビゲーション項目を7個から4個に簡素化
• ファイルプレビューを整理
• 視覚的なノイズを軽減

成果：

• タスク完了率が30％向上
• ファイル検索が43％高速化
• ユーザー満足度が向上
• パフォーマンスの体感が向上

例11：アクセシビリティを最優先 - BBC

原則：最初からアクセシブルなデザインにすることで、すべてのユーザーに利点をもたらします。

実装： BBCはすべての製品に、開発当初からアクセシビリティを組み込んでいます。

機能：

• キーボードナビゲーションに完全対応
• すべての動画に字幕を用意
• 音声コンテンツの文字起こし
• 十分な色のコントラスト
• 読みやすいタイポグラフィ
• スクリーンリーダー向けに最適化
• あらゆるデバイスに対応

すべての人に役立つ利点：

• 騒がしい環境では字幕が便利
• 読みやすいタイポグラフィは誰にとっても使いやすい
• パワーユーザーにはキーボードショートカットが便利
• あらゆるデバイスで動作
• セマンティック HTML による SEO の向上

影響：

• より幅広いユーザーにリーチ
• 法令遵守
• ユーザー体験全体の向上
• 業界をリード

例12：アフォーダンス - Google Material Design

原則：視覚的な手がかりを使って、操作可能な要素が操作可能だと分かるようにします。

実装： Material Designでは、標高、影、動きを使って操作可能であることを示します。

デザイン言語：

• ボタンに標高を付ける（影を落とす）
• フローティングアクションボタンを目立つように浮かせる
• カードはホバー時に浮き上がる
• タッチ時にリップルエフェクトを表示
• 状態（ホバー、アクティブ、無効）を明確に区別
• 一貫性のある操作可能な要素

視覚的な階層：

• 主要なアクションを最も目立たせる
• 二次的なアクションは控えめにする
• 無効状態を明確に区別する
• フォーカス状態をはっきり表示する

利点：

• クリック可能な要素がすぐに分かる
• ユーザーの混乱を軽減
• 操作が速くなる
• 期待される動作に一貫性がある

例13：ユーザーの操作性 - YouTubeの再生

原則：ユーザーが自分の体験を操作できるようにします。

実装： YouTubeは幅広い再生コントロールとカスタマイズ機能を提供しています。

コントロール：

• 再生速度（0.25倍から2倍）
• 画質の選択
• 字幕のカスタマイズ
• 自動再生の切り替え
• ミニプレーヤーモード
• シアターモード／全画面モード
• キーボードショートカット
• ピクチャーインピクチャー

利点：

• さまざまなニーズに対応
• アクセシビリティ機能
• パワーユーザーの作業効率向上
• 個人の好みに対応
• マルチタスクをサポート

利用状況：

• ユーザーの35％が再生速度を調整
• ユーザーの60％がキーボードショートカットを定期的に使用
• 操作性が高く、満足度も向上

例14：メンタルモデル - Figmaのレイヤー

原則：使い慣れたツールで身につけたユーザーのメンタルモデルに合わせます。

実装： FigmaのレイヤーパネルはPhotoshop／Sketchに似ており、デザイナーの学習負担を軽減します。

使い慣れたパターン：

• 左側のレイヤー階層
• 右側のプロパティパネル
• Adobeのキーボードショートカット
• グループ／フレームの概念
• 命名規則
• 表示／非表示の切り替え

使い慣れた操作に加えた新機能：

• オートレイアウト（新しい概念）
• コンポーネント（シンボルを拡張）
• マルチプレイヤー（新しい機能）

成果：

• デザイナーの70％が初回のセッションで作業を開始
• 必要なトレーニングは最小限
• 他のツールからの乗り換えが多い
• 移行に関するフィードバックは好意的

例15：ゲーミフィケーション - Duolingo

原則：ゲームの仕組みを活用して、ユーザーの意欲を高め、エンゲージメントを促します。

実装： Duolingoは、語学学習を夢中になれるゲームに変えています。

ゲーム要素：

• 連続学習の記録（毎日のモチベーション）
• レッスン完了で獲得できるXPポイント
• 友人とのリーダーボード
• 実績バッジ
• ライフシステム（ミスできる回数に制限）
• レベルアップ
• キャラクターのマスコット（Duo）

心理的な動機付け：

• 損失回避（連続記録を途切れさせたくない）
• 社会的比較（リーダーボード）
• 実績の解除
• 進捗の可視化
• 即時のフィードバック
• 報酬スケジュール

効果：

• 1日のアクティブユーザー率は40%
• 連続学習日数の平均は34日
• レッスン完了率の向上
• 従来のアプリより高い定着率
• 5億人以上のユーザー

ベストプラクティスのまとめ

調査フェーズ

• 思い込みではなく、ユーザー調査から始めます
• 複数の手法（定性＋定量）を活用します
• 代表性のある参加者を募集します
• 調査結果を文書化し、広く共有します
• ユーザーと直接接することで共感を育みます

設計フェーズ

• 確立されたヒューリスティックと原則に従います
• 最初からアクセシビリティを考慮して設計します
• 一貫性があり、予測しやすい体験を作ります
• あらゆる機会に認知負荷を軽減します
• すべての操作に明確なフィードバックを提供します
• 可能な限りエラーを防ぎます
• エラーから簡単に復旧できるようにします
• ユーザーのメンタルモデルに合わせます

テストフェーズ

• 実際のユーザーを対象に、早い段階から頻繁にテストします
• 問いに適した手法を使います
• 観察データと分析データを組み合わせます
• 調査結果に基づいて反復します
• 指標を経時的に追跡します
• 結果を関係者と共有します

実装フェーズ

• アクセシビリティのためにセマンティック HTML を使用します
• プラットフォームの慣例に従います
• 一貫性を保つためにデザインシステムを構築します
• パフォーマンス（体感と実測の両方）を最適化します
• アナリティクスとユーザーからのフィードバックを監視します
• データに基づいて継続的に改善します

継続的な改善

• ベースラインとなる指標を設定します
• 改善目標を設定します
• 定期的にユーザビリティテストを実施します
• サポートチケットとフィードバックを監視します
• 調査やベストプラクティスの最新動向を把握します
• 組織全体で学びを共有します

リソースとツール

調査ツール

• ユーザーインタビュー：UserTesting、Lookback、User Interviews
• アンケート：Typeform、SurveyMonkey、Google Forms
• カードソーティング：OptimalSort、Miro、UserZoom
• ツリーテスト：Treejack、UserZoom

アナリティクスとテスト

• アナリティクス：Google Analytics、Mixpanel、Amplitude、Heap
• A/B テスト：Optimizely、VWO、Google Optimize
• ヒートマップ：Hotjar、Crazy Egg、FullStory
• セッション録画：FullStory、Hotjar、LogRocket

デザインとプロトタイピング

• デザイン：Figma、Sketch、Adobe XD
• プロトタイピング：Figma、Framer、ProtoPie
• コラボレーション：Miro、Mural、FigJam
• デザインシステム：Storybook、ZeroHeight

アクセシビリティ

• WAVE（Web アクセシビリティ評価ツール）
• axe DevTools
• 色のコントラスト分析ツール
• スクリーンリーダー：NVDA、VoiceOver、JAWS

学習リソース

• Nielsen Norman Group（nngroup.com）
• Baymard Institute（調査と UX ベンチマーク）
• A List Apart（Web デザインと UX に関する記事）
• UX Collective（Medium の出版物）
• Laws of UX（lawsofux.com）
• Inclusive Design Principles（inclusivedesignprinciples.org）