AIで告知バナーを作る方法｜伝える条件と視線の順序を決める

こんにちは。バナナデスクです。

AIで告知バナーを作ると、雰囲気のよい画像はすぐに出てきます。でも「開催日は見えるのに、何時からなのかが分からない」というバナーでは、参加を考える人が立ち止まってしまいます。

バナーづくりでは、画像の見栄えと、参加するための条件を分けて考えます。今回は、架空の教室運営者向けセミナーを題材に、画像生成AIで文字なしのモチーフを作り、日時や料金は編集できる文字として配置しました。

横長・正方形・縦長の3サイズを同じ内容で制作したので、単純な引き伸ばしで何が困るのか、サイズが変わっても残す情報は何かを具体的に見ていきましょう。以下は実際の募集ではなく、制作方法を説明する見本です。

執筆：バナナデスク｜WEBビジネスの設計・集客・改善

最初に告知原稿を固定する

画像を作る前に、掲載する事実を短い表へまとめます。文章をきれいに見せるために、日時や料金が生成のたびに変わっては困るからです。

曜日は日付と照合し、時間は開始と終了をそろえました。「60分」という見出しも、19時から20時までの設定と対応しています。定員8名は架空イベントの設定であり、実際の残席や人気を示す数字ではありません。

生成を始めた後でも、これを照合元として使います。見出しを短くする場合も、価格の税込表示や日本時間という条件まで勝手に削らないようにします。

何を大きく見せるかを3段階にする

今回、最初に伝えるのは「教室案内を見直す会」であること。次に日時・場所・料金、最後に対象と用意する物を配置しました。どの文字も同じ大きさにすると、最初にどこを読めばよいか分かりにくくなります。

画像の役割は、文章や案内づくりの雰囲気を補うことに絞りました。ノートと鉛筆だけで開催日時を説明することはできないので、事実を表す文字より画像を目立たせすぎないようにしています。

画像生成AIには、文字なしのモチーフを依頼した

2026年10月1日、OpenAIの組込画像生成機能で、紺色の開いたノート、黄色い鉛筆、青緑の紙カードを使う正方形のモチーフを生成しました。人の写真、ロゴ、実績の数値は含めていません。

実際に使った指示の中心は「架空の文章づくりセミナーのバナーへ小さく置く紙の立体模型。背景はアイボリー。ノート、鉛筆、カード以外の小物や文字を入れない」です。指示の全文は配布データへ保存しました。

日時や価格は、この生成画像の中へ書き込ませていません。後から文字レイヤーとして配置すれば、開催日が変わっても、画像全体を再生成せず該当文字を編集できます。AIで文字入り画像を作れる場合でも、変更頻度や文字数から工程を選びます。

OpenAIの画像プロンプト資料でも、必要な文言と配置を具体的に示し、出力した文字のつづりや読みやすさを点検する考え方が説明されています。生成できることと、修正しやすい形式で残ることは別です。

横長640×360pxの完成見本

横長では、左に題名と日付、右にモチーフを置き、下へ参加条件を続けました。題名、日付、料金を順に読めるよう、大きさと余白を変えています。

この画像は640×360pxです。ノートの写真のように見える部分は生成イメージで、実際の会場・配布資料の写真ではありません。図中の日時や金額も、冒頭の架空条件に対応する制作見本です。

小さい画像では、下部の対象や用意する物は見出しほど大きくできません。重要な条件を画像だけへ閉じ込めず、告知ページや投稿本文にも同じ内容をテキストで載せます。画像を拡大して読んでもらう前提にはしません。

正方形と縦長は、配置を組み直す

同じ内容で、1080×1080pxと1080×1920pxも制作しました。横長をそのまま引き伸ばすと文字も図もゆがみます。上下を切るだけでは、料金や対象が欠けるかもしれません。そこで情報のまとまりを各サイズへ置き直しました。

3サイズとも指定寸法で画像を書き出し、全体を目視しました。文字はPillowとSVGで個別に配置した編集例であり、特定のバナー作成サービスのワンクリック機能を実操作した記録ではありません。SVGには編集可能な文字・図形と生成モチーフを保持しています。

縦長には広いスペースがありますが、すべてを飾りで埋める必要はありません。今回の見本では、参加条件を読み終えるまでに内容が途切れないよう、まとまりごとに余白を設けました。

3サイズのPNG・編集可能SVG・架空条件表をダウンロード

配布SVGの日時を編集し、PNGへ書き出すには

配布したSVGは、文字を編集できる元データです。たとえばInkscapeで開いて修正できます。以下は同ソフトの初心者ガイドに沿った手順で、この記事の3枚をInkscapeで制作・操作検証した記録ではありません。メニュー名は利用する版や言語により変わります。

1. ZIPを展開し、N044-wide-640x360.svgをコピーして、banner-practice.svgという名前で残します。編集するのはSVGです。完成PNGを開いても、日付は文字として選べません。
2. Inkscapeの「ファイル」→「開く」でコピーしたSVGを開きます。文字ツール（TまたはF8）で日付の文字を選び、練習なら2026.11.18（水）を2026.11.25（水）へ変更します。時刻・料金・定員はそのままにします。配布見本の開催日は11月18日のままです。
3. 日付が右側の画像や次の行へ重ならないかを見ます。元の文字はBIZ UDGothic指定です。代替フォントに変わった場合は、改行・文字サイズ・位置を調整し、見出しや料金も読めることを確かめます。
4. 編集用のbanner-practice.svgを保存します。PNGの書き出しだけで終わらず、次回も文字を直せるSVGを残します。
5. 「ファイル」のエクスポート画面を開きます。ガイドではShift＋Ctrl＋Eです。出力範囲はページ（Page）を選び、PNGの幅640px・高さ360pxを確認して、別名のbanner-practice.pngへ書き出します。「選択範囲」では、選んだ日付だけを書き出す場合があります。
6. 書き出したPNGを開き、640×360pxか、日付だけを変更できたか、文字やモチーフが欠けていないかを元の条件表と照合します。実際に掲載する幅でも日時・料金が読めるかを確かめます。

文字ツール、SVGの保存、PNGの出力範囲と寸法は、それぞれガイドで確認できます。幅を640pxにしても高さが360pxにならない場合は、横長のSVGを開いたか、出力範囲がページかを先に確認してください。縦横比を無理に変えて帳尻を合わせないようにします。

情報が抜けた短い案と、完成案を比べる

次の左列は、情報抜けを説明するために作った短い文案です。AIが自然にこの失敗をしたという実験結果ではありません。どの言葉が抜けると読者の判断が止まるのかを見ます。

短い案へ何でも追記すればよいわけではありません。画像の役割、告知本文の役割、詳しい案内の役割を分けます。ただし、無料か有料か、いつなのかなど参加判断に関わる条件は、気付かないまま先へ進ませる配置にしないでください。

最後は文字の照合と表示確認を別々にする

今回は、生成した画像だけでなく、3サイズのテキスト要素を原稿の条件表と照合しました。日付、時刻、日本時間、Zoom、税込価格、定員、対象、準備物が各案に残っていることを確認しています。

それでも、文字列が存在することと、読めることは別です。最終的には掲載場所で次の点を見ます。

• 題名と日付が、縮小後も最初に見つかるか。
• 文字が画像や装飾と重ならないか。
• 四辺を切り抜く記事一覧でも、重要な条件が消えないか。
• スマートフォンで読みにくい条件が、本文にも同じ内容で書かれているか。
• 申し込み先を設ける実案件なら、バナーの日時・料金と移動先が一致するか。

W3Cの文字を含む画像に関する資料は、可能な場合は実際のテキストを使うことや、画像内の重要な文字に代替情報を用意する考え方を示しています。ブログでは画像の下に日時や条件を本文として置けば、拡大しなくても確認でき、読み上げやコピーにも使えます。

この制作では広告配信やクリック率の比較は行っていません。どの配置が成果につながるかは、実際に公開した後、掲載場所や対象をそろえたデータで判断します。

修正できる形で保存する

完成画像だけでなく、告知原稿、文字を編集できるデータ、生成画像の原本、出力した3サイズを一緒に残します。今回の配布データにもPNGとSVG、架空条件表、モチーフを含めました。SVGの文字表示は環境のフォントによって変わるため、編集後は改めて書き出しを点検してください。

バナーの品質は、きれいな絵があるかだけでは決まりません。読者が知りたい条件を、読める順番で渡せるか。AIを画像づくりに使いながら、この確認は原稿と最終表示へ戻って行いましょう。

関連記事：LPにアクセスはあるのに申し込みがない原因と改善チェックリスト