バナーデザインのコツ15選｜クリックされるSNS広告の作り方
目次
バナーデザインのコツは、「1枚1メッセージ」「ひと目で読める文字量」「LPとの一貫性」の3つを守ったうえで、複数案を比べて磨くことです。SNS広告のバナーは、デザインの美しさだけでなく、タイムラインを流し見している人に一瞬で意味が伝わるかどうかで成果が決まります。作る前に決めること、バナーの構成要素、制作の流れ、15の鉄則、訴求別のレイアウトの型、NG/OK例、デザイナーへの依頼テンプレ、配信後の改善の進め方をまとめました。きれいなのにクリックされないバナーの見直しにも使えます。
01SNS広告のバナーは「流し見」される前提で作る
SNSのタイムラインでは、ユーザーは投稿を次々にスクロールしながら見ています。バナー広告は、友人の投稿や好きなアカウントの投稿と並んで表示されるため、じっくり読まれることはほとんどありません。
この前提に立つと、バナーに求められる役割は次の2つに絞られます。
- スクロールする指を止めること
- 「自分に関係がある」とひと目で判断してもらうこと
商品の魅力をすべて伝えるのは、バナーではなくLPの役割です。バナーはLPへの入り口として、「続きを見たい」と思わせることに集中します。
02作る前に決めておく3つのこと
1. 誰に向けたバナーか
ターゲットは年齢や性別だけでなく、「どんな状況で、何に困っている人か」まで決めます。状況が具体的になるほど、写真やコピーの選び方がはっきりします。
2. 1枚で伝えるメッセージは何か
価格の安さ、手軽さ、実績、限定オファーなど、伝えたいことは複数あるものです。しかし1枚のバナーで伝えられるのは、基本的に1つだけです。伝えたいことが複数あるなら、バナーを分けて作り、どれが反応されるかを比べます。
3. クリックした先のLPで何を見せるか
バナーで「初回無料」と打ち出したなら、LPのファーストビューにも「初回無料」が必要です。バナーとLPの言葉・写真・色味をそろえることで、クリック後の離脱を減らせます。
03バナーを構成する4つの要素
| 要素 | 役割 | 目安 |
|---|---|---|
| メインコピー | 誰に何を約束するかを伝える | 最も大きく、ひと目で読める長さ |
| ビジュアル | 指を止める、状況を伝える | 画面の主役。何の写真か一瞬でわかるもの |
| 補足・根拠 | 信頼や具体性を足す | 価格、実績、期間などを小さく |
| ロゴ・CTA | 誰の広告か、何をすればいいか | 邪魔にならない大きさで |
4つの要素は、大きさに明確な差をつけて配置します。すべてを同じくらいの大きさにすると、どこから見ればいいかわからないバナーになります。
04SNS広告バナーのデザインのコツ15の鉄則
情報量
- 鉄則1. 1枚1メッセージに絞る：伝えたいことを1つに決め、ほかはLPに任せる
- 鉄則2. 文字は「ひと目で読める量」まで削る：声に出して読んで、数秒で終わる量が目安
- 鉄則3. 要素の大きさに強弱をつける：メインコピー、ビジュアル、補足の順で明確な差をつける
文字・コピー
- 鉄則4. 抽象語より具体的な言葉を使う：「高品質」より「3年保証」、「お得」より「初回〇〇円」
- 鉄則5. 数字を入れる：期間、価格、量など、事実として示せる数字は目に留まりやすい
- 鉄則6. スマートフォンで縮小して読めるか確認する：作業画面の拡大表示ではなく、実機の表示サイズで確認する
- 鉄則7. 文字と背景のコントラストを十分にとる：写真の上に文字を載せるときは、帯や縁取りで読みやすくする
ビジュアル
- 鉄則8. 写真は「何が起きているか」一瞬でわかるものを選ぶ：雰囲気だけのイメージ写真は避ける
- 鉄則9. 人物の視線や向きでコピーに誘導する：人物がコピーの方向を見ていると、視線が自然に流れる
- 鉄則10. 広告らしすぎない見た目も選択肢に入れる：タイムラインの投稿になじむ写真やUGC風の表現が合う商材もある
色・レイアウト
- 鉄則11. 色は3色程度に絞る：ベース、メイン、アクセントの役割を決める
- 鉄則12. 余白を怖がらない：要素を詰め込むより、余白で主役を引き立てる
- 鉄則13. 配信面ごとの比率で作る：正方形、縦長など、配信面に合った比率で作り、UIと重なる位置に重要な要素を置かない
運用
- 鉄則14. LPと言葉・写真・色をそろえる：クリック後に「違うページに来た」と感じさせない
- 鉄則15. 1枚で完成と思わず、複数案を作って比べる：正解は配信して初めてわかる
コントラストについては、Webアクセシビリティの国際ガイドラインWCAGで、通常の文字は背景とのコントラスト比4.5:1以上という基準が示されています。バナーは画像なのでWCAGの適用対象とは限りませんが、読みやすさの目安として参考になります。
また、Meta広告ではかつて、画像内のテキスト量が20%を超えると配信が制限されるルールがありました。このルールは2020年に撤廃されていますが、テキストを少なめにした画像のほうが成果が出やすいという考え方は、その後も推奨として紹介されています。
05SNS広告バナーの作り方（制作の流れ6ステップ）
バナーは、デザインツールを開く前に決めることが多い制作物です。次の順番で進めると、作り直しが少なくなります。
ステップ1. 目的・ターゲット・メッセージを決める
前述の「作る前に決めておく3つのこと」を、依頼書やメモに書き出します。ここが決まらないまま作り始めると、要素を足し続けて情報過多のバナーになります。
ステップ2. 配信面とサイズ・比率を確認する
同じSNSでも、フィード、ストーリーズ、リールなど配信面によって適した比率や、アプリのUIと重なる範囲が異なります。推奨サイズや入稿規定は変わることがあるため、制作のたびに各媒体の公式ヘルプで最新の内容を確認してください。
ステップ3. コピーを確定する
メインコピーと補足の文言を、デザインの前に確定させます。デザインしながらコピーを変えると、レイアウトの強弱が崩れやすくなります。
ステップ4. レイアウトの型を選び、素材を集める
後述のレイアウトの型6種から、訴求に合うものを選びます。写真は、何が起きているか一瞬でわかるものを優先し、利用許諾を確認したものだけを使います。
ステップ5. 制作し、スマートフォンの実機で確認する
作業画面の拡大表示ではなく、実機のタイムラインに近い大きさで見て、メインコピーが読めるか、UIと重要な要素が重なっていないかを確認します。
ステップ6. 型違いで複数案を用意して配信する
1枚で完成とせず、コピーの切り口やレイアウトの型を変えた案を用意して配信し、数字で比べます。
06訴求別・レイアウトの型6種
| 型 | レイアウト | 向いている訴求 |
|---|---|---|
| 1. コピー主役型 | 大きなコピー＋シンプルな背景 | 強い一言、問いかけ、数字 |
| 2. 人物訴求型 | 人物の写真＋横にコピー | 共感、体験談、専門家 |
| 3. 商品アップ型 | 商品を大きく＋短いコピー | 見た目に特徴がある商品 |
| 4. ビフォーアフター型 | 画面を2分割して変化を見せる | 変化が目に見える商材（表現に注意） |
| 5. 比較型 | 2つの選択肢を並べる | 他の方法との違い |
| 6. 投稿なじみ型 | SNSの投稿のような写真やスクリーンショット | 日常の中で使う商品、アプリ |
最初の配信では、型の違うバナーを複数用意して比べると、どの方向性が反応されるかが早くわかります。ビフォーアフター型や比較型は、効果を誇張したり、根拠なく他社を劣っているように見せたりしないよう注意してください。
07よくある失敗のNG・OK比較
| 項目 | NG | OK |
|---|---|---|
| メッセージ | 価格・実績・特典をすべて入れる | 1つに絞り、ほかはLPで伝える |
| コピー | 「あなたの毎日をもっと豊かに」 | 「朝の支度が10分短くなる」（事実に基づく場合） |
| 文字の大きさ | 小さな文字がびっしり | 大きな一文と、小さな補足 |
| 写真 | 何の商品かわからないイメージ写真 | 商品を使っている場面 |
| 色 | 目立たせたい要素がすべて赤 | アクセント色は1か所だけ |
| LPとの関係 | バナーとLPで別の写真・別の言葉 | 同じ写真・同じキーワード |
| 配置 | ロゴやボタンがUIと重なる位置 | 重要な要素は中央寄りに |
08デザイナーにバナー制作を依頼するときのテンプレ
デザイナーへの依頼が「いい感じにお願いします」だと、きれいでも成果の出ないバナーになりがちです。次の項目を埋めた依頼書を渡すと、意図が伝わりやすくなります。
| 項目 | 記入内容 | 記入例（架空のオンライン英会話） |
|---|---|---|
| 目的 | バナーで何をしてほしいか | 無料体験の申し込み |
| ターゲット | 誰の、どんな状況か | 来月から海外出張がある30代の会社員 |
| メッセージ | 1枚で伝えること | 商談で使う英語だけを1日15分で |
| メインコピー | 確定した文言 | 来月の商談、通訳なしで。 |
| 補足 | 小さく入れる情報 | 初回無料、スマホで受講 |
| 使用素材 | 写真・ロゴ・指定フォント | 指定の人物写真、ロゴデータ |
| サイズ・比率 | 配信面ごとのサイズ | 正方形と縦長の2種類 |
| 遷移先 | LPのURLとファーストビュー | LPのスクリーンショットを添付 |
| 参考 | 好きな方向性、避けたい方向性 | 参考バナー2点、避けたい例1点 |
| パターン数 | 何案ほしいか | 型違いで3案 |
| 表現の注意 | 使えない言葉、法令面 | 「必ず話せる」など保証表現は不可 |
特に「遷移先のLP」と「パターン数」は、書き忘れやすい項目です。LPを共有しておけば、デザイナーが自然にトーンをそろえてくれます。
09配信後の改善の進め方
変えるのは1回に1つだけ
バナーの改善では、コピー・写真・色・レイアウトなど、変える要素を1回に1つに絞って比べます。複数の要素を同時に変えると、何が効いたのかがわかりません。
| 比べる要素 | パターンA | パターンB |
|---|---|---|
| コピーの切り口 | ベネフィット | 悩みの代弁 |
| 写真 | 商品のアップ | 使っている場面 |
| 補足情報 | 価格 | 実績 |
| レイアウトの型 | コピー主役型 | 人物訴求型 |
数字の見方
- クリック率が低い：指が止まっていない、メッセージが伝わっていない。コピーとビジュアルを見直す
- クリック率は高いがCVRが低い：バナーの期待とLPがずれている。LPのファーストビューとの一貫性を確認する
- 最初は良かったが下がってきた：同じ人に何度も表示され、見飽きられている可能性がある。新しい案を追加する
ただし、バナーの数字だけで原因を決めきれないこともあります。クリック率、LPの離脱、LINE登録や問い合わせの反応は別々の画面で見ることが多いため、どのバナーから来た人がどこで止まったかを同じ表にまとめて確認します。作り直す前に受け皿の側を見ておくと、無駄な制作を減らせます。
10公開前チェックリスト
- 1枚で伝えるメッセージは1つに絞られているか
- スマートフォンの実機で、メインコピーがひと目で読めるか
- 文字と背景のコントラストは十分か
- 写真だけで、何の広告か想像できるか
- アクセント色の使用は1か所に絞られているか
- 重要な要素が、アプリのUIと重なる位置にないか
- LPのファーストビューと、言葉・写真・色がそろっているか
- 数字や実績は、事実として示せるものか
- 効果を保証する表現や誇大な表現が入っていないか
- 比べるための別パターンが用意されているか
11よくある質問
Q. バナーは何パターン作ればいいですか
予算や配信量によりますが、最初は方向性の違う案を3〜5パターン用意し、反応を見てから絞り込むのが現実的です。勝ちパターンが見えたら、その型の中で細部を変えた案を追加していきます。
Q. バナーと動画、どちらがいいですか
商材と配信面によります。動画は情報量が多く、使い方や変化を見せやすい一方、制作の手間がかかります。まずはバナーで反応の良い訴求軸を見つけ、その訴求を動画にする進め方もおすすめです。
Q. 自社でバナーを作るときに使えるツールはありますか
テンプレートが豊富なオンラインのデザインツールを使えば、専門のソフトがなくても作れます。ただし、テンプレートをそのまま使うと他社と似た見た目になりやすいため、本記事の鉄則に沿って情報量やコピーを調整してください。
作る案が少なく、配信面も絞られているなら、自社制作で十分です。一方で、比率違いの書き出しや反応が落ちたときの追加が重なると、制作そのものより、結果の振り返りと次の案の検討が止まりやすくなります。自社で続けられるかは、制作時間だけでなく、この工程まで含めて見積もりましょう。
12まとめ
- SNS広告のバナーは流し見される前提で、指を止めて「自分ごと」と思わせることに集中する
- 作る前に「誰に」「1つのメッセージ」「遷移先のLP」を決める
- 作り方は「決める → サイズ確認 → コピー確定 → 型と素材 → 実機確認 → 複数案で配信」の6ステップ
- 15の鉄則で、情報量・文字・ビジュアル・色とレイアウト・運用を点検する
- デザイナーには依頼テンプレで目的とLPを共有し、型違いで複数案を作ってもらう
- 配信後は1要素ずつ比べ、クリック率とCVRの両方で判断する
まずは今配信しているバナーを、15の鉄則に照らして見直すところから始めてみてください。Lic.では、バナーを「作って終わり」ではなく、広告運用の数字を見ながら育てていくものと考えています。
広告のクリックはあるのに、申し込みが増えない？
広告運用を前提に、離脱防止の設計までふくめたLPや、配信用の広告クリエイティブを制作します。公開後も、配信データをもとに改善を続けます。
- 離脱防止まで考えたLP制作
- 配信用の広告クリエイティブ制作
- 配信データをもとにした継続的な改善
まだ具体的に決まっていない段階のご相談も歓迎です。
参考
- W3C「Understanding Success Criterion 1.4.3: Contrast (Minimum)」 https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
- Adweek「Facebook Quietly Scraps Rule That Limited Text in Ad Images to 20%」 https://www.adweek.com/programmatic/facebook-quietly-scraps-rule-that-limited-text-in-ad-images-to-20/
- Jon Loomer「Facebook Text in Ad Image Rule」 https://www.jonloomer.com/facebook-text-in-ad-image-rule/
