キャッチコピー周りの余白とは?言葉が強く見える空け方を初心者向けに解説

キャッチコピー周りの余白の基本

まずは、キャッチコピー周りの余白とは何を指すのか、そしてなぜ周りを空けると言葉が目立つのかを押さえましょう。

キャッチコピー周りの余白とは

キャッチコピー周りの余白とは、キャッチコピーの上下左右に、意図して何も置かずに空けておく空間のことです。

キャッチコピーとは、広告やWebサイトで見る人の目を最初に引きつけるための短い言葉のことで、「はじめてでも、3日で作れる。」のように一言で興味を持たせる役割があります。

バナーやLP(ランディングページ:広告などから訪れた人に1つの行動を促す縦長のページ)では、キャッチコピーがそのデザインの中で一番伝えたいメッセージになることがほとんどです。

その一番大事な言葉を際立たせるために、周りをあえて空けておくのが、キャッチコピー周りの余白の考え方です。

文字の大きさ・太さ・改行など、文字そのものの見せ方はキャッチコピーのデザインとはで解説しているので、この記事では「文字の周り」に絞って見ていきます。

周りを空けるとキャッチコピーが強く見える理由

キャッチコピーの周りを空けると、文字の大きさを変えなくても、言葉が強く見えるようになります。

理由は大きく2つあります。

• ほかの情報から切り離される
  人は、近くにあるもの同士を「ひとまとまり」として見る傾向があります。
  周りが空いていると、キャッチコピーがほかの情報と混ざらず、独立した1つのメッセージとして目に入ります。
• 周りとの差(対比)が生まれる
  ほかの部分に文字や画像が並んでいる中で、キャッチコピーの周りだけが静かだと、その差によって視線が自然に集まります。

同じ講座の告知を、余白の量だけ変えて比べてみましょう。

NGの見本では、ラベルや説明文がキャッチコピーにくっついているため、どこから読めばよいのか一瞬迷います。

OKの見本では、キャッチコピーの文字の大きさはNGの見本とまったく同じですが、下に大きな空きを取ったことで、キャッチコピーが最初に目に飛び込んできます。

文字を大きくするだけでは足りない理由

キャッチコピーを目立たせたいとき、文字を大きくするのは正しい方法ですが、それだけでは限界があります。

文字を大きくすると、そのぶん周りのスペースが減り、ほかの要素とさらにぶつかりやすくなるためです。

周りが詰まったまま文字だけを大きくしても、画面全体がにぎやかになるだけで、キャッチコピーが一番強いという関係ははっきりしません。

文字の大きさの差(ジャンプ率:一番大きな文字と本文などの小さな文字との大きさの比率)と、周りの余白は、セットで使ってはじめて効果を発揮すると考えましょう(ジャンプ率はジャンプ率で変わるメッセージの伝わり方で解説しています)。
比率といっても計算して決める必要はなく、キャッチコピーと説明文の大きさの差が大きいほど「ジャンプ率が高い」と言います。

キャッチコピー周りに余白を作る方法

ここからは、キャッチコピー周りの余白を実際にどう作るかを見ていきます。

「ほかより広く空ける」「背景を静かにする」「置くものを減らす」の3つを押さえれば、多くの場面に対応できます。

ほかの要素同士の間隔より広く空ける

キャッチコピーの周りは、デザインの中のほかの要素同士の間隔よりも、はっきり広めに空けるのが基本です。

すべての間隔が同じだと、キャッチコピーも「並んでいる要素の1つ」に見えてしまい、特別扱いしていることが伝わらないためです。

ただし、「キャッチコピーの周りは全部広く空ける」という意味ではありません。

キャッチコピーを補足する短い言葉(サブコピー)は、キャッチコピーと同じグループなので近くに置き、そのグループ全体の外側を広く空けます。
つまり、広く空けるのはキャッチコピーとサブコピーのあいだではなく、2つをまとめたかたまりの外側です。

NGの見本は、4つの要素が同じ間隔で並んでいるため、キャッチコピーもほかの文字と同じ重みで読まれてしまいます。

OKの見本は、キャッチコピーとサブコピーを1つのかたまりにして、その下を大きく空けたことで、「まずここを読んでほしい」という意図が伝わります。

このように、近くに置くものと離すものを分けることで、関係のあるもの同士をまとめて見せる考え方を「近接」と呼びます(近接の考え方は近接の原則とはで詳しく解説しています)。

キャッチコピーの背景を静かにする

余白は「何も置かない空間」だけではなく、キャッチコピーの後ろにある背景にも関係します。

文字の後ろに細かい模様や情報量の多い写真があると、周りにスペースを取っていても、文字が背景に紛れてしまうためです。

NGの見本は、周りにスペースはあるものの、文字の真後ろの模様が目に入り、言葉がすっと読めません。

OKの見本は、同じ模様を使いながらも文字の後ろを無地にしたことで、キャッチコピーがくっきり浮かび上がります。

写真の上にキャッチコピーを重ねるときも同じで、空や壁、テーブルの天板のように模様の少ない部分に文字を置くと、写真の中に「余白」を見つけて使うことになります(写真と文字の色の合わせ方は写真と文字色の関係、画像と文字の距離の取り方は文字と画像の間隔とはで解説しています)。

模様の少ない部分が見つからないときは、文字の後ろに無地の帯や四角を敷く方法や、写真全体に半透明の色を重ねて写真を控えめにする方法もあります。
どちらも、文字の後ろに「静かな背景」を作り出すという考え方は同じです。

置くものを減らして余白を生み出す

小さなバナーのようにスペースが限られている場合は、キャッチコピーの近くに置く要素を減らすことで余白を作ります(バナーの端に取る余白はバナーの外側の余白とはで解説しています)。

スペースそのものは広げられなくても、置くものが減れば、そのぶん空間が生まれるからです。

たとえば、次のような見直しが効果的です。

• 「動画見放題」「質問し放題」「修了証あり」のような特徴を全部並べず、一番の売りだけを残す
• キャッチコピーと同じことを言い換えているだけの説明文を削る
• キャッチコピーのすぐ横にある星やキラキラなどの飾りを外す
• ロゴや注意書きなどは、キャッチコピーから離れた端にまとめる

どの情報を残すか迷ったときは、「このバナーを見た人に、まず何を分かってほしいか」という優先順位から考えると判断しやすくなります(情報の優先順位の付け方は情報の優先順位と色で解説しています)。

目を細めて見て、余白が足りているか確かめる

余白が足りているかどうかは、デザインを少し離れて見たり、目を細めてぼんやり見たりすると判断しやすくなります。

細かい文字が読めない状態にすると、どこが詰まっていて、どこが空いているかという「かたまり」だけが見えるためです。

ぼんやり見たときに、キャッチコピーのかたまりがほかのかたまりとくっついて見えるなら、まだ余白が足りていません。

反対に、キャッチコピーだけが周りから浮いて離れすぎ、ほかの情報と関係がないように見えるなら、空けすぎのサインです。

デザインツールで作っている場合は、画面を縮小表示して全体を見るのも同じ効果があります。

実践のポイント

キャッチコピー周りの余白で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 伝えたいことが多すぎて、キャッチコピーのすぐそばまで補足情報や装飾を詰め込んでしまうことがあります。
  キャッチコピーの周りだけは「何も置かない場所」と決めてから、ほかの要素を配置しましょう。
• キャッチコピーを目立たせようとして文字サイズばかり大きくし、周りの余白を考えていないことがあります。
  文字を大きくする前に、まず周りを空けられないかを試してみましょう。
• キャッチコピーの周りをすべて広く空けた結果、キャッチコピーとサブコピーまで離れてしまい、別々の言葉に見えることがあります。
  関係のある言葉同士は近くに置き、グループの外側を広く空けましょう。

よくある質問

• Q. キャッチコピーの周りは、何px空ければいい?
  A. 決まった数値はありません。
  バナーの大きさや文字の大きさ、ほかの要素の間隔によって、ちょうどよい量が変わるためです。
  まずは「ほかの要素同士の間隔より、ひと目で分かるくらい広い」ことを目安にし、目を細めて見ながら調整しましょう。
• Q. 上下と左右、どちらを広く空けるべき?
  A. 横書きのキャッチコピーでは、下に続く情報との間(上下)の空きが、読む順番に一番影響します。
  左右は、バナーの端に文字がくっつかない程度の空きがあれば、まずは十分です。
  中央揃えのキャッチコピーなら、左右の空きをそろえると落ち着いて見えます。
• Q. 余白を取ると、バナーが寂しく見えてしまう。
  A. 余白が寂しく見えるのは、余白の量よりも、要素がばらばらに散らばっていることが原因の場合が多いです。
  キャッチコピー・説明・ボタンをそれぞれのかたまりにまとめ、空きを1か所に集めると、寂しさではなく「ゆとり」に見えやすくなります。
  たとえば、小さなすき間をあちこちに散らすのではなく、「朝の5分で、英語が続く。」のOKの見本のように、キャッチコピーのかたまりの下に大きな空きをまとめるイメージです。

まとめ

キャッチコピー周りの余白とは、一番伝えたい言葉の周りに意図して空ける空間のことで、言葉をほかの情報から切り離し、周りとの差で視線を集める働きがあります。

ほかの要素同士の間隔より広く空ける、背景を静かにする、置くものを減らす、の3つを意識すれば、文字を大きくしすぎなくてもキャッチコピーが強く見えるようになります。

まずは自分が作ったバナーを縮小表示して目を細めて見て、キャッチコピーのかたまりがほかの要素とくっついていないかを確かめてみてください。