バナーのレイアウト｜初心者が迷わない構図の型と要素の置き方

素材も文字もそろったのに、どこに何を置けばいいか分からず手が止まる…
参考のバナーを眺めても、どこを真似すればいいのか分からない…

写真とキャッチコピーとボタンを前にして、配置で迷いますよね。何となく並べてみても素人っぽく見えて、自分には向いていないのかなと不安になることもあると思います。

バナーのレイアウトは、何を最初に読ませるかを決めるてから型を選ぶと迷いづらくなります。

この記事では、バナーレイアウトの基本の型4つと要素の置き場所、形ごとの選び方、やりがちな失敗例の直し方をご紹介します。バナーを作る手順全体は、バナーの作り方を初心者向けに解説｜手順・サイズ・上達のコツでまとめています。

バナーのレイアウトは「伝える順番」を決めてから型を選ぶ

参考のバナーを集めて型の一覧から選ぼうとすると、どの型も正解に見えて決めきれないことがあります。型は、伝える順番を見せるための並べ方です。中身の順番が決まっていないと、選ぶ根拠が持てません。

迷わずに決める手順は、次の3つです。

1. 主役を1つ決める（キャッチコピーか、商品や人物の写真か）
2. 読ませる順に番号を振る
3. その順番が自然に流れる型を当てる

例えば、パン教室の体験レッスンを募集するバナーで試してみましょう。入れる要素は、次のようなものです。

• キャッチコピー「親子で焼きたてパン体験」
• パンを焼いている親子の写真
• 「詳しく見る」のボタン
• 教室のロゴ

写真で楽しそうな雰囲気を伝えたいなら、主役は写真です。順番は「写真→キャッチコピー→ボタン→ロゴ」になり、写真を大きく取れる型が候補に残ります。

人の目がどこから読み始め、どう動くかは、以下の記事で詳しく説明しています。

バナーは、きれいに並べるためではなく、見た人にクリックしてもらうために作るものです。順番を先に決めておけば、配置に迷ったときも「この並びでボタンまでたどり着けるか」で判断できます。

バナーレイアウトの基本の型4つ

まずは、次の4つの型を押さえておきましょう。

1. 左右分割型
2. 上下分割型
3. 中央配置型
4. 全面写真型

どの型も、主役・説明・ボタンをどの順番で見せるかの違いです。

1、左右分割型

バナーを縦の線で左右に分け、片側に写真、反対側にキャッチコピーとボタンを置く型です。横に長いバナーで使いやすく、商品と伝えたい言葉を一緒に見せたいときに向いています。

注意点は、左右を同じ面積にしないことです。主役が写真なら写真側を、キャッチコピーなら文字側を広く取ると、どちらを先に見ればいいかが伝わります。

2、上下分割型

横の線で上下に分け、上に写真、下にキャッチコピーとボタンを置く型です。主役がキャッチコピーなら、上下を入れ替えて文字を上に置きます。

正方形や縦に長いバナーで使いやすく、上から下へ読む流れがそのまま順番になります。

注意点は、写真と文字の境目を揃えることです。境目がゆがんでいたり、文字が写真に少しだけかかっていたりすると、雑な印象になります。

3、中央配置型

キャッチコピーを真ん中に大きく置き、周りを余白や背景で囲む型です。ボタンはキャッチコピーの下に置きます。

セールの告知や新サービスのお知らせなど、伝えることが1つのときに向いています。要素を増やすと真ん中に情報が集まって窮屈になるので、入れる要素は少なめにしましょう。

4、全面写真型

写真をバナー全体に敷き、その上にキャッチコピーとボタンを載せる型です。旅行やカフェ、お店の世界観など、雰囲気を伝えたいときに向いています。

注意点は文字の読みやすさです。写真の中で色が落ち着いている部分に文字を置くか、文字の下に半透明の帯を敷くと読みやすくなります。

4つの型を並べると、次のとおりです。

比べるポイント	左右分割型	上下分割型	中央配置型	全面写真型
配置	片側に写真、反対側に文字とボタン	上に写真、下に文字とボタン	中央に文字、周りは余白か背景	全面に写真、その上に文字とボタン
向いている形	横長	正方形・縦長	正方形・横長	正方形
向いている目的	商品と言葉を一緒に見せる	写真と説明を順に読ませる	伝えることが1つの告知	雰囲気を伝える
注意点	左右の面積に差をつける	境目を揃える	要素を増やしすぎない	文字を読みやすくする

バナーの要素をどこに置くか｜キャッチコピー・画像・ボタンの配置

型が決まったら、要素を1つずつ置いていきます。置き場所は、次の3つの考え方で決めます。

1. 関係のある要素は近くにまとめる（近接）
2. 要素の端を見えない線に揃える（整列）
3. 主役とそれ以外に大きさの差をつける（対比）

どれもデザインの4原則にある考え方です。4原則そのものは、以下の記事で詳しく説明しています。

キャッチコピーの配置

キャッチコピーが主役なら、バナーの中でいちばん大きな文字にし、読み始めの位置に置きます。左右分割型なら文字側の上のほう、上下分割型なら文字の段のいちばん上です。

1行に詰め込むと読みにくくなるので、長くなるときは意味の切れ目で2行に分けましょう。

画像の配置

写真が主役なら、面積を大きく取ります。人物の写真は、顔や視線がキャッチコピーのほうを向くように置くと、見た人の目も文字へ流れやすくなります。

添削済み

商品の写真も同じで、商品の正面を文字側へ向けると、写真と文字がひとまとまりに見えます。

ボタン（CTA）の配置

CTA（見た人に次の行動を促すボタン）は、読む順番の最後に置きます。キャッチコピーを読み終えた目が自然に向かう場所、例えば文字のすぐ下や右下です。

キャッチコピーから離しすぎないことも大切です。何のためのボタンかが伝わりにくくなるからです。周りに余白を取り、色や形で押せるボタンだと分かるようにしましょう。

ロゴ・補足テキストの配置

ロゴや日付、注意書きは、主役と競わない大きさにして隅に寄せます。

隅に寄せるときも、バナーの端にぴったり付けないようにします。キャッチコピーやボタンと同じ線に揃えると、小さな要素も浮かずにまとまります。

サイズ別（横長・正方形・縦長）のバナーレイアウトの選び方

媒体ごとの具体的な大きさは、以下の記事で詳しく説明しています。

ここでは、横長・正方形・縦長という形の違いで型を選びます。

横長のバナー

横長のバナーは、左右分割型が基本です。横書きの文字は左から右へ読むので、左に主役、右にボタンを置くと順番どおりに読めます。

高さが限られるため、キャッチコピーは1〜2行に収めましょう。伝えることが1つなら、中央配置型も使えます。

正方形のバナー

正方形は縦と横の長さが同じなので、上下分割型・中央配置型・全面写真型のどれも使えます。迷ったときは、主役が何かで選びましょう。

• 主役が写真なら、全面写真型か上下分割型
• 主役が短いキャッチコピーなら、中央配置型

縦長のバナー

縦長のバナーは、上下分割型が基本です。上から下へ「主役→説明→ボタン」の順に並べ、ボタンはいちばん下に置きます。

左右に分けると1つ1つの面積が細くなり、文字を小さくせざるをえなくなります。

形ごとに向く型をまとめると、次のとおりです。

バナーの形	向いている型	置き方のポイント
横長	左右分割型（伝えることが1つなら中央配置型）	左に主役、右にボタン。キャッチコピーは1〜2行
正方形	上下分割型・中央配置型・全面写真型	主役が写真か文字かで選ぶ
縦長	上下分割型	上から主役→説明→ボタンの順に並べる

同じキャンペーンで形の違うバナーを作るときは、主役と読ませる順番は変えずに、型だけを形に合わせて変えます。

主役まで変えると、同じキャンペーンのバナーに見えにくくなるからです。

初心者がやりがちなバナーレイアウトの失敗例と直し方

初めてバナーを作るときにつまずきやすい形を、3つ紹介します。どれも、型を変える前に直せる所です。

失敗1、要素を均等に並べて主役がない

写真もキャッチコピーもボタンも、同じくらいの大きさで並べた形です。どれも大事だと思うほど均等になり、見た人はどこから読めばいいか迷ってしまいます。

直すときは、主役の面積を先に決め、それ以外を小さくします。それでも主役が決まらないときは、要素を1つ減らしてみましょう。

失敗2、文字を端まで詰めている

伝えたいことを全部入れようとして、文字がバナーの端ぎりぎりまで届いている形です。窮屈に見えるうえ、周りのページとの境目も分かりにくくなります。

直すときは、バナーの外周に余白を取り、入りきらない文字は削ります。文字を小さくして詰め込むより、言いたいことを1つに絞ったほうが伝わりますよね。

余白の取り方は、以下の記事で詳しく説明しています。

失敗3、揃える線がなく、要素がバラバラに浮いている

キャッチコピーは中央、ボタンは右寄せ、ロゴは左上のように、要素ごとに揃え方が違う形です。1つずつはきれいに置けていても、全体がまとまって見えません。

直すときは、左揃えか中央揃えかを1つ決め、すべての要素をその線に合わせます。作りかけのバナーに縦の線を1本引いて、要素の端が揃っているか確かめてみてください。

まとめ

1、型を選ぶ前に主役を1つ決め、「何を最初に読ませるか」の順番を決める
2、基本の型は左右分割型・上下分割型・中央配置型・全面写真型の4つ。形と伝える内容で選ぶ
3、迷ったら主役を1つに絞り、外周の余白と揃える線を確かめる

伝える順番から型を決める感覚を手を動かして確かめたい方は、5日間チャレンジも活用してください。