生成AIで買取サービスのバナーを作ってみたら、写真も配色も落ち着いていて、見た目はきれいにまとまった。
でも、パッと見て「何の広告なのか」がいまひとつ伝わってこない。そんな経験はないでしょうか。
バナーで最初に決めるべきなのは、装飾ではなく誰に、何を、どんなメリットとして伝えるかという「広告の主語」です。
この記事では、AIが作った買取サービスのSNS広告を題材に、Before、文字だけで順番を組んだワイヤーフレーム、完成したAfterを比べながら、情報をどう絞ったかを解説します。
解説するのは、デイトラのWebデザイナーであるトムです。読み終えるころには、自分でバナーを作るときも、見た目の前に最初に見せる情報と削る情報を判断できるようになります。
・AIが作った買取バナーで、最初に変えるべき箇所
・雰囲気のコピーでは「何を買い取るか」「売る側のメリット」が伝わらない理由
・Beforeの良さを残したまま、言葉を差し替えて重複する情報を削る手順
・ワイヤーから完成形、品目ごとのバナー5種類への展開までのBefore/After
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
今回のお題はAIが作った買取サービスのバナー
手元の腕時計を売ろうと思って広告を見るなら、最初に何を知りたいでしょうか？
今回は、AIが作った買取サービスのバナーを添削していきます。
Beforeのバナーには、時計とバッグが大きく写っていて、落ち着いた雰囲気のバナーになっています。
他の買取商品も並んでいて、一見すると情報はそろって見えます。
でも、最初に目に入るのは「次の価値へ」という言葉です。
売りたい人がこの言葉を見て、「自分の品物を買い取ってもらえそう」とすぐに判断できるでしょうか？
今回は、Before、文字だけで順番までを組んだワイヤーフレーム、そして完成したAfterまでを比べながら、広告の主語をどう決め、情報をどう絞ったかを解説します。
自分でバナーを作るときも、見た目の前に誰に、何を、どんなメリットとして伝えるかを決め、最初に見せる情報と削る情報を判断できるようになるのがゴールです。
今回の前提：AIに伝えた条件と、任せたこと
題材は、買取サービスのSNS広告です。
高級腕時計とブランドバッグを取り上げながら、他にも幅広い品物を扱う設定で、査定の案内や依頼につながるページへ進んでもらうSNS広告をAIに作ってもらいました。
| 区分 | 内容 |
|---|---|
| AIに渡した条件 | 商材の売却を考えているという対象／サイトへの誘導／落ち着いて相談しやすい印象 |
| AIに任せたこと | コピー／写真風の素材／配色／レイアウト |
AIに伝えたのは、対象・誘導先・印象という基本条件までです。
コピーや写真風の素材、配色、レイアウトはすべてAIに任せています。
写真や色を入れる前に、文字と枠だけで情報の配置や順番を組んだ下書きのことです。今回の動画では、BeforeとAfterの間にワイヤーを挟むことで、見た目ではなく情報の順番が改善されたかを確認しています。
買取バナーのBeforeの問題点を考える
先ほどのBeforeをもう一度見てみましょう。
今回は、売却を考えている人に向けた買取サービスのSNS広告です。
高級腕時計とブランドバッグを取り上げながら、他にも幅広い品物を扱うサービスであることが分かります。
今回AIに伝えた条件は、次の4つです。
- 時計やブランドバッグの売却を考えていること
- 不用品の買取を行うサービスであること
- 査定につながるページへの誘導
- 落ち着き・相談しやすい印象
目的は、査定の案内や依頼につながるページへ進んでもらうことです。
では、この1枚で最初に変える場所を考えていきましょう。
問題：このバナーで最初に変えるべき箇所は？
ここで問題です。このバナーで最初に変えるべき箇所はどこでしょうか？
- A. 金色の装飾を増やす
- B. 買取品目を増やす
- C. 何の広告か一言で示す
3秒で考えてみてください。
正解はC「何の広告か一言で示す」です。
Aの装飾は必須ではありません。
Bの買取品目の追加も、すでに十分な品目数があるので、これ以上増やす必要はありません。
もし追加するとしても、買取広告だと分かるようにしてからの調整が必要です。
「次の価値へ」では、何を買い取る広告かが分からない
では、何の広告かを一言で示すには、具体的にどこをどう変えればいいのでしょうか。
まず、Beforeの大きな文字には「使わなくなった、その大切な品物を 次の価値へ」とあります。
一見きれいで魅力的な表現にも見えます。
ただ、それだけでは何を買い取る広告かも、売りたい人にとってどんなメリットがあるかも分からないのです。
売る人にとっての欲求は、「使っていない時計やバッグを手放したい」、そして「手放すことで対価（お金）を得たい」といったものが考えられます。
そのため、今の訴求のままでは売る側にとってのメリットが非常に弱い状態です。
コピーの部分は、何をしてくれるのかを具体的に示す必要があります。
また、すぐ下には「高級腕時計・ブランドバッグをはじめ、さまざまな品物を丁寧に査定・買取いたします」と書かれています。
ただ、バナー全体で見てみると、この文字は非常に小さいです。
現状だと「次の価値へ」が目立ちすぎていて、買取サービスだと分かる具体的な情報が、雰囲気のコピーより後ろに置かれているのです。
これでは、バナー全体の雰囲気は良くても、実際に伝えたい情報が埋もれてしまいます。
POINT：広告の主語を、先に決める
今回のポイントとなるキーワードは、「広告の主語を先に決める」です。
誰に、何を、どんなメリットとして伝える広告なのかを一文にします。
この一文が決まると、写真の大きさも、補足の順番も、ボタンまでの道筋も決めやすくなります。
今回なら、使わなくなった高級腕時計やブランドバッグを売りたい人へ、買取サービスだと伝えることが最も優先度が高い情報です。
そのうえで、他の品物も扱うことを補足していきます。
広告で見る人に働きかける「売り」のポイントのことです。今回のBeforeでは「次の価値へ」という雰囲気の言葉が訴求の中心になっていて、売る側が得られる具体的なメリット（高価買取など）が伝わりにくい状態でした。
買取バナーのBeforeの良さは活かす
ここからは、要素を細かく見て、情報や要素を整理するところから進めていきます。
まずは、Beforeから残す要素を先に整理します。
| 要素 | Beforeの状態 | 判断 |
|---|---|---|
| 商品写真 | 時計とバッグが右上に大きく写っている | 何の商品か明確に伝わるので、そのまま残す |
| 色と雰囲気 | 緑ベースで黄土色がアクセントの落ち着いたトーン | そのまま活かす |
| 品目 | 複数並んでいて、扱う幅広さは既に伝わる | 画像がやや多すぎるので、画像を減らす方向で調整 |
| 行動 | 「まずは無料査定をお申し込みください」という導線がある | そのまま活かす |
1つ目の商品写真は、何の商品かが明確に伝わるので、そのまま残してよさそうです。
2つ目の色と雰囲気も、緑ベースに黄土色がアクセントになった落ち着いたカラーで、そのまま活かせます。
3つ目の品目は、扱う幅は伝わりますが、画像がやや多すぎるのが気になるポイントです。ここは画像を減らしていく方向で調整します。
4つ目の行動は、最下部に「まずは無料査定をお申し込みください」とあり、これもそのまま活かせます。
この4つの要素は、すべて活かしたまま調整を進めていきます。
AIが作ったバナーをゼロから作り直すのではなく、良いところを残してから直すのがポイントです。
買取バナーの情報の整理：売りたい人が知りたいことから考える
読み手がまず知りたい3つのこと
次に、売りたい人が知りたい情報を整理していきます。
売りたい人が広告を見て、まず確かめたいことは3つあります。
| 知りたいこと | 内容 | バナーでの対応 |
|---|---|---|
| 何を？ | 自分の品物は買取対象なのかどうか | 時計とバッグを言葉と写真の両方で分かるようにする。テキストも既存よりもっと大きく |
| メリットは？ | 売る価値を感じられるか | 「次の価値へ」では弱いので、より具体的な訴求に変更する |
| 相談できるのか？ | 安心して査定を任せられるか | 安心して任せられるという表現を、より大きく見せる |
1つ目は、自分の品物が買取の対象であるかどうかです。
ここでは、時計とバッグを言葉と写真の両方で分かるようにしていきます。
そのため、時計とバッグのテキストも既存よりもっと大きくする必要があります。
2つ目は、売るメリットを感じられるかどうかです。
どんな価値を伝えるか、その言葉を選んでいきます。
問題Cで挙げた「次の価値へ」の部分ですね。
ここはテキストそのものを、より具体的な情報に変更していきます。
3つ目は、安心して査定を任せられるかどうかです。
相談への不安を減らす補足が必要です。
雰囲気の言葉を、具体的な表現に差し替える
次に、言葉をどう変えるかを見ていきます。
- 「使わなくなった、その大切な品物を次の価値へ」→ カット
雰囲気はいいものの、何をどうしてくれるのかが分かりにくいのでカットします。
代わりに時計とバッグの買取を先に示し、「高価買取」というメリットを前に出します。
こうすることで、何をどうしてくれるのかが具体的に分かります。 - 「専門のスタッフが丁寧に対応」→ 生かす
相談の安心につながるので、そのまま残します。 - 「安心・安全の買取サービス」「簡単手続きでスピーディーに査定」→ カット
これらの文言は「専門のスタッフが丁寧に対応」という表現とぶつかってしまうのでカットします。
安心・安全といった表現も、「丁寧に対応」で十分伝わります。
その分、「専門のスタッフが丁寧に対応」を現状よりも大きく配置して目立たせます。 - 「まずは無料査定をお申し込みください」→ 生かす
文言を生かしたまま、「無料査定のお申し込みはこちら」のように少しコンパクトに文言を調整し、その分文字を少し大きくできるようにします。
赤入れで重複する情報を整理する
今の整理を、実際に赤入れしてバナー全体に反映すると、このようになります。
少し細かくて分かりづらいですが、情報1つ1つを見て、必要か否かを判断して整理しています。
- 時計とバッグの大きな写真は、そのまま残す
- 最初の抽象的なコピーは、「高級腕時計・ブランドバッグ 高価買取」に差し替える
- 「こんな品物も買い取ります」の下に並ぶ写真はカットするが、扱う品目の情報は短いラベルですべて残す
- 「専門のスタッフが丁寧に対応」は生かしてサイズアップ
- 「安心・安全」や「簡単・スピーディー」は、先ほど説明したようにカット
- 無料査定への導線は、右側の文言のみカットし、文言を調整して残す
このように全体の情報を整理する際は、ただ減らすのではありません。
空いたスペースにどんな情報を入れていくのかをイメージしながら整理していくことが、とても重要です。
整理した原稿
これらを踏まえて整理した原稿がこちらです。
| 役割 | 原稿 |
|---|---|
| 見出し | 高級腕時計・ブランドバッグ 高価買取 |
| 特徴 | 専門スタッフが丁寧に対応 |
| 品目 | 宝石・ジュエリー、カメラ、美術品・骨董品、楽器、食器 |
| ボタン | 無料査定のお申込みはこちら |
特徴・品目・ボタンで重複する情報がなくなりました。
情報がシンプルに伝わる状態にすることができています。
この原稿を活用して、構成を再設計していきます。
原稿やデザインに対して、修正指示を赤字などで直接書き込むことです。今回は、Beforeのバナーの上に「カット」「生かす」「サイズアップ」などを書き込み、要素ごとに残すか削るかを判断しています。
買取バナーの構成を再設計する
整理された原稿から作成したワイヤーフレームがこちらです。
上から「高級腕時計・ブランドバッグ」、その次に「高価買取」を置いています。
続けて「専門スタッフが丁寧に対応」。
他の品目は短いラベルにまとめ、最後に無料査定の申し込みボタンへつなげています。
写真や色を外しても、買取対象から査定への行動まで読める順番へ調整しています。
BeforeとWireを比べる
BeforeとWireを比べてみます。
Beforeは「次の価値へ」が最も大きく、買取対象はその下の小さな説明にあり、非常に分かりづらいものでした。
Wireでは、時計とバッグ、そして買取の訴求がひと目で伝わるようになっています。
売りたい人が判断する順番へ情報の位置と強さを変えることで、情報を伝わりやすく、大きく改善することができました。
買取バナーのデザインを調整する
情報の順番が決まったので、デザインを調整していきます。
テーマは「主語を先に、商品を大きく」です。
| 項目 | 調整内容 |
|---|---|
| カラー | 既存バナーを踏襲（緑と黄土色） |
| 商品 | 時計とバッグを大きく見せる |
| 他の品目 | 写真一覧から短いラベルへ変更 |
| フォント | 既存のバナーを踏襲（リュウミン、Noto Serifなど） |
まず、買取対象の言葉を先に置き、時計とバッグを画面に大きく配置します。
カラーは既存のバナーを踏襲し、緑と黄土色。
フォントはリュウミンやNoto Serifといった明朝体・セリフ体を使用して、Beforeの落ち着いた品のある雰囲気を踏襲しています。
他の品目は、写真からワイヤーのまま短いラベルで調整します。
時計とバッグの画像は生成AIを活用して画角を調整しながら、文字と商品が目に入る順番に整えています。
完成したAfterバナー
完成したAfterがこちらです。
最初に「高級腕時計・ブランドバッグ」、次に「高価買取」を大きく見せています。
時計とバッグの写真、そして品目を大きく配置することで、何を買い取ってくれるのかがシンプルに伝わります。
他の品目は下のラベルで補足し、最後に「無料査定のお申込みはこちら」へつなげています。
既存バナーの落ち着いた雰囲気は残しながら、何の広告かと次への行動が明確に伝わるように調整しました。
文字の端に「うろこ」や「セリフ」と呼ばれる飾りがある書体のことで、日本語では明朝体がこれにあたります。リュウミンは代表的な明朝体、Noto SerifはGoogleが提供するセリフ体です。高級感や落ち着いた印象を出したいときによく使われます。
買取バナーの添削前後の比較
BeforeとAfterの2枚を並べて比較します。
Beforeは写真も色も整っていますが、最初に目に入るのは「次の価値へ」です。
画像は右側にあるものの、「高級腕時計・ブランドバッグ」という表現は小さく、分かりづらくなっています。
Afterは、時計とバッグの買取から入り、商品・補足・査定の行動へスムーズに進むことができます。
変更した中心は、装飾の量やバランスではありません。
売りたい人が判断する情報の順番です。
情報の流れや強弱を整理したことで、伝わりやすさも大きく改善することができました。
完成した1枚を、AIで品目ごとのバナーに展開する
また、完成した1枚をもとにAIを活用して、買取品目ごとのバナーも5種類作ってみました。
内訳は、楽器、美術品・骨董品、食器、カメラ、宝石・ジュエリーです。
並べると、同じ情報の組み立てから、品目ごとの広告へ展開できることが分かります。
このように、土台となる情報デザインを整理できると、パターン展開も容易に行うことができます。
まとめ：買取バナーは「広告の主語」を先に決めて改善する
今日の持ち帰りは、「広告の主語を先に決める」です。
バナーを作る前に、誰に、何を、どんなメリットとして伝えるのか。
これらを整理することで、デザインの情報の伝わりやすさが大きく変わっていくことを、ぜひ覚えておいてください。
伝わらなければ、飾りを足す前に、誰に、何を、どんなメリットとして伝えるかをデザインではなく情報から整理していきましょう。
AIは整った見た目の広告をすぐに作れます。でも、見る人が判断する順番に情報を並べ、掲載できる表現かを確かめるのはデザイナーの仕事です。
こうした目的から情報と見せ方を組み立てる考え方は、デイトラのWebデザインコースでも手を動かしながら学べます。
買取バナーのデザインに関するよくある質問
Q. AIで作ったバナーを直すとき、最初に何を変えればいいですか？
何の広告かを一言で示すところからです。動画では、金色の装飾を増やすことや品目を増やすことよりも先に、買取サービスだと分かるように主語を示すことを正解にしています。
Q. 「次の価値へ」のような雰囲気のコピーはダメなのですか？
一見きれいで魅力的ですが、それだけでは何を買い取る広告か、売る側にどんなメリットがあるかが伝わりません。動画では「高級腕時計・ブランドバッグ 高価買取」のように、何をしてくれるのかが具体的に分かる表現に差し替えています。
Q. 「広告の主語を決める」とは、具体的に何をすることですか？
誰に、何を、どんなメリットとして伝える広告なのかを一文にすることです。この一文が決まると、写真の大きさ・補足の順番・ボタンまでの道筋が決めやすくなります。
Q. 情報を減らすとき、どう判断すればいいですか？
重複する情報や冗長な表現を見つけてカットします。動画では「安心・安全」「簡単・スピーディー」が「専門のスタッフが丁寧に対応」と意味がぶつかるためカットしました。ただ減らすのではなく、空いたスペースに何を入れるかをイメージしながら整理するのがポイントです。
Q. 品目が多いときは、写真を全部並べた方がいいですか？
動画では、品目の写真はカットし、扱う品目の情報は短いラベルですべて残しています。写真は主役の時計とバッグに絞り、他の品目は補足として見せることで、何を買い取る広告かがシンプルに伝わるようにしています。
買取バナーのような情報設計を身につけるならデイトラ「Webデザインコース」
本記事で解説したAIバナーの添削や、広告の主語から情報を組み立てる考え方は、独学でも押さえることはできます。
ただし、実務で通用するレベルまで体系的に習得するには、現役で活躍するメンターから添削を受けながら学べる環境が近道です。
デイトラの「Webデザインコース」は、実務レベルを想定したカリキュラムと、現役プロによる質問対応が特徴のオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。
見た目を整えるだけでなく、「誰に何を伝えるか」から考えるデザインを手を動かしながら学びたい方は、ぜひ一度カリキュラムをチェックしてみてください。
なお、バナー添削シリーズでは他のテーマも解説しています。合わせて読んでみてください。
- AIバナー添削｜求人バナーは「判断材料」で改善する
- AIバナー添削｜公開前に見た目より先に根拠を確認する手順
- バナーデザイン添削｜使う人の「決める順」で情報を並べ替える方法
- バナーデザイン添削｜情報を5つの役割にまとめて伝える方法
- バナーデザイン添削｜伝わらない広告を直す最初の一手3ステップ
- バナーデザインは情報整理から｜AI生成バナーを直す3ステップ
- バナーデザインは情報の優先順位で決まる｜AIバナー添削4ステップ
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
トム（@yuhei_design）
デイトラのWebデザイナーです。印刷会社に7年務めたのち、2021年に独立しました。現在はLP制作やUIデザインに従事しながら、デザイン×生成AIの実践的な活用方法を発信しています。
