情報密度の最適化 (Information Density)

「全部大事だから全部載せる」——この判断が、画面を「情報の墓場」に変えます。 テキスト、数値、アイコン、バッジ、グラフ、ボタンが隙間なく詰め込まれた画面は、一見「情報量が多くて親切」に見えます。しかし実際には、ユーザーは何から見ればいいか分からず、最も重要な情報を見落とし、疲弊して離脱します。

逆に「シンプルにしよう」と余白を増やしすぎた画面も問題です。必要な情報を探すためにスクロールを繰り返し、「どこに何があるか分からない」という別の迷子状態を生みます。

情報密度の失敗は「詰め込みすぎ」と「スカスカ」の両方向に起きます。どちらも根本原因は同じで、「ユーザーが今この画面で何をしたいか」を起点に設計していないことです。

1. 原則の定義

画面に載せる情報量を、ユーザーの目的・文脈・認知能力に合わせて最適化し、「必要な情報に即座にたどり着ける」状態を作るルール。

本質は「情報の取捨選択」ではなく「情報の優先順位付け」です。すべての情報を削るのではなく、「今この画面でユーザーが最も必要としている情報」を最も目立つ位置・サイズで提示し、それ以外を適切に後退させることで、認知の負担を下げながら情報量を維持します。

2. いつ使うか（適用場面）

特に重要になるケース

• ダッシュボード・管理画面: 複数のKPIやグラフ、アクションボタンが1画面に共存する時。何を「主役」にするかを決めないと、すべてが等価に見えて何も伝わらない。
• データ一覧・テーブル: 行と列が増えるほど、どの列が重要かが埋もれる。表示する列の優先順位と、行の視覚的な区切りが重要になる。
• モバイル画面: 画面領域が限られているため、PCで「全部見せる」設計をそのまま縮小すると情報が破綻する。表示する情報を絞り込む判断が必須。
• 初回訪問・オンボーディング: ユーザーがまだ文脈を持っていない状態では、情報量を意図的に絞り込み、最初の一歩だけを示す。

トレードオフが起きる場面

• 専門家 vs 一般ユーザー: 医療・金融・分析ツールなど、専門家が使うプロダクトでは「情報密度が高い＝効率的」と感じるユーザーが存在します。一般ユーザー向けの「シンプル化」が、専門家には「情報が足りない」と感じさせることがあります。ユーザー層を明確にし、必要であれば「詳細表示モード」などで両立を図ります。

3. なぜ重要か（設計判断の核）

情報密度は「どれだけ載せるか」ではなく、「何を先に見せるか」の設計である。

設計判断の基準

• 「この画面でユーザーが最初にすべきアクションは何か？」→ そのアクションに関連する情報が、最も目立つ位置・サイズで提示されているか。
• 「この情報は、今この画面で必要か？」→ 「あると便利かもしれない」情報は、別画面・展開パネル・ツールチップに退避させる。

優先順位の考え方

• 1. 主要アクションの明確化: ユーザーが「次に何をすべきか」が一目で分かる状態を最優先で作る。
• 2. 視覚的階層の確立: フォントサイズ・太さ・色・余白を使い、「重要度の高い情報」と「補足情報」を明確に区別する。
• 3. 段階的な開示: すべての情報を一度に見せず、ユーザーが必要に応じて深掘りできる構造（アコーディオン、詳細ページへのリンクなど）を用意する。

例外条件

• プロ向けのデータ分析ツールや証券取引画面など、情報密度の高さ自体がユーザーの「効率」と「信頼感」につながるプロダクト。ただしこの場合も、視覚的階層と整列のルールは必ず守る。

4. 具体の設計ルール（チェックリスト）

最低ライン（Must - これ守らないと危険）

ここをクリアしていないと、ユーザーが画面を見た瞬間に「何をすればいいか分からない」状態になります。

主役の明確化: 1画面に「最も重要な情報・アクション」が1つ定義されており、それが他の要素より明らかに目立つサイズ・配置になっているか？（すべての要素が同じサイズ・同じ重みで並んでいないか）
余白による区切り: 関連する情報のグループと、別のグループの間に、十分な余白（最低でも16px以上）が確保されており、情報のまとまりが視覚的に判別できるか？
不要な情報の除去: 「あると便利かもしれない」という理由だけで追加された情報（ユーザーが実際に参照しないデータ、装飾的な数値など）が画面に残っていないか？

理想ライン（Better - できると強い/プロの品質）

情報密度の設計を「感覚」ではなく「構造」で制御できている状態です。

段階的な開示の実装: すべての情報を初期表示せず、「概要→詳細」の2段階構造（アコーディオン、「詳細を見る」リンク、ツールチップなど）で、ユーザーが必要な時だけ深掘りできるようになっているか？
コンテキストに応じた密度の切り替え: モバイルとPCで表示する情報量を意図的に変えているか？（PCで見せている補足列をモバイルでは非表示にするなど）
スキャンしやすい構造: ユーザーが画面を「読む」のではなく「スキャン」できるよう、見出し・太字・アイコンなどの視覚的なアンカーが適切に配置されており、目的の情報に3秒以内でたどり着けるか？

5. UI例

同じ情報を扱っていても、密度の設計次第で「圧迫感があり何も分からない画面」と「瞬時に状況を把握できる画面」に分かれます。

改善プロセス

1. 「主役」を1つ決める: 「この画面でユーザーが最初に取るべきアクションは何か？」を問い、その情報・ボタンを最も目立つ位置に配置する。
2. 情報の重要度を3段階に分ける: 「今すぐ必要（Primary）」「参考情報（Secondary）」「必要な時だけ（On-demand）」に分類し、それぞれ異なる視覚的重みを与える。
3. On-demand情報を隠す: 「詳細を見る」「展開する」などの操作で初めて表示される構造にし、初期表示の密度を下げる。

6. 関連リンク

• 関連リファレンス（理論）: 認知負荷
• 用語集（定義）: 情報アーキテクチャ (IA), UI
• 関連するUI原則（横）: 視覚的階層 (Visual Hierarchy), スキャンしやすさ (Scannability), 余白 (Whitespace), 段階的開示 (Progressive Disclosure)
• 関連するUIコンポーネント: List（リスト）, Card（カード）, Badge（バッジ）, Table（テーブル / 表）, Table of Contents（目次）, Image / Media（画像・メディア）, Separator（セパレーター）, Search（検索）, Filter（フィルター）, Accordion（アコーディオン）, Floating Panel（フローティングパネル）, Scroll Area（スクロールエリア）, Resizable（リサイザブル）, Responsive Patterns（レスポンシブパターン）, Density Patterns（密度パターン）, Right Rail（ライトレール）, Inspector Panel（インスペクターパネル）, Spatial Canvas（スペーシャルキャンバス）, Dashboard Patterns（ダッシュボードパターン）

7. まとめ

今日から直せる一手 今開発中の画面を開き、「この画面でユーザーが最初にすべきアクションは何か？」を1つ答えてください。その答えが、画面を見た瞬間に一番目立っていなければ、今すぐそのボタンや情報のサイズ・色・配置を変えましょう。

チームに共有するなら一言 「情報は『全部載せる』か『削る』かではない。『何を先に見せるか』を決めることがデザインだ。」