生成AIで作ったバナーが、ぱっと見はきれいに仕上がっている。このまま公開してしまっていいのか、迷ったことはないでしょうか。
AIバナーの添削で最初に見るべきなのは、装飾やレイアウトではありません。そこに書かれた内容を、そもそも広告に載せて問題ないかです。
この記事では、AIが作った夜のヘアオイルのSNS広告を題材に、根拠が必要な表現の洗い出しから、原稿・ワイヤーフレーム・デザインへの反映までを順に解説します。
解説するのは、デイトラのWebデザイナーであるトムです。読み終えるころには、自分のバナーでも確認が必要な箇所を見つけ、誰に何を確認すればいいか判断できるようになります。
・AIバナーを調整する前に、最初に確認すべきこと
・効果・使用感・商品仕様・価格と購入条件から、根拠が必要な表現を洗い出す方法
・一次確認と最終確認の分け方と、根拠を確認できる情報だけで原稿を整理する手順
・ワイヤーフレーム、デザイン調整、Before/Afterで見る添削の全体像
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
今回のお題はAIが作った夜のヘアオイルのSNS広告バナー
まずは、生成AIで作成したこちらのバナーを見てください。
もしこのバナーの調整を任されたら、どこから手をつけますか？
バナーには、夜の雰囲気、商品のボトル、価格、購入ボタンまで入っています。
パッと見ると、このまま使えそうに見えるかもしれません。
しかし、そのまま使用するとリスクの高い場所が、実はいくつか存在します。
今回の題材は、ブランドが消費者へ直接販売をする、夜のヘアオイルのSNS広告です。
画像生成AIに伝えた主な要件は、次の5つだけです。
- 美容商品・ヘアオイル1本
- 20〜40代の女性向け
- 初回限定・送料無料
- 夜のセルフケア商品
- 高級感と品のある雰囲気
具体的なコピー、写真、商品デザイン、価格の見せ方、情報の強弱はAIに任せています。
添削用の欠点もあえて指定せず、最初に生成された1枚をそのまま使用しています。
このAIのバナーを実務で使えるようにするには、何を確かめ、どう判断し、その上でどう直す必要があるのか。
この記事では、その流れを順に解説していきます。
最後まで読むと、自分のバナーでもそのまま使わずに確認が必要な箇所を見つけて、誰に何を確認するのかを判断できるようになります。
AIバナー添削の問題：調整前に最初に確認することは？【3択クイズ】
では問題です。
このバナーで、調整前に最初に確認することは何でしょうか。
- A. どう見せれば伝わるか
- B. 何を優先して伝えるか
- C. 広告に載せて問題ないか
3秒で考えてみてください。必要なら、ここで動画を止めても大丈夫です。
正解はC. 広告に載せて問題ないかです。
なぜ「広告に載せて問題ないか」が最初なのか
もちろん、デザインをブラッシュアップするうえでは、「どう見せれば伝わるか」「何を優先して伝えるか」という問いも、すべて確認はしていきます。
ただし、そもそもこの情報を広告に載せていいのかという部分が、やはり一番意識すべきところです。
例えばコピーの表現や価格の見せ方、掲載している情報そのものに問題があった場合、後から文言の修正や情報の差し替えが必要になりますよね。
その場合、せっかく整えたレイアウトやデザインが、作り直しになってしまう可能性があります。
まず、載せていいのかを見極める。
そのあとに「何を優先して伝えるか」「どう見せるか」を考えていくことが重要です。
確認していく順番は「掲載可否→優先順位→見せ方」
確認していく順番は、次のとおりです。
- その内容を、広告に載せて問題ないか
- 何を優先して伝えるか
- どう見せれば伝わるか（ここがデザインの部分です）
どれだけきれいに整えても、これらがクリアできていないと、そのまま公開できるデザインにはなりません。
これが今回お伝えしたいところです。
見た目よりも先に根拠を確認する
見た目より先に、根拠を確認する。
気になる表現と必要な根拠を整理し、確認事項として整理します。
今日のポイントは、見た目よりも先に根拠を確認するというところです。
ここからは、実際に何の情報を確認・整理して調整していったのかを、順に解説していきます。
確認に入る前にBeforeの良さを押さえる
確認に入る前に、まずはBeforeのいい部分を見ていきます。
- ネイビーと月で伝える夜の世界観：深いネイビーと月のモチーフで、夜の商品だということが直感的に分かります
- 大きく見せた商品ボトル：ここも悪くないと思います
- 価格と購入ボタンが揃っている：何を売っていて、どこから購入に進むのかも問題なく分かります
- ネイビー・白・ゴールドの配色：少し上品な世界観になっています
配色についても、この上品な世界観はそのまま残していきたい部分です。
Beforeから根拠が必要そうな箇所を4つピックアップする
まず最初の確認として、Beforeから根拠が必要そうな箇所を4つピックアップしました。
1つ目：効果の表現
1つ目は効果の部分です。
「夜のひと塗りで、翌朝、扱いやすい髪へ」というところは、1回の使用で翌朝まで変化が出るようにも読み取れてしまいます。
もちろん本当なのであれば、まったく問題はありません。
ただ、その裏付けを確認できない状態でそのままこのライティングを採用するのは、リスクが高い表現になってしまいます。
2つ目：使用感・香りの表現
2つ目は、「べたつきにくく心地よい仕上がり」と「心やすらぐリラックスの香り」の2箇所です。
ここも性能や心理的な作用の根拠を確認したい表現なので、同様にチェックが必要です。
3つ目：商品仕様（使用期間の目安）
3つ目は、少し小さいのですが「80mL（約1〜1.5ヶ月分）」の部分です。
これは使用量や頻度の前提が必要なので、ここも確認が必要です。
4つ目：価格と購入条件
4つ目は価格と購入条件です。
通常価格3,580円から、それが1,980円になっているというところ。約44%オフという表示になっていますが、値引き幅がかなり大きいので、何を基準に比較をした価格なのかを本来確認する必要があります。
自社の過去の価格なら、その価格でいつ、どのぐらいの期間販売をしていたかというところが根拠として必要になってきます。
さらに「初回限定」と書いてあり、注釈に「※2回目以降は通常価格でお届けします。」とあります。
これは継続して届く契約なのか、次に単品で買う場合の話なのか、表現が少し曖昧なので、ここも確認が必要なところです。
4点の確認事項と、景品表示法・薬機法の考え方
整理すると、デザインの前に確認する4点は次のようなイメージです。
| 確認項目 | Beforeで気になる点 |
|---|---|
| 01. 効果 | 翌朝まで変わる？ |
| 02. 使用感 | べたつき・香り |
| 03. 商品仕様 | 約1〜1.5か月分 |
| 04. 価格と購入条件 | 通常価格・2回目 |
特に美容・化粧品・サプリメントといったものの広告は、規制が実際かなり厳しいです。
今回のようなバナーもそれに該当するため、注意が必要です。
こうした情報は、景品表示法や薬機法の対象になる可能性があります。
ただ、ここで大事なのは、これらを一律に違法と決めつけないということです。
今回は、商品の試験や価格の履歴、販売の条件が分からない状態と仮定し、現状のままでは採用できない確認事項として止める、もしくは別の表現に変えるという判断で進めていきます。
景品表示法は、商品やサービスの品質・価格などについて、実際より著しく優良・有利だと見せる表示を規制する法律です。薬機法は、化粧品や医薬品などの効果・効能の広告表現を規制する法律です。動画では、ヘアオイルの効果表現や「通常価格からの値引き」の表示が、これらの対象になる可能性があるものとして扱っています。
一次確認と最終確認を分ける
今回は、AIを活用して論点を洗い出し、厚生労働省と消費者庁の一次資料を確認して、チェックをひと通りしました。
ただし、これはAIによる一次確認です。専門家によるリーガルチェック、法的なチェックを通したという意味ではありません。
確認の役割は、次の3つに分けて考えます。
| 担当 | 確認すること |
|---|---|
| AI・公的情報 | 気になる表現を洗い出す／一次資料を確認する |
| クライアント | 商品仕様・試験資料／価格履歴・送料／購入条件 |
| 法務・専門家 | 法的な最終判断が必要な論点を確認 |
デザイナーは、危なそうな表現と必要な根拠があれば確認し、整理をするところまでを担います。
そのうえで、商品仕様や価格の履歴、送料や購入条件は、実案件の場合はクライアントに必ず確認をしていきます。
最終的な法的判断が必要な場合は、法務担当や専門家へ依頼をするイメージです。
デザイナーはもちろん法務の専門家ではありません。
だけど、確認すべきところは必ず確認をしていく。分からないことを分かったふうにしないことがすごく大事です。
分からない情報は知見のある人に連携をし、判断を仰ぐという動きを、ぜひ意識してみてください。
法律の条文や官公庁が公開しているガイドラインなど、情報の発信元が直接出している資料のことです。動画では、AIで論点を洗い出したあと、厚生労働省や消費者庁の資料にあたって確認しています。
根拠を確認できる情報だけでバナーの原稿を整理する
次に、根拠を確認できる情報だけで原稿を整理していきます。
Beforeが確認が必要な情報、Afterが整理・調整した後の文言です。
| Before：確認が必要 | After：整理後 | 判断 |
|---|---|---|
| 夜のひと塗りで、翌朝、扱いやすい髪へ | 髪にうるおいを与え、しなやかな髪へ | 表現できる範囲と、商品の裏付けを確認して修正 |
| 通常3,580円→1,980円／約44%OFF | 1,980円（税込） | 根拠を確認できない通常価格・割引率は外す |
| 80mL（約1〜1.5か月分） | 80mL | 確認できない使用期間の目安は外す |
| 2回目以降は通常価格でお届け | 定期購入ではありません | 確認できる購入条件だけを整理して明示 |
効果の文言は、表現できる範囲と商品の裏付けを確認して修正しました。
価格は1,980円（税込）にし、根拠を確認できない通常価格・割引率は外しています。
容量は80mLだけの表現にし、確認できない期間の目安も外しました。
「2回目以降は通常価格でお届け」という記載も「定期購入ではありません」と記載し、確認できる購入条件だけを整理して明示しています。
ただし、この表現ならそのまま掲載していい、という意味ではありません。
実案件では、その商品で実際に訴求できる内容なのかを、クライアントから共有された商品資料や申込ページの画面と照らし合わせて、最終的に確認していきます。
整理した情報でワイヤーフレームを組む
これらをもとに整理したワイヤーフレームがこちらです。
上から順に、次の構成になっています。
- ブランド名：LUNA RÊVE
- 商品の魅力：髪にうるおいを与え、しなやかな髪へ
- メインコピーと商品名：やさしく香る、夜のヘアオイル／ナイトモイスチャー ヘアオイル
- 容量と価格：80ml ¥1,980（税込）
- 購入条件とボタン：初回限定・送料無料／ご購入はこちらから
- 注釈：※お一人様1回1本限り ※定期購入ではありません
もともとBeforeにあった3つの丸い訴求は、似た表現が重なっていたので、どれも取っています。
商品の魅力、価格、購入条件、次の行動を、重複せずに順番に理解できる構成に整理しました。
色や写真を入れる前の、情報の配置だけを決めたデザインの下書きのことです。装飾に頼れない状態なので、どの情報をどの順番で載せるかが整理できているかを確かめるのに向いています。
整理した情報がワイヤーフレームにどう反映されているか
次に、先ほど整理した情報がこのワイヤーにどう反映されているかを見ていきます。
コピー：「しっとりまとまる」から「やさしく香る」へ
メインコピーは少し変えていて、「しっとりまとまる夜のヘアオイル」から「やさしく香る、夜のヘアオイル」に変更しています。
ただし、「香る」という表現についても、実際の商品に香りがあることが前提です。
価格：確定している1,980円（税込）だけを表示する
次に価格です。
Beforeの商品にあった通常価格や割引率は、根拠の確認できない情報として削除しています。
今回は架空の商品設定として確定している1,980円（税込）だけを表示していきます。
80mlは容量の表現として、「この容量でいくらなのか」が分かるように、価格とグルーピングして合わせてレイアウトを組んでいます。
購入条件：確認できる条件だけに整理する
購入条件についても、「初回限定」「送料無料」「お一人様1回1本限り」「定期購入ではありません」と、確認できる条件だけに整理しています。
このように、コピー・価格・購入条件それぞれで、その情報を広告に載せて良いかを確認しながら、ワイヤーに落とし込んでいきました。
実案件では、ここに入れる表現や数字・条件を、商品資料や申込画面と照らし合わせたうえで確定していきます。
デザインを作り込む前に、そもそもこの情報を広告に載せていいのかを確認し、そのうえで何を優先して伝えるのかを整理したこと。これが今回のワイヤー調整で一番大切なポイントです。
情報を決めてからデザインを調整する
ここから、ようやくデザインの調整です。
情報を決めてから、見栄えを整えて調整していきます。
今回意識したブラッシュアップのポイントは、次の3つです。
| 要素 | 調整の方針 |
|---|---|
| 主役 | コピーとボトルを引き立たせる |
| 背景 | 既存バナーを踏襲し、ボトルが引き立つように調整 |
| 文字 | 黄みのある白で、全体を馴染ませる |
フォントは、リュウミンとMinion Proをメインで使用しています。
AIで作った画像は形や構造の破綻もチェックする
ここで1点共有があります。
AIで作られた画像は、形や構造が破綻していないかというところも注意深く見ていきます。
Beforeのボトルの上部を見ると、吐出口のようなパーツが二重にあるように見えます。
AIの画像は、全体の雰囲気が良くても、細部を見ると構造が不自然になっていることが結構あります。
そこで今回のAfterでは、このボトルの上部をPhotoshopで微調整しています。
実案件でも、クライアントからAIで作成・調整した商品画像が届くケースがあるかもしれません。
その場合も、ぱっと見の印象だけで判断せず、細部に違和感や破綻がないかを確認する視点を常に持つことが重要です。
コピーや価格だけではなく、商品そのものの形や構造が成立しているかも、確認しておきたいポイントです。
リュウミンは日本語の明朝体、Minion Proは欧文のセリフ体のフォントです。どちらも上品で落ち着いた印象を出しやすく、今回の「高級感と品のある雰囲気」に合わせて使われています。
完成形のAIバナーをBefore/Afterで確認する
完成品がこちらです。上から見ていきます。
- LUNA RÊVE（ブランド名）
- 髪にうるおいを与え、しなやかな髪へ
- やさしく香る、夜のヘアオイル
- ナイトモイスチャー ヘアオイル
- 80ml ¥1,980（税込）
- 初回限定・送料無料／ご購入はこちらから
今回は、確認が必要な情報を整理してから、伝わる順番と見せ方を作って、デザイン全体をブラッシュアップしていきました。
こちらがBeforeとAfterの比較です。
今回一番大きな変更は、見た目や装飾ではありません。
根拠を確認できない情報を外し、残す情報の役割をはっきりさせたことが、一番大きな変化です。
まとめ：AIバナーは公開前に「見た目より先に根拠を確認する」
今日の持ち帰りは、見た目よりも先に根拠を確認するということです。
見た目より先に、根拠を確認する。
①掲載可否 ②優先順位 ③見せ方
まず「情報の根拠はあるか？」を確認しよう。
その内容を広告に載せて問題ないか、何を優先して伝えるか、どう見せれば伝わるのか。
この順番で確認をすることで、見た目を整えたあとに原稿や情報設計からやり直すような手戻りも減らすことができます。
またクライアントとやり取りをする場合でも、「この表現には根拠がありますか？」「この価格や条件は確定していますか？」とデザイナー側から確認できることも、すごく大切です。
単に見た目を作るだけではなく、実際に使われるところまで見据えて考えられるデザイナーは、クライアントからもすごく信頼されます。
今回のような実務での使用を想定したバナーを作る際は、コピーと数字だけを抜き出して、商品資料と原稿を照らし合わせてみてください。
根拠が明確に確認できないところは、「この表現は法務的にグレーの可能性がある」とクライアントへ共有できることも、信頼につながる要素のひとつになります。
AIはぱっと見が整った広告を作ることはできます。
ただ、見た目が自然だからといって、記載された内容まで正しいとは限りません。
分からないことを1人で決めるのではなく、確認すべき知見のある相手に確かめられるよう、デザイナー側からリードして働きかける。見た目を整える前のこの判断・行動も、デザイナーの大切な仕事です。
AIバナー添削に関するよくある質問
Q. AIで作ったバナーを調整するとき、最初に何を確認すればいいですか？
その内容を広告に載せて問題ないかです。動画では「載せてよいか→何を優先して伝えるか→どう見せるか」の順で確認し、掲載内容に問題があると整えたレイアウトも作り直しになると解説しています。
Q. 美容商品のバナーで根拠が必要になりやすいのはどんな表現ですか？
動画では、効果（翌朝まで変わる？）、使用感（べたつき・香り）、商品仕様（約1〜1.5か月分）、価格と購入条件（通常価格・2回目）の4点を挙げています。美容・化粧品・サプリメントの広告は、景品表示法や薬機法の対象になる可能性があるためです。
Q. 「通常価格◯円→◯円」のような割引表示はそのまま使えますか？
何を基準に比較した価格なのかの根拠が必要です。自社の過去価格なら、いつ・どのぐらいの期間その価格で販売していたかを確認します。動画では根拠が確認できない前提のため、通常価格と割引率を外し、1,980円（税込）だけを表示しています。
Q. デザイナーが法的な判断まで行う必要がありますか？
いいえ。動画では、AI・公的情報での一次確認、クライアントへの商品仕様・価格履歴・購入条件の確認、法務・専門家による最終判断と役割を分けています。デザイナーは気になる表現と必要な根拠を整理し、分からないことを分かったふうにしないことが大事だとしています。
Q. AIで作った商品画像で気をつけることはありますか？
細部の形や構造が破綻していないかを確認します。動画では、ボトル上部の吐出口のようなパーツが二重に見えていたため、AfterではPhotoshopで微調整しています。
AIバナーの実務判断を身につけるならデイトラ「Webデザインコース」
本記事で解説したAIバナーの添削や、広告に載せる情報の確認の考え方は、独学でも押さえることはできます。
ただし、実務で通用するレベルまで体系的に習得するには、現役で活躍するメンターから添削を受けながら学べる環境が近道です。
デイトラの「Webデザインコース」は、実務レベルを想定したカリキュラムと、現役プロによる質問対応が特徴のオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。
今回のような、見た目だけではない実務の判断を手を動かしながら学びたい方は、ぜひ一度カリキュラムをチェックしてみてください。
なお、バナー添削シリーズでは他のテーマも解説しています。合わせて読んでみてください。
- バナーデザイン添削｜使う人の「決める順」で情報を並べ替える方法
- バナーデザイン添削｜情報を5つの役割にまとめて伝える方法
- バナーデザイン添削｜伝わらない広告を直す最初の一手3ステップ
- バナーデザインは情報整理から｜AI生成バナーを直す3ステップ
- バナーデザインは情報の優先順位で決まる｜AIバナー添削4ステップ
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
トム（@yuhei_design）
デイトラのWebデザイナーです。印刷会社に7年務めたのち、2021年に独立しました。現在はLP制作やUIデザインに従事しながら、デザイン×生成AIの実践的な活用方法を発信しています。
