情報を整理する余白とは?余白でまとまりと区切りを伝える方法を解説

情報を整理する余白の基本

まずは、余白がどのように情報を整理するのか、その仕組みを押さえましょう。

ポイントは、余白の「量」ではなく、場所ごとの余白の「差」です。

余白の差で「まとまり」と「区切り」を伝える

情報を整理する余白とは、余白の広さに差をつけて、「どの情報とどの情報が同じグループか」「どこから別の話になるか」を伝える使い方です。

人には、近くにあるものを同じグループ、離れているものを別のグループだと感じる性質があるためです。

この性質はデザインでは「近接(関係のあるものを近くに置くこと)」の原則と呼ばれ、余白の量を変えて要素をまとめたり離したりすることが、意味のあるグループを伝える鍵だとされています(Proximity Principle in Visual Design(Nielsen Norman Group、英語))。

近接は、デザインの基本原則としてよく紹介される「近接・整列・反復・対比」の1つで、デザインソフトの特別な機能ではなく、要素どうしの距離を近づけたり離したりするだけで使えます(近接の原則の詳しい使い方は近接の原則とはで解説しています)。

つまり余白は、文章を読まなくても、見ただけで情報の構造を伝えられる道具です(余白の意味と役割の全体像は余白とはで解説しています)。

間隔がすべて同じだと、まとまりが見えない

よくある失敗は、見出し・本文・次の見出しを、すべて同じ間隔で並べてしまうことです。

間隔が同じだと、見出しが前の本文の続きなのか、次の本文の見出しなのかを、見る人が文章を読んで判断しなければならなくなります。

次の見本は、2つの話題を同じ間隔で並べたものと、余白に差をつけたものです。

OKの見本では、文字を読む前から「話題が2つある」ことが分かります。

見出しは、これから始まる本文の名札のようなものです。
そのため、前の話題とはしっかり離し、自分の本文にはぐっと近づけます。
見出しの上下を同じだけ空けて「真ん中」に置くと、NGの見本のようにどちらの本文の見出しか分からなくなります。

UXリサーチ企業のNielsen Norman Groupも、グループの間の余白を広げることと同じくらい、見出しとその内容の間の余白を意図して狭めることが大切だと説明しています(Visual Hierarchy in UX: Definition(Nielsen Norman Group、英語))。

文章の段落にも同じ考え方が使える

余白で情報を整理する考え方は、見出しだけでなく、長い文章の段落にも当てはまります。

段落と段落の間を、行と行の間(行間)より広く空けると、話のまとまりが目で見て分かるようになります。

Webのアクセシビリティ(誰もが情報にアクセスできるようにすること)の国際的なガイドラインであるWCAGでも、最も厳しいレベル(AAA)の達成基準の中で、「段落の間隔は、その行送りの少なくとも1.5倍以上ある」ことが挙げられています(WCAG 2.1 達成基準 1.4.8 視覚的提示(WAICによる日本語訳))。

行送り(ぎょうおくり)とは、ある行から次の行までの距離のことで、行間を含めた1行分の高さを指します。

行間は「上の行と下の行のあいだのすき間」だけ、行送りは「文字の高さ＋そのすき間」と考えると区別しやすくなります。
たとえば文字の大きさが16pxで行と行のすき間が12pxなら、行送りは28pxです。

つまりこの基準は、「段落の切れ目は、ふつうの行と行の間隔よりはっきり広く空けましょう」という意味です。

NGの見本は4行が1つの段落に見えますが、OKの見本では2行ずつの2つの話題だと分かります。

行間そのものの決め方は、行間と行長の記事で解説しています。

余白で情報を整理する方法

ここからは、実際に余白で情報を整理するときの手順を見ていきます。

余白の広さを考える前に、まず情報の関係を整理するのがポイントです。

どれとどれが同じグループかを先に決める

余白を決める前に、載せる情報を「同じ話題のもの」ごとにグループ分けしましょう。

情報の関係が決まっていないと、どこを近づけてどこを離せばよいか判断できないためです。

たとえば申し込みフォームなら、「お名前・ふりがな」「メールアドレス・電話番号」「郵便番号・住所」のように、内容の近い項目をひとまとめにします。

紙に書き出して丸で囲むだけでも、余白をどこに作ればよいかが見えてきます。

グループの中は狭く、グループの間は広く

グループが決まったら、グループの中の間隔を狭く、グループとグループの間隔を広くします。

この差がはっきりしているほど、見る人はまとまりをひと目で読み取れます。

OKの見本では、見出しを付けていなくても、名前を入れる欄と連絡先を入れる欄が分かれていることが伝わります。

どちらの見本でも、項目名と入力欄の間はいちばん狭くしている点にも注目してください。
項目名とその入力欄は最も関係が近いので、最も近くに置きます。

線や枠を足す前に、余白で区切れないか考える

情報を区切りたいときは、区切り線や囲み枠を足す前に、余白の差だけで区切れないかを試しましょう。

線や枠はそれ自体が画面上の要素なので、増やすほど見る人が目で処理する情報が増え、画面が重たく見えるためです。

ここまでのOKの見本も、線や枠を一切足さずに、余白の差だけでまとまりを伝えています。

余白だけでは区切りが弱いと感じたときに、はじめて薄いグレーの線や淡い背景色を補助として加えると、すっきりしたまま整理できます。

「まず余白だけで区切る→足りないときだけ控えめな線や色を足す」という順番を守るだけでも、画面はずっとすっきりします。

余白の広さは数種類にそろえる

余白で整理するときは、使う余白の広さを「狭い・中くらい・広い」のように数種類に絞ってそろえると、整理された印象が保てます。

場所ごとに少しずつ違う余白を使うと、その違いが意味のある区切りなのか、ただのずれなのかが見る人に伝わらなくなるためです。

たとえば「項目名と中身は狭い余白、項目と項目の間は中くらいの余白、話題と話題の間は広い余白」と役割を決めておくと、ページ全体で同じルールが通ります。

数値に迷ったら、狭い余白を8px、中くらいを16px、広い余白を32pxのように、基準の数値の倍数で決めると、中途半端な数値が混ざらず統一感が出ます。

見出しの大きさと余白の組み合わせで情報の重要度を見せる考え方は、情報の階層の記事も参考になります。

実践のポイント

余白で情報を整理するときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• すべての要素の間隔を均等にしてしまい、どこからどこまでがひとまとまりか分からなくなることがあります。
  きれいにそろえたつもりでも、均等な間隔では情報の関係が伝わりません。
• 「とりあえず広めに空けておこう」と、関係を考えずに余白を広げてしまうことがあります。
  余白を決めるときは、常に「この2つは同じグループか?」を自分に問いかけましょう。
• 見出しが、自分の本文よりも前の本文に近づいてしまうことがあります。
  見出しは「下の本文の名札」なので、見出しの上の余白を下の余白より広くするのが基本です。

よくある質問

• Q. グループの中と外で、余白はどのくらい差をつければいい?
  A. 決まった倍率はありませんが、見比べて「明らかに違う」と分かる差をつけるのが目安です。
  差が小さすぎると、意図した区切りではなく、ただのずれに見えてしまいます。
  迷ったら、グループの間の余白をグループの中の余白の2倍程度から試し、まとまりがはっきり見えるまで調整してみましょう。
• Q. 情報量が多くて、余白を広く取れないときは?
  A. すべての余白を広げる必要はありません。
  グループの中の余白を少し詰めて、そのぶんをグループの間の余白に回すと、全体の面積を増やさずに整理できます。
• Q. 余白で整理する考え方は、Webサイト以外にも使える?
  A. 使えます。
  資料のスライドやチラシ、名刺など、情報を並べるものなら何にでも当てはまる考え方です。

まとめ

情報を整理する余白とは、余白の広さに差をつけて、どの情報が同じグループで、どこから別の話になるのかを見ただけで伝える使い方です。

先にグループを決め、グループの中は狭く・グループの間は広くし、余白の広さを数種類にそろえると、線や枠に頼らなくても情報が整理されて見えます。

まずは自分が作った資料やページを1つ開き、見出しの上と下の余白を比べて、見出しが下の本文に近づいているかを確かめてみてください。