バナーの外側の余白とは?文字やボタンが端に寄りすぎない余白の取り方を解説

バナーの外側の余白の基本

まずは、バナーの外側の余白が何を指すのかと、なぜ必要なのかを押さえましょう。

外側の余白は、バナーを「窮屈に見せない」ためと「大事な情報を欠けさせない」ための2つの役割を持っています。

バナーの外側の余白とは

バナーの外側の余白とは、バナーの一番外側の端(外枠)と、その内側に置く文字・写真・ボタンなどの要素とのあいだに取る余白のことです。

バナーとは、Webサイトや広告、SNSなどに表示する、告知やキャンペーンのための画像のことを指します。

外側の余白は、バナーの周りに額縁のように空いた帯のような部分で、デザインの現場では「マージン」と呼ばれることもあります。

背景の色や写真はバナーの端まで広げてかまいませんが、文字やボタンなどの大事な要素は、この余白より内側に置くのが基本です(内側に置く文字と画像の距離は文字と画像の間隔とは、キャッチコピーの周りの空け方はキャッチコピー周りの余白とはで解説しています)。

つまり、外側の余白は「何も置かない帯」ではなく、「文字やボタンを置かない帯」です。
背景はバナー全体に敷き、その上に重ねる情報だけを少し内側に引っ込めて配置する、と考えると分かりやすくなります。

外側の余白が必要な理由

外側の余白が必要な理由は、窮屈な印象を防ぐことと、大事な情報が欠けたり隠れたりするのを防ぐことの2つです。

要素が端に近すぎると、バナーの枠に押しつぶされているように見え、まとまりのない、読みにくい印象になります。

また、バナーは自分の作った画面ではなく、ほかのWebサイトやSNSのアプリなど、表示される場所の都合で小さく縮められたり、端を切り取られたり、上に別の部品を重ねられたりすることがあります。

次の見本は、同じ内容のバナーを、外側の余白だけ変えて比べたものです。

NGの見本は、文字やボタンがバナーの端に貼りつき、今にもはみ出しそうな窮屈な印象になっています。

OKの見本は、文字の大きさは同じでも、周りに余白があることで中身がひとまとまりに見え、落ち着いて読めます。

余白を取ると要素を置ける範囲は狭くなりますが、そのぶん中身に目が向きやすくなるので、伝わりやすさはむしろ上がります。

バナーの外側の余白の取り方

ここからは、外側の余白を実際にどう決めればよいかを見ていきます。

「上下左右をそろえる」「大きさに合わせる」「欠けてもよい範囲を知る」の3つを押さえれば、初心者でも整ったバナーを作れます。

上下左右の余白をそろえる

外側の余白は、上下左右をできるだけ同じ幅にそろえるのが基本です。

余白の幅がばらばらだと、中身が片側に寄って見え、意図して寄せたのではなく「ずれている」ように見えてしまうからです。

余白がばらばらの見本は、中身を置く範囲(点線)が右上に寄っていて、バナー全体が傾いているような落ち着かない印象になっています。

上下左右をそろえた見本は、中身がバナーの中央にきちんと収まり、整った印象を与えます。

横長のバナーでは、左右の余白を上下より少し広めにすると、バランスがよく見えることもあります。
その場合も、左右どうし・上下どうしは同じ幅にそろえましょう。

なお、数値の上で余白をそろえても、文字の行の長さやボタンの形によっては、片側だけ空いて見えることがあります。
数値でそろえたら、最後はバナー全体を眺めて、中身が片側に寄って見えないかを目で確かめましょう。

バナーの大きさに合わせて余白を変える

外側の余白の幅には、「何pxにしなければならない」という決まった基準はなく、バナーの大きさに合わせて調整します。

小さなバナーに大きな余白を取ると中身が入らず、大きなバナーに小さな余白しか取らないと、端に詰め込んだように見えるからです。

解説記事などでは、横幅300px前後の小さなバナーなら15〜20px程度、横幅1,000pxを超える大きなバナーなら60〜100px程度、といった目安が紹介されることがあります。

こうした数値を参考にしつつ、「バナーの短い辺に対して何%か」という割合で考えておくと、サイズ違いのバナーを何枚も作るときに余白の印象をそろえやすくなります。

たとえば、横300px・縦250pxのバナーで短い辺(250px)の8%を余白にすると20px、同じデザインを横600px・縦500pxで作るなら40px、という具合です。

短い辺を基準にするのは、横長や縦長のバナーで長い辺を基準にすると、短い辺の方向の余白が広くなりすぎるからです。
たとえば横1,200px・縦600pxのバナーで、長い辺の8%(96px)を上下にも取ると、上下の余白だけで高さの3割を超えてしまいます。

毎回計算しなくても、よく作るサイズごとに一度だけ計算して、数値をメモしておけば十分です。
同じキャンペーンのバナーでは同じルールを使うと、並べたときにも統一感が出ます(余白のルールの決め方は余白の間隔のルールとはで解説しています)。

欠けてもよい範囲と、守る範囲を分ける

バナーを作るときは、「表示される場所によっては見えなくなるかもしれない範囲」と「必ず見せたい範囲」を分けて、大事な要素は内側の安全な範囲に置きます。

この安全な範囲は「セーフエリア」や「セーフゾーン」と呼ばれ、文字やロゴ、ボタンなどの大事な要素は、この中に収めるのが基本です。

たとえば、Instagramのストーリーズやリールのような縦長の広告では、画面の上にアカウントのアイコンや名前、下に「詳しくはこちら」などのボタンが、アプリの画面の部品として広告の上に重なって表示されます。
これは広告を作る側では消せないため、MetaはFacebookやInstagramの広告向けに、文字やロゴを置かないほうがよい範囲(セーフゾーン)を案内しています(Metaビジネスヘルプセンター:ストーリーズとリールの広告のセーフゾーンについて)。

表示される場所によって、隠れる範囲や切り取られる範囲は違うので、バナーを載せる場所のガイドラインがあれば、必ず確認しておきましょう。

2つの見本の上下にある濃い帯は、SNSなどで表示されるときに上に重なるアカウント名やボタンなどの部品を表しています(帯の大きさは説明のための一例です)。

NGの見本では、見出しの一部とボタンが帯の下に隠れ、肝心の「何のセールか」「どこを押せばよいか」が伝わりません。

OKの見本では、背景のグラデーションは端まで広げつつ、見出しとボタンを安全な範囲の中に収めているので、帯が重なっても情報が欠けません。

実践のポイント

バナーの外側の余白で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 文字や商品写真を大きく見せたくて、外側の余白を削りすぎてしまうことがあります。
  余白を削ると中身は大きくなりますが、窮屈になってかえって目に入りにくくなります。
  文字を少し小さくしてでも、周りに余白を残しましょう。
• デザインツールの大きな画面だけで確認し、実際の小さな表示サイズで見たときに、余白が足りないことに気づかないことがあります。
  作ったバナーは、実際に表示される大きさまで縮小して見てみましょう。
• 同じキャンペーンでサイズ違いのバナーを作るとき、1枚ずつ感覚で余白を決めて、並べるとばらばらに見えることがあります。
  短い辺に対する割合など、余白のルールを決めてから作りましょう。
• 背景の写真や色まで余白の内側に収めてしまい、バナーの周りに不自然な枠ができることがあります。
  背景は端まで広げ、文字やボタンなどの要素だけを内側に収めるのが基本です。

よくある質問

• Q. 外側の余白は何pxにすればいい?
  A. 決まった正解はなく、バナーの大きさや中身の量によって変わります。
  短い辺に対する割合で考えて何パターンか試し、実際の表示サイズで見たときに窮屈に見えない幅を選びましょう。
• Q. 写真を端まで使いたいときも、余白は必要?
  A. 写真や背景の色は、端まで広げてかまいません。
  余白が必要なのは、文字・ロゴ・ボタンなど、欠けたり隠れたりすると困る要素です。
• Q. バナーの配色の考え方も知りたい
  A. バナーの目的から色を決める方法は、バナーの目的に合わせた配色とは?で解説しています。
  バナーの中のキャッチコピーの見せ方は、キャッチコピーのデザインとは?が参考になります。

まとめ

バナーの外側の余白とは、バナーの端と、中に置く文字や写真などの要素とのあいだに取る余白のことで、窮屈な印象を防ぎ、表示先で情報が欠けたり隠れたりするのを防ぐ役割があります。

上下左右の余白をそろえ、バナーの大きさに合わせた割合で幅を決め、大事な要素は安全な範囲の中に収めるのが基本です。

まずは、これまでに作ったバナーや気になる広告を1枚選び、文字やボタンと端とのあいだの余白が、上下左右でそろっているかを確かめてみましょう。