バナーを作ろうとして、写真と文字とボタンを「とりあえず空いている場所」に置いてみたものの、なんだかまとまらない、と悩んだことはありませんか。
バナーデザインの基本は、センスに頼ることではなく、定番のレイアウトの型と、情報を見せる順番を知っておくことです。
この記事では、バナーのレイアウトとは何か、上下分割・左右分割・中央配置といった定番の型、そしてバナーの形や写真に合わせた型の選び方を、見本を使って初心者向けに解説します。
バナーデザインの基本となるレイアウトの考え方
まずは、バナーのレイアウトとは何を決めることなのか、そしてバナーに入れる要素をどの順番で見せればよいのかを押さえましょう。
バナーのレイアウトとは
バナーのレイアウトとは、限られた大きさの中に、キャッチコピー・写真・ボタンなどの要素をどこに、どの大きさで置くかを決めることです。
バナーとは、Webサイトの広告枠やトップページなどに表示される、クリックすると別のページへ移動する画像のことです。
バナーは記事や画面を見ている途中で目に入るものなので、じっくり読んでもらえることはあまり期待できません。
そのため、行き当たりばったりに要素を置くと、何のバナーなのかが伝わる前に素通りされてしまいます。
そこで役に立つのが、よく使われる配置のパターン、つまり「レイアウトの型」です。
型を知っていれば、ゼロから配置を考えるより早く、しかも大きく崩れにくいレイアウトを組めます。
バナーに入れる要素と、見せる順番
多くのバナーは、次の4つの要素でできています。
- キャッチコピー
一番伝えたいことを短く言い切った言葉です(例: 「秋の新作スニーカー」)。 - 商品・写真
何についてのバナーなのかを、ひと目で伝える画像です。 - 特徴・補足
「最大30%OFF」「10月31日まで」のような、興味を持った人が次に知りたい情報です。 - CTAボタン
「詳しく見る」「今すぐチェック」のように、クリックを促すボタンです。CTAは「Call To Action(行動喚起)」の略です(詳しくはCTAボタンとは?で解説しています)。
この番号は、見る人に読んでほしい順番でもあります。
まず言葉か写真で「何のバナーか」をつかんでもらい、気になった人に特徴を伝え、最後にボタンへ導く流れです。
この順番どおりに目が動くよう、一番先に見てほしい要素を一番大きく、ボタンは最後に目が止まる位置に置きます(どこに置いた情報が目に入りやすいかは重要な情報はどこに置く?で解説しています)。
同じ4つの要素を、順番を考えずに置いた場合と、順番どおりに置いた場合で比べてみましょう。
見本の灰色の四角は、写真を置く場所を表しています。
秋の新作
スニーカー
最大30%OFF
10月31日まで
詳しく見るNGの見本では、4つの要素がどれも同じ大きさで四隅に散らばっているため、どれが一番伝えたいことなのか分かりません。
OKの見本では、キャッチコピーを一番大きく上に置き、写真、割引率、ボタンの順に目が進むように並べています。
人の視線は、パッと全体を見渡すデザインでは左上から右下へZ字を描くように動きやすいといわれており、OKの見本ではボタンをその終点にあたる右下に置いています(視線の流れについては視線誘導とは?で解説しています)。
このように、一番大きな文字と小さな文字の大きさの差(比率)を「ジャンプ率」と呼び、差が大きいほどメリハリがついて、大きな文字が目立ちます(大きさや色などの差で目立たせる考え方はコントラストとは?で解説しています)。
大きさの差で読む順番をつける考え方は、ジャンプ率の記事もあわせて参考にしてください。
バナーデザインの定番レイアウトの型
ここからは、バナーでよく使われる3つのレイアウトの型と、それぞれが得意なことを見ていきます。
型の名前は解説する人によって少しずつ違いますが、「画面をどう区切るか」で考えると覚えやすくなります。
3つの型を見比べる
同じセール告知の内容を、3つの型で組んでみました。
秋の新作スニーカー
最大30%OFF
詳しく見る見本Cの灰色の部分は、バナー全体に敷いた写真を表しています。
同じ内容でも、型を変えるだけで、写真が主役に見えたり、言葉が主役に見えたりと、伝わり方が変わることが分かります。
それぞれの型の特徴を、表にまとめます。
| 型 | 画面の区切り方 | 得意なこと | 向いている素材 |
|---|---|---|---|
| 上下分割型(横割り) | 横に線を引いて、上と下に分ける | 写真を大きく見せつつ、文字も読みやすく置ける | 横長の写真、商品が1つの写真 |
| 左右分割型(縦割り) | 縦に線を引いて、左と右に分ける | 写真と言葉を同時に見せ、比べやすくする | 人物や商品が片側に寄った写真 |
| 中央配置型 | 区切らずに、中央に言葉をまとめる | 言葉を主役にして、強く印象づける | 背景にしても邪魔にならない写真や、模様・単色 |
表の「横割り」「縦割り」は、ほかの解説で見かけることがある別の呼び方で、横向きの線で区切ると上下に、縦向きの線で区切ると左右に分かれることから付いた名前です。
名前だけだと取り違えやすいので、まずは「上下に分ける」「左右に分ける」という見た目どおりの言い方で覚えておけば十分です。
上下分割型:写真を大きく見せたいとき
上下分割型は、写真と文字のエリアを上下に分ける型で、写真をしっかり見せたいときに向いています。
写真と文字の場所がはっきり分かれているので、写真の上に文字が重ならず、どちらも見やすく保てるためです。
たとえば、料理や雑貨のように「見た目」が一番の魅力になる商品では、上の大部分を写真に使い、下にキャッチコピーとボタンをまとめると、写真の良さを損なわずに伝えられます。
写真と文字のどちらに広い面積を使うかで主役が決まるので、迷ったら主役のほうを広く取りましょう。
左右分割型:写真の余白に文字を置きたいとき
左右分割型は、写真と文字のエリアを左右に分ける型で、写真と言葉を並べて同時に見せたいときに向いています。
特に、人物や商品が片側に寄っていて、反対側が空いている写真なら、その空いた部分にそのまま文字を置けます。
写真の中の人物の顔や体が向いている方向に文字を置くと、人物の視線に引っ張られて、見る人の目も文字へ向かいやすくなります。
反対に、人物が文字に背を向けている配置にすると、視線がバナーの外へ逃げてしまうので注意しましょう。
写真の上に文字を重ねる場合は、文字が写真に埋もれて読みにくくなりがちです。
そのときは、写真の上に半透明の黒い面を重ねて写真全体を少し暗くし、その上に白い文字をのせる方法や、文字の後ろだけに無地の帯を敷く方法を使うと読みやすくなります(詳しくは写真と文字色の組み合わせで解説しています)。
中央配置型:言葉を主役にしたいとき
中央配置型は、写真や色を背景にして、バナーの中央にキャッチコピーとボタンをまとめる型です。
要素が中央の1か所に集まるので、視線が迷わず、言葉を一番強く印象づけられます。
セールの告知やイベントの日付のように、「写真より言葉そのものを覚えてほしい」バナーに向いています。
中央に置く文字の周りには余白を広めに取ると、言葉がより引き立ちます。
文字のすぐ近くに何も置かないスペースがあると、そこだけが静かになり、周りとの差で視線が自然と中央の言葉に集まるためです(詳しくはキャッチコピー周りの余白とは?で解説しています)。
バナーの形に合わせて型を選ぶ
型を選ぶときは、写真や伝えたいことだけでなく、バナーの形(縦横の比率)も考えましょう。
バナーは、表示する場所によって形がまったく違うためです。
Googleの広告配信サービスのヘルプでも、正方形に近い「レクタングル(中)」(300×250)、細長い「ビッグバナー」(728×90)、縦に長い「ワイド スカイスクレイパー」(160×600)など、さまざまな形のサイズが紹介されています(広告サイズに関するガイド – Google AdSense ヘルプ)。
カッコ内の数字は「横幅×高さ」で、単位はピクセル(画面上の長さの単位)です。
名前やサイズを覚える必要はなく、まずは「正方形に近い形」「横に細長い形」「縦に細長い形」の3つに分けて考えれば大丈夫です。
目安として、形と組みやすい型の関係は次のとおりです。
- 正方形に近い形
上下分割型・左右分割型・中央配置型のどれでも組みやすい形です。 - 横に細長い形
高さが足りないので、上下に分けると文字がつぶれてしまいます。
写真・キャッチコピー・ボタンを横一列に並べる、左右分割型が基本です。 - 縦に細長い形
幅が足りないので、左右に分けると文字が窮屈になります。
上から順に積み上げる、上下分割型が基本です。
横に細長いバナーで、上下分割型と左右分割型を比べてみましょう。
※見本は形の違いが分かるように、実際のサイズより比率をゆるめています。
NGの見本では、もともと低い高さをさらに上下に分けたため、キャッチコピーとボタンがとても小さくなっています。
OKの見本では、写真・キャッチコピー・ボタンを横に並べたことで、低い高さをいっぱいに使って文字を大きくできています。
同じ内容で複数の形のバナーを作るときは、1つのレイアウトを縮めて使い回すのではなく、形ごとに型を選び直しましょう。
実践のポイント
バナーのレイアウトで陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- 何を一番伝えたいのかを決める前に、型に当てはめ始めてしまうことがあります。
型は「主役をどう見せるか」の手段なので、まずキャッチコピー・写真・特徴のうち、どれを主役にするかを決めてから型を選びましょう(主役の決め方は主役と脇役とは?で解説しています)。 - 伝えたいことを全部入れようとして、文字や小さなアイコンを詰め込みすぎることがあります。
バナーは一瞬で見られるものなので、要素は4つ前後に絞り、詳しい説明はクリックした先のページに任せましょう。 - 写真の構図と型が合っていないのに、無理に当てはめてしまうことがあります。
たとえば、人物が画面の中央にいる写真で左右分割型を選ぶと、文字が人物の顔に重なってしまいます。
写真の空いている場所を先に確かめ、その場所に文字が来る型を選びましょう。 - 文字やボタンを、バナーの端ぎりぎりまで寄せてしまうことがあります。
窮屈に見えるうえ、表示される場所によっては端が切れることもあります(端に取る余白はバナーの外側の余白とは?で解説しています)。 - (作ったバナーを自分でWebページに貼る人向けの注意点です)
文字を画像の中に入れたまま、説明を付けずにWebページに貼ってしまうことがあります。
目の不自由な人などが使う画面の読み上げソフトは、画像の中に書かれた文字を読み取れません。
HTMLで貼るときは、画像の代わりに読み上げられる説明文(代替テキスト、alt属性)に、バナーに書いてある内容を入れておきましょう。
これは、誰もが使いやすいWebにするための国際的なガイドライン「WCAG」でも求められています(WCAG 2.2 達成基準1.1.1 非テキストコンテンツ・WAIC日本語訳)。
よくある質問
- Q. 3つの型のうち、初心者はどれから始めればいい?
A. 迷ったら上下分割型がおすすめです。
写真と文字の場所がはっきり分かれているので、文字が写真に埋もれる失敗が起きにくく、読む順番も「上から下」と分かりやすいためです。 - Q. 同じ型ばかり使っていてもいい?
A. 問題ありません。
型は使い回してよいもので、同じシリーズのバナーなら、むしろ同じ型でそろえたほうが統一感が出ます。
そのうえで、写真の構図やバナーの形が変わったときに、ほかの型も試してみましょう。 - Q. バナーにCTAボタンは必ず必要?
A. 必ずではありません。
多くのバナーは画像全体がリンクになっているので、ボタンがなくてもクリックはできます。
ただ、「詳しく見る」のようなボタンがあると、押せることと押した先で何が起きるかが伝わりやすくなるため、入れられる大きさなら入れるのが無難です。 - Q. レイアウトが決まったら、色はどう決めればいい?
A. バナーの目的に合わせて決めます。
セールなら目を引く色、高級感を出したいなら落ち着いた色、というように目的から考えます(詳しくはバナーの目的に合わせた配色とは?で解説しています)。
キャッチコピーの文字の大きさや改行の工夫はキャッチコピーのデザインとは?が参考になります。
まとめ
バナーデザインの基本は、キャッチコピー・写真・特徴・CTAボタンを、見てほしい順番に並べることです。
定番の型には、写真を大きく見せる上下分割型、写真と言葉を並べる左右分割型、言葉を主役にする中央配置型があり、伝えたいこと・写真の構図・バナーの形に合わせて選び分けます。
まずは手元の写真とキャッチコピーを1組用意し、3つの型で1枚ずつバナーを作って、どれが一番伝わるかを見比べてみてください。
