画像生成AIで告知バナーを作る：素材づくりから文字の配置、公開前チェックまで
ChatGPT Imagesでイラスト素材を作り、日時や会場は編集できる文字で配置。修正の頼み方と、使い回せるバナーの作り方を紹介します。
完成させるのは、翌月も使える告知バナー
毎回すべてを生成し直すと、文字の位置や色が変わり、シリーズとして使いにくくなります。背景・イラストと、催し名・日時・申込先を分けて管理すると、次回は必要な箇所を差し替えられます。この記事では、架空の商店街の相談会を題材にします。実際の生成結果や効果を報告した記事ではありません。
先に決めるのは、見た目より掲載条件
横長のWeb用と縦長の店頭用では、余白の取り方が変わります。最初に掲載先を一つ選び、文字の量と配置を決めます。以下のサイズや文字量は編集部の制作例で、サービスの必須条件ではありません。
表は横にスクロールできます
| 項目 | この練習での指定 | 理由 |
|---|---|---|
| 用途 | Web告知・横長1200×630px | 同じ比率で修正しやすくする |
| 主役 | 相談する店主と担当者のイラスト | 相談会の内容を伝える |
| 余白 | 左側に見出し用の空間 | 文字が人物と重ならないようにする |
| 配色 | 青・白・淡い緑 | 既存サイトに合わせる |
| 別管理する情報 | 名称・日時・会場・料金・URL | 変更時に文字だけ修正する |
- 条件を決める
掲載先と必要情報を確定
- 素材を生成
イラストと背景を用意
- 文字を配置
編集可能な状態で入力
- 確認して保存
見本と元データを残す
生成依頼は、主役・構図・余白を具体的に
ChatGPTで画像作成を依頼するか、画像機能を選びます。次の文は出発点です。実在の商品写真が必要な告知なら、生成で外観を作り替えず、利用可能な実物写真を使う判断も必要です。
架空の商店街のAI相談会に使うイラスト素材を作ってください。 店主と相談担当者が、机の上のノートPCを一緒に見ています。親しみやすく、簡潔な輪郭と穏やかな表情。青・白・淡い緑を中心にしてください。 横長で人物は右側に配置し、左側は見出しを後から置ける余白を広く残してください。文字・ロゴ・実在の店舗名は入れないでください。人物の手とPCのつながりが自然かを確認してください。背景は透過にしてください。
修正を頼む順番
元画像を選ぶ
採用したい画像を編集の対象にする
一点を指定
「左側の余白を広くする」など変更を絞る
全体を再確認
修正対象以外の人物や色も見る
文字は後から置き、縮小した状態で読む
生成画像にも文字を入れられますが、告知の日時や会場を後で変更するなら、HTMLやデザインツールの文字として置く方が管理しやすくなります。日時・会場を本文より小さくしすぎず、スマホで実際に表示される幅でも確認します。
表は横にスクロールできます
| 対象 | 確認方法 | 修正の例 |
|---|---|---|
| 日時・会場 | 主催者の確定原稿と一文字ずつ照合 | 西暦・曜日・建物名を直す |
| 可読性 | 実際のカード幅で表示して読む | 背景を薄くする、行数を減らす |
| 切り抜き | 白背景と濃い背景の両方に置く | 輪郭の白い縁や欠けを修正 |
| 人物・道具 | 拡大して手、眼鏡、PCを確認 | 破綻した箇所だけ再編集 |
| 申込導線 | バナーから遷移先を開く | 古いフォームのURLを差し替える |
次回の担当者が直せる形で引き継ぐ
透過素材、文字を含む編集用ファイル、公開用画像を分けて保存します。生成した日・使ったサービス・依頼文・修正内容も記録すると、別サイズや次回分を作るときに迷いません。PNGを書き出しただけでは文字や配置を再編集できないため、元データまで残すことが大切です。
用途： 掲載サイズ： 確定原稿の保管場所： 生成日・サービス・表示されたモデル名： 採用した依頼文： 編集用ファイル： 公開用ファイル： 確認者・確認日：
機能や画面が変わった場合は、公式案内を確認してください。
