視線を誘導する余白とは?読む順番と流れを余白で作る方法を初心者向けに解説

視線を誘導する余白の基本

まずは、視線を誘導する余白がどんなものか、なぜ余白で視線が動くのかを押さえましょう。

視線を誘導する余白とは

視線を誘導する余白とは、要素の間の空き具合を調整して、見る人の目を「どこから見て、次にどこへ進むか」という順番どおりに導く余白の使い方です。

ここでいう余白とは、文字や画像、ボタンなどの要素の間や周りにある、何も置かれていない空間のことです。

余白は「何もない場所」ですが、その広さが変わるだけで、見る人の目の動き方は変わります。

たとえば、文章のかたまりの後に少し広めの余白があると、「ここで一区切り」と感じて、目は次のかたまりへ移ります。

このように、余白で「続き」と「区切り」を見せ分け、目の進む道筋を作るのが、視線を誘導する余白の考え方です。

なお、視線誘導そのもの(見る人の目の動きを想定し、伝えたい順番に導くデザインの考え方)や、Z型・F型といった目の動き方のパターンは視線誘導とは?で解説しています。

余白で視線が動く仕組み

余白で視線が動くのは、人が「近くにあるものは同じグループ」と感じる性質を持っているからです。

この性質は、心理学で「近接の法則」と呼ばれ、近くにある要素は関係があるように見え、離れた要素は別のものに見えるとされています(Nielsen Norman Group「Proximity Principle in Visual Design」・英語)。

人はまずグループの中を見てから、余白を飛び越えて次のグループへ目を移します。

つまり、余白が狭いところは「続けて読む道」に、余白が広いところは「次へ移る区切り」になるのです。

次の見本は、同じ6つの言葉を、縦と横の余白の広さだけを変えて並べたものです。

見本Aでは「りんご・みかん・ぶどう」が1つのまとまりに見え、自然と横に読み進めたくなります。

見本Bでは、言葉も並び順も同じなのに、「りんご・もも」が1つのまとまりに見え、縦に読み進めたくなります。

数値でいうと、見本Aは横のすき間を4px、縦のすき間を28pxにしています。見本Bはその逆で、縦が4px、横が28pxです。

狭いほうと広いほうの差がはっきりしているほど、どちらの方向にまとまって見えるかが分かりやすくなります。

線や矢印を描かなくても、余白の広さだけで目の進む方向を決められることが分かります。

余白がないと視線はどうなるか

反対に、要素がすき間なく詰め込まれていると、目はどこから見始めて、どこへ進めばよいか分からなくなります。

余白による「区切り」がないため、どこまでが1つのまとまりなのかを、文字を読んで判断するしかなくなるからです。

たとえば、チラシの文字を紙いっぱいに詰め込むと、すべての情報が同じ重さに見えてしまい、見る人は読む順番を自分で探さなければなりません。

余白は、見る人に「次はここを見てください」と道案内をする役割を持っていると考えましょう。

余白で視線の流れを作る方法

ここからは、実際のデザインで余白を使って視線を誘導する方法を紹介します。

「読み進める方向」「区切り」「流れの終点」の3つを意識すると、余白の置き場所を決めやすくなります。

読み進める方向に余白をそろえる

まず、読んでほしい方向に沿って、余白の広さをそろえることが基本です。

同じ流れの中で余白の広さがバラバラだと、広いところで「ここで終わり?」と目が止まってしまうからです。

たとえば、手順を横に3つ並べる場合は、手順と手順の間の余白を同じ広さにすると、目は1→2→3と迷わず進みます。

先ほどの見本のように、縦に読ませたいなら縦の余白を狭く、横に読ませたいなら横の余白を狭くするのがコツです。

広い余白で「次へ進む合図」を作る

情報のかたまりが終わったところには、少し広めの余白を置いて「ここで一区切り」という合図を出しましょう。

区切りがはっきりしていると、見る人は今読んでいる内容を終えたことに気づき、安心して次の情報へ目を移せます。

次の見本は、同じお知らせを、余白の広さだけを変えて並べたものです。

NGの見本では、見出しと本文、お知らせとお知らせの間がすべて同じ余白なので、目は1行ずつ順に追うしかありません。

OKの見本では、見出しとその本文を近づけ、お知らせ同士の間を広げたことで、目が「1つめ→2つめ→3つめ」とお知らせ単位で進むようになっています。

このOKの見本では、見出しと本文の間を4px、お知らせ同士の間を24pxにしています。

どれくらい空ければよいか迷うときは、余白の広さを「小・中・大」の3段階に決めておくと便利です。

たとえば、小=8px(見出しと本文など、同じまとまりの中)、中=16px(まとまりとまとまりの間)、大=32px(話題が大きく変わる場所)のように役割を割り当てると、どこを狭くしてどこを広くするかで迷わなくなります。

ページ全体で話題が大きく切り替わる場所の余白は、セクションの区切りとして考えると整理しやすくなります。

セクションとは、Webサイトの「お知らせ」「サービスの特徴」「お客様の声」「会社概要」のような、テーマごとの大きなブロックのことです(セクション間の余白の取り方はセクション間の余白とはで解説しています)。

「サービスの特徴」から「お客様の声」へ移る場所のように、セクションとセクションの間は、お知らせ同士の間よりもさらに広く空けると「ここから別の話題だ」と伝わります。

流れの終点を余白で空ける

視線の流れの最後に置く要素、たとえば申し込みボタンの周りは、余白を広めに取ってほかの要素から離しましょう。

終点の要素がほかのリンクや文章とくっついていると、目がそこで止まらずに通り過ぎてしまうからです。

Nielsen Norman Groupも、周りの余白が多い要素は1つのまとまりとして認識され、注目を集めやすいと説明しています(Nielsen Norman Group「Visual Hierarchy in UX」・英語)。

NGの見本では、ボタンとその下のリンクの列が同じ間隔で続いているため、ボタンが「たくさんあるリンクの1つ」のように見えてしまいます。

OKの見本では、ボタンの前を24px、後ろを40px空けています。ボタンの後ろに大きな余白を置いたことで、流れがボタンで一度止まり、そこが行き先だと伝わります。

ボタンそのものの作り方はCTAボタンとは?で解説しています。

ほかの視線誘導の方法と組み合わせる

余白は、文字の大きさや色といったほかの方法と組み合わせることで、より確実に視線を導けます。

余白は「目が進む道筋」を作るのが得意で、大きさや色は「最初に目を引く」のが得意だからです。

たとえば、キャッチコピーを大きくして最初に目を引き、その後は余白で説明文からボタンまでの道筋を作ると、見る人は迷わず最後までたどり着けます。

ジャンプ率とは、一番大きな文字と本文などの小さな文字の大きさの比率のことで、差が大きいほど見出しが目に入りやすくなります。

大きさの差のつけ方はジャンプ率の記事で、色で視線を集める方法は視線を誘導する色の使い方で解説しています。

実践のポイント

余白で視線を誘導するときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 情報を詰め込みすぎて、余白による区切りがまったくない状態になることがあります。
  どこを見ればいいか分からなくなるので、載せる情報を減らすか、まとまりごとに余白で区切りましょう。
• 同じ流れの途中に、うっかり広い余白を入れてしまうことがあります。
  目がそこで「終わり」と判断して止まってしまうため、続けて読んでほしい要素の間は余白をそろえましょう。
• 「余白は多いほどおしゃれ」と考えて、どこもかしこも広く空けてしまうことがあります。
  すべての余白が広いと、区切りと続きの差がなくなり、かえって視線の行き先が分かりにくくなります。
  大切なのは余白の量ではなく、狭いところと広いところの差です。

よくある質問

• Q. 視線を誘導する余白と、情報を整理する余白は何が違う?
  A. 同じ余白を、どちらの目的で見るかの違いです。
  情報を整理する余白は「何と何が同じまとまりか」を伝えるためのもので、視線を誘導する余白は、そのまとまりを「どの順番で見てもらうか」を考えて置くものです。
  まず情報を整理してまとまりを作り、次にそのまとまりを見てほしい順に並べて余白を調整する、という順番で考えると混乱しません。
• Q. 余白だけで、見てほしい場所に必ず目を向けさせられる?
  A. 余白だけで目の動きを完全に決めることはできません。
  見る人の興味や、文字の大きさ・色などほかの要素にも視線は影響されるためです。
  余白は「目が自然に進みやすい道筋」を作るものと考え、大きさや色と組み合わせて使いましょう。
• Q. うまく誘導できているか確かめるには?
  A. デザインを少し離れて見たり、画面を縮小したりして、文字が読めない状態で「どんなまとまりが、どの順に目に入るか」を確かめる方法があります。
  文字が読めなくても、余白によるまとまりと順番は見えるので、意図どおりの流れになっているかを判断しやすくなります。

まとめ

視線を誘導する余白とは、余白の広さで「続き」と「区切り」を見せ分け、見る人の目が進む順番を作る余白の使い方です。

読み進める方向の余白はそろえ、まとまりの終わりには広めの余白で区切りの合図を出し、流れの終点になる要素の周りは大きく空けると、目が迷わず最後までたどり着けます。

まずは手元のデザインを画面上で小さく縮小し、文字が読めない状態でも「見てほしい順番」にまとまりが並んで見えるかを確かめてみてください。

余白の学び方の全体像はデザイン初心者のための余白学習ロードマップで紹介しています。