Webバナーは1枚1メッセージ：主要サイズ別の文字量と配置の考え方

まず「1メッセージ」を決める

1枚のバナーで伝えるのは「誰が、何を、どうしてほしいか」のうち、最も大事な1文だけです。次の形に当てはめると決めやすくなります。

【対象】向けに、【一番の約束】を伝え、【1つの行動】をしてもらう

説明用の例として、架空の小さなイベント「みなと町クラフトマーケット」を使います。

週末に出かける人向けに、「手づくり雑貨が90店舗集まる」ことを伝え、「開催情報を見る」を押してもらう

「入場無料」「駐車場あり」「子ども向け工作」「出店者募集」を同じバナーに載せたくなりますが、目的が複数あるならバナーも複数に分けます。出店者募集は、別のバナーにします。

サイズ別の配置パターン表

以下は説明用の設計案です。文字数は日本語の全角を基準にした編集上の目安で、実際の表示で読めるかは、書体と画像で必ず確認してください。

• 320×50、形：モバイル用の細い帯、見出し：10字前後・1行、補助文：なし、ボタン：なし(バナー全体をリンクに)、配置の考え方：左にロゴまたは小さな画像、右に見出し。2要素までに絞る
• 728×90、形：PC用の横長、見出し：15字前後・1行、補助文：なし、ボタン：右端に短く、配置の考え方：左から ロゴ→見出し→ボタン の一直線
• 300×250、形：中型の長方形、見出し：12〜16字・2行まで、補助文：15字前後・1行、ボタン：あり(4〜6字)、配置の考え方：上に見出し、中央に主役の画像、下にボタン。または左文字・右画像
• 300×600 や 160×600、形：縦長、見出し：1行8字前後・3行まで、補助文：1行、ボタン：下部に配置、配置の考え方：縦に積む。上から ロゴ→見出し→画像→ボタン
• 1200×628、形：SNSやリンクカードで使う横長、見出し：20字前後・2行まで、補助文：20字前後・1行、ボタン：任意、配置の考え方：左に文字、右に画像の2分割。文字側の余白を広めに取る
• 1080×1080、形：正方形、見出し：1行10字前後・2行まで、補助文：15字前後・1行、ボタン：任意、配置の考え方：上下どちらかに文字をまとめ、残りは画像。端から余白を取る

使い分けのポイントは3つです。

• 高さが小さいサイズ(帯型): 縦に積めないので、横に一直線で並べます。補助文は載せません。
• 縦長のサイズ: 行が増えやすいので、1行を短く切り、読み順を上から下に固定します。
• 正方形・横長のサイズ: 文字を置く面と画像の面を分けると、文字が画像に埋もれません。

「同じデザインを拡大・縮小すれば全サイズに対応できる」とは考えないでください。縮めると、補助文や小さなボタンから先に読めなくなります。サイズごとに「長・中・短」の3種類の文言を用意し、各サイズに割り当てます。

文言を削る6つの手順

説明用の例の元原稿はこちらです。

10月の週末、みなと町の広場で手づくり雑貨マーケット開催!全国から集まった90店舗が出店、入場無料、雨天決行、駐車場は近隣のコインパーキングをご利用ください

1. 目的を1文で書く。 前章の形に当てはめます。この文に入らない情報は、バナー候補から外します。
2. 載せたい情報を全部書き出す。 日付、場所、無料、雨天決行、店舗数、駐車場などです。
3. 「見出し」「補助」「詳細」に仕分ける。 見出しは約束そのもの、補助はその根拠、詳細はクリック先に回す情報です。雨天決行や駐車場は「詳細」です。
4. 見出しを長・中・短で作る。 例では次のとおりです。

• 長: 手づくり雑貨が90店舗集まる週末マーケット
• 中: 手づくり雑貨90店舗
• 短: 雑貨マーケット

1. 形容詞と重複を削る。 「全国から集まった」「ぜひ」「開催!」のように、なくても意味が変わらない語を消します。「開催情報を見る」と「詳細はこちら」のように、ボタンと本文が同じ内容を言っていないかも確認します。
2. 声に出して読む。 目安は、バナーを見て1〜2秒で意味が取れることです。つっかえるなら、まだ長いと判断します。

削った結果を、サイズに割り当てると次のようになります(説明用の例)。

• 300×250、見出し：手づくり雑貨90店舗、補助：10月の週末・入場無料、ボタン：開催情報を見る
• 728×90、見出し：手づくり雑貨90店舗、補助：なし、ボタン：詳細へ
• 320×50、見出し：雑貨マーケット、補助：なし、ボタン：なし

AIに任せる範囲と、渡す情報

AIは「削り案を複数出す」「長・中・短に言い換える」作業に向いています。日付・料金・場所などの事実は、人が元資料で確認します。AIに渡すのは、公開済みの情報か、説明用に置き換えた情報だけにしてください。未発表の取引先名や個人情報は入れません。

次の依頼文は、そのまま使えます。【】の部分を差し替えてください。この依頼文は、記事内で実際に実行して検証したものではありません。

あなたはWebバナーのコピー編集者です。
次の条件で、バナー用の文言案を作ってください。

【目的】対象:【週末に出かける人】/伝えること:【手づくり雑貨が90店舗集まる】/してほしい行動:【開催情報を見る】
【元原稿】【ここに貼る】
【サイズと上限】
- 320×50: 見出し10字以内、補助なし
- 300×250: 見出し16字以内、補助15字以内、ボタン6字以内
- 1200×628: 見出し20字以内、補助20字以内
【ルール】
- 元原稿にない数字・日付・価格・効果を足さない
- 1枚で伝えるメッセージは1つだけ
- 載せきれなかった情報は「クリック先に回す情報」として別に列挙する
- 各サイズにつき3案、文字数も併記する

返ってきた案は、次の4点を人が確認します。

• 日付・数字・条件が元資料と一致しているか
• 「必ず」「日本一」のような、根拠を示せない強い表現が混ざっていないか
• 文字数の併記が正しいか(AIの数え間違いは起こり得ます)
• 載せなかった情報が、クリック先のページにあるか

配置を決めたあとの確認点

読みやすさ

文字と背景のコントラストについて、WCAG(Webアクセシビリティの国際的なガイドライン)の達成基準1.4.3の解説では、通常の文字と画像内の文字は4.5:1以上、大きな文字とその画像は3:1以上が基準です。大きな文字は、18pt以上、または14pt以上の太字です。W3Cの解説では、1ptは約1.333 CSS pxとして、18ptは約24px、14ptは約18.5pxに相当します。ポイントとピクセルの換算は、画像編集ソフトでの表示サイズを保証するものではありません。ロゴ内の文字は対象外です。

写真の上に文字を置く場合は、背景に単色の帯を敷く、写真を暗くするなどして、文字の背景を均一に近づけます。

画像に入れた文字の扱い

バナーの文字を画像として書き出すと、閲覧者は文字の大きさや色を変えられません。WCAG 1.4.5の解説では、使用技術で同じ見た目を実現できる場合、情報は画像内の文字ではなくテキストで伝えることが基準です。ロゴ内の文字は、表示が本質的な例として例外に含まれます。広告配信サービスの都合で文字を画像にする場合は、画像の代替テキストで同等の目的を伝えます。

画像の代替テキストは、その画像の目的と同等の目的を果たす内容にします。リンクになる画像では、リンクの目的が分かる代替テキストにします。WCAG 1.1.1の解説にも、操作に使う画像には目的を説明する名前を付ける基準が示されています。例は次のとおりです。

• 避けたい例: alt="雑貨マーケットのバナー"
• 改善例: alt="手づくり雑貨90店舗のマーケット、開催情報を見る"

ただし、WCAGはWebコンテンツ向けの基準です。広告枠のサービスごとに別の文字量や画像の規定がある場合があるので、入稿前に掲載先の最新の仕様を見てください。

最終チェックリスト

• 最も小さいサイズで、実寸表示でも読めるか(拡大した画面だけで確認しない)
• 見出しは1つか。ボタン以外に、行動を促す文が重なっていないか
• ロゴ、見出し、ボタンの順で目が動くか
• 同じ見出しで、サイズが違っても同じ約束を言っているか
• 載せなかった情報が、リンク先ですぐ見つかるか