必要な情報はひと通り入れたはずなのに、なぜかバナーが伝わらない。そんな手応えのなさを感じたことはないでしょうか。
バナーデザインで見直すべきなのは情報の量ではなく、関係する情報がまとまっていて、そのまとまりに役割があるかです。
この記事では、AIが生成した秋限定の焼き菓子ギフトのSNS広告バナーを題材に、コピー・価格・申し込みの案内をどうまとめ直したのかを順に解説します。
解説するのは、デイトラのWebデザイナーであるトムです。読み終えるころには、情報が散らばって判断に迷わせているバナーを、自分で整理できるようになります。
・情報が入っているのに伝わらないバナーで起きていること
・バナーに必要な情報を分ける「5つの役割」の考え方
・コピー・価格・申し込みの案内を役割ごとにまとめる具体的な手順
・ワイヤーフレームとBefore/Afterで見る、整理前後の変化
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
今回のお題は秋限定の焼き菓子ギフトのSNS広告バナー
見やすいデザインは、ただ情報を減らした結果ではありません。
AIはたくさんの情報を1枚へ収めることはできます。そのうえで、何を一緒に見せ、何を削り、何を残すのかを判断するのは作る側の仕事です。
まずはこちらのバナーを見てください。
そのうえで、最終的にいくら払うのか、いつまでに申し込めるのかを、数秒で明確に答えられるかどうか考えてみてください。
すぐに答えられなかった人もいると思います。
このバナーは秋の雰囲気そのものはよくできています。それでも、支払う金額と申し込み期限を1度で受け取れていません。
広告では、その迷いが離脱につながる要因になります。
今回は、見た人が判断に迷う原因と、初期のデザインの良さを消さずにブラッシュアップする手順を解説していきます。
AIが作った修正前の問題を言語化し、なぜ修正する必要があるのかも合わせて見ていきます。
題材は、秋限定の焼き菓子ギフトを案内するSNS広告です。
画像生成AIへ伝えたのは、次の要件です。
- 焼き菓子三種の詰め合わせ
- 税込3,500円
- 早期予約は9月10日まで
- 予約へ進めること
- 上品で温かく、秋らしい印象にすること
具体的な文言、写真、配色、レイアウト、見せ方の強弱はAIに任せました。
また、添削用の欠点はあえて指定せず、最初に生成された1枚をそのまま使用しています。
Beforeバナーで最初に手をつける場所はどこか【3択クイズ】
ここで問題です。
この雰囲気を活かしながら、最初に手をつけるならA・B・Cのどれが正解でしょうか。
- A. 商品写真をもっと大きくする
- B. 秋らしい装飾を増やす
- C. 関係する情報を役割ごとにまとめる
3秒で考えてみてください。必要なら、ここで動画を止めても大丈夫です。
正解はC. 関係する情報を役割ごとにまとめるです。
もちろんAとBも、仕上げの工程では調整していきます。
ただしBeforeは、写真も秋らしい雰囲気もすでに大きく方向性を外していません。
先に直したいのは、商品名・価格・割引・締め切り・予約の情報が、別々の情報として画面の中に散らばってしまっているところです。
情報がバナーの中にあるだけでは、見る人が自分で情報の関係性をつなぎ直さなければいけなくなります。
バラバラに情報が散らばっているところが、このバナーの一番のマイナスポイントです。
そこで今回は、その点を重点的に調整していく添削になります。
Call To Action（コール・トゥ・アクション）の略で、見た人に取ってほしい行動を促す要素のことです。バナーでは「ご予約はこちらから」のようなボタンがこれにあたります。
今回のポイントは「情報をまとめて役割を持たせる」こと
情報をまとめて、役割を持たせる。
同じ判断に使う情報を近くに置き、そのまとまりが何を伝えるのかを決める。
今回のキーワードは情報をまとめて役割を持たせることです。
ここからは、同じ判断に使う情報を近くに置き、そのまとまりが何を伝えるのかを決めていきます。
まずBeforeのいい部分は残す
前提として、Beforeのいい部分は残していきます。
今回そのまま使えそうだと判断したのは、次の4点です。
- 暖色系の配色
- 焼き菓子の写真
- リボンの装飾と、落ち着いた画面全体の雰囲気
- 中央に商品写真を置く大きな構図（レイアウト）
バナーに必要な情報を5つの役割に分ける
そのうえで、バナーに必要な情報を5つの役割に分けました。
- 誰に：大切な方へ
- 何を：焼き菓子三種ギフト
- いくらで：通常価格／早期予約価格
- いつまでに：9月10日 申込締切
- どこから：ご予約はこちらから
これらの情報は、ただ近くへ置くということではありません。
同じ判断に使う情報を近くに置き、そのまとまりが何であるのかを伝えるのかを決めるということです。
ここからは、その詳細を順番に解説していきます。
バナーデザインの情報整理①コピーと商品名を2つの役割にまとめる
まずはコピーと商品名から解説していきます。
贈る理由のコピーは、見せる言葉として置き直す
Beforeには、「大切な方へ、やさしい秋の味わいを」と書いてある部分があります。
ただし、バナーの文言としてはかなり小さく扱われています。
これはすごくいい言葉なので、キャッチーな言葉として受け取ってもらえる場所へレイアウトを変更し、見せる言葉として「贈る理由」を提示していく形に調整します。
誰にどんな気持ちで送るのかを伝える役割を果たす言葉なので、現状よりもサイズを上げ、文字の太さも太くします。
そのうえで、「秋限定」という言葉とワンセットで置いていく形に調整していきます。
重複した商品名のコピーは1つにまとめる
次に商品名です。Beforeには「実りの季節を贈る焼き菓子ギフト」と「焼き菓子3種詰め合わせ」という記載があります。
ただし、この2つはほぼ同じことを言っていて、情報が重複しています。
そこでこの2つの文言は1つにまとめられると判断し、商品を理解する言葉として「焼き菓子三種 詰め合わせギフト」という文言に調整しました。
これは具体的に何の商品なのかを伝える役割を果たす言葉になります。
結果として、一番上に「大切な方へ、やさしい秋の味わいを」、その後に「焼き菓子三種 詰め合わせギフト」という流れになるよう調整していきます。
バナーデザインの情報整理②価格は計算させず最終価格まで見せる
Beforeには「税込3,500円」と「早期予約で200円OFF」という2つの表記があります。
ただし、この3,500円が通常価格なのか、割引後の価格なのかが一目では分かりません。
また200円引きのあと、最終的にいくらになるのかを、見る人が頭の中で計算する必要があります。これはすごく不親切です。
そこで、通常価格が3,500円（税込）、早期予約価格が3,300円（税込）という形に情報をまとめて整理していきます。
値引き額だけではなく、支払う金額まで見せていくということです。
これで、価格を見た人がその場で判断しやすくなっていきます。
バナーデザインの情報整理③申し込みの案内は締切と予約を一つの流れにする
次は申し込みの案内です。締め切りと予約の流れを1つに調整していきます。
Beforeの下部にある情報の流れを見ていくと、次のようになっています。
- 早期予約で200円OFF
- 早期予約締切 9/10まで
- 税込3,500円
- ご予約はこちらから
読んでみた印象としても、情報がバラバラしてまとまりがない印象です。
ここではシンプルに情報が伝えられるように、いつまでに→どこからという流れでセットにして情報を整理します。
具体的には、申し込み締め切りとCTA（ボタン）の部分を1つに近接グルーピングしていくという流れです。
整理後は「2026年9月10日（木）」「ご予約はこちらから」という流れに調整します。
いつまでに、どこから申し込むのか。この2つが続けて分かれば十分です。
関係のある要素同士を近くに配置し、関係のない要素とは距離を取ることで、見る人に「これはひとまとまりの情報だ」と直感的に伝える考え方です。デザインの基本原則の一つで、今回のように締切とボタンをセットで見せたいときに使います。
バナーデザインの情報整理④判断材料として弱い情報は削除する
次に削除する情報です。判断材料として弱い情報は外していきます。
今回外すのは、次の4つです。
- 上品なパッケージ
- 手提げ袋付き
- 指定日配送
- 焼き菓子ごとの名前と説明
これらの情報は、最初に「欲しい」「予約したい」と判断するための情報としては少し弱いと判断しました。
よって、これらはバナーから外していきます。
整理した情報でワイヤーフレームを組む
ここまでの情報をもとに整理し、情報の役割を決めた下書き（ワイヤーフレーム）がこちらです。
上から読んでいくと、次のようになります。
- 秋限定／大切な方へ、やさしい秋の味わいを。
- 実りの季節を贈る、焼き菓子3種詰合せギフト
- 早期予約 ¥3,500（税込）→ ¥3,300（税込）
- 申込締切 2026.9/10（木）／ご予約はこちらから
すごくスムーズに読めるようになりました。
色や写真を入れる前の、情報の配置だけを決めた下書きのことです。装飾で印象をごまかせない状態なので、情報の順番や役割が整理できているかを確かめるのに向いています。
完成形と比較する
ではBeforeと、ワイヤーフレームのAfterを比較していきましょう。
色や写真を入れる前から、情報を見る順番が整理できているのが分かりますね。
実務で2つの価格を並べるときの注意点
なお今回のように価格を2つ並べていくときは注意が必要です。
実務では、過去の販売価格や販売の期間、早期予約後の価格を出していく場合、実際の販売計画をクライアントに確認する必要があります。
裏付けのない価格を表示しないように意識して調整する必要があります。
必要であれば注釈も併せて出していきます。
今回のバナーには注釈の記載はありませんが、実務で実際に2つの価格を置いていくときには必ず確認をしてください。
ワイヤーフレームに写真と配色を当てた完成形
そのワイヤーフレームへ写真と配色を当てていった完成形がこちらです。
調整の意図は次のとおりです。
| 箇所 | 調整の意図 |
|---|---|
| 上部 | リボンで訴求を一つに |
| 価格 | ゴールドで適度に強調 |
| 背景 | 白とベージュで区切る |
| 文字 | 大きさに合わせて書体を使い分け |
上部は「秋限定」と「大切な方へ、やさしい秋の味わいを。」を、繋がった1つのリボンの形で表現しています。
商品名は装飾を増やしすぎず、文字サイズと改行、余白で分かりやすく伝わるように調整しています。
早期予約のバッジはゴールド系のカラーに変えてアクセントにし、秋らしい雰囲気を保ちながら価格のメリットだけを適切に伝えられるように調整しました。
書体は、日本語はA1明朝、数字はAdobe Garamond、小さい補足はNoto Serif JPを使用して全体を調整しています。
まとめ：バナーデザインは情報をまとめて役割を持たせる
最後に、今日持ち帰ってほしいことです。
見やすいデザインは、ただ情報を減らした結果ではありません。
関係する情報をまとめて、それぞれ何を伝えるのかを決めた結果が、最終的に分かりやすいデザインにつながっていきます。
自分のバナーができたら、誰に、何を、いくらで、いつまでに、どう行動してほしいのかを、まずは文章だけで並べてみてください。
そのあと、同じ判断に使う情報が近くにまとまっているかを注意して確認していきましょう。
AIはたくさんの情報を1枚へ収めることはできます。
そのうえで、何を一緒に見せ、何を削り、何を残すのかを判断するのは作る側の仕事です。
バナーデザインの情報整理に関するよくある質問
Q. 情報が散らばっているバナーは、どこから直せばいいですか？
関係する情報を役割ごとにまとめるところからです。動画の例では、商品写真を大きくすることや装飾を増やすことよりも先に、商品名・価格・割引・締め切り・予約が別々に散らばっている状態を整理しています。
Q. バナーに必要な情報の「5つの役割」とは何ですか？
誰に・何を・いくらで・いつまでに・どこから、の5つです。今回のバナーでは「大切な方へ」「焼き菓子三種ギフト」「通常／早期予約価格」「9月10日申込締切」「ご予約はこちらから」がそれぞれに当たります。
Q. 割引価格はどう見せるのが親切ですか？
値引き額だけでなく、支払う最終価格まで見せます。動画では「税込3,500円」と「早期予約で200円OFF」という表記を、「通常価格3,500円（税込）→早期予約価格3,300円（税込）」に整理し、見る人に計算させない形へ変えています。
Q. 実務で2つの価格を並べるときに気をつけることはありますか？
実際の販売計画をクライアントに確認することです。過去の販売価格や販売期間、早期予約後の価格を出す場合は、裏付けのない価格を表示しないようにし、必要であれば注釈も併せて出します。
Q. 削る情報はどう判断すればいいですか？
最初に「欲しい」「予約したい」と判断するための材料になるかで判断します。動画では、上品なパッケージ・手提げ袋付き・指定日配送・焼き菓子ごとの名前と説明の4つを、判断材料として弱いと考えてバナーから外しています。
バナーデザインの判断力を身につけるならデイトラ「Webデザインコース」
本記事で解説したバナーデザインの情報整理の考え方は、独学でも押さえることはできます。
ただし、実務で通用するレベルまで体系的に習得するには、現役で活躍するメンターから添削を受けながら学べる環境が近道です。
デイトラの「Webデザインコース」は、実務レベルを想定したカリキュラムと、現役プロによる質問対応が特徴のオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。
今回のような「情報をどうまとめ、どう役割を与えるか」という判断の作り方を、手を動かしながら学びたい方は、ぜひ一度カリキュラムをチェックしてみてください。
なお、バナー添削シリーズでは他のテーマも解説しています。合わせて読んでみてください。
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
トム（@yuhei_design）
デイトラのWebデザイナーです。印刷会社に7年務めたのち、2021年に独立しました。現在はLP制作やUIデザインに従事しながら、デザイン×生成AIの実践的な活用方法を発信しています。
