バナー制作の仕事には、デザインを考える前に決めることがあります。「どの媒体に・どのサイズで・どんな規定で出すか」です。
ここを飛ばしてデザインから始めると、入稿(完成したデータを媒体へ提出すること)の直前で作り直しになります。私は「規定の確認が仕事の半分」と言い切ってもいいと思っています。
このレッスンでは、バナー広告の基本から、よく使うサイズの一覧、入稿規定の確認ポイント、制作フローまでをまとめます。
バナー広告とは
バナー広告は、Webサイトの広告枠やSNSのフィード(投稿が並ぶ画面)に表示される画像の広告です。ニュースサイトの記事の横や、Instagramの投稿のあいだに出てくる、あの画像ですね。
クリックすると、商品やサービスの紹介ページ(LP)へ移動します。バナーの仕事は、目に入った一瞬で興味を引いて、クリックしてもらうことです。
実務でよく出る言葉も2つ押さえておきましょう。「ディスプレイ広告」は、こうした画像・動画形式の広告の総称です。「配信面」は、バナーが表示される場所のこと。この2語が分かれば、媒体の規定や依頼の文面が読めるようになります。
よく使うバナーサイズ一覧
バナーのサイズは媒体の数だけありますが、最初に覚えるのは6種類で足ります。

| サイズ(横×縦px) | 呼び名 | 主な使いどころ |
|---|---|---|
| 300×250 | レクタングル | ディスプレイ広告の定番。配信面が最も多い |
| 336×280 | レクタングル(大) | 300×250とセットで用意することが多い |
| 728×90 | リーダーボード | PCページの上部 |
| 320×50・320×100 | モバイルバナー | スマホ画面の上下 |
| 160×600・300×600 | スカイスクレイパー | PCのサイドバー |
| 1080×1080 | スクエア | SNS広告・SNS投稿 |
| 1200×628 | 横長 | レスポンシブ広告・SNS広告の横長枠 |
Googleのディスプレイ広告はレスポンシブ形式が主流です。横長1200×628と正方形1200×1200の画像を登録すると、媒体側が配信面に合わせて自動で組み合わせます。固定サイズのバナーを何枚も作る案件と、レスポンシブ用の画像を数枚作る案件、両方あると覚えておいてください。
入稿規定で確認する4項目
サイズ以外にも、媒体ごとの規定があります。着手前に次の4つを確認します。
- サイズと縦横比:ピクセル指定か、比率指定か。複数サイズの入稿が要るか
- ファイル形式と容量:JPG・PNG・GIFのどれが使えるか。容量の上限(150KB以内などの媒体が多い)
- 文字量の目安:画像内のテキスト量に目安を設けている媒体があります
- 表現の制限:背景と区別するための枠線の義務、誇大表現の禁止、化粧品や健康食品なら薬機法に関わる文言の制限
差し戻しがよく起きるのは容量と表現の2つです。容量はデザイン中には見えないので、書き出してから気づきます。写真を多く使うバナーは、早めに一度書き出して容量を見ておくと安全です◎
バナー制作のフロー
制作の流れは5ステップです。どの媒体でも順番は変わりません。

- 規定を確認する:サイズ・容量・形式・本数。ここまでに書いたとおり、最初にやります
- 情報を整理する:入れる要素(キャッチコピー・写真・期間・ボタンなど)を書き出して、優先順位を決めます。全部は入らない前提で
- ラフを描いてからデザインする:紙に小さく配置を描いてからツールを開くと、迷う時間が減ります
- 書き出す:規定の形式と容量に合わせます。容量が超えたら、写真の圧縮率を先に調整します
- 検品して入稿する:実寸表示で文字を読めるか確認。誤字・日付・リンク先の指定もここで見ます
ステップ3のデザイン部分は、次の「バナーレイアウトの基本」で要点をまとめます。
バナーレイアウトの基本
レイアウトで最初に意識するのは視線の流れです。横書きのバナーでは、視線は左上から右下へZの形に動きます。いちばん伝えたい言葉を左上〜中央に、押してほしいボタンを右下に置くのが基本形です。
要素には優先順位を付けます。順番は訴求(いちばん伝えたい一言)→ ボタンや期限 → ロゴ。ロゴを大きくしたくなりますが、見た人が最初に受け取るべきなのは「自分の得になる情報」のほうです。
配色や文字の組み方まで含めた詳しい作り方は、次の2記事にまとめてあります。バナーが初めての方は「きほん」から読んでください。


サイズ展開は「削る」作業
実務では、同じキャンペーンのバナーを複数サイズで作るのが普通です。このとき大きいサイズを縮小コピーしてはいけません。面積が小さくなるほど、要素の数を減らします。

1080×1080ならキャッチコピー・写真・特徴・期間・ボタンの5要素が入ります。同じ内容を300×250に押し込むと、全部の文字が小さくなって、どれも読めなくなります。
作る順番は、いちばん大きいサイズか、いちばん本数の多いサイズから。先に「完全版」を1枚決めておくと、残りは削るだけで展開できます。
ミニ実践:同じ内容を2サイズでラフにする
紙とペンだけでできます。10分ほどで、サイズ展開の感覚がつかめますよ。
- 題材を1つ決めます。実在のセールでも、架空の「パン屋の新商品」でも構いません
- 入れたい要素を全部書き出します(キャッチコピー・写真・価格・期間・ボタンなど)
- 紙に正方形(1080×1080のつもり)を描いて、全要素を配置したラフを作ります
- 隣に横長の小さい枠(300×250のつもり。正方形の1/4くらいの面積)を描きます
- 小さい枠に入れる要素を2つだけ選んで、配置します
- 2つのラフを見比べて、「削った要素をどこで伝えるか」(リンク先のページなど)を1行メモします
どれを削るか迷ったら、「見た人に次に何をしてほしいか」で決めてください。行動につながる要素だけが残ります。
よくある質問
次に学ぶこと
バナーの実務は、規定の確認から始まって、情報を絞って、書き出して検品する。レイアウトは視線の流れと優先順位で決めて、サイズ展開は縮小コピーせずに削る。ここまでが今回の内容です。
次のレッスンはSNSクリエイティブ。Instagram・Xの画像サイズと安全マージンを扱います。広告バナーと違って「規定はゆるいのに、置き場所の事情で文字が消える」のがSNSの難しさです。

コース全体の並びはデザイン基礎コースの目次で確認できます。
