ui-density

UI の情報密度

情報密度とは、一定の領域に表示される情報量とインタラクティブな要素の数を指します。適切な情報密度に普遍的な基準はありません。プラットフォーム、ユーザーの種類、セッションの状況によって異なります。

プラットフォームごとのデフォルト

プラットフォーム	デフォルトの情報密度	理由
デスクトップ	中〜高	画面が大きく、入力精度が高く、主要な作業環境となることが多いため
タブレット	中	タッチ入力で、スマートフォンより大きいものの、デスクトップより小さいため
モバイル	低	画面が小さく、タッチ対象に余裕が必要で、セッションが中断されるため

情報密度の高いデスクトップレイアウトを、そのままモバイルに移植してはいけません。機能を縮小するのではなく、削除する、折りたたむ、または優先度を下げてください。

ユーザーの種類と情報密度

ユーザーの種類	適切な情報密度	例
パワーユーザー／エンタープライズ	高密度でも問題ありません	取引プラットフォーム、ERP、分析、開発者向けツール
ときどき利用するユーザー／一般ユーザー	中程度 — 視覚的なゆとりを保ちます	SaaS ダッシュボード、プロジェクト管理
消費者／初めて利用するユーザー	低 — ガイド付きで、すっきりとした画面にします	オンボーディングのフロー、消費者向けアプリ、e コマース

取引プラットフォームのオペレーターは、1 日 8 時間その製品を使い、画面の隅々まで把握しています。高い情報密度は、そのユーザーに役立ちます。一方、月に一度だけ設定ページを訪れるユーザーには、余白があり、ラベルが明確な画面が必要です。

専門家は、複雑さが適切な問題を素早く解決するなら、それを受け入れます。 ドメインに精通した人（特に社内ツールを使う人）は、複雑さがすでに身につけているメンタルモデルに合致するため、情報密度が高く、複雑で、機能が豊富なインターフェースを喜んで使います。圧倒されることなく機能させるには、次の 2 つの条件が必要です。

• 用語がユーザーの語彙に合っていること。 ラベル、略語、専門用語は、ユーザーがすでに使っているものにします。消費者には分かりにくい用語でも、専門家にとっては正確で素早く理解できる合図になります。対象としていないユーザーに合わせて、表現を単純化しないでください。
• 成果にすぐたどり着けること。 主要アクションが明確であれば（[[visual-emphasis-and-hierarchy]] を参照）、成果（ユーザーが求めていた答えや、実行する必要のある操作）をすぐに確認または実行できる限り、情報密度が高くても問題ありません。成果への明確な道筋を囲む複雑さは力になりますが、成果を埋もれさせる複雑さは雑然とした状態を生みます。

これを踏まえ、情報密度が高く、専門用語を使い、キーボード操作を中心とし、主要アクションに常に手が届くパワーユーザーモードを設計します。案内を重視し、画面をすっきりさせたカジュアル／初回利用モードとは明確に区別してください。同じ製品で両方を提供しても構いません。実際にその画面を使う人に合わせてモードを選びます。

情報密度トークン

情報密度を考慮して、スペーシングのスケールを定義します。コンパクトなバリアントでは、構造を変えずにパディングを減らします。

/* Default density */
--density-row-height:    44px;
--density-cell-padding:  var(--space-3) var(--space-4);
--density-gap:           var(--space-4);

/* Compact (enterprise / data-heavy) */
[data-density="compact"] {
  --density-row-height:    32px;
  --density-cell-padding:  var(--space-2) var(--space-3);
  --density-gap:           var(--space-2);
}

/* Spacious (consumer / onboarding) */
[data-density="spacious"] {
  --density-row-height:    56px;
  --density-cell-padding:  var(--space-4) var(--space-6);
  --density-gap:           var(--space-6);
}

プラットフォームごとの機能数

すべての機能が、すべてのプラットフォームに必要なわけではありません。機能ごとに、モバイルユーザーが今すぐこれを必要としているかを確認します。

優先度	モバイル	タブレット	デスクトップ
コアタスク	常に表示	常に表示	常に表示
二次アクション	折りたたむ（メニュー／シート）	表示	表示
フィルターと並べ替え	利用可能にするが、常時表示はしない	折りたたみ可能	サイドバーまたはツールバーに常時表示
一括操作	非表示または最小限	削減	すべて表示
詳細設定	別画面へのリンク	リンクまたはパネル	インラインまたはパネル
データの可視化	簡略化（主要な指標のみ）	簡略化したグラフ	フルグラフ

モバイルでの情報密度と機能の削減

画面が小さい場合、セクションや機能は単にサイズを変更するだけでなく、削除、折りたたみ、再配置できます。

• 削除： 装飾的なサイドバー、二次データ列、プロモーションバナー
• 折りたたみ： フィルター、詳細オプション、二次ナビゲーションをアコーディオンやボトムシートにまとめます
• 再配置： ツールバーを上部から下部へ移動します（親指が届きやすくするため）。サイドバーをドロワーに移動します
• 簡略化： 複数列のデータテーブルをカードリストに変更します。フルグラフを主要な指標 1 つに置き換えます

プログレッシブディスクロージャーが基本原則です。主要タスクを完了するのに必要な最小限の情報を表示し、必要に応じて追加情報を表示します。

読む時間も考慮する

密度の高いUIで最も見過ごされがちなコストは、読むことです。ユーザーが状況を把握するために読まなければならない言葉の一つひとつが時間を費やし、積み重なっていきます。読む量が増えるほど、訪れるたびにインターフェース全体の操作が遅く感じられます。密度とは、単に「画面にどれだけ収まるか」ではなく、「操作するためにユーザーがどれだけ 読まなければならないか」です。その負担を減らしましょう。

• 文字を小さくする前に、言葉を削りましょう。 画面が窮屈なときは、文字を小さくするのではなく、コンテンツを減らすのが通常の解決策です（[[modular-scale-typography]]を参照）。
• 概念を明確に表す標準的なアイコンがある場合は、認識しやすいアイコンで読む手間を省きましょう。 目は言葉を読むよりも、形を認識するほうが速いです（[[brand-visual-language]]を参照）。
• ただし、アイコンを使いすぎないでください。 誤ったアイコンや装飾的なアイコンは、解釈の手間を減らすどころか増やします。また、何にでもアイコンを付けると、それ自体がノイズになります。適切なアイコンを、必要な場所だけに使いましょう。
• ざっと見て分かる情報を先頭に置きましょう。 ユーザーが探している言葉や数値を行やラベルの先頭に置き、全体を読まなくても見つけられるようにします。

目標は、ユーザーが自分の現在地と次にすべきことを知るために、読むのではなく、ひと目で把握できるようにすることです。

レビューチェックリスト

• 主なプラットフォームに適した密度ですか（デスクトップはより高密度でもよく、モバイルは余白が必要です）？
• ユーザーのタイプに適した密度ですか（パワーユーザーは高密度でもよく、一般ユーザーにはより多くの余白が必要です）？
• 個別に設定したパディング値ではなく、スペーシングトークンで密度を定義していますか？
• モバイルでは、セカンダリー機能を縮小するのではなく、折りたたむ、配置し直す、または削除していますか？
• コンパクトな密度のバリエーションでも、タッチターゲットは ≥ 44×44px ですか？
• ユーザーごとの好みが強いエンタープライズツールでは、密度の切り替えを用意していますか？