usability

ユーザビリティ

ユーザビリティは感覚的なものではなく、測定可能な品質基準です。すべてのインタラクションは、認知的な負荷をかけずに機能する必要があります。

対象範囲

次の場合にこのスキルを使用します。

• ウェブサイトや個別のページのユーザビリティを評価する
• フォームを設計または最適化する
• エラー状態とフィードバックの仕組みを設計する
• Nielsen のヒューリスティックに基づいてヒューリスティック評価を実施する
• ユーザビリティの改善を通じてコンバージョン率の向上を目指す
• コンテンツを流し読みしやすく、読みやすくする必要がある

原則

1. 考えさせない

すべてのインタラクションは、認知的な負荷をかけずに機能します。ユーザーは読まずに流し読みします。最適な選択肢を選ぶのではなく、最初に見つかった経路を進みます。

2. 満足度より効率性、効率性より有効性

ISO 9241 の3つの基準は、互いに積み重なっています。まずタスクを達成できること、次に最小限の労力で達成できること、そして満足感を得られることが必要です。

3. 独創性より慣例

ユーザーはパターンを学習しています（左上のロゴ＝ホームページ、右上の検索、ショッピングカートのアイコンなど）。明確な根拠がある場合に限り、こうしたパターンを変えてください。

4. 美的ユーザビリティ効果

見た目の美しいインターフェースは、より使いやすいと認識されます。美しさはぜいたくではなく、ユーザビリティの要素です。

5. エラーへの耐性を要件とする

ユーザーは間違いを犯します。すべてのインタラクションにはエラーへの耐性を持たせ、明確なフィードバックを提供する必要があります。

6. 測定可能性

ユーザビリティは、タスク完了率、エラー率、タスク所要時間、満足度スコアによって測定します。

ルール

実施する：一貫性を保つ

• すべてのページでフォント、色、デザイン要素、表記ルールを統一します。
• 類似するページタイプのレイアウトを同一にします。
• 一貫したインタラクションモデルを使用します（同じボタンスタイル、同じホバー効果、同じフォームの動作）。

実施する：ファーストビューを最適化する

• 最も重要なメッセージ、主要なCTA、明確な見出しを、スクロールせずに見える範囲に配置します。
• 最初の見出しに「ようこそ」を使わないでください。代わりに、メリットを中心とした表現を使います。

実施する：フォームを最小限にする

• 必須項目のみを尋ねます。項目を1つ追加するごとにコンバージョン率が低下します。
• 必須項目を明確に示します。
• わかりやすい項目ラベルを使用します。プレースホルダーだけをラベルとして使わないでください。
• エラーメッセージは該当する項目のすぐそばに表示します。
• エラーが発生しても、正しく入力された項目の値を保持します。

実施する：エラー状態を設計する

• 次のページへのナビゲーションを備えたカスタム 404 ページを作成します。
• すべてのユーザー操作に対して、明確なフィードバック（成功、エラー、読み込み中）を提供します。
• 動画や音声の自動再生を防ぎます。
• 次に何をすればよいか案内せずに、空の状態を表示しないでください。

実施する：コンテンツを流し読みしやすくする

• 小見出し、リスト、表、視覚的な目印を使ってテキストを構成します。
• 1行あたりの長さを8～10語に抑えます。
• テキストは左揃えにします（ウェブでは均等割り付けを使用しません）。
• 本文のフォントサイズを最低18pxに設定します。

避ける：不要な複雑さを持ち込まない

• 不要なアニメーション、フレーム、ポップアップを避けます。
• リンク以外に下線を使用しないでください。
• 情報価値のない一般的なストック写真を避けます。
• 隠れたナビゲーションや予期しないナビゲーションを避けます。

避ける：読み込み時間を無視しない

• 読み込み時間を3秒未満に保ちます。
• わかりやすい URL を使用します。
• 画像とメディアを最適化し、すばやく配信できるようにします。

パターン

ヒューリスティック評価（Nielsen）

10のユーザビリティヒューリスティックに照らして、体系的に評価します。システム状態の可視性、システムと現実世界の一致、ユーザーの制御と自由、一貫性と標準、エラーの防止、記憶より認識、柔軟性と効率性、美的でミニマルなデザイン、ユーザーがエラーを認識して回復できるようにすること、ヘルプとドキュメントが含まれます。詳細については、references/nielsen-heuristiken.md を参照してください。

段階的な情報開示

複雑なコンテンツでは、まず必要な情報だけを表示します。詳細を確認できる「詳しく見る」などの選択肢を用意します。例：FAQ のアコーディオン、展開可能な商品詳細、複数ステップのフォーム。

インライン検証

フィールドが3つを超えるフォームでは、フィールドからフォーカスが外れた直後に入力内容を検証します。成功（緑色のチェックマーク）とエラー（修正案を含む赤色のメッセージ）を、該当するフィールドのすぐそばに表示します。

コンバージョンにつながるソーシャルプルーフ

ランディングページ、製品ページ、問い合わせページでは、CTA の近くにお客様の声、評価、顧客数、ロゴを配置します。実際に確認できる内容を掲載してください。

アンチパターン

分かりにくいナビゲーション

見ただけではリンクだと分からないナビゲーションや、ラベルのない謎めいたアイコン。ユーザーはクリックした先を推測しなければなりません。解決策： 明確で説明的なリンクラベルを使用します。アイコンには必ずテキストラベルを添えます。

過剰なフォーム

フィールドが多すぎる、不要な必須項目がある、進捗インジケーターのない複数ページのフォーム。フィールドが1つ増えるごとに、完了率は約5～10％低下します。解決策： 必要なフィールドだけにします。複数ステップのフォームには進捗バーを設置します。

メディアの自動再生

ページを開くと動画や音声が自動的に再生されます。解決策： メディアは必ず一時停止状態で読み込みます。再生ボタンを目立つように表示します。

誤ったアフォーダンス

クリックできるように見えるのに実際にはできない（またはその逆の）要素。解決策： ボタンはボタンらしく、リンクはリンクらしく見せます。操作可能な要素に見える装飾要素は使いません。

位置を把握できない無限スクロールページ

アンカーリンクやページ上部に戻るボタンがない、非常に長いページ。解決策： 目次、固定ナビゲーション、一定のスクロール量を超えた後に表示するページ上部に戻るボタンを設置します。

チェックリスト

技術面

• 読み込み時間が3秒未満（Lighthouse）
• 不明瞭なパラメーターを含まない、分かりやすい URL
• 不要なアニメーションやポップアップがない
• 次のページへのナビゲーションを備えたカスタム 404 ページ
• すべてのユーザー操作に対する明確なフィードバック
• すべてのブレークポイントでレスポンシブデザインをテスト済み

コンテンツとデザイン

• 本文のフォントサイズが18px以上
• 十分なコントラスト（最低4.5:1）
• すべてのページで一貫したデザイン
• 流し読みしやすいセクションで構成されたテキスト

ナビゲーション

• 機能的で直感的なメインメニュー
• 階層が2段を超える場合はパンくずリストを表示
• リンクのスタイルが一貫している
• ロゴがホームページにリンクしている

フォーム

• 必要なフィールドだけがある
• 必須フィールドが明確に示されている
• インラインエラーメッセージが該当するフィールドのすぐそばにある
• エラーが発生しても正しい入力内容が保持される
• 送信後に成功確認を表示する

テスト

• ニールセンのヒューリスティックに基づくヒューリスティック評価を完了
• さまざまなデバイスとブラウザーでテスト済み
• コンバージョンに重要な要素の A/B テストを計画済み

関連項目

• ux-design -- UX デザインを包括する分野
• accessibility -- ユーザビリティの一部としてのアクセシビリティ
• responsive-design -- 複数のデバイスでのユーザビリティを実現するための技術的な前提条件
• navigation-design -- ユーザビリティの中核となる要素としてのナビゲーション
• web-typography -- 読みやすさのためのタイポグラフィルール
• landing-pages -- ランディングページでのコンバージョン最適化