効果的なWeb広告のバナーデザイン|作り方のコツと配信後の検証方法

Web広告のバナーは、見た目が美しく整っていても、ターゲットユーザーに商品の特徴が伝わらなければ本来の役割を果たせません。
クリックや購入などの行動へつなげるには、単なるデザイン性だけでなく、誰に何を伝えるのかという訴求内容を軸に構成を組み立てる必要があります。

本記事では、広告の目的やターゲットに合わせた情報の整理から、成果につながるバナーの作り方を解説します。
あわせて、配信後に数値を検証して継続的な改善へつなげるための手順も紹介します。
自社のWeb広告運用において、効果的なバナーを見極め、次の施策を判断するための参考にしてください。

バナー制作前に決める広告の目的と訴求内容

バナー制作前に決める広告の目的と訴求内容

バナーの制作を始める前に、まずは誰に何を伝え、広告を通じてどのような行動を促すのかを明確にする必要があります。
商品の特徴をすべて詰め込むのではなく、ターゲットユーザーがその商品を選ぶ理由となる情報を絞り込まなければなりません。
そのうえで、認知拡大や購入といった目的に応じて、バナー内で主役にする内容と補足に回す内容を分類します。

この章では、自社のバナーに掲載すべき要素を選定し、成果につながる構成を判断できるように、ターゲットが求める訴求の見極め方と、情報の優先順位を付ける基準を解説します。

ターゲットユーザーに合わせた訴求の選び方

訴求内容は年齢や性別といった属性だけで決めるのではなく、ターゲットユーザーが商品を必要とする理由や、購入をためらう理由から選びます。
同じ商品であっても、初めて知る人と、他社商品からの買い替えを検討している人では、関心を持つ情報が異なるためです。
想像だけで広告文を作らないよう、すでに自社へ集まっている顧客の声から訴求の候補を探しましょう。

具体的には、以下の情報源からユーザーの要望や疑問を確認できます。

問い合わせの記録
購入前に繰り返し質問されている内容
商談や接客の記録
購入を決めた理由と見送った理由
商品レビューやアンケート
利用後に評価されている特徴
サイト内検索の語句
訪問者が探している商品情報

集めた顧客の言葉をそのまま広告へ載せるのではなく、それらの要望を満たせる自社商品の特徴へ結び付ける作業が必要です。
たとえば価格への不満が多いからといって、安さの根拠がない商品で価格を強調するのは適切ではありません。
費用に含まれるサポート体制など、事実として説明できる強みを探してください。

ユーザーが商品を購入する理由が複数見つかった場合でも、1枚のバナーにすべての強みを詰め込むのは避けましょう。
異なる要望を一枚で満たそうとすると、結果的に誰に向けた広告なのかが曖昧になってしまいます。

ターゲットユーザーに合わせた訴求の選び方
アバター
石本 憲貴
アピールしたいテーマ、ターゲットごとに別々にデザインしましょう!

広告の目的に応じた情報の優先順位

商品の認知を広げる広告と購入を促す広告では、バナー内で最初に伝える情報の役割が異なります。
ターゲットへの訴求を選んだ後は、その広告で促す行動を一つに絞り、ユーザーの行動判断へ直結する内容を優先的に配置しましょう。

広告の目的に応じて、バナーの主役にする情報と補足に回す情報を分類する基準は以下のとおりです。
自社の目的に合わせて、バナーへ掲載する要素を絞り込む際に確認してください。

商品を知ってもらう
主役にする情報商品名と代表的な特徴
補足する情報ブランド名や商品カテゴリー
商品ページへ誘導する
主役にする情報詳細を知りたくなる具体的な特徴
補足する情報リンク先で読める内容
購入や申し込みを促す
主役にする情報購入を決める理由になる商品の特徴や価格、特典
補足する情報特典を訴求する場合の適用条件や期限

バナーの構成を考える際は、情報を補足に回すことと、完全に省略することは別である点に注意が必要です。
たとえば特典に利用条件がある場合、省略せずに訴求文と一緒に伝える内容として制作案へ残しましょう。

掲載したい情報が多い場合は、バナー内で伝える内容と、リンク先で詳しく説明する内容を整理します。
バナーにはユーザーが次の行動を選ぶための判断材料だけを残し、詳細な説明まで詰め込まない方針で原稿を仕上げてください。

伝えたい内容が届くバナーデザインのコツ

伝えたい内容が届くバナーデザインのコツ

バナーデザインでは、主役の情報が最初に目に入り、自然に補足説明へ読み進められる構成を作ります。
すべての要素を等しく目立たせると、ユーザーはどこから読めばよいか分からず、本来の訴求が伝わりません。
成果を出すには、情報の優先順位に沿って、文字の強弱や配色、画像の見せ方を最適化する必要があります。

ここでは、設定した訴求がターゲットへ的確に届くデザインを判断できるように、視線誘導の基本や、情報を正しく伝えるためのレイアウトの調整基準を解説します。

文字の大きさと配置で伝える順番を作る

バナーにおいて、ユーザーが情報を読む順番を意図通りに導くには、文字の大きさと配置の工夫が不可欠です。
最初に読ませたい見出しを大きくし、補足情報との間には文字の大きさや太さの差を付けましょう。
ただし、視線は位置だけでなく、写真や装飾の目立ち方にも影響されるため、全体のバランス調整が必要です。

文字要素をレイアウトする際は、以下の基準を参考に、情報の役割ごとに強弱と配置を決定してください。

情報の役割 文字の強弱 配置の考え方
主役となる見出し 補足より大きく、太さでも強調する 写真や背景に埋もれない位置へ置く
見出しを補う説明 見出しより控えめにし、読める大きさを保つ 関連する見出しの近くへまとめる
価格や特典の条件 主役と競わせず、読み取れる大きさにする 対応する価格や特典の近くへ置く

限られたスペースへ長い見出しを収めるために文字全体を小さくすると、主役と補足の差がなくなり、結果的にレイアウトの意図が崩れてしまいます。
文字を縮小して詰め込む前に、まずは重複する言葉を削り、意味のまとまりに合わせて改行するなど、原稿自体の整理を優先してください。

文字の大きさと配置で伝える順番を作る

全体の配置が終わった後は、実際に配信されるサイズへ縮小して表示し、最初にどの情報が目に入るかを確認します。
訴求文よりも人物の顔や飾りが強く目立ってしまう場合は、文字だけを無理に拡大するのではなく、競合する要素の大きさや位置を抑える調整も検討しましょう。

配色と余白で情報を読みやすくする

バナーの配色は、文字と背景をはっきりと区別できることを優先して決定します。
企業や商品のブランドカラーを使用する場合でも、背景と文字の明るさが近すぎると、ユーザーが情報を読み取れません。

情報を正確に伝えるために、以下のポイントを確認しながら配色と余白を調整してください。

✓ 文字と背景の色 明るい背景には濃い文字を使うなど、明るさに十分な差を付ける
✓ 強調する色 価格やボタンなど、行動を促す目立たせたい情報に絞って使う
✓ 情報同士の余白 関連する文字は近付け、別のまとまりとの間は広く空けてグループを分ける
✓ 外周の余白 文字やロゴが画像の端に密着しないよう、周囲に十分な空間を残す

写真を背景に使用する場合は、文字の後ろにくる被写体の色や模様にも注意が必要です。
文字が重なる部分だけ背景に帯を敷いて落ち着かせるか、文字を写真内の無地の領域へ配置すると、画像の魅力を残したまま読みやすさを維持できます。

もし情報を配置して余白が足りなくなったときは、文字や画像を全体的に縮小して無理に詰め込むのではなく、まずは不要な装飾を削ることから検討しましょう。
枠や飾りを過剰に増やすよりも、情報のまとまりを余白で区切る方が、見出しと補足の関係性がターゲットへ正確に伝わります。

商品の特徴に合わせた写真やイラストの選び方

バナーに使用する画像は、広告文だけでは伝えきれない商品の特徴を補うものとして選びます。
写真とイラストのどちらを使用するかは、商品の実物を見せたいのか、形のないサービスや抽象的なメリットを伝えたいのかなど、ターゲットへ直感的に伝わる表現手法かどうかで判断しましょう。

訴求する内容に合わせて、以下の基準から最適な画像の種類と、選定時の確認ポイントを整理します。

伝えたい特徴 選ぶ画像 選定時に確認する内容
商品の形や質感 実物を写した商品写真 訴求している部分がはっきりと写っているか
大きさや利用シーン 人や周囲の物と一緒に写した利用写真 ターゲットが自分事として使用中の様子をイメージできるか
形がないサービスや抽象的なメリット イラストやアイコン 伝えたい印象(安心感、手軽さなど)と直感的に合っているか

いくら全体の雰囲気に合う画像であっても、何の商品・サービスなのかが伝わらなければ本来の訴求を補えません。
人物の表情だけで抽象的に説明しようとせず、商品本体や利用中の様子を具体的に写すなど、伝えたい特徴との対応を検討する必要があります。

デザイン案を広告用のバナーに仕上げる手順

デザイン案を広告用のバナーに仕上げる手順

バナーのデザイン案が完成しても、作成した編集用データをそのまま広告媒体へ入稿できるわけではありません。
実際に広告として配信するには、出稿先となる各媒体が指定する画像サイズ、ファイル形式、データ容量の上限に合わせて、正しくファイルを書き出す作業が必要です。

この章では、滞りなく入稿作業へ進めるように、自社の制作体制に合うツールの選び方から、配信基準を満たすためのサイズ展開や書き出し手順までを解説します。

制作方法に合うツールの選び方

バナーを制作するツールは、テンプレートの編集を中心に行うか、本格的な写真加工まで求めるかなど、自社の制作体制に合わせて選びます。
複数人で作業する場合は、共通の部品を再利用できる機能があるかも選定時の重要な基準です。

自社の目的、担当者のスキル、予算に合うツールを判断できるように、代表的なツールの違いを以下の表に整理しました。

ツール 向いている用途 操作に必要なスキル 料金の目安
Canva 既存のテンプレートを活用した素早い制作 専門知識がなくても直感的に操作できる 無料プランあり(一部素材や機能は有料)
Adobe Photoshop 写真の詳細な切り抜きやレイヤーを使った高度な合成 画像加工の専門知識と学習が必要 有料(サブスクリプション型の契約が必要)
Figma 共通部品を再利用した複数パターンの効率的な制作 Webデザインツールの基礎知識が必要 無料プランあり(チームでの本格利用は有料)

Canvaなどで既存のテンプレートを利用して制作する際は、単なる見た目の好みよりも、自社の原稿や素材が無理なく収まる構成かどうかを優先して選びましょう。
短い見出しを想定した枠へ長い広告文を入れると、文字の縮小や配置の大きな変更が必要になり、本来のデザイン意図が崩れてしまうためです。

無料ツールや無料プランで制作を進める場合、特定のフォントが使えなかったり、指定サイズの書き出しが制限されていたりすることがあります。
完成後に別のツールで一から作り直す手間を避けるため、必要な編集機能や指定形式での書き出しが、現在のプランで問題なく利用できるかを制作前に確かめておきましょう。

配信サイズに合わせた調整と書き出し

サイズ違いのバナーは、完成した画像を縦横に引き伸ばして作るのではなく、大元の編集データから個別に作成しましょう。
縦横比が変わると情報を置ける領域も変わるため、単なる縮小や拡大ではなく、サイズごとにレイアウトの再調整が必要です。

サイズ展開を行い、媒体へ正しく入稿できる形式で書き出すまでの具体的な手順は以下のとおりです。

1 入稿仕様を調べる
配信先と広告の種類に応じた画像サイズ、ファイル形式、データ容量の上限を確認する
2 制作する領域を設定する
指定された縦横のピクセル数でキャンバスやフレームを新規作成する
3 サイズごとに配置を調整する
画像の縦横比を保ちつつ、文字の改行や各要素の位置を枠に合わせて変更する
4 指定形式で書き出す
容量の上限を超える場合は、画像の圧縮率を変更するなどの設定を調整する
5 書き出したファイルを開く
指定のピクセル数と容量に収まっているか確かめ、圧縮による文字や輪郭の荒れがないか点検する

データ容量を減らす目的で、書き出す画像の縦横ピクセル数そのものを縮小してしまうと、媒体が指定する入稿サイズから外れてエラーになってしまいます。
画像の寸法は指定のピクセル数を保ったまま圧縮設定(画質)を調整し、見栄えとデータ容量の規定を両方満たすファイルに仕上げましょう。

書き出した入稿用画像とは別に、後から文字や写真を変更できる編集用データも必ず保存してください。
保存する際のファイル名に、商品名やサイズ、版番号を含めておけば、配信後に修正が発生した際に対応する元データを探す手間を減らせます。

配信前に確認するバナーの注意点

配信前に確認するバナーの注意点

バナーのデザインや入稿データが完成しても、すぐに配信できるわけではありません。
画像の見た目やサイズ規定を満たしていても、バナーの訴求とリンク先の案内が食い違っていたり、素材の権利や媒体の規約に違反したりしていれば、広告の配信が停止されるおそれがあります。

以降では、ユーザーの誤解や配信トラブルを未然に防ぐために、バナーとリンク先の照合方法や、素材の利用条件および掲載基準を満たしているかを確認する視点を解説します。

広告文とリンク先の内容の一致

バナーで訴求した内容が、リンク先でも同じ条件で案内されているかを確かめる必要があります。
画像だけを単独で校正するのではなく、必ず広告に設定するURLのページと並べて点検してください。

バナーとリンク先の整合性を確認する際は、以下の表を参考に、ユーザーの誤解を招く表現やリンクミスがないかを照合しましょう。

バナーに載せる内容 リンク先で照合する内容 修正が必要な例
商品名や商品の特徴 実際に案内している商品と仕様 別の商品ページへ移動する、訴求した特徴の説明がない
価格や特典 対象商品、適用条件、実施期間 広告の価格で購入できない、特典が終了している
購入・申し込みなどの文言 ページ内で行える手続き 「申し込む」と記載しているのに申し込み先がない

リンク先のページ内に説明が記載されていても、ユーザーがページの下部までスクロールして探さなければ見つからないような配置は避けるべきです。
バナーと同じ商品名や訴求をページの冒頭でも伝え、スムーズに詳細の確認や申し込みへ進めるように導線を整えましょう。

なお、Google広告などの主要媒体では、リンク先に存在しない、あるいは簡単に見つからない商品や特典を訴求する広告はポリシー違反として許可されていません。
出典:Google 広告ポリシー ヘルプ(不実表示)

期間限定の訴求を使用する場合は、キャンペーン終了時にバナーの配信停止とリンク先の更新を行う日程もあらかじめ決めておきましょう。

素材の利用条件と広告の掲載基準

バナーに使用する素材自体の利用許諾を得ることと、出稿先の媒体がその広告表現の掲載を認めるかどうかは、まったく別の確認事項です。
フリー素材として無料で入手した画像であっても、広告での商用利用や文字入れなどの加工が無条件に認められているとは限りません。

配信後のトラブルを防ぐために、制作に使用した各要素について以下のライセンス条件を必ず確認してください。

✓ 写真・イラスト 配布元の利用規約や素材個別の条件で、広告への利用や予定している加工が許可されているか
✓ フォント 使用する書体のライセンスで、バナー画像など商用広告への利用が認められているか
✓ 外部から提供された素材 購入履歴や許諾の記録から、自社の広告として使用できる範囲が明確に分かるか

素材の種類やライセンス契約によって、利用できる用途や加工の条件は異なります。
配布サイトのトップにある全体向けの説明だけで判断するのではなく、実際に使用する素材個別に適用されるライセンス条件まで必ず目を通すことが必要です。

正当な利用許諾を得た素材を使っていたとしても、ユーザーを誤認させる見せ方をしてしまうと媒体の審査には通りません。
たとえばGoogle広告では、パソコンやスマホの「エラー警告」に見せかけたデザインや、押しても反応しない偽の「閉じる」ボタンをバナー内に配置することを明確に禁止しています。

アバター
石本 憲貴
バナーを配信する際は、各媒体の最新の掲載基準を読み込み、広告文の内容だけでなく、画像内の装飾やボタン風の表示が規約に違反していないかも併せて注意しましょう!

配信結果をもとにバナーを検証する方法

配信結果をもとにバナーを検証する方法

バナーを配信した後は、変更した要素と実際の数値を対応させ、広告の目的に最も合うデザインを見極める検証が不可欠です。
たとえ広告へのクリックが増えても、リンク先での購入や申し込みに結びつくとは限らないため、表面的なクリック率だけで採用案を決めるのは早計といえます。

この章では、数値を正しく比較するためのテストの進め方をはじめ、クリック率やコンバージョンなどの各指標をもとにバナーやリンク先の課題を特定し、次に打つべき改善策を判断する手順を解説します。

デザイン案を比較するテストの進め方

バナーの訴求や見せ方のどちらが結果に影響したのかを正確に調べるには、一度のテストで変更する要素を一つに絞る必要があります。
広告文と写真、配色などを同時に変えてしまうと、どの変更が効果につながったのか、差が生まれた理由を特定できないためです。

デザイン案を比較するテストの進め方

数値を正しく比較し、デザイン案の良し悪しを見極めるためのテストの手順は以下のとおりです。

1 テストの目的を決める
「価格より商品の特徴を伝えたほうが申し込みが増えるか」など、今回のテストで何を確かめたいのかを明確にする
2 比較用のバナーを作る
効果を確かめたい1箇所だけを変更し、写真や色などそれ以外の要素はすべて同じにする
3 配信の条件をそろえる
媒体のA/Bテスト機能を利用し、対象ユーザーや掲載場所、配信期間が各案で均等になるように設定する
4 評価の基準と終了時期を決める
購入が目的ならコンバージョン数で比べるなど、判断に使う数値と、テストを終える期間やデータ量をあらかじめ定めておく

通常の配信設定で複数のバナーをただ登録しただけでは、システムの自動最適化が働き、各案がまったく同じ条件で表示されるとは限りません。
表示回数や配信先に大きな偏りがある状態で出た数値の差を、デザインそのものの効果であると断定するのは危険です。
正確な比較を行うためには、必ず媒体のテスト機能を用いて公平な配信条件を整えてください。

また、少数のクリックや申し込みの違いだけで、どちらかの案の採用を急ぐことは避けるべきです。
データの蓄積が不十分な段階での判断は誤った施策につながりやすいため、事前に定めたデータ量や期間に達するまで検証を続ける必要があります。

クリック率から検証する訴求と見せ方

クリック率(CTR)は、広告の表示回数に対してクリックされた割合です。
「クリック数÷表示回数×100」で算出し、作成したバナーがどれだけユーザーの関心を引いたかを検証する指標として利用します。

配信結果の数値からユーザーの反応を読み取り、次に行うべきテストの方向性を決めるヒントとして、よくある課題と改善案を以下の表にまとめました。

配信結果から見える課題 次にテストする改善案
訴求を変えてもクリック率に差が出ない 見出しの大きさや配置を変え、そもそも訴求が読まれる見せ方を試す
同じ見せ方でも訴求によって差が出る 反応のよい訴求をベースに、より具体的な広告文を試す
配信を続けるうちにクリック率が下がる 同じユーザーへの表示頻度(フリークエンシー)を確かめ、写真や見せ方を一新した案を試す

上記の表の内容は原因の断定ではなく、あくまで次の変更案を考えるための仮説です。

また、バナーのクリック率は掲載面や閲覧している端末によっても大きく変わるため、異なる条件で配信された数値をそのまま比べないようにしましょう。
全体の平均数値だけで判断するのではなく、掲載面や端末ごとに数値を分割して確認し、同じ条件同士で比較することが正確な検証の基本です。

コンバージョンから確認する広告とリンク先の課題

バナーの目的が購入や申し込みの獲得であるなら、単なるコンバージョン数だけでなく、コンバージョン率(CVR)や1件当たりの獲得単価(CPA)も併せて評価する必要があります。
たとえクリック数が増えたバナー案であっても、最終的な成果に結びつく割合が低ければ、無駄な広告費ばかりが膨らむおそれがあるためです。

広告とリンク先のどちらに課題があるのかを特定するヒントとして、指標の組み合わせと調べるべきポイントを以下の表に整理しました。

結果 調べるべき課題
クリック率は上がったが、コンバージョン率は下がった バナーの訴求で集めたユーザーの期待と、実際の商品の価格や利用条件が合っているか
クリック率は変わらないが、コンバージョン率は下がった リンク先の表示崩れや、申し込みフォームに不具合などのシステムエラーがないか
コンバージョン数は増えたが、1件当たりの広告費も上がった 増えた成果に対して、獲得単価が自社の許容範囲(目標CPA)に収まっているか

もし上記のような成果の悪化が見られた場合でも、すぐにバナーのデザインを変更するのではなく、まずは計測タグの設定に欠落や重複がないかを確かめてください。

検討から購入までに時間がかかる高額商品などでは、直近のクリックに対する成果がシステムに反映されるまでに、タイムラグが発生することもあります。
比較する各デザイン案に同じ集計条件を適用し、成果が記録されるまでの十分な期間を設けて評価することが重要です。

広告管理画面の数値だけでは離脱の根本的な原因を特定できないため、広告から流入したユーザーがリンク先のどこで離脱したかも調べましょう。
商品説明まで読まずに離脱しているのか、フォーム入力の途中で離脱しているのかをアクセス解析ツールなどで確かめ、バナーの訴求とページ内の問題のどちらを優先して修正すべきかを判断してください。

まとめ

効果的なWeb広告のバナーとは、ターゲットユーザーへ伝えるべき「訴求内容」と、それを直感的に届ける「文字や画像の見せ方」が最適に組み合わさったデザインを指します。
他社の参考事例を活用する際も、単に見た目を真似るのではなく、自社の商品と訴求に合う要素だけを抽出し、情報の優先順位に沿って落とし込むことが重要です。

また、制作したバナー案は、公平な配信条件で比較テストを行い、広告の本来の目的に沿った成果が出ているかで採用を判断しましょう。
表面的なクリック率がどれほど高くても、実際の購入や申し込みに結びつくとは限りません。
バナーへの反応とクリック後の成果をセットで分析し、バナーとリンク先のどちらに改善すべき課題があるのかを見極める視点が不可欠です。

株式会社トモシビでは、デザイナーによる広告バナー制作をはじめ、Web広告運用やアクセス解析を通じた継続的な改善支援を行っています。
自社のターゲットに響くバナー制作や、配信データに基づいた広告パフォーマンスの向上にお悩みの際は、ぜひお気軽にご相談ください。

この記事を書いた人
株式会社トモシビ 石本憲貴
株式会社トモシビ 石本憲貴

WACA認定 ウェブ解析士マスター / AJSA認定 SEOコンサルタント
デジタル庁 デジタル推進委員
京都医健専門学校 スポーツマネジメントテクノロジー科 非常勤講師
大阪リゾート&スポーツ専門学校 スポーツITトレーナー科 非常勤講師

1987年生まれ。関西大学法学部法律学科卒業。
大学在学中、独学でWEBサイト制作 / プログラミング / WEBマーケティングを学ぶ。
大学卒業後、成果を上げる事に徹底的にこだわった「WEBコンサルティング会社」を設立
2020年に「株式会社トモシビ」を設立。『「勝てるWEB戦略」をモットーにしたコンサルティング業』として、アクセス解析/SEO対策/ウェブサイト・LP制作/広告運用など、これまでで240社以上の支援実績。現場の最前線で実作業もこなす現役プレーヤーとして活躍中。
WEBマーケティング、Google Analytics の活用法を教える企業研修・セミナーなどの『講師活動』をこれまで250回以上実施。

【著書一覧】
1. ウェブ解析スペシャリストが教える! 稼ぐサイトをつくる「7つの秘訣」(セルバ出版)
2. 現場で使える Googleタグマネージャー実践入門(マイナビ出版)
3. 1週間でGoogleアナリティクス4の基礎が学べる本(インプレス社)
4. Googleデータポータルによるレポート作成の教科書(マイナビ出版)
5. 自社サイトをコストで終わらせないために ウェブ解析士の事例発表集(31)(Kindle)
6. 自社サイトをコストで終わらせないために ウェブ解析士の事例発表集(37)(Kindle)
7. 自社サイトをコストで終わらせないために ウェブ解析士の事例発表集(51)(Kindle)
8. 自社サイトをコストで終わらせないために ウェブ解析士の事例発表集(57)(Kindle)

この著者の記事一覧