AIで作ったバナーを見て、「直したいところが多すぎて、どこから手をつけるべきか分からない」と止まってしまったことはないでしょうか。
バナーデザインの添削でまず確かめるべきなのは、文字の大きさや配色ではなくこれが何のサービスの広告なのかが伝わっているかです。
この記事では、AIが生成した睡眠アプリのSNS広告バナーを題材に、最初の一手から何を残し、何を削り、何を足したのかを順に解説します。
解説するのは、デイトラのWebデザイナーであるトムです。読み終えるころには、問題がいくつも重なったバナーでも、最初に手をつける場所を自分で判断できるようになります。
・直したい箇所が多いバナーで「最初の一手」が重要になる理由
・最初に直すべき最も致命的な問題の見つけ方（3択クイズで考える）
・コピーを「残す・削る・足す」の3つに分けて整理する手順
・ワイヤーフレームで伝える順番を決め、素材の役割を変えて活かす方法
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
バナーデザインの添削は「最初の一手」で差がつく理由と今回の題材
AIは、機能や写真を綺麗に並べることはできます。
そのうえで、情報と素材の役割や強弱を整理するのは作る側の仕事です。そして直したいところが多いバナーほど、最初の一手で差がつきます。
こちらが今回の添削前のバナーです。
このバナーを実際の広告として使っていくには、文字、写真、レイアウトなど、いくつもの調整が必要です。
ただし、一番先に手をつけるべき場所は1つです。ここを外すと、他を直しても広告の伝わり方はほとんど変わりません。
今回はその最初の一手から、何を残し、何を削り、何を足したのかを順に解説していきます。
修正前のバナーと、色や写真を入れる前のワイヤーフレーム、完成品を比較しながら、情報をどう整理し組み直したのかを追っていきます。
題材は、睡眠リズムを整えたい20代から40代の会社員に向けた、睡眠アプリのPRを行うSNS広告です。
画像生成の際にAIへ伝えたのは、次のような情報と印象です。
- 睡眠の記録
- 毎朝のスコア
- 7日間無料
- 落ち着きや安心感、前向きな朝を感じるといった印象
具体的なフォント、写真、配色、レイアウト、情報の強弱などはAIに任せています。
また、添削しやすい失敗作を選んだわけではなく、最初に生成された1枚をそのまま使用しています。
そのサービスの中心となる、一番大事で重要な機能のことです。今回の睡眠アプリでは「睡眠を記録して毎朝スコアをチェックできる」という機能がコア機能にあたります。何ができるのかを伝える役割を担います。
Beforeバナーで最初に直すべき最も致命的な問題はどこか【3択クイズ】
まずはBeforeのバナーを見ていきます。
男性が朝目覚めた印象と、スマートフォン内のアプリ、あとは機能の説明が全体的に読み取れます。
一見整って見えますが、全体的に文字要素が小さいところや、強弱が弱い印象が少し気になるところです。
ここで問題です。
このバナーには修正していきたい箇所が複数ありますが、その中でも最初に直すべき最も致命的な問題はどこでしょうか。
- A. 何のサービスかが明示されていない
- B. 機能説明が重複している
- C. 人物がスマホより目立っている
3秒で考えてみてください。必要なら、ここで動画を止めても大丈夫です。
正解はA. 何のサービスかが明示されていないです。
もちろんBとCも実際に修正は必要です。ただし最初に確かめるべきなのは、これが何のサービスなのか、それが伝わるのかどうかというところです。
今回のバナーをもう一度見てみると、サービス名が何か、どんなアプリなのかという記載がありません。
どんなサービスなのかが分からなければ、そもそも記憶にも印象にも残りません。
いざ使おうかなと思っても、「あれ、あのアプリ何だっけ」となったときに調べることもできないんですね。
このバナーにはたくさんの情報が載っていますが、判断に必要な情報が欠けている方が、広告としては致命的です。
Beforeには、睡眠の記録やスコア、スマホの画面はもちろん入っています。
ただし、睡眠に関する何かだというのは分かっても、アプリなのかWebサービスなのか、名前は何なのかという情報が全く分かりません。
この動画では先に「バナーがアプリである」とお伝えしましたが、実際の広告ではその前提がない状態で、バナー1枚だけで見られることがほとんどです。
よって、文字を削る前にサービスの正体が伝わる土台を作ることが、最も重要になります。
今回のポイントは機能より先に「これは何の広告か」を伝えること
機能より先に、「これは何の広告か」を伝える。
今回のポイントキーワードは、機能より先にこれは何の広告かを伝えることです。
まず「これは何か」を伝えるコアを決めて、その後にコピーと素材を順に整理していきます。
バナーデザイン添削の手順①コピーを「残す・削る・足す」に分ける
サービスの伝える一番の軸を決めたら、コピーを残す・削る・足すの3つに分けて順に整理していきます。
- 残す：ベネフィット、コア機能
- 削る：複数ある機能説明、複数あるベネフィット訴求、冗長な無料訴求と文言
- 足す：サービスの訴求、サービス名（クイズのAの答えにあたる部分）
残す情報：ベネフィットとコア機能
まず残す情報から見ていきます。
ベネフィットという言葉はあまり馴染みのない方も多いと思いますが、ベネフィットは使った人が得られる変化や結果、つまり未来のことです。
今回は「ぐっすり眠り、すっきり目覚める毎日へ」というワードがベネフィットにあたります。
次にコア機能です。コア機能は、そのサービスの中心となる一番大事で重要な機能です。
今回は「睡眠を記録して、毎朝スコアをチェック。」という機能ですね。
2つを整理すると、上部のベネフィットは使うとどうなれるのか、どんな未来が待っているのかを伝えるもの。
コア機能は何ができるのかを伝えるものです。
これらはそれぞれ役割が違うので、両方とも情報として残します。
削る情報：重複した機能説明・ベネフィット・冗長な無料訴求
次に削る情報です。Beforeには、削るべきだと考えられる情報が4か所あります。順に説明していきます。
まず一番上にある「睡眠を自動で記録」と「毎朝、睡眠スコアを確認」と書いてあるところ。
ここが複数ある機能説明になっています。
コア機能の「睡眠を記録して、毎朝スコアをチェック。」と、結局同じようなことを言ってしまっているんですね。
特に「毎朝、睡眠スコアを確認」は、コア機能の「チェック」という言葉ともほぼ重複しています。なのでここは基本カットしていく方針で調整します。
次に複数あるベネフィット訴求です。
「良い眠りが、明日の自分をつくる。」と書いてあるところですが、一番上のベネフィット「ぐっすり眠り、すっきり目覚める毎日へ」と、ここも2つともベネフィットになります。
ベネフィットは基本1つでいいので、いずれか1つに絞ります。今回は「良い眠りが、明日の自分をつくる。」のワードをカットします。
次に冗長な無料訴求と文言です。
「はじめての方限定」というバズワードですが、バナーを見てアプリを使おうという人は、ほとんどが初めてですよね。
なのでここは「はじめての方限定」というワードをカットして、「7日間無料トライアル」をその分大きくして目立たせていきます。
そして「今すぐ無料で試して」と書いてある部分ですが、すでに「無料トライアル」と書いてあるので、ここも「無料」が重複してしまっています。
よって「今すぐ無料で試して」も冗長な表現としてカットします。
最終的にこの4か所の情報をカットして、空いたスペースに足していく情報を追加する形で調整していきます。
足す情報：サービスの訴求とサービス名
最後に足す情報です。こちらが組んだワイヤーフレームになりますが、実際どこに情報を足したのかを先に説明します。
足したのはサービスの訴求とサービス名です。
サービスの訴求は「眠りを見える化する睡眠アプリ」、サービス名は「Sleepia」というサービスのロゴを追加しています。
重複した情報を削るだけでは、何のサービス名でどんなサービスなのかが分からないので、そこに追加をしていきます。
またボタンの文言は「明日の朝から、はじめよう！」に調整しています。
元の「明日の朝を変えよう！」というワードは、アプリを使えば翌朝から睡眠が変わると約束することになってしまい、もちろんそんなことはできないですよね。
こうした表現は景品表示法に引っかかる可能性が極めて高いので、断定的な表現を避けた方がいいという判断です。
そこで「明日の朝から利用をはじめよう」という、ポジティブに次の行動を自然に促す方へ調整しています。
動画内で追加しているサービス名は、添削の例として用意した架空のサービス名（仮名）です。実在のサービスではありません。
バナーデザイン添削の手順②ワイヤーフレームで伝える順番を整理する
コピーの役割を決めたら、ワイヤーフレーム、つまり色や写真を入れる前の下書きで伝える順番を整理していきます。
こちらが整理した情報の順番です。
- ベネフィット：ぐっすり眠り、すっきり目覚める毎日へ
- サービス訴求：眠りを見える化する睡眠アプリ
- サービス名：Sleepia
- コア機能：睡眠を記録して、毎朝スコアをチェック
- CTA（ボタン）：7日間無料トライアル／明日の朝から、はじめよう！
足りなかった情報を足し、重複した説明を削って、それぞれの役割ごとの塊に整理して分けていきました。
今回ロゴは中央付近に置いていますが、これは上部に文字を集めすぎず、ロゴを視覚的な区切りとして扱うためです。
そのためにコア機能とベネフィットを、上下に意図的に分けています。
上から1番から5番まで順番に読んでいくと、何のサービスで、何ができて、どう試せるのかが上から順に理解しながら読める状態になります。
素材は削除ではなく役割を変えて活かす
ここまでが情報の話で、次に写真の部分の解説に移ります。
写真の素材ですが、Beforeでは人物とスマホが重なってしまっています。
スマホから人物が生えているように見えてしまうんですね。
人物の顔や手の部分はそんなに大きいわけではないのですが、それでも人物の目線の先、顔の向きがどうしても気になってしまいます。
今回PRにつなげたいのは人物ではなく、アプリです。
そこでスマホのアプリのイメージを主役に変更していきます。
人物はもちろん入れてもいいのですが、すがすがしい朝を迎えていると分かるような表現にとどめ、ここまでくっきり入れ込まずに背景のビジュアルとして入れる方針に調整します。
整理すると、次のようなイメージです。
| 素材 | Beforeでの役割 | Afterでの役割 |
|---|---|---|
| 人物 | ビジュアルの主役 | 朝の情景を補う背景 |
| スマホ | ビジュアルの脇役 | アプリを見せる主役 |
| アイコン | 機能を説明 | 夜→朝の流れと余白を補う |
人物はビジュアルの主役だったところから、朝の情景を担う背景へ。
今回は元のバナーの素材を生かすために、朝の日が入る1枚を生成で追加作成し、朝の状況を担う背景として活用しています。
次にスマホですが、アプリのバナーの訴求として、こちらを主役にして使用していきます。
最後にアイコンです。もともとは機能を説明するアイコンとして入っていたところですが、少し役割を変えて、夜から朝への流れと余白を補う役割として使用します。
添削では素材を全部捨てる必要はないと判断し、使える素材はどう活かすかを考えて、このアイコン2つは生かしていく方向で調整しました。
バナーデザイン添削の手順③添削前後のBefore/Afterを比較する
ここで添削前のバナーとワイヤーフレームを見比べていきます。
足りない情報を足して重複を削り、役割ごとの塊に分ける。
そういった調整を全体的にしていくことで、色や写真がなくても、上から情報として読んでいくだけで何のサービスなのかが明確に分かるようになりました。
そこに配色、写真、アイコンを入れて完成したバナーがこちらです。
完成形は、上から次のように読める構成になっています。
- 最初に「ぐっすり眠り、すっきり目覚める毎日へ」で、得られる未来を見せる
- 次に「眠りを見える化する睡眠アプリ」で、何のサービスの広告なのかが分かる（クイズのAの答え）
- その下に「睡眠を記録して、毎朝スコアをチェック」というコア機能を置く
- 右側に実際のアプリ画面を見せるスマホを配置する
- CTAのボタンに「7日間無料トライアル」と「明日の朝から、はじめよう！」を置く
人物は朝の情景を担う絵として背景に配置しました。
「夜から朝になるんだな」という視覚的な絵として、アイコンも残しています。
CTAのボタンは、無料体験の案内から次の行動に自然につながる導線として配置しました。
ここでBefore/Afterを最終的に確認していきます。
勘違いしてほしくないのですが、単に文字を減らして情報を足したわけではありません。
何のサービスかという情報を追加して、冗長に重複している情報を削り、素材の目立つ順番を入れ替えて、広告として理解できる骨格に組み直したのが今回の添削のAfterです。
まとめ：バナーデザインは機能より先に「何の広告か」を伝える
最後に今日の重要ポイントを再度お伝えします。
細かい機能を読まなくても、何のサービスなのかが分かる状態を先に作ることをぜひ意識してみてください。
そのうえで必要な説明だけを残し、素材にも役割を与えることで、メリハリのあるデザインにブラッシュアップすることができました。
自分のバナーができたら、一番目立つ情報だけを見て「これは何の広告か」を一言で答えてみてください。
答えられない場合は、どんな商品やサービスを示す言葉か商品名が足りていないか、入っていても細かい説明や人物写真に負けてしまっています。
AIは、機能や写真を綺麗に並べることはできます。
そのうえで広告の目的を決め、情報と素材の役割や強弱を整理するのは作る側の仕事です。
バナーデザインの添削に関するよくある質問
Q. 直したい箇所が複数あるバナーは、どこから手をつければいいですか？
まず「これが何のサービスの広告なのか」が伝わっているかを確かめます。動画の例では、機能説明の重複や人物の目立ちすぎよりも、サービスが明示されていないことを最初に直しています。ここを外すと、他を直しても伝わり方はほとんど変わりません。
Q. ベネフィットとコア機能は、どちらか1つに絞るべきですか？
両方残します。ベネフィットは「使うとどうなれるのか」、コア機能は「何ができるのか」を伝えるもので、役割が違うためです。一方で、ベネフィットが2つ入っている場合は1つに絞ります。
Q. Beforeで削ったのは具体的にどの部分ですか？
4か所です。重複した機能説明の「睡眠を自動で記録」「毎朝、睡眠スコアを確認」、2つ目のベネフィット「良い眠りが、明日の自分をつくる。」、そして冗長な「はじめての方限定」「今すぐ無料で試して」です。
Q. ボタンの文言を「明日の朝を変えよう！」から変更したのはなぜですか？
アプリを使えば翌朝から睡眠が変わると約束する表現になり、景品表示法に引っかかる可能性が極めて高いためです。断定的な表現を避け、「明日の朝から、はじめよう！」という次の行動を促す表現に調整しています。
Q. Beforeで使われていた素材は捨てないといけませんか？
捨てる必要はありません。動画では、人物を背景へ、スマホを主役へ、アイコンを夜→朝の流れと余白を補う役割へと、役割を変えて活かしています。削除ではなく役割替えで考えるのがポイントです。
バナーデザインの判断力を身につけるならデイトラ「Webデザインコース」
本記事で解説したバナーデザインの添削の考え方は、独学でも押さえることはできます。
ただし、実務で通用するレベルまで体系的に習得するには、現役で活躍するメンターから添削を受けながら学べる環境が近道です。
デイトラの「Webデザインコース」は、実務レベルを想定したカリキュラムと、現役プロによる質問対応が特徴のオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。
今回のような「最初にどこへ手をつけるか」という判断の作り方を、手を動かしながら学びたい方は、ぜひ一度カリキュラムをチェックしてみてください。
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
トム（@yuhei_design）
デイトラのWebデザイナーです。印刷会社に7年務めたのち、2021年に独立しました。現在はLP制作やUIデザインに従事しながら、デザイン×生成AIの実践的な活用方法を発信しています。
