information-density

情報密度

一度に表示する情報量をユーザーが調整できるインターフェイスを設計しましょう。200 行を流し読みするパワーユーザーに適した密度は、各項目をじっくり確認する必要があるユーザーにとっては適切ではないためです。

密度の段階

コンパクト

• 余白を最小限にし、文字を小さくして、より多くの項目を表示します
• 適したユーザーや状況：パワーユーザー、データ量の多いタスク、大画面
• 注意点：認知障害のあるユーザーには負担が大きく、タッチデバイスではタップしにくく、弱視のユーザーには流し読みしにくい場合があります

標準（デフォルト）

• 適度な余白、標準の文字サイズ、バランスの取れた表示量にします
• 適したユーザーや状況：ほとんどの状況におけるほとんどのユーザー
• これをデフォルトにしてください。まずはこの設定を優先して最適化します

ゆったり

• 余白を広く取り、文字を大きくして、表示する項目を少なくします
• 適したユーザーや状況：認知障害のあるユーザー、弱視のユーザー、タッチデバイス、新規ユーザー、ストレスの多い状況
• 注意点：経験豊富なユーザーは、より多くスクロールする必要があります

デザインパターン

密度の調整

• 2〜3 種類の密度オプション（コンパクト、標準、ゆったり）を用意します
• アイコンの切り替えだけでなく、わかりやすいラベルを使います
• 密度の変更はすぐに反映します（ページの再読み込みは不要です）
• 設定をセッションをまたいで保持します
• 対象となるコンテンツの近くに調整機能を配置します

密度によって変わる要素

• 項目間の垂直方向の余白
• 項目内の水平方向のパディング
• フォントサイズ（アクセシビリティに配慮した範囲内にします。0.875rem 未満にはしません）
• 行の高さ（アクセシビリティに配慮した範囲内にします。本文では 1.5 未満にはしません）
• 項目ごとに表示するメタデータの量
• サムネイルやプレビューのサイズ
• グリッドレイアウトの列数

密度によって変えてはならない要素

• コンテンツの意味。どの密度でも情報が失われないようにします
• アクセシビリティ。すべての密度レベルで WCAG の要件を満たす必要があります
• 操作対象。密度にかかわらず、タッチ操作では最小 44×44px を確保します
• 見出し構造。構造は一貫させます
• キーボード操作。タブの移動順序は論理的に保ちます

コンテキストごとの密度

• リストとフィード： 行の高さと表示するメタデータを調整します
• データテーブル： 行のパディングと表示する列を調整します
• ダッシュボード： カードのサイズと間隔を調整します
• 受信トレイ： プレビューの長さと行の高さを調整します
• カレンダー： イベントの詳細表示を調整します

状況に応じて調整するデフォルト設定

ビューポートに基づくデフォルト設定

• 大画面（1440px 以上）：標準またはコンパクト
• 中画面（768〜1439px）：標準
• 小画面（768px 未満）：標準またはゆったり
• タッチデバイス：デフォルトをコンパクトにしないでください

ユーザー設定に基づくデフォルト設定

• システムの文字サイズが大きく設定されている場合：デフォルトをゆったりにします
• prefers-contrast が有効な場合：余白を少し広くします
• 新規ユーザー：デフォルトを標準にします
• すべてのデフォルト設定をユーザーが変更できるようにします

確認チェックリスト

• 2 種類以上の密度オプションを利用できる
• デフォルトの密度はコンパクトではなく、標準になっている
• どの密度レベルでも情報が失われない
• すべての密度で、タッチ操作の最小ターゲットサイズ（44×44px）が確保されている
• すべての密度で、最小文字サイズ（0.875rem）が確保されている
• すべての密度で、最小行の高さ（1.5）が確保されている
• 密度の設定がセッションをまたいで保持される
• 密度がビューポートとシステム設定に応じて調整される