AIでバナーを作ってみたものの、「なんか見づらい。でも、どこをどう直せばいいのか分からない」と手が止まったことはないでしょうか。
バナーデザインで一目で伝わるかどうかを決めるのは、色や飾りではなく情報の優先順位＝何を一番に伝えるかの判断です。
この記事では、ChatGPTが作った宅配クリーニングのSNS広告バナーを実際に添削しながら、何を先に見せて何を後に回すのかを4つのステップで解説します。
解説するのは、デイトラのWebデザイナーであるトムです。読み終えるころには、自分のバナーでも何を一番目立たせれば伝わるのかを判断できるようになります。
・AIバナーが「なんか見づらい」のに直せない理由
・一番大きく見せるべき情報の決め方（3択クイズで考える）
・写真の役割の決め方と、文字情報を読む順番に並べ直す手順
・ワイヤーフレームで検証し、完成形のBefore/Afterで答え合わせをする方法
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
AIで作ったバナーデザインが見づらいのに直せない理由と今回の題材
AIでバナーを作ってみたものの、なんか見づらい。でも、どこをどう直せばいいのか分からない。そんな経験はよくありますよね。
なぜ改善できないのかというと、多くの場合、どこが悪くてどう直せばいいのかを言葉にできていないからです。
改善できるようになるには、見た目の好みではなく、何を先に伝えるべきかを判断する視点が必要です。
そこでこの記事では、AIが作った宅配クリーニングのバナーを実際に添削しながら、何を先に見せて何を後に回すのか、その考え方を解説していきます。
今回の題材は、忙しい共働き世帯に向けた宅配クリーニングのSNS広告です。バナーに入れた売りは次の3つです。
- 初回30%オフ
- 集荷も受取も自宅でできる
- 最短2日
こうした要件だけをChatGPTに伝えて、レイアウトや見せ方までお任せで作ってもらいました。
「30%オフを一番大きくする」といった指示は、こちらからはしていません。
また、添削しやすい失敗作を選んだわけではなく、最初に生成された1枚をそのまま使用しています。
今回はAIから出てきたものを見たうえで、全体の情報設計から見直していきます。
バナーに入れる情報を「何を・どの順番で・どのくらいの強さで見せるか」決めることです。色やフォントといった見た目の調整より前の工程にあたり、ここが決まっていないと、どれだけ装飾を整えても伝わりにくいバナーになります。
①バナーデザインで一番伝えたい情報を明確にする
ここで問題です。このバナーで一番大きく見せるべきなのはどれでしょうか？
- A. 初回30%オフ
- B. 集荷も受取も自宅で
- C. 宅配クリーニング
3秒で考えてみてください。必要なら、ここで動画を止めても大丈夫です。
正解はC. 宅配クリーニングです。理由を説明していきます。
Bで迷った方は、近いと思います。ただ、「集荷も受取も自宅で」というのは便利さを伝えるための言葉であって、このバナーの主語ではないんですね。
まずは宅配クリーニング、つまり何のサービスの広告なのかが伝わることが最も重要です。
その便利さも30%オフも、何のサービスか分からないと正しく伝わりません。
Beforeのバナーでも「宅配クリーニング」は一番上に置いてあります。それでも、視線は先に「30%オフ」と男性・女性の写真に行ってしまいます。
作る側は宅配クリーニングの広告だともちろん知っていますが、広告を初めて目にする人にはその前提がないんですね。
デザインは、何を大きくするかではなく、何を重要だと判断するかで決まります。
ここは、ぜひ覚えておいてください。
そのバナーが「何の広告か」を示す情報のことです。今回なら「宅配クリーニング」がそれにあたります。割引や便利さといった売り文句は、主語が伝わってはじめて意味を持つ「述語」のような役割なので、主語より目立たせると内容が正しく伝わりません。
②バナーの写真の役割を決める
次に、写真の扱いについて解説していきます。
写真は、大きさではなく「何を伝えるか」で選びます。
AIが作ったバナーのように、写真自体を大きくすることが悪いわけではありません。
重要なのは、その写真から何の情報が伝わってくるかということなんですね。
今回は、ChatGPTが作った既存のバナーから切り出して、「受け渡しのシーン」と「衣類」の2枚の写真素材をそれぞれ用意しました。
それぞれの写真から得られる情報を整理していきます。
| 写真 | 写真から分かること | 役割 |
|---|---|---|
| 受け渡し写真 | 家まで取りに来てくれるという情報。配達員が取りに来てくれるんだな、というのが伝わる | 使い方を補う |
| 衣類写真（畳まれた衣類） | クリーニング後のきれいな状態が想像できる | 利用後を想像させる |
このことから、今回ブラッシュアップする際の写真の優先順位としては、利用後の状態を伝える衣類写真の情報を強く、人物の写真はそれよりも弱くするべきだと判断しました。
極論、人物写真はなくても広告としては成立するのではないかと思います。
そのため、人物写真は主役ではなく、使用する場合でもあくまで補助として使うという方向で調整していきます。
なくても広告が伝わるものは、主役ではなく補助へ回す。
バナー内で一番目立たせて視線を集める要素が「主役」、主役の意味を補って理解を助ける要素が「補助」です。写真は面積が大きくなりやすく、置くだけで主役になりがちなので、「この写真がないと広告が伝わらないか」を基準に役割を決めると判断しやすくなります。
③バナーの文字情報を見る人が理解する順番に並べ直す
次は文字情報です。文字情報も、見る人が自然に理解できる順番に並べ直していきます。
- 集荷も受取もご自宅で（家で完結する便利さ）
家で完結する便利さを最初に伝えます。ここは「自宅で」の頭に「ご」をつけることで、少し丁寧に調整しています。 - 出張宅配クリーニング（何のサービスか）
ここで何のサービスかが分かります。元の「宅配クリーニング」に「出張」を1語足しました。 - 初回限定30%OFF・最短2日（安さと早さ）
- 今すぐ申し込む（次の行動）
「出張」を足したのは、新しい売り文句を増やすためではありません。
家で完結する便利さとサービス内容が、考えなくてもスムーズにつながるようにという意味で足しています。
これを上から順番にざっくり見ていくと、次のような流れになります。
- 家に取りに来てくれる
- 何のサービスか分かる
- 「安くなるんだ」「早く持ってきてくれるんだ」
- 「では申し込もう」という行動
この順番にすることで、情報をシンプルかつストレートに伝えることができます。
つまり、読み進めるほど自然に申し込みたくなる流れを、文字の並び順で作っているわけです。
見る人がバナーの情報を受け取っていく順序のことです。一般的に視線は大きい要素・上の要素から入るため、「理解してほしい順番」と「目に入る順番」をそろえると、説明がなくても意味が通るバナーになります。
④ワイヤーフレームを組んで情報の優先順位を検証する
先ほどの2つの写真のコントラストと、読む順番を整理して作ったワイヤーフレームがこちらです。
ワイヤーフレームとは、色や写真を入れる前の、文字と枠だけを組んだ下書きのことです。
モノクロの状態ではありますが、何が便利で、何のサービスで、いくら安くて、どこから申し込むのかという情報が、上から順番に読めると思います。
ここが今回一番見てほしいところです。
AIが作ったBeforeのバナーと、ワイヤーフレームを比較してみてください。
写真や色を入れる前から、情報としての差がすごく出ているのが分かるはずです。
つまり、直したのは飾りではなく、情報を見せる順番ということなんですね。
この状態で伝わらないものは、後から色や写真を足しても根本的には直りません。
だからこそ、ワイヤーフレームで情報をしっかり組んであげることがすごく重要になってきます。
デザインの骨組みとなる下書きのことです。色・写真・装飾を入れずに、文字と枠だけで情報の配置と順番を決めます。見た目の印象に引っ張られずに「情報がちゃんと伝わるか」だけを確認できるので、バナーやLP制作の初期段階でよく使われます。
完成形のバナーデザインとBefore/Afterを比較する
最後に、このワイヤーフレームを使って作ったバナーがこちらです。Before/Afterを並べると、次のようになっています。
- 一番大きいのは「出張宅配クリーニング」の文字。クイズの答え「C」です
- その上に「集荷も受取もご自宅で」
- その下に「初回限定30%OFF」「最短2日」
- 最後に「今すぐ申し込む」のボタン
人物写真も消してはいません。
申し込みボタンと同じ帯の左端に小さく配置し、「家までこういうふうに来てくれるんだな」ということが分かる役割を担わせています。そのうえで、コントラストのバランスを落として調整しています。
使っている情報は、ほとんどBeforeと同じなんですね。
変えたのは、どれを一番に伝えるかという判断。それが今回の添削です。
要素同士の明暗・大きさ・色などの差のことです。コントラストを強くすると目立ち、弱くすると背景になじみます。今回の人物写真のように「残したいが主役にはしたくない」要素は、コントラストを落として補助の役割に収めるのが有効です。
まとめ：バナーデザインは何を重要だと判断するかで決まる
今日持ち帰ってほしいのは1つです。
先ほどもお伝えしましたが、これが最も重要だと考えています。
自分のバナーができたら、まずは一番目立つ要素だけを見てみてください。
それだけで何の広告か分かれば、情報の順番は合っています。
分からなければ、最初に見直すべきところはそこです。
AIは、パッと見で整ったデザインを作ることはできます。今回のBeforeも、素材としては十分使えるものでした。
そのうえで、何を伝えるかを決めるのは作るデザイナー自身です。
バナーデザインの優先順位に関するよくある質問
Q. バナーで一番大きく見せるべきなのは割引などの売り文句ではないのですか？
まずは「何のサービスの広告か」を一番に伝えます。動画の例では「初回30%オフ」よりも「宅配クリーニング」を優先しています。割引や便利さは、何のサービスか分からないと正しく伝わらないためです。
Q. 自分のバナーの情報の順番が合っているか、簡単に確かめる方法はありますか？
一番目立つ要素だけを見て、それだけで何の広告か分かるかを確認します。分かれば情報の順番は合っており、分からなければそこが最初に見直すべきポイントです。
Q. 写真は大きく使わない方がいいのでしょうか？
写真を大きくすること自体は悪くありません。大事なのは、その写真から何の情報が伝わるかです。動画では、利用後の状態が想像できる衣類写真を強く、人物写真は補助として小さく扱っています。
Q. なぜ色や写真を入れる前にワイヤーフレームを作るのですか？
モノクロの状態で伝わらないものは、後から色や写真を足しても根本的には直らないからです。文字と枠だけで情報の順番を確かめてから、装飾に進みます。
Q. AIが作ったバナーはそのままでは使えないのでしょうか？
素材としては十分使えます。動画のBeforeも、ChatGPTの最初の1枚をそのまま使ったものです。そのうえで、何を一番に伝えるかという判断は作る側が行う必要があります。
バナーデザインの判断力を身につけるならデイトラ「Webデザインコース」
本記事で解説したバナーデザインの優先順位の考え方は、独学でも押さえることはできます。
ただし、実務で通用するレベルまで体系的に習得するには、現役で活躍するメンターから添削を受けながら学べる環境が近道です。
デイトラの「Webデザインコース」は、実務レベルを想定したカリキュラムと、現役プロによる質問対応が特徴のオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。
今回のような「何を一番に伝えるか」という判断を、手を動かしながら身につけたい方は、ぜひ一度カリキュラムをチェックしてみてください。
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
トム（@yuhei_design）
デイトラのWebデザイナーです。印刷会社に7年務めたのち、2021年に独立しました。現在はLP制作やUIデザインに従事しながら、デザイン×生成AIの実践的な活用方法を発信しています。
