情報密度

レイアウト

情報密度

Density

情報密度とは、一定の面積にどれだけの情報を詰め込むかの度合いで、画面の目的に応じて、ゆったりと余白をとるか密に詰めるかを選ぶものです。

プロジェクト計画
デザインレビュー
リリース準備
振り返り
密度

定義

情報密度とは、同じ量の情報を画面にどれだけ詰め込むかの度合いのことです。余白を たっぷりとる「ゆったり(comfortable)」なやり方は要素どうしを大きく離すので、一画面 に収まる量は減りますが、そのぶん落ち着いて見やすくなります。反対に余白を切り詰める 「密(compact)」なやり方は、同じスペースにより多くの項目を詰め込み、一目でざっと 見渡せるようにします。情報密度に唯一の正解はなく、その画面が何のためのものかによって 天秤にかける選択です。同じリストでも、密度をどう決めるかで画面の性格も使い心地も まったく変わります。密度を実際に動かすつまみは、結局のところ余白や文字サイズ、要素の 高さといった値だということも覚えておくと役立ちます。

なぜ重要か

情報密度が大切なのは、画面の目的ごとに似合う度合いが違うからです。指で押すモバイルの ボタンや、初めて見るサービスの紹介画面には、ゆったりした密度が向いています。要素が 十分に離れていれば押し間違えにくく、読む負担も減るからです。逆に、たくさんのデータを ざっと見る必要があるダッシュボードや表、メール受信箱には密な密度が有利です。スクロール を減らしながら、より多くの情報を一目で見比べられるからです。目的に合わない密度は、 ゆとりが行きすぎて非効率になったり、詰めすぎて窮屈で押し間違いを誘う画面になったり します。だから慣れたデザイナーは、見た目の美しさより先に、この画面を誰がどんな状況で 使うのかを思い浮かべてから密度を決めます。

よくある間違い

  • 一つの画面に複数の密度を混ぜて使ってしまうことです。あるリストはぎっしり、別の リストはすかすかだと、ユーザーはルールをつかめず、画面が整っていない散らかった 印象を受けます。密度は画面や領域の単位でそろえるのが安全です。
  • 情報をできるだけ多く詰め込もうと、むやみに余白を削ってしまうことです。密度を上げ れば入る量は増えますが、要素どうしがくっついて押し間違えやすくなり、目もすぐ疲れて、 かえって目当ての項目を探す速度が遅くなることがあります。
  • タッチ画面でまでマウス基準の詰まった間隔をそのまま使ってしまうことです。指はマウス ポインターよりずっと太いので、狭い間隔は誤操作を大きく増やし、ユーザーをいらだたせ ます。

実務のヒント

  • 密度は画面の目的を基準に決めましょう。タッチや読みやすさが大切ならゆったりと、たく さんのデータを見るダッシュボードや表、メール受信箱なら密にするのがよく合います。 目的を先に決めれば、密度選びは好みの問題ではなく根拠のある判断になります。
  • ゆったりと密の二つの密度セットをあらかじめ用意しておき、画面全体でどちらか一つだけ を選んで使いましょう。基準があれば画面ごとに間隔を考え直さずにすみ、あとで密度を まるごと切り替えるのも簡単で、一貫性が安定して保たれます。
  • 密度を上げるときも、要素を押せる最小サイズは守りましょう。見た目の間隔は狭めても、 実際に反応する領域を十分に確保しておけば、密さと使いやすさを両立できます。

関連概念