レイアウト
情報密度
Density
情報密度とは、一定の面積にどれだけの情報を詰め込むかの度合いで、画面の目的に応じて、ゆったりと余白をとるか密に詰めるかを選ぶものです。
定義
情報密度とは、同じ量の情報を画面にどれだけ詰め込むかの度合いのことです。余白を たっぷりとる「ゆったり（comfortable）」なやり方は要素どうしを大きく離すので、一画面 に収まる量は減りますが、そのぶん落ち着いて見やすくなります。反対に余白を切り詰める 「密（compact）」なやり方は、同じスペースにより多くの項目を詰め込み、一目でざっと 見渡せるようにします。情報密度に唯一の正解はなく、その画面が何のためのものかによって 天秤にかける選択です。同じリストでも、密度をどう決めるかで画面の性格も使い心地も まったく変わります。密度を実際に動かすつまみは、結局のところ余白や文字サイズ、要素の 高さといった値だということも覚えておくと役立ちます。
なぜ重要か
情報密度が大切なのは、画面の目的ごとに似合う度合いが違うからです。指で押すモバイルの ボタンや、初めて見るサービスの紹介画面には、ゆったりした密度が向いています。要素が 十分に離れていれば押し間違えにくく、読む負担も減るからです。逆に、たくさんのデータを ざっと見る必要があるダッシュボードや表、メール受信箱には密な密度が有利です。スクロール を減らしながら、より多くの情報を一目で見比べられるからです。目的に合わない密度は、 ゆとりが行きすぎて非効率になったり、詰めすぎて窮屈で押し間違いを誘う画面になったり します。だから慣れたデザイナーは、見た目の美しさより先に、この画面を誰がどんな状況で 使うのかを思い浮かべてから密度を決めます。
よくある間違い
- 一つの画面に複数の密度を混ぜて使ってしまうことです。あるリストはぎっしり、別の リストはすかすかだと、ユーザーはルールをつかめず、画面が整っていない散らかった 印象を受けます。密度は画面や領域の単位でそろえるのが安全です。
- 情報をできるだけ多く詰め込もうと、むやみに余白を削ってしまうことです。密度を上げ れば入る量は増えますが、要素どうしがくっついて押し間違えやすくなり、目もすぐ疲れて、 かえって目当ての項目を探す速度が遅くなることがあります。
- タッチ画面でまでマウス基準の詰まった間隔をそのまま使ってしまうことです。指はマウス ポインターよりずっと太いので、狭い間隔は誤操作を大きく増やし、ユーザーをいらだたせ ます。
実務のヒント
- 密度は画面の目的を基準に決めましょう。タッチや読みやすさが大切ならゆったりと、たく さんのデータを見るダッシュボードや表、メール受信箱なら密にするのがよく合います。 目的を先に決めれば、密度選びは好みの問題ではなく根拠のある判断になります。
- ゆったりと密の二つの密度セットをあらかじめ用意しておき、画面全体でどちらか一つだけ を選んで使いましょう。基準があれば画面ごとに間隔を考え直さずにすみ、あとで密度を まるごと切り替えるのも簡単で、一貫性が安定して保たれます。
- 密度を上げるときも、要素を押せる最小サイズは守りましょう。見た目の間隔は狭めても、 実際に反応する領域を十分に確保しておけば、密さと使いやすさを両立できます。
AIに頼む
下に貼り付けるコードから padding・margin・gap・行の高さを全部抜き出して、一つの画面の中に違う密度が混在している箇所を見つけて。密度を実際に左右する余白・文字サイズ・要素の高さを 8px グリッドに合わせて一つの密度に統一して、この画面は[画面の目的 — 例: データをざっと見るダッシュボード]だから、それに合わせて余裕（comfortable）か高密度（compact）のどちらか一つだけを選んで適用して。高密度側に振る場合でも、ボタン・チェックボックスのような押す要素の実際の反応領域は最低 44×44px を確保して、変更した値を「元の値→新しい値」の表にまとめて。
この画面は[画面の性格 — 例: 行が多い管理者向けの表]だから、スクロールを減らして一目で比較するのが目的。下に貼り付けるコードを高密度（compact）に組み直して — 行の高さは 48px 台から 32〜36px に、要素どうしの間隔は 16〜24px から 8〜12px に縮めて、本文の文字も一段階小さく調整して。ただし、見た目の間隔だけを詰めて、押す要素の実際のタッチ領域は 44×44px 以上を保ち、誤操作が増えないようにして。目がすぐに疲れないよう、要素どうしがくっつく直前で止めて、調整の前後を比較して見せて。
余裕（comfortable）と高密度（compact）の2種類の密度セットを CSS 変数であらかじめ定義して。各セットごとに余白・文字サイズ・要素（行/ボタン）の高さの値を 8px グリッド基準でペアにして、--density-gap や --row-h のようなトークンとして抜き出し、画面全体でセットを一つ切り替えるだけで密度がまるごと変わるようにして。高密度セットでも、押す要素の最小タッチ領域 44×44px が崩れないように値を決めて、comfortable はタッチ・可読性重視の画面、compact はダッシュボード・表・メールボックスに使うという基準をコメントで添えて。2つのセットを並べて比較した表も一緒に出して。