画像生成AIで作ったバナーを見て、「大きく崩れてはいないけれど、なんとなく物足りない」と感じたことはないでしょうか。
実はその違和感の正体は、色や文字の大きさではなく情報そのものが足りていないことにあるケースがほとんどです。
バナーデザインで最初にやるべきことは、装飾を触ることではなく、相手がその場で判断するために必要な情報を整理することです。
本記事では、AIが最初に生成した小学生向けプログラミング無料体験会のバナーを題材に、必要な情報の洗い出し・見せる順番の設計・ワイヤーフレームでの検証という3ステップを、Before/Afterつきで解説します。
解説するのは、デイトラのWebデザイナーであるトムです。実際の添削の流れをそのまま追いながら、見た目を整える前に何を確認すべきかをお伝えします。
・バナーデザインで色や文字より先に見直すべき「判断材料」という考え方
・AI生成バナーに足りていない情報の見つけ方（開催年・曜日・時間の抜け）
・見せる順番を組み直し、ワイヤーフレームで検証するまでの具体手順
・完成形との比較で分かる「情報整理が効いているポイント」と、自分のバナーの確認方法
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
バナーデザインで見た目より先に見直すべき「判断材料」
今回題材にするのは、小学生向けプログラミング無料体験会を告知するSNS広告のバナーです。
まずはバナーを1枚見て、「これはいいと思うか、それともいまいちだと思うか」を考えてみてください。いまいちだと感じた方は、どこをどう直せば良くなるかまで考えてみると、この記事の内容がより深く入ってきます。
このバナーには、タイトル・日付・対象年齢が入っていて、ぱっと見で大きくデザインは崩れていません。
ただし、保護者の立場で「子どもをプログラミング教室に参加させよう」と思って見てみると、このままでは判断できない情報がたくさん残っています。
今回のキーワードは「見た目よりも先に判断材料」です。
文字の大きさや色、写真の見せ方を触る前に、「参加するかどうかを決めるための情報が揃っているか」という点を見直していきます。
この記事では、AIの初回出力をBefore、情報を整理したワイヤーフレーム、完成したAfterまでを順番に見ながら、何をどの順番で直したかを解説します。
バナーに入っている5つの情報
Beforeのバナーに入っている情報は、次の5つです。
- プログラミング無料体験会
- 小学1〜6年生が対象
- 9月12日
- オンライン開催
- 参加無料
今回は、掲載したい内容だけをざっくりと要件として伝え、実際の文言やレイアウト・見せ方は画像生成に任せて作ってもらいました。
指摘しやすい失敗例をわざわざ選んだのではなく、最初に生成された1枚をそのまま使っています。
「判断材料」とは、見た人が次の行動（申し込む・詳細を見る）を決めるために必要な情報のことです。今回の動画では、フォントや配色といった装飾よりも先にこの判断材料を揃えることが、バナーデザインの出発点だと位置づけられています。
①必要な情報を整理する｜AI生成バナーに足りない判断材料を洗い出す
こちらがBeforeのバナーです。画像にも一部おかしい部分はありますが、現時点ではその点には触れず、まずは情報の部分に注目してください。
ここで問題です。
このバナーを見て「参加しよう」と考えたとき、まず致命的に足りない情報はどれでしょうか。
- A. 開催年・曜日・時間
- B. 使うプログラミング言語
- C. 講師のプロフィール
正解はA「開催年・曜日・時間」
正解はAです。
Beforeには「9月12日」と記載がありますが、何年なのか、何曜日なのか、何時から何時までなのかが分かりません。
作る側は今年のイベントだと分かっていますが、広告として初めて見る人にはその前提がありません。
情報を届けるターゲットは「保護者」
今回は子ども向けのイベントです。子どもが直接申し込みをする可能性はかなり低いことを考えると、バナーの情報を伝えるターゲットは保護者になります。
保護者は学校や家族の予定と照らし合わせて、子どもと一緒に参加できるかどうかを判断します。
その判断に必要な情報がなければ、色やフォントを整えたところで「申し込もう」と詳細を見るアクションを起こすバナーにはなりません。
見た目よりも先に判断材料を整理する。
「親子で学べる」という文言を追加する
受講してほしい対象者は小学生ですが、参加を決めるのは基本的に保護者です。
オンライン開催であれば、パソコンやタブレットを用意する・参加用のURLでアクセスする・時間を空けるといった準備も必要になります。
そこでAfterには「親子で学べる」という文言を追加してはどうか、という方針でブラッシュアップしていきます。
子どもだけが参加するように見せるのではなく、親も一緒に参加できると分かれば、初めてでも試しやすくなるからです。
グルーピングと写真の問題点
このバナーは、グルーピングも少しおかしい状態です。
本来「日付」と「どこで開催するか」という情報はひとまとまりになって近接されている必要がありますが、それぞれ独立してしまっているのがもったいないところです。
写真については、最初に気づいた方もいるかもしれません。PCの画面の向きが完全に逆になっています。
これはこのままでは使えないので、この部分を調整するか、画像の部分を取ってしまうかという判断が必要になります。
もう1つ、子どもの写真の目線が外側を向いています。顔も含めて外を向いてしまっているのがポイントです。
人の目線の向きはどうしても気になってしまうため、視線が散らかってしまう要因の1つになります。修正する際は、子どもの顔の向きも内向きに調整することが必要です。
生成された素材を使用する場合は（生成ではない場合ももちろんですが）、人物だけではなく手・机・パソコンの画面といった周辺の描き込みまで細かく確認していく必要があります。
関連する情報どうしを近づけて配置し、ひとまとまりに見せるデザインの基本原則です。今回であれば「日付」と「開催場所」は本来ひとかたまりとして扱うべき情報で、これが離れていると読み手は情報を関連づけて理解できません。
②見せる順番を組み直す｜バナーデザインは原稿の再設計から
これで判断に必要な情報が揃ったので、ここから情報の書き出しや調整をして、原稿を再設計していきます。
上から読む順番を3段階に分ける
調整した原稿と、上からの読む順番は次のとおりです。
- 親子で学べる！プログラミング無料体験会／小学1〜6年生対象 — ここまでで1つにグルーピングさせる想定。1番大きく出すところ
- 2026年9月12日土曜日、13時〜15時、オンライン開催 — この情報を中段に追加
- 参加費無料と詳細はこちら — 下部に配置
「13時〜15時」は仮で入れた情報なので、実案件の場合はクライアントに確認する必要があります。
下部については、元々「参加無料」という文言も入っていましたが、そこに加筆しています。
1番下にボタンを置くような場合、「参加無料」だけだと文言が短すぎる印象があるため、「参加費無料と詳細はこちら」という文言に加筆して調整しました。
アイコン4つは一度削除して考える
Beforeのバナーには左側にアイコンが4つ入っていますが、今回は日付・曜日の情報の方が優先順位が高いと判断し、ワイヤーフレームでは削除しています。
一見かわいらしく見えるアイコンでも、タイトルや日付と同じくらい目立ってしまうと視線が散らかる要因になってしまいます。
まったく意味がないかというとそんなことはありませんが、「あるから使う」のではなく、一度情報整理をする際にはこうしたアイコンや画像は外して、本当に必要かどうかを考えてから再度レイアウトするのが良いと考えています。
情報の優先順位が視覚的に付いていない状態のことです。装飾やアイコンが主要な情報と同じ強さで目立つと、見る人がどこから読めばいいのか分からなくなり、結果として伝えたい情報が届かなくなります。
③ワイヤーフレームを組む｜色とフォントを決める前に検証する
ここまでを踏まえて調整したワイヤーフレームがこちらです。
このワイヤーフレームはモノクロですが、誰向けで、いつ開催され、どう参加するイベントなのかが、上から順にスムーズに情報として入ってくる状態にブラッシュアップできています。
今回1番見てほしいところは、色やフォントを決める前から、情報の視認性や入ってきやすさに差が出ているという点です。
つまり最初に直したのは飾りではなく、参加判断に必要な情報と、そのまとまり（グルーピング）です。
この段階で「情報が足りていないな」「なんだか読みづらいな、分かりづらいな」という印象を受けるのであれば、後から見た目を整えても根本的には直りません。
だからこそ、ワイヤーフレームの状態でその点を調整していくことが重要になります。
色や書体などの装飾を入れず、要素の配置と情報の優先順位だけを示した設計図のことです。モノクロのまま検証することで、「デザインの力で誤魔化していないか」「情報だけで伝わるか」を切り分けて確認できます。
完成形と比較する｜情報整理後のバナーデザインはどう変わったか
このワイヤーフレームに、実際にデザインの要素を加えてブラッシュアップしていったものがこちらです。
情報のまとまりごとに見せ方を変える
上部には「親子で学べる！プログラミング無料体験会」「小学1年生から6年生が対象」を置き、これを1つのグループとして見せています。
開催日は「2026年9月12日土曜日」、時間は「13時〜15時」「オンライン」。これらをまとめています。ここがクイズのAの答えにあたる部分です。
全体は小学生向けのイベントに合わせて、楽しく親しみやすいポップな方向性にしています。元々のBeforeのイメージの方向性に合わせて揃えている形です。
またメインの文字には、丸みのあるポップな書体を使用しています。
色数を増やしすぎない・コントラストでメリハリを付ける
中段の日付は、数字にもう少し色でアクセントを付けてもいいのですが、ここにオレンジやピンクを使ってしまうと画面が少しごちゃごちゃしてしまいます。
この中の情報でいうと、右下の「オンライン」だけが場所の情報になります。
「日時」と「ここが場所なんだな」という関係が、情報として1つのまとまりになりつつも整理されて分かりやすくなるよう調整しました。
下部の「参加費無料！詳細はこちら」は、あえてゴシック体のままにしています。上下の情報でコントラストをつけて、メリハリをつけられるように調整したものです。
写真は抜いて反転、イラストを追加する
写真は背景ごと大きく使わずに、子どもの写真だけを抜いて反転させ、内側に目線が向くように調整して配置しています。
さらに、プログラミングを連想できるイラストを「親子で学べる」と書いてある右側に追加しました。配色は元々のバナーの雰囲気に合わせて調整しています。
Before / After を並べて比較する
こちらがビフォーアフターです。全体の雰囲気はかなり近いことが分かります。
情報的に足りていない部分はBeforeのバナーにありますが、全体のトーンや見せ方にはいい部分がたくさんあります。
この波の見せ方や色遣いなど、いいなと思える部分を残しながら、表現の1つの方向性としてAfterに残しました。
既存のバナーのバランスをそのまま踏襲して、全体の情報を再設計してブラッシュアップしたというものになっています。
色・大きさ・書体などで差を付け、情報の強弱をはっきりさせることです。今回は上部の丸みのあるポップな書体と、下部のゴシック体を意図的に使い分けることで、まとまりの違いを直感的に伝えています。
まとめ｜バナーデザインは「見た目よりも先に判断材料」
今日持ち帰ってほしい言葉は、「見た目よりも先に判断材料を整理する」です。
見た目を整理する前に、そのバナーで相手が判断するための情報を整理します。足りないものがあれば追加し、まとまり方まで見直していきます。
自分のバナーができたら、見る人が次の行動を決めるときに、分からないことが残っていないかという点を確認してみてください。
イベントなら「いつ・どこで・何時から・誰が参加できるのか」。申し込む前に必要な情報を、まずは文章だけで見直していきましょう。
AIはぱっと見で整ったデザインを作ることはできます。今回のBeforeも、子ども向けのイベントだと分かるところまでは十分に役割を果たせていました。
そのうえで、誰が見て何を判断するのかを考えるのは作る側の仕事です。
バナーデザインの情報整理に関するよくある質問
Q. AIが生成したバナーは、まずどこから直せばいいですか？
色や文字の大きさではなく、情報から直します。今回の動画でも、Beforeバナーに対してまず「参加判断に必要な情報が揃っているか」を確認し、開催年・曜日・時間の抜けを埋めるところから始めています。
Q. バナーに「9月12日」とだけ書くのはなぜ不十分なのでしょうか？
広告として初めて見る人には「今年のイベント」という前提がないためです。何年か・何曜日か・何時から何時までかが分からないと、保護者は家族の予定と照らし合わせられず、申し込みの判断ができません。
Q. かわいいアイコンは入れた方がいいですか？
「あるから使う」という判断はおすすめしません。アイコンがタイトルや日付と同じくらい目立つと視線が散らかる要因になります。動画では、日付・曜日の優先順位が高いと判断し、ワイヤーフレームでは一度アイコンを削除しています。
Q. ワイヤーフレームはモノクロで作る必要がありますか？
動画で紹介しているワイヤーフレームはモノクロで作成しています。色やフォントを決める前の段階でも情報の入ってきやすさに差が出るため、装飾を入れずに情報の並びとまとまりだけを検証できる状態が有効です。
Q. 生成AIで作った画像素材はどこまで確認すべきですか？
人物だけでなく、手・机・パソコンの画面といった周辺の描き込みまで確認します。今回のBeforeでも、PCの画面の向きが完全に逆になっており、そのままでは使えない状態でした。
バナーデザインの判断力を身につけるならデイトラ「Webデザインコース」
本記事で解説したバナーデザインの情報整理は、独学でも考え方を押さえることはできます。
ただし、実務で通用するレベルまで体系的に習得するには、現役で活躍するメンターから添削を受けながら学べる環境が近道です。
デイトラの「Webデザインコース」は、実務レベルを想定したカリキュラムと、現役プロによる質問対応が特徴のオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。
今回のような「誰が見て、何を判断するのか」を踏まえたバナーを自分で作れるようになりたい方は、ぜひ一度カリキュラムをチェックしてみてください。
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
トム（@yuhei_design）
デイトラのWebデザイナーです。印刷会社に7年務めたのち、2021年に独立しました。現在はLP制作やUIデザインに従事しながら、デザイン×生成AIの実践的な活用方法を発信しています。
