生成AIで新しいお店の告知バナーを作ってみたら、「NEW OPEN!」の文字も大きく、写真の雰囲気もいい1枚になった。
でも、このバナーを見た人が「行ってみよう」と予定まで考えられるかというと、何かが足りない。そんな経験はないでしょうか。
新店告知バナーで先に確かめたいのは、告知の目立ち方ではなく、見る人が来店前に知りたい「いつ・どこで・何が」に答えられているかです。
この記事では、AIが作った花屋の新規オープンのバナーを題材に、Before、ワイヤーフレーム、完成したAfterを比べながら、何を残し、何を補ったかを解説します。
解説するのは、デイトラのWebデザイナーであるトムです。読み終えるころには、自分のバナーでも、足りない情報と大きく見せる情報を判断できるようになります。
・AIが作った新店告知バナーで、最初に補うべき情報
・「NEW OPEN!」が目立つだけでは来店を考えられない理由
・Beforeの良さを残したまま、用途・開店日・アクセスを補う手順
・ワイヤーフレーム、主役と補助の見せ分け、別の画角への展開までのBefore/After
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
今回のお題はAIが作った花屋の新規オープンのバナー
近所に新しいお店ができる。そう聞いたら、実際に行く前に何を確かめたいでしょうか。
今回のバナーは、「NEW OPEN!」の文字が大きく目に入ります。新しいお店の告知だということは分かります。
では、この1枚を見て、来店の予定まで考えられるでしょうか。
今回は、新店告知で見る人が確かめたいことから、デザインと情報の組み方を見直していきます。
その中で、何を残し、何を補うのか、その理由を順に解説していきます。
この記事のゴールは、自分が新店告知のバナーを作るときも、見る人が来店を検討できるかを確かめ、足りない情報と大きく見せる情報を判断できるようになることです。
題材は、AIが作った花屋さんの新規オープンのバナー広告です。
AIに伝えたのは、次のような基本条件です。
- 花屋さんの新規オープンであること
- ターゲットは近隣に住む人
- 店舗案内のページを見て、来店を検討してもらうこと
- 親しみやすく、立ち寄りたくなる印象
コピー、素材、配色、レイアウトはすべてAIに任せています。
欠点は指定せず、最初に生成された1枚をそのまま使用しています。
新しくお店がオープンすることを知らせるための広告バナーです。今回のバナーは、近隣に住む人にお店を知ってもらい、店舗案内のページを見て来店を検討してもらうことを目的にしています。
新店告知バナーのBeforeの問題点を考える
今回の条件：AIに伝えた4つの要件
今回は、近隣に住む人に新しくできる花屋さんを知ってもらうためのバナー広告を添削していきます。
今回伝えた主な条件は、次の4つです。
- フラワーショップの新規開店であること
- ターゲットは近隣に住む人
- 店舗案内を見て、来店を検討してもらうこと
- 親しみやすく、立ち寄りやすいと思える印象
問題：この新店告知で、最初に補うならどの情報か？
ここで問題です。
この新店告知で、最初に補うならどの情報でしょうか？
- A. 花の写真
- B. オープン日
- C. 店名のロゴ
3秒で考えてみてください。
正解はB「オープン日」です。
Aの花の写真は、すでにたくさんあります。Cの店名も、「はなつむぎ」と載っています。
それより先に、新しいお店の告知としていつ開くのかを伝えたいのです。
正解の理由：NEW OPEN。いつ開く？
では、なぜオープン日を先に伝えたいのか。実際のバナーを見ながら解説していきます。
| 項目 | Beforeの状態 |
|---|---|
| 告知 | 新規開店の告知は目立つ |
| 日付 | いつ開くのかが分からない |
| 業種 | 花の写真と業種表記がある |
| 店名 | 「はなつむぎ」と載っている |
まず「NEW OPEN!」は、これだけ大きく書かれています。
「街の小さなフラワーショップ はなつむぎ」という店名も分かります。
でも、新しく開くことは分かったとしても、いつオープンするのかが書いていなくて分からないのです。
日時の記載がないというのが、このバナーの問題点です。
一方で、写真には花がたくさん並んでいて、「街の小さなフラワーショップ」という表記も、「はなつむぎ」という店名もあります。
お花屋さんだということは十分伝わります。何のお店かを伝える手がかりは、すでにあります。
よって、花やロゴのあしらいを増やすよりも、まずはいつオープンするのかを伝えたい。これが、オープン日を最初に補いたい理由になります。
POINT：いつ・どこで・何がに明確に答える
今回のキーワードは「いつ・どこで・何がに明確に答える」です。
「NEW OPEN!」という言葉が目立つだけで、新しいお店ということが十分伝わるとは限りません。
見る人が確かめたいことに答えられているか。ここが最も重要なポイントです。
ここからは、見る人の疑問から、告知に必要な情報を順に組み直していきます。
今回の動画で、新店告知のバナーが答えるべき問いとして挙げられている3つの観点です。「いつ」は開店日、「どこで」は駅からのアクセスなどの場所、「何が」は何のお店か・どんなときに使えるかを指します。告知を大きく見せることと、この3つの中身が伝わることは別だと考えます。
新店告知バナーに必要な情報を整理する
Beforeから残す良さ
まずは、Beforeのバナーの残す部分を整理していきます。
- 木の入り口と花の親しみやすさ
木の入り口と花の写真には、ふらっと立ち寄りたくなる親しみやすさがあります。 - 手書き文字の温かさ
手書きの文字も、花屋さんの温かい印象に合っています。 - ピンクとグリーンの配色
ピンクとグリーンの全体的な配色もいいですね。 - 曲線の柔らかさ
下の部分の曲線の柔らかさもいい表現です。
こうした印象の良い部分は生かしていきます。
変えるのは雰囲気そのものではなく、情報の役割と、その大きさです。
来店前に確かめたいこと
次に、見る人の立場、つまり実際にこのバナーを見たと仮定した人の立場で整理していきます。
確かめたいのは、次の4つです。
| 確かめたいこと | 答え |
|---|---|
| 1. 何のお店？ | 花屋さん |
| 2. どんな時に利用する？ | 冠婚葬祭やお祝いなど、花を人に贈るケース |
| 3. いつオープン？ | ○月○日（曜日） |
| 4. 自分が行ける場所？ | 駅から近いのか、遠いのか、徒歩でどれくらいか |
オープン日は何月何日なのかに加えて、曜日も必要です。
場所は、駅から近いのか遠いのか、実際に徒歩でどれくらいなのかが知りたいところです。
このように、どんなときに利用できるのかが伝わると、実際に行くイメージがしやすくなります。
今回は、何のお店か・用途・開店日・場所の4つを大きく扱っていきます。
これは必ずこの順番で読ませるという意味ではありません。告知の中心に置く情報を整理するという意味合いです。
使う場面を具体的に伝える
まずは、用途の伝え方から整理していきます。
| 要素 | Beforeの役割 |
|---|---|
| コピー | 「花のある暮らしで、毎日をちょっとやさしく。」で花のある暮らしを伝える |
| 用途 | 丸タグの「ギフトに」「おうちに彩りを」「季節の花いろいろ」でギフト・自宅用などを表記 |
Beforeの「花のある暮らしで、毎日をちょっとやさしく。」は、温かい世界観を伝えていて良いコピーです。
下にも「ギフトに」「おうちに彩りを」「季節の花いろいろ」と、用途のヒントはあります。
ただ、小さな丸に分かれているので、今回はそこをまとめて、使う場面をもう少し具体的にして上のコピーと合わせていきます。
修正後は、次のリード文に差し替えます。
誕生日・記念日の贈りものに。
お祝い・お供えに。毎日の暮らしに。贈るときにも、自宅に飾るときにも使えると分かる文章になっています。
冗長なコピーが悪いのではありません。新店告知では、利用するきっかけやシーンを先に伝える判断をする方が、イメージがしやすくなります。
Beforeへ赤入れする
少し細かいですが、Beforeに全体的に赤入れをしていくと、このような形になります。
この赤入れを踏まえて、どこをどう変えていくのかを整理していきます。
| 対象 | 方針 |
|---|---|
| 用途 | コピーと丸タグを具体的な用途へ |
| 告知 | 組み方を変え、大きさは保つ |
| 写真 | 小さくして店舗情報とまとめる |
| 案内 | 店名を下部へ移し、住所・電話などを追加 |
- 用途：コピーと丸タグを差し替える
上のコピー「花のある暮らしで、毎日をちょっとやさしく。」と、下の丸タグ「ギフトに」「おうちに彩りを」「季節の花いろいろ」は、具体的な用途のコピー「誕生日・記念日の贈りものに。お祝い・お供えに。毎日の暮らしに。」に差し替えます。 - 告知：フォントを調整し、日付を近くにまとめる
大きな「NEW OPEN!」の文字は、少しポップ過ぎる印象もあります。フォントを少し調整して、もう少し細くしてもいいと考えています。デザイン的な調整を加えるところです。
あわせて、日付の情報も「NEW OPEN!」に近接する形でまとめます。大きく目立つ印象は、そのまま残します。 - 写真：全体的に小さくする
写真は全体的に小さくして、店舗のエリア情報のところにまとめます。店舗の外観が、こんなに大きい必要はありません。 - 案内：店名を一番下へ移し、詳しい情報を加える
店名は、下の案内エリア（一番下のところ）に移動する想定で進めます。
理由は、開店告知と日付を上部で目立たせるレイアウトに入れ替えるためです。
そこに、郵便番号や住所、電話番号なども、小さく具体的な情報として加えていきます。
載せる原稿を整理する
赤入れを踏まえて、次は実際にバナーに載せる原稿を整理しました。
今回は架空の想定なので、店舗の詳細な情報などはダミーのテキストで用意しています。
| 区分 | 原稿 |
|---|---|
| 用途 | 誕生日・記念日の贈りものに。お祝い・お供えに。毎日の暮らしに。 |
| 告知・開店日 | Flower Shop / NEW OPEN! 2026.11.7 sat |
| アクセス | 緑野台駅 南口から徒歩5分 |
| 店舗情報 | はなつむぎ TEL:042-XXX-7291 営業時間：10:00〜19:00 〒184-0823 東京都緑野市 緑野台2-8-3 |
Beforeになかった開店日「2026.11.7 sat」と、アクセス「緑野台駅 南口から徒歩5分」が加わっています。
用途は具体的な利用シーンにまとめ、店名と詳しい店舗情報はひとまとまりにしました。
この原稿をどう配置していくかを、次のワイヤーフレームで考えていきます。
デザインや原稿に、修正したい箇所と修正内容を赤字で書き込むことです。今回の動画では、Beforeのバナーに直接書き込みながら、用途・告知・写真・案内のどこをどう変えるかを整理しています。
新店告知バナーのワイヤーフレームを組む
情報の強弱と、配置を決める
次に、この原稿をどう配置していくのかを考えていきます。
| 情報 | 配置と強弱 |
|---|---|
| 基本方針 | 使う場面を上部にまとめる |
| 告知 | 新規オープンと開店日を大きく |
| アクセス | 告知の下に駅からの行き方 |
| 店舗 | 写真・店名・詳しい情報を下部へ |
新規オープンと開店日は、一番大きく見せていきます。
上には、どんなときに利用できるのかが分かる言葉を置きます。
告知と開店日の下には、駅からのアクセスを置きます。
詳しい店舗の情報は、写真と店名と一緒に下の方へまとめます。
このように、全部を同じ大きさにせず、告知の中心と細部に分けて配置やバランスを決め、ワイヤーフレームを組んでいきます。
ワイヤーフレームを確認する
原稿と配置の整理を元にしたワイヤーフレームがこちらです。
- 上部：用途
- 中央：「Flower Shop」「NEW OPEN!」、開店日、駅からのアクセス
- 下部：外観写真の枠と、店名などの店舗案内
開店告知に必要な情報は上部で大きく、店舗情報の詳細はひとまとめにして下部に小さく整理しています。
色や写真がなくても、何を中心に伝えるのかが分かる構成になっているのが分かります。
Beforeとワイヤーフレームを比較する
Beforeとワイヤーフレームを比較していきます。
並べてみると、外観写真が大きく占めていた場所が、告知の情報へ割り当てられているのが分かります。
店名はBeforeにもありましたが、ワイヤーでは下の案内エリアへ移動しています。
下の丸タグに分かれていた用途も上のコピーへまとまっていて、利用シーンがストレートにイメージできます。
このように、情報の有無だけではなく、何を主役にして、何を補助に回すのかを意識して組み直しています。
写真や色を入れる前に、文字と枠だけで情報の配置や順番を組んだ下書きのことです。今回の動画では、BeforeとAfterの間にワイヤーを挟むことで、見た目ではなく情報の置き場所と強弱が整理されたかを確認しています。
完成したAfterの新店告知バナーを確認する
完成したAfterのデザインがこちらです。
- 上に用途のコピー
- その下に「Flower Shop」「NEW OPEN!」
- 続けて「2026.11.7 sat」
- そして「緑野台駅 南口から徒歩5分」
- 下のグリーンのエリアには、ワイヤー同様に写真と「はなつむぎ」の店名、店舗情報をまとめる
Beforeの親しみやすさを残しながら、新しいお花屋さんがいつ、どこにできるのかが伝わる形に整えることができました。
主役と補助を分けて見せる
デザイン面の見た目でも、役割を分けています。
| 要素 | 見せ方 |
|---|---|
| 告知 | ピンクで開店告知と日付 |
| 用途 | アクセスとともに濃いグリーン |
| 背景 | 花をぼかして文字を読みやすく |
| 案内 | 写真と店舗情報を下部へ |
- 告知と開店日をピンクでまとめる
中央では、ピンクの告知と開店日をまとめて、強く見えるようにしています。
ややポップな印象だった「NEW OPEN!」のフォントは、既存のものよりも細い手書きのフォントを使用しました。意図的に強く出すぎないように、ウェイト（太さ）を下げています。 - 背景の花をぼかす
中央の背面は、花を目立たせすぎると文字の情報が見えづらくなってしまいます。そこで、背景の花は意図的にぼかして、文字の後ろを落ち着かせています。 - 用途とアクセスは濃いグリーン
用途とアクセスは濃いグリーンにしています。ここは既存のバナーと同じイメージです。 - 写真は外観が判別できる大きさへ
写真は、お店の外観が判別できる大きさへ小さくまとめて、店舗情報の横に配置しました。
すべてを作り変えるのではなく、元のバナーのいい部分を生かした見せ方を意識することで、このような見せ方にブラッシュアップできます。
フォントの文字の太さのことです。同じ書体でも、ウェイトを下げると細く軽い印象に、上げると太く強い印象になります。今回は「NEW OPEN!」が強く出すぎないように、ウェイトを下げた手書きのフォントに調整しています。
新店告知バナーのAfterとBeforeを比較する
BeforeとAfterの2枚を比較していきます。
「NEW OPEN!」が目立つことは、いずれも共通しています。
変わったのは、見た人に何を伝えるかの軸です。
調整したAfterは、開店日とアクセスを補い、用途を具体的にし、写真と店舗情報をまとめて下部に配置しました。
単に情報量を増やしたのではありません。新店告知として答えたい問いに応じて、面積の割合を判断し調整しています。
修正前は具体的な情報が伝わりづらかったバナーが、必要な情報を追加し、見え方の強さとバランスを調整することで、直感的に伝わりやすいバナーにブラッシュアップできました。
情報の骨格は別の画角のバナーにも使える
また余談ですが、こうした情報の骨格は、別の画角のバナーを組む際にも同様に使えます。
実際にバナーをベースに展開する場合は、他の媒体に合わせて文字量や大きさを調整していくことで、世界観も統一でき、一貫性も出せます。
今回は、作成したスクエア（1:1）のバナーをベースに、Facebookの別画角のバナーを2種、生成AIを活用して作成しました。
- 縦長 4:5（生成AIラフ）
- 横長 1.91:1（生成AIラフ）
元の情報やデザインがしっかり組まれていると、バランスも破綻せず、展開も効率化できます。
今回の添削は、その元になるバナーを整理し、調整したものです。
画像の縦と横の比率のことです。今回の動画では、正方形のスクエア（1:1）を元に、縦長（4:5）と横長（1.91:1）のバナーへ展開しています。広告を出す媒体や面によって適した比率が異なるため、同じ情報の骨格のまま文字量や大きさを調整して作り分けます。
まとめ：新店告知バナーは「いつ・どこで・何が」に明確に答える
今日の持ち帰りは、「いつ・どこで・何がに明確に答える」です。
告知を大きく見せることと、告知の中身が伝わることは別です。
見る人が知りたい具体から、文字と写真の役割を決めること。
バナー1枚で明確に答えられるかどうかを、ぜひ制作の際は意識してみてください。
何のお店が、いつ、どこにできるのか。この1枚から答えられないところがあれば、そこを補うところから始めていきましょう。
AIは、花屋さんらしい雰囲気や親しみやすい見た目のバナーを作ってくれます。そこから何を残して、何を補い、何を大きく見せるのかを決めるのはデザイナーの仕事です。見る人が来店を考えるときの疑問から、情報を組み立てることを意識してみてください。
こうした目的から情報と見せ方を組み立てる考え方は、デイトラの学び放題コースやWebデザインコースでも、手を動かしながら学べます。
新店告知バナーのデザインに関するよくある質問
Q. AIで作った新店告知バナーを直すとき、最初に何を補えばいいですか？
オープン日です。動画では、花の写真や店名はすでに載っているため、それよりも先に「いつ開くのか」を伝えることを正解にしています。
Q. 「NEW OPEN!」が大きく目立っていれば、新店告知として十分ではないですか？
十分とは限りません。動画では、告知を大きく見せることと、告知の中身が伝わることは別だとしています。見る人が「いつ・どこで・何が」を確かめられるかが重要です。
Q. 来店前に見る人が確かめたいことは何ですか？
動画では、何のお店か、どんなときに利用するか、いつオープンするか（日付と曜日）、自分が行ける場所か（駅からの距離）の4つを挙げています。今回はこの4つを告知の中心に置く情報として扱っています。
Q. Beforeの「ギフトに」などの丸タグはなぜ変えたのですか？
用途のヒントはあったものの、小さな丸に分かれていたためです。動画では「誕生日・記念日の贈りものに。お祝い・お供えに。毎日の暮らしに。」という具体的な利用シーンのコピーにまとめ、上のコピーと合わせています。
Q. 作ったバナーを別のサイズに展開するときのコツはありますか？
動画では、元になるバナーの情報の骨格をしっかり組んでおくことを挙げています。そのうえで媒体に合わせて文字量や大きさを調整すると、世界観と一貫性を保ったまま、生成AIで縦長4:5や横長1.91:1にも効率よく展開できます。
新店告知バナーのような情報設計を身につけるならデイトラ「Webデザインコース」
本記事で解説したAIバナーの添削や、見る人の疑問から情報を組み立てる考え方は、独学でも押さえることはできます。
ただし、実務で通用するレベルまで体系的に習得するには、現役で活躍するメンターから添削を受けながら学べる環境が近道です。
デイトラの「Webデザインコース」は、実務レベルを想定したカリキュラムと、現役プロによる質問対応が特徴のオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。
見た目を整えるだけでなく、「見る人が何を知りたいか」から考えるデザインを手を動かしながら学びたい方は、ぜひ一度カリキュラムをチェックしてみてください。
なお、バナー添削シリーズでは他のテーマも解説しています。合わせて読んでみてください。
- AIバナー添削｜不動産バナーは「判断材料」を先に整理して改善する
- AIバナー添削｜買取バナーは「広告の主語」から改善する
- AIバナー添削｜求人バナーは「判断材料」で改善する
- AIバナー添削｜公開前に見た目より先に根拠を確認する手順
- バナーデザイン添削｜使う人の「決める順」で情報を並べ替える方法
- バナーデザイン添削｜情報を5つの役割にまとめて伝える方法
- バナーデザイン添削｜伝わらない広告を直す最初の一手3ステップ
- バナーデザインは情報整理から｜AI生成バナーを直す3ステップ
- バナーデザインは情報の優先順位で決まる｜AIバナー添削4ステップ
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
トム（@yuhei_design）
デイトラのWebデザイナーです。印刷会社に7年務めたのち、2021年に独立しました。現在はLP制作やUIデザインに従事しながら、デザイン×生成AIの実践的な活用方法を発信しています。
