ChatGPT画像生成講座 第6章6.1節「スマホ向けWeb広告と記事内広告を作る方法」

ChatGPTで「スマホ向けWeb広告」を作ってみよう

前章ではChatGPTの画像生成機能を用いて、構造化プロンプトで画像を作る基本について解説しました。本章ではその応用として、さまざまなサイズのバナーを作成する方法について解説します。

まずは「724px×1024px」という縦長のバナーを作る手順を紹介します。以下の流れに沿って、構造化プロンプトを順番に組み立てていきましょう。

ステップ1：全体設定で縦長バナーを意識する

最初にバナーの大きさやアスペクト比（縦横比）を明示しましょう。今回は縦長のバナーとして「724×1024px」のサイズを使用します。

キャンバス:
  幅: 724
  高さ: 1024
  画像の縦横比（アスペクト比）: "0.707:1"

この設定によりスマホでの自然な表示が実現し、広告としての視認性も高まります。

ステップ2：テーマカラー・雰囲気・フォントの指定

続いて全体のトーンや雰囲気を決めるために、テーマカラーやフォント、印象をコントロールするキーワードを指定します。

テーマカラー: ["#0B132B", "#1C2541", "#3A506B"]
雰囲気: ["専門的", "現代的", "イベント感"]
フォント: "Noto Sans JP"

これらの設定によって信頼感のある専門的な印象を与えるデザインが実現でき、見る人の興味を引く構成になります。

ステップ3：背景を設計する

背景のデザインはコンテンツを引き立たせるための重要な要素です。ここではAIAI(人工知能)は人工的に作られた知能で、様々な技術を組み合わせて人間のような知的行動を実現できるものです。やテクノロジーの印象を伝えるための抽象的な背景を設定します。

背景設定:
  種類: "デジタル抽象"
  色彩: "ダークネイビーからミッドブルーのグラデーション"
  パターン: "斜めラインとグリッド状の光る回路線"
  装飾効果: ["点滅するパーティクル", "ぼかし入りの光彩"]

このような背景を使用することで、視認性を確保しつつも未来的な印象やAIらしさを演出できます。

ステップ4：テキストブロックで伝えたい情報を整理

実際に表示されるテキストをどの順番で、どのように見せるかを設計します。視線の流れを意識し、重要な順に情報を並べてください。

テキスト群:
  - 行: "AI Studying 2025"
  - 行: "最先端AIの活用ノウハウを学ぼう"
  - 行: "【参加無料】オンラインセミナー開催"
  - 行: "2025年7月18日(金) 19:00〜 / Zoom配信"

タイトル・説明・訴求・開催情報を順に配置することで内容が伝わりやすく、興味を引く構成になります。

ステップ5：ラベルやバッジで信頼感・イベント性を演出

視線を引くためのワンポイントとして、ラベルやバッジを使います。公式イベントであることを強調するためのパーツです。

ラベル:
  - 行: "AIプロジェクト公式イベント"
    背景カラー: "#F94144"
    配置: "右上"

小さな面積ですが赤系のバッジは非常に目立ち、重要な情報であることを直感的に伝えてくれます。

ステップ6：フッターで行動を促す（CTA）

ユーザーのアクションを促すための「今すぐ申し込む」などのコールトゥアクション（CTA）を設けます。

フッター:
  背景色: "#EF233C"
  テキスト: "【無料】今すぐ参加申し込み"

中央下に配置することで視線の最後に止まりやすく、クリックを促す効果が期待できます。

ステップ7：レイアウト設計と注意点のまとめ

最後に全体の配置順と余白の取り方を調整し、バナー全体の視認性と引きのあるデザインに仕上げていきます。

レイアウト:
  種類: "情報階層型レイアウト"
  並び: "上から順に：タイトル → 説明 → 開催情報 → ラベル・フッター"
  空間バランス: "余白を多めに取り、視認性と引きのある構成に"

この設計により情報の過不足がなく、見る人にとって心地よいバナーになります。人物画像は使わず、すべてのテキストが読みやすく配置されていることがポイントです。

上記の作業を進めることで、以下の構造化プロンプトを生成できます。

画像で重要視したい部分は最後に「プロンプト実行時の注意点」という部分を作って具体的な内容を入力してください。実際にできた画像は以下の通りです。

ChatGPTより

このように縦長のバナーを作成できます。