バナーのレイアウト9パターン｜横長・正方形・縦長で変わる組み方とAIでの案出し
バナーの成果は、載せる要素を決めた後の「どこに置くか」で変わります。同じ写真と同じコピーでも、配置が違えば目に入る順番が変わり、クリックの数も動きます。
やっかいなのは、配置の正解がバナーの形で変わることです。横長・正方形・縦長では、見える面積も視線の動きも別物だからです。横長の定番をそのまま正方形に縮めると、文字がつぶれて読めなくなります。
この記事では、バナーレイアウトの基本を押さえたうえで、横長・正方形・縦長の3形状ごとに、よく使う配置を合計9パターンへ整理します。サイズ別の組み方と、視線の流れに沿った配置のコツ、AIで複数案を一度に出す手順までまとめました。
この記事でわかること
- バナーレイアウトを決める3要素と、視線の流れ（Z・Fの法則）
- 横長・正方形・縦長それぞれの配置パターン（合計9個）
- 300×250やストーリーズなど、代表サイズでの組み方
- レイアウトを崩さないための共通ルール（余白・コントラスト）
- AIでレイアウト案を複数出す手順
※ この記事の作業をまるごと自動化するなら、TaskyはURLを入れるだけで、形状ごとのバナーまで数分で用意します。7日間無料トライアルで試せます。
バナーレイアウトの基本｜3要素と視線の流れ
どの形状でも、バナーに載せるのは「ビジュアル・コピー・CTA（行動喚起）」の3つです。レイアウトとは、この3つに優先順位をつけ、視線が流れる順番に並べる作業です。
3要素に優先順位をつける
全部を目立たせると、どれも目立ちません。まず主役を1つ決めます。商品の見た目で売るなら写真、オファーで売るならコピーです。主役を大きく、残りは脇役として小さく添えます。
優先順位の基本は、「一番伝えたい1メッセージ → それを支えるビジュアル → 次の行動（CTA）」の順です。この順で視線が流れるように置きます。
視線の流れ（Z・Fの法則）で配置する
人の視線には、くせがあります。横書きの文化では、左上から右へ、そして下へと動きます。この動きを整理したのがZの法則とFの法則です。
Zの法則は、視線が左上→右上→左下→右下とZを描く動きです。情報が少ないバナーで当てはまりやすく、左上にロゴやキャッチ、中央に主役ビジュアル、右下にCTAを置くと流れに乗ります。
Fの法則は、文字情報が多いときに出やすい動きです。Nielsen Norman Groupのアイトラッキング調査では、上部を横に読み、少し下をまた横に読み、左端を縦にたどるF字の動きが確認されています。縦長で文章量の多いバナーは、見出しを左に揃えて上から下へ並べると読みやすくなります。
横長バナーの配置3パターン
横長は、ディスプレイ広告でよく使う形です。代表サイズは728×90（リーダーボード）や300×250（レクタングル）。Google広告では300×250・728×90・336×280・160×600が在庫の多いサイズとされています（Google Ad Manager）。横幅がある分、左右で役割を分けやすいのが特徴です。
左右2分割（左ビジュアル・右コピー）
画面を左右に分け、片側にビジュアル、もう片側にコピーとCTAを置くパターンです。視線が左から右へ流れるので、左に目を引く写真、右に読ませたい言葉と行動を置くと自然です。728×90のような横に細長いサイズで特に効きます。
中央寄せ・1行コピー（小サイズ向け）
320×50のような小さいバナーは、要素を詰め込めません。ロゴと短いコピー、小さなボタンを横一列に並べ、中央に寄せます。言葉は1行、7〜12文字まで削るのが目安です。
左から右へ読ませる（変化を見せる）
ビフォーアフターや手順のように、順番に意味があるときは、左から右へ要素を並べます。横長は横移動の視線と相性がよく、左に「現状」、右に「変化後」を置くと、流れだけで違いが伝わります。
正方形バナーの配置3パターン
正方形は、SNSのフィードで主役になる形です。InstagramやFacebookのフィードでは1080×1080が基本サイズとして使われます（Instagram広告サイズ解説）。上下左右のバランスが取りやすく、中央に視線が集まりやすいのが特徴です。
上下2分割（上ビジュアル・下コピー）
上半分にビジュアル、下半分にコピーとCTAを置く、最も安定したパターンです。写真とテキストの境界がはっきりするので、小さい表示でも情報が整理されて見えます。速くスクロールする相手でも、ひと目で何の広告か伝わります。
中央集中（日の丸構図）
主役を中央にどんと置き、周りに余白を取る組み方です。商品単体やキャッチ1行で勝負するときに向きます。視線が中央に集まるぶん、要素を増やすと途端にうるさくなるので、載せるのは2〜3要素までにします。
全面ビジュアル＋コピー重ね
背景いっぱいに写真を敷き、その上にコピーを重ねるパターンです。世界観で引きつけたいときに強いですが、写真の上の文字は読みにくくなりがちです。文字の裏に半透明の帯を敷くか、暗い部分に白文字を置いて、コントラストを確保します。
ここまでのパターンを媒体ごとに手で組み直すのは手間がかかります。Taskyなら、1つのデザインから横長・正方形・縦長へマジックリサイズで展開でき、サイズ展開は追加クレジットだけで済みます。機能を見る。
縦長バナーの配置3パターン
縦長は、ストーリーズやリールなど全画面の面で使います。推奨は9:16で、1080×1920が標準です（Meta広告クリエイティブ解説）。縦に長いので、情報を上から下へ時間差で見せられます。
3分割サンドイッチ（上コピー・中ビジュアル・下CTA）
画面を上・中・下の3段に分け、上に見出し、中央に主役ビジュアル、下にCTAを置きます。全画面で指が止まったとき、上から下へ自然に読み進められます。親指が届きやすい下部にボタンを置くのも、タップされやすくするコツです。
全画面背景＋下部CTA
写真や動画を全画面に敷き、下部にだけコピーとCTAを集める組み方です。没入感を出しつつ、行動は画面の下で促せます。背景が主役なので、文字は最小限に絞ります。
上から下へ読ませる（情報量が多いとき）
料金やスペックなど伝える情報が多いときは、Fの法則を意識します。見出しを左に揃え、上から要点を箇条書きで並べ、最後にCTAで締めます。縦長は面積があるぶん、詰め込みすぎると読み飛ばされるので、1画面1メッセージを守ります。
レイアウトを崩さない3つの共通ルール
セーフゾーンを守る
ストーリーズやリールは、上下にUIが重なります。Metaの解説では、上部14%・下部35%・左右6%にはロゴや文字を置かないよう示されています（Meta広告クリエイティブ解説）。この範囲に大事な要素を置くと、ボタンや時刻表示で隠れます。
サイズが変わったら文字量も変える
同じデザインを全サイズに使い回すと、小さいバナーで文字がつぶれます。大きい面は情報を足し、小さい面は1メッセージまで削る。サイズごとに文字量を調整するのが前提です。
コントラストと余白で迷子を防ぐ
主役と背景の明暗差（コントラスト）が弱いと、何を見ればいいか分かりません。主役はくっきり、脇役は控えめに。要素の周りには余白を残し、視線の通り道をふさがないようにします。
AIでバナーレイアウトの案を出す手順
レイアウトは、1案で決めずに複数出して比べるのが近道です。手で何パターンも作ると時間がかかりますが、AIを使うと、同じ素材から配置違いを一度に出せます。
- 載せる3要素（主役ビジュアル・コピー・CTA）を決める
- 形状（横長・正方形・縦長）と代表サイズを選ぶ
- 配置違いを複数出し、視線の流れが素直なものを選ぶ
Taskyは、商品ページのURLを入れるだけで、誰に・どの訴求で見せるかの設計から入り、形状ごとのバナーレイアウトまで作ります。制作単価は1枚あたり約45円から、月180枚以上を作れるので、配置のパターンを数多く試せます（product.md）。作った広告は「誰に・どの訴求か」の設計座標を持つので、どの配置が効いたかを後から振り返れます。
よくある質問
Q1. バナーのレイアウトはどう決めればいいですか？
まず載せる3要素（ビジュアル・コピー・CTA）の優先順位を決め、主役を1つに絞ります。次に配信面の形状と代表サイズを選び、視線の流れ（横長はZ、縦長はF）に沿って置きます。この順で決めると迷いません。
Q2. 横長・正方形・縦長で、何を変えればいいですか？
見える面積と視線の動きが違うので、文字量と配置を変えます。横長は左右で役割を分け、正方形は上下2分割か中央集中、縦長は上から下への3分割が基本です。同じデザインの使い回しは避けます。
Q3. バナーに入れる文字数の目安は？
小さいバナー（320×50など）は1行・短いコピー、大きい面は複数行までが目安です。どの面でも「1画面1メッセージ」を守り、読み切れる量に削ります。
Q4. レイアウトのテンプレートはそのまま使っていいですか？
出発点としては有効ですが、そのままだとサイズ比率やセーフゾーンが合わないことがあります。特にストーリーズは上下のUIに重なるので、セーフゾーンを外して配置し直します。
Q5. AIでバナーのレイアウトは作れますか？
作れます。素材と訴求を決めれば、配置違いの複数案を短時間で出せます。Taskyのように設計から入るものなら、誰に向けた配置かまで踏まえて提案します。
まとめ
バナーレイアウトは、形状ごとに正解が変わります。最後に要点を整理します。
- 3要素（ビジュアル・コピー・CTA）に優先順位をつけ、主役を1つに絞る
- 横長はZ、縦長はFの視線の流れに沿って配置する
- 横長は左右分割、正方形は上下分割か中央集中、縦長は3分割が基本
- ストーリーズはセーフゾーン（上部14%・下部35%・左右6%）を外す
- 配置は1案で決めず、複数出して視線が素直なものを選ぶ
バナーレイアウトの案出しを実務で試したい方は、Taskyの7日間無料トライアルで、URLから複数パターンを生成できます。登録は3分です。
関連記事として、主要媒体のバナーサイズ早見表、楽天のバナー3種類とサイズ規定、LinkedIn広告のサイズ一覧もあわせてどうぞ。
