情報量に応じた余白とは?余白を埋めるべきか迷ったときの調整のコツ

情報量に応じた余白の基本

まずは、情報量に応じた余白とはどんな考え方なのか、そして情報量によってどんな問題が起きるのかを押さえましょう。

情報量に応じた余白とは

情報量に応じた余白とは、デザインに載せる情報の量に合わせて、余白の広さや取り方を調整するという考え方のことです。

ここでいう情報量とは、文字の量や、写真・ボタン・表といった要素の数のことです。

同じ大きさの画面やバナーでも、載せる情報の量が違えば、ちょうどよい余白の取り方も変わります。

情報が多いときは余白を工夫して整理する必要があり、情報が少ないときは余白を活かして印象を作る余地が生まれます。

情報が多いとき・少ないときに起きること

情報量に合わない余白の取り方をすると、多いときは「窮屈」、少ないときは「間延び」という問題が起きやすくなります。

情報量	起きやすい問題	原因になりやすいこと
多い	窮屈で読みにくい、どこから見ればよいか分からない、画面に収まらない	すべての間隔を同じように詰めている、情報を減らさずに余白だけを削っている
少ない	スカスカで寂しい、未完成に見える	小さな要素がばらばらに散らばり、余白があちこちに分かれている

どちらの場合も、「余白の量」そのものより、「余白の配り方」に原因があることが多いのがポイントです。

ここからは、情報量ごとに余白をどう配ればよいかを見ていきます。

情報量に合わせた余白の調整方法

情報が多いときは「まとめて区切る」「載せる量を見直す」、少ないときは「余白を埋めずにまとめて残す」が基本の考え方です。

それぞれを見本と一緒に確認しましょう。

情報が多いとき:グループごとにまとめて区切る

情報が多いときは、関係のある情報同士をグループにまとめ、グループの中は詰め、グループとグループの間を広く空けます。

人は近くにあるもの同士を「ひとまとまり」として見る傾向があるため、余白の差でグループが分かれて見え、情報が多くても整理されて感じられるからです(この見え方の性質は「近接の原則」と呼ばれ、近接の原則とは?で解説しています)。

このように情報をまとまりごとに分けることを「グルーピング」と呼びます。

次の料金プランの見本でいえば、「プラン名・月額料金・2つの機能」の4行が1つのプランを表すセットなので、この4行を1つのグループとして扱います。

NGの見本は、8行がすべて同じ間隔で並んでいるため、「月額980円」がどちらのプランの料金なのかを読み取るのに時間がかかります。

OKの見本は、載っている情報も全体の高さもほとんど同じですが、プランの中を詰めてプランの間を広げたことで、2つのプランがひと目で分かれて見えます。

情報が多いと「余白を全体的に減らす」ことを考えがちですが、減らすのはグループの中の余白で、グループの間の余白は残すと覚えておきましょう。

Googleが公開しているUIデザインのガイドライン(画面の部品の作り方や使い方をまとめたルール集)であるMaterial Designでも、一覧(リスト)や表、長い入力フォームのように多くの情報を扱う部品は、要素の間隔を詰めて密度を高めると、情報を見比べやすくなると説明されています(Material Design: Applying density(英語))。

一方で同じガイドラインでは、日付を選ぶカレンダーのように正確に選んでもらう部品や、警告・お知らせのメッセージは、詰めると選びにくくなったり気づきにくくなったりするため、密度を高めるのに向かないとしています。

また、詰めるのは見た目の間隔であって、ボタンやリンクの押しやすさまで削ってよいわけではありません。

情報が多いとき:載せる量そのものを見直す

グルーピングをしても窮屈さが解消しないときは、余白を削るのではなく、載せる情報の量そのものを見直します。

情報を減らさずに余白だけを削り続けると、どこかで読めないほど詰まってしまい、結局どの情報も伝わらなくなるためです。

見直し方には、次のような方法があります。

• 優先順位の低い情報を削る
  そのページを見た人に、まず何を分かってほしいかを決め、それ以外を外します。
• 別の場所へ分ける
  詳しい説明は別ページに移し、「詳しくはこちら」のリンクで案内します。
• 必要な人だけが開けるようにする
  よくある質問のように、すべての人が読むわけではない情報は、見出しを押すと中身が開く形(アコーディオン。楽器のアコーディオンの蛇腹のように、閉じたり開いたりすることからこう呼ばれます)にまとめます。
• 表にまとめる
  プランの比較のように同じ項目が並ぶ情報は、文章で書くより表にしたほうが、少ないスペースで整理して見せられます。

何を残して何を削るかの考え方は情報の優先順位と色、文字の大きさで情報の順番を見せる方法は情報の階層の記事で解説しています。

情報が少ないとき:余白を埋めずにまとめて残す

情報が少なくてスカスカに見えるときは、余白を何かで埋めるのではなく、要素をまとめて余白を1か所に集めるのが基本です。

寂しく見える原因の多くは、余白が多いことではなく、小さな要素が散らばって余白があちこちに分かれていることにあるためです。

同じ3つの要素(キャッチコピー・日付・ボタン)を、3通りの配置で比べてみましょう。

見本Aは、3つの要素が四隅や中央に散らばっているため、余白が細切れになり、何も置き忘れたかのような寂しさがあります。

見本Bは、その寂しさを解消しようと飾りや言葉を足した結果、要素が増えて散らかり、一番伝えたい「秋の作品展」も目立たなくなっています。

見本Cは、要素は見本Aと同じ3つだけですが、中央にまとめて主役の文字を大きくしたことで、周りの余白が「ゆとり」として感じられます。

このように余白を1か所に大きく残す見せ方は、高級ブランドの広告やイベントの告知など、落ち着きやゆとりを感じさせたい場面でもよく使われます(余白の量と印象の関係は余白が与える印象とは?で解説しています)。

余白を埋めるデザインにしたくなったときは、何かを足す前に、今ある要素をまとめられないか、主役を大きくできないかを先に試してみましょう。

それでも物足りない場合は、内容に関係のある写真やイラストを大きく使うなど、伝えたいことを補う要素を足すのは有効です。

避けたいのは、内容と関係のない飾りを「空いているから」という理由だけで置くことです。

同じテンプレートでもページごとに調整する

Webサイトのように同じテンプレート(ひな形)を使い回す場合も、ページごとの情報量に応じて余白を調整する余地を残しておきましょう。

情報が多いページと少ないページに同じ余白をそのまま当てはめると、片方は窮屈に、もう片方は間延びして見えることがあるためです。

たとえば、セクション(内容のまとまり)の間の余白は、情報がぎっしり詰まったページでは区切りをはっきりさせるためにしっかり取り、短いお知らせのページでは少し控えめにする、といった調整が考えられます(セクションの間の余白の役割はセクション間の余白とは?で解説しています)。

ただし、ページごとに好き勝手に変えると統一感がなくなるので、「余白の段階はいくつかに決めておき、その中から選ぶ」という形にしておくと、柔軟さと一貫性を両立できます(余白の段階の決め方は余白の間隔のルールとは?で解説しています)。

実践のポイント

情報量に応じた余白で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 情報を減らす判断をしないまま、余白だけを削ってすべてを詰め込もうとすることがあります。
  余白を削る前に、本当にすべての情報がこのページに必要かを見直しましょう。
• テンプレートやルールを機械的に当てはめ、情報量の多いページでも同じ余白を守ろうとして、要素が収まらなくなることがあります。
  ルールは「いくつかの段階から選ぶ」形にして、ページに合わせて調整しましょう。
• 情報が少ないときに、空いている場所を埋めようと関係のない飾りを足し、かえって散らかってしまうことがあります。
  まずは要素をまとめ、主役を大きくするところから試しましょう。

よくある質問

• Q. デザインの余白は埋めたほうがいい?
  A. 内容と関係のないもので埋める必要はありません。
  余白が寂しく見えるときは、要素がばらけていないか、主役が小さすぎないかを先に確認しましょう。
  要素をまとめて余白を1か所に集めると、空いている部分が「ゆとり」として見えるようになります。
• Q. 情報が多いときは、文字を小さくして詰めてもいい?
  A. 読める大きさを保てる範囲であれば、文字を一段小さくするのも方法の1つです。
  ただし、小さくしすぎると読みにくくなるので、先にグルーピングや情報の削減を試し、それでも収まらないときの手段と考えましょう(画面ごとの文字サイズの目安はPC・スマホの文字サイズで解説しています)。
• Q. 余白がちょうどよいかは、どうやって判断すればいい?
  A. 少し離れて見たり、目を細めてぼんやり見たりして、情報のかたまりがいくつに分かれて見えるかを確かめるのがおすすめです。
  伝えたいグループの数どおりにかたまりが見えれば、余白の配り方はうまくいっています。

まとめ

情報量に応じた余白とは、載せる情報の量に合わせて余白の広さや取り方を調整する考え方です。

情報が多いときはグループの中を詰めてグループの間を空け、それでも窮屈なら情報そのものを見直し、情報が少ないときは余白を埋めずに要素をまとめて余白を1か所に残すのが基本です。

まずは自分が作ったデザインを1つ選び、「同じ間隔で並んでいる情報」がないかを探して、グループの中と外で間隔に差をつけてみてください。