デザイン会社が発信!バナー制作情報メディア

横長バナー・縦長バナーのデザインとレイアウト|主なサイズと作り方のコツ

公開日 更新日
横長バナー・縦長バナーのデザインとレイアウト|主なサイズと作り方のコツ
横長バナーは「左から右へ」、縦長バナーは「上から下へ」と、見る人の目の動きにあわせて要素を並べるのが基本です。横長・縦長の主なサイズ、それぞれのレイアウトの型、どちらを選ぶかの目安、よくある失敗まで、バナー制作会社が解説します。

目次

横長バナー・縦長バナーの主なサイズ

同じ「横長」「縦長」でも、媒体によって大きさや比率が違います。代表的なものは次のとおりです。
形主なサイズ・比率
横長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)
出典:Google 広告 ヘルプ「レスポンシブ ディスプレイ広告の一般的なサイズについて」、Google 広告 ヘルプ「レスポンシブ ディスプレイ広告を作成する」、Meta for Developers「Instagram広告のメディア要件」

媒体ごとのサイズはバナーのリサイズ(サイズ変更)のやり方でも一覧にしています。

横長バナーのレイアウト

横長バナーは、目が左から右へ動くことを前提に組み立てます。

基本は「左に写真、右に文字とボタン」

横長バナーの基本の型は、画面を左右に分けて、片側に写真、もう片側に文字とボタンを置く形です。左から右へ「何の商品か→何がうれしいか→どうすればいいか」と読めるように並べると、迷わず伝わります。写真の人物の顔や視線を文字の方へ向けると、自然に文字へ目が行きます。

細長い帯は、要素を3つまでにしぼる

728×90や300×50のような細長い帯は、高さがほとんどありません。入れられるのは「商品(またはロゴ)」「キャッチコピー一つ」「ボタン」の3つまでと考えましょう。説明文を入れると文字が小さくなり、どれも読めなくなります。

左右の端まで詰め込まない

横幅が広いと、つい端まで要素を並べたくなります。端に余白を残し、要素どうしの間も空けたほうが、ひと目で何が書いてあるか分かります。

縦長バナーのレイアウト

縦長バナーは、目が上から下へ動くことを前提に組み立てます。

基本は「上から、キャッチ→写真→ボタン」

縦長バナーの基本の型は、上にキャッチコピー、真ん中に写真、下にボタンを積む形です。上から読み進めるうちに、最後に「どうすればいいか」が目に入る順番になります。

一番上で何の広告か分かるようにする

縦長バナーは、全体が一度に目に入るとは限りません。パソコンのサイドの枠ではスクロールの途中で上だけが見えることもあります。一番上の部分だけで何の広告か分かるように、キャッチコピーか商品を上に置きましょう。

全画面の縦長は、上下の端をあける

ストーリーズのような全画面の縦長は、上にアカウント名、下にボタンなどの表示が重なります。大事な文字や商品は中央に寄せ、上下の端には背景だけを置くのが安全です。

横長と縦長、どちらを選ぶか

どちらが良いかは、出す場所と見せたいもので決まります。
形向いているとき
横長ほかの媒体と使い回したいとき。1.91:1はGoogle・LINE・Xで共通して使いやすい
縦長スマホで大きく見せたいとき(4:5、9:16)。人物や商品を全身で見せたいとき
細長い帯パソコンのサイトの上や下に出したいとき(728×90など)
実際には、同じ内容で横長と縦長の両方を用意して、媒体ごとに出し分けることも多くあります。

よくある失敗

  • 横長を縦長に引き伸ばしただけで、文字や写真がゆがんでいる
  • 細長い帯に説明文まで入れて、文字が小さくて読めない
  • 縦長の一番上が背景だけで、何の広告か分からない
  • 全画面の縦長で、ボタンや価格が下の表示に隠れている
  • 形が変わっても、要素の並べ方を変えていない

横長・縦長のバナー制作を頼むなら

バナー制作.jpでは、バナーのサイズに関係なく1本4,000円(税別、別途ディレクション費20%)で制作しています。横長と縦長など、同じデザインのサイズ違いは1サイズ2,000円です。形ごとに要素の並べ方を組み直して納品します。詳しくは制作料金をご覧ください。
やっぱりLP制作はプロに任せたい!まず制作事例を見る

まとめ

  • 横長バナーは左から右へ、縦長バナーは上から下へ読める順に並べる
  • 横長の基本は「左に写真、右に文字とボタン」、縦長の基本は「上からキャッチ→写真→ボタン」
  • 細長い帯は要素を3つまで、全画面の縦長は上下の端をあける
  • 使い回しなら横長、スマホで大きく見せるなら縦長
あわせて読みたい
この記事を書いたライター
2009年創業のデザイン会社です。バナー制作.jp(バナー制作実績)では、Instagram・X(旧Twitter)・LINE・Meta・Google・LINEヤフーなどの広告バナーを年間3,000本以上制作しています。制作実績は累計40,000件以上(バナー以外の制作を含む)、取引社数は4,000社以上です。記事の書き方と確認の流れは編集方針をご覧ください。

バナー制作.jpへのお問い合わせはこちらから

お電話でも承ります
050-3541-5719

    件名
    会社名

    会社名ふりがな

    担当者

    担当者ふりがな

    電話番号

    メールアドレス

    都道府県
    ご商談希望
    (3~4候補)

    web商談時に
    聞きたい事

    ご返信方法
    電話連絡の場合
    ※複数回答可

    お問い合わせ内容

    バナーサイズ
    (単位:px)

    デザイン参考

    バナーにいれる
    テキスト情報

    イメージ
    フォント
    リンク先URL

    レギュレーション(仕様)

    素材画像URL

    ※GigaFile便でアップロードしたURLを上記に張り付けてください
    ※提供素材が無い場合は有料素材のみで制作

    規約に同意する


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

     
    バナーアーカイブ