横長バナー・縦長バナーのデザインとレイアウト|主なサイズと作り方のコツ
公開日 更新日
横長バナーは「左から右へ」、縦長バナーは「上から下へ」と、見る人の目の動きにあわせて要素を並べるのが基本です。横長・縦長の主なサイズ、それぞれのレイアウトの型、どちらを選ぶかの目安、よくある失敗まで、バナー制作会社が解説します。
目次
横長バナー・縦長バナーの主なサイズ
同じ「横長」「縦長」でも、媒体によって大きさや比率が違います。代表的なものは次のとおりです。
出典:Google 広告 ヘルプ「レスポンシブ ディスプレイ広告の一般的なサイズについて」、Google 広告 ヘルプ「レスポンシブ ディスプレイ広告を作成する」、Meta for Developers「Instagram広告のメディア要件」
媒体ごとのサイズはバナーのリサイズ(サイズ変更)のやり方でも一覧にしています。
| 形 | 主なサイズ・比率 |
|---|---|
| 横長 | 1200×628(1.91:1。Google・LINE・Xなど) |
| 細長い帯 | 728×90、970×90、468×60(パソコン)、300×50、300×100(スマホ) |
| 縦長 | 300×600、160×600(パソコンのサイドに出る枠) |
| 縦長(全画面) | 9:16(Instagramのストーリーズなど)、4:5(Instagramのフィード・X) |
媒体ごとのサイズはバナーのリサイズ(サイズ変更)のやり方でも一覧にしています。
横長バナーのレイアウト
横長バナーは、目が左から右へ動くことを前提に組み立てます。
基本は「左に写真、右に文字とボタン」
横長バナーの基本の型は、画面を左右に分けて、片側に写真、もう片側に文字とボタンを置く形です。左から右へ「何の商品か→何がうれしいか→どうすればいいか」と読めるように並べると、迷わず伝わります。写真の人物の顔や視線を文字の方へ向けると、自然に文字へ目が行きます。
細長い帯は、要素を3つまでにしぼる
728×90や300×50のような細長い帯は、高さがほとんどありません。入れられるのは「商品(またはロゴ)」「キャッチコピー一つ」「ボタン」の3つまでと考えましょう。説明文を入れると文字が小さくなり、どれも読めなくなります。
左右の端まで詰め込まない
横幅が広いと、つい端まで要素を並べたくなります。端に余白を残し、要素どうしの間も空けたほうが、ひと目で何が書いてあるか分かります。
縦長バナーのレイアウト
縦長バナーは、目が上から下へ動くことを前提に組み立てます。
基本は「上から、キャッチ→写真→ボタン」
縦長バナーの基本の型は、上にキャッチコピー、真ん中に写真、下にボタンを積む形です。上から読み進めるうちに、最後に「どうすればいいか」が目に入る順番になります。
一番上で何の広告か分かるようにする
縦長バナーは、全体が一度に目に入るとは限りません。パソコンのサイドの枠ではスクロールの途中で上だけが見えることもあります。一番上の部分だけで何の広告か分かるように、キャッチコピーか商品を上に置きましょう。
全画面の縦長は、上下の端をあける
ストーリーズのような全画面の縦長は、上にアカウント名、下にボタンなどの表示が重なります。大事な文字や商品は中央に寄せ、上下の端には背景だけを置くのが安全です。
横長と縦長、どちらを選ぶか
どちらが良いかは、出す場所と見せたいもので決まります。
実際には、同じ内容で横長と縦長の両方を用意して、媒体ごとに出し分けることも多くあります。
| 形 | 向いているとき |
|---|---|
| 横長 | ほかの媒体と使い回したいとき。1.91:1はGoogle・LINE・Xで共通して使いやすい |
| 縦長 | スマホで大きく見せたいとき(4:5、9:16)。人物や商品を全身で見せたいとき |
| 細長い帯 | パソコンのサイトの上や下に出したいとき(728×90など) |
よくある失敗
- 横長を縦長に引き伸ばしただけで、文字や写真がゆがんでいる
- 細長い帯に説明文まで入れて、文字が小さくて読めない
- 縦長の一番上が背景だけで、何の広告か分からない
- 全画面の縦長で、ボタンや価格が下の表示に隠れている
- 形が変わっても、要素の並べ方を変えていない
横長・縦長のバナー制作を頼むなら
まとめ
- 横長バナーは左から右へ、縦長バナーは上から下へ読める順に並べる
- 横長の基本は「左に写真、右に文字とボタン」、縦長の基本は「上からキャッチ→写真→ボタン」
- 細長い帯は要素を3つまで、全画面の縦長は上下の端をあける
- 使い回しなら横長、スマホで大きく見せるなら縦長
この記事を書いたライター

※アンケートモニター提供元:ゼネラルリサーチ
調査期間:2020年8月7日~12日
調査方法:インターネット調査
調査概要:デザイン制作会社10社を対象にしたサイト比較イメージ調査
調査対象:全国の20代~50代の男女 1052名














へのお問い合わせはこちらから