現在の見出し:4.1節：ChatGPTでバナー画像を作ってみよう
見出し一覧
- 4.1節：ChatGPTでバナー画像を作ってみよう
- - バナー画像を作成するまでのステップ
- - 完成したプロンプトのデザインやテキストを変更してみよう
【PR】『Python』を学べる企業・個人向けのプログラミングコース
バナー画像を作成するまでのステップ
本節ではYamlを用いた構造化プロンプトで、実際に実務で活用できる画像を作っていきます。実際に以下のバナー画像を作る方法を例に解説します。
ChatGPTより
本節で用いた内容をコピペして使ったり、実際に1から手を動かして書いたりするなど、自分好みの方法で参考にしてみてください。
0からバナー画像を作成する手順は以下の通りです。
- どんなバナーを作るのか決める
- 必要な要素を洗い出す
- YAML形式で構造化プロンプトを作成し、実際に画像を作ってみる
- 画像の登場人物を任意の被写体に変更する
- 既存のデザインを参考にバナーを編集しよう。
- 生成した画像を構造化プロンプトに変更する
- 画像生成で変わってしまう部分を固定する際のポイント
このように簡単な構造化プロンプトから編集を繰り返し、最終的に特定部分だけ変えて使いまわせるテンプレートの作成を目指します。ではさっそく本題へ入りましょう。
どんなバナーを作るのか決める
まずはどのような目的で使うバナー画像なのかを明確にしましょう。記事内広告のバナーなのか、Webメディアの記事のアイキャッチなのかによって、デザインや伝えたいメッセージが大きく変わってきます。
視聴者や読者にどんな印象を与えたいのか、どんな行動を促したいのかを意識することで、より効果的な画像が作れるようになります。
今回は「AIAI(人工知能)は人工的に作られた知能で、様々な技術を組み合わせて人間のような知的行動を実現できるものです。副業に関するバナー」を例に作成します。
このバナーは初心者向けにAIを使った副業の始め方を紹介する内容です。そのため「安心感」や「前向きさ」が伝わるデザインを意識します。
さらに、明るめの配色とシンプルな構成で、視聴者の目に留まりやすくなるよう工夫します。
必要な要素を洗い出す
次に、画像に含めたい要素を整理しておきましょう。ここで洗い出した情報が、あとでYAML形式の構造化プロンプトにそのまま反映されます。
たとえばタイトルやサブテキスト、登場人物の特徴、背景の色やパターン、全体の配色、画像サイズ、ムードなどが挙げられます。これらをあらかじめ明確にしておくことで、プロンプト設計の精度が上がります。
今回は、以下の要素を使用します。
- タイトル：「AIで副業を始めよう」
- サブテキスト：「初心者でも安心の入門講座」
- 登場人物：ノートPCを操作しているビジネスウーマン
- 背景：カラーコード「#e0f7fa」から「
#ffffff」へのグラデーション - メインカラー：ブルー（例：#1E90FF）
- アクセントカラー：ゴールド（例：#FFD700）
- 画像サイズ：1980x1280
- ムード：信頼感、やさしさ、前向きな印象
- 文字配置：タイトルは左上、サブテキストは右下に配置
- 文字サイズ：
- タイトル：60px
- サブテキスト：36px
背景には淡い水色（#e0f7fa）から白（#ffffff）へのグラデーションを使用します。白単色よりも柔らかさと奥行きが出て、人物や文字が自然に際立ちます。
文字のサイズは画像全体のバランスに大きく影響するため、明確にピクセルで指定します。また、画像サイズは「1980x1280」を指定することがおすすめです。
ChatGPTより
「1980x1080」のように16:9の比率で指定すると、上記のように画像の左端が見切れることがあるので注意してください。色に関しては、単なる「ブルー」や「ゴールド」といった名前よりも、カラーコード（#1E90FFなど）で指定することでより正確な色味が反映されます。
YAML形式で構造化プロンプトを作成し、実際に画像を作ってみる
これまでの過程で洗い出した要素をもとに、YAML形式で構造化プロンプトを作成しましょう。構造化プロンプトでは画像の構成要素を階層的に整理して記述します。
これによりChatGPTが画像の要件を明確に把握し、意図したとおりの画像を生成しやすくなります。また、YAMLの後に自然言語自然言語は人間が日常的コミュニケーションで使用する言語システムで、文法規則や語彙を持ち、文脈や状況に応じた多様な意味を伝達できます。で「この設定で画像を生成してください」と明記することで、プロンプトとしての完成度が高まります。
以下が、構造化プロンプトと指示文を一体化した完成形です。
# 構成設定（YAML形式）
タイトル: "AIで副業を始めよう"
サブテキスト: "初心者でも安心の入門講座"
スタイル: "フラットデザイン"
背景:
種類: "グラデーション"
色:
- "#e0f7fa"
- "#ffffff"
登場人物:
- 種類: "ビジネスウーマン"
表情: "自信に満ちた"
ポーズ: "ノートPCを操作している"
配色:
メインカラー: "#1E90FF"
アクセントカラー: "#FFD700"
文字配置:
タイトル: "左上"
サブテキスト: "右下"
文字サイズ:
タイトル: "60px"
サブテキスト: "36px"
画像サイズ: "1980x1280"
ムード: "信頼感とやさしさ、前向きな印象"
# 指示
この設定に従ってバナー画像を生成してください。
では実際にこのプロンプトをChatGPTに張り付けて実行します。その結果、以下画像が生成されました。
ChatGPTより
画像の登場人物を任意の被写体に変更する
続いて、バナーに特定の人物画を利用する方法を解説します。先ほど作成した画像の被写体を、以下の人物画に差し替えてみます。
写真ACより
上記の写真をチャット欄の「＋」から追加し、「作成した画像の被写体を、添付した画像の女性に差し替えて最適化してください。」というプロンプト入力・実行します。
すると以下のような画像ができます。
ChatGPTより
いい感じに差し替えられましたね。ただし、サブタイトルが途中で切れているのでこちらも編集していきます。ほかにもメインタイトルの文字サイズ変更と、その横にある電球アイコンを削除したいので、こちらも同時に編集していきましょう。
ChatGPTより
まず生成された画像をクリックし、表示画面の右上にある「編集する」アイコンをクリックします。
ChatGPTより
編集したいポイントをドラッグして塗りつぶします。そして以下のプロンプトを入力・実行します。
プロンプト
編集で指定したところを順次編集してください。
-編集で塗りつぶしたところである「電球アイコン」は不要なので消してください。
-「AIで副業を始めよう」という文字が大きすぎるので、あと20px分小さくしてください。
-「初心者でも安心の」で途切れています。こちらもあと10px分文字を小さくして全文表示してください。
ChatGPTより
すると上記のように、バランスの良い仕上がりになりました。ただし、いつの間にか背景のグラデーションが消えていることや、デザインがかなりシンプルなので調整を加えていきましょう。
既存のデザインを参考にバナーを編集しよう
ChatGPTは読み込んだ画像の色や配置、どのような要素が含まれているのかを代替把握できます。そのためバナーのデザインに迷ったときは、自社のWebサイトやほかのデザインを参考にすることが可能です。
今回は本カリキュラムを提供している「CodeCamp」のサイトデザインを参考に、先ほどのバナーをデザインする方法について紹介します。
はじめに、参考にするWebサイトのトップ画面やURLをChatGPTに張り付けます。
ChatGPTより
URL及び画像を読み込んだあと、以下のプロンプトを入力・実行します。
プロンプト
読み込んだ画像のサイトデザインを参考に、先ほどの画像のデザインを変えてみて下さい。その際、被写体とテキストの位置やデザインは絶対に変えないでください。
ChatGPTより
すると上記のように画像のデザインが追加されました。Webサイトのトップ画面で採用されていることがわかります。
ChatGPTより
先ほどより良くなったものの、サブタイトルのデザインが変わっていることや左が見切れているため、こちらを再度編集機能で修正します。
ChatGPTより
だいぶ良くなりましたね！デザインについては一旦これで良しとしましょう。
生成した画像を構造化プロンプトに変更する
最後に完成した画像を構造化プロンプト化します。ChatGPTへ以下のプロンプトを実行してください。
プロンプト
これで完成形とします！この画像を1回のプロンプトで生成できるように、Yamlを用いてデザインの色やテキスト・被写体の配置などを縦・横・右・左・ごとに細かく構造化プロンプトにしてください。
生成されたプロンプト
# --------------- 全体設定 ---------------
キャンバス:
幅: 1280 # px
高さ: 720 # px
余白:
上: 0px
下: 0px
左: 60px # 左に 60px の空白を確保
右: 0px
背景色: "#FFFFFF" # ベースは白
スタイル: "フラットデザイン"
# --------------- 装飾ストライプ ---------------
ストライプ群:
- 幅: 90px
色: "#E8FFF4" # ペールグリーン
角度: 6deg
位置:
X: 65% # 画面右側
Y: 0%
高さ: 120%
- 幅: 90px
色: "#FFFFFF"
角度: 6deg
位置:
X: 71%
Y: 0%
高さ: 120%
- 幅: 90px
色: "#B3DCFF" # ライトブルー
角度: 6deg
位置:
X: 77%
Y: 0%
高さ: 120%
# --------------- テキストブロック ---------------
タイトル:
行: "AIで副業を始めよう"
フォントサイズ: 148px
フォントカラー: "#004B80" # 濃いブルー
行間: 0.9
ウェイト: 700
位置: # 左上寄せ（余白 60px を考慮）
基準: "左上"
X: 0px
Y: 40px
サブタイトル:
行1: "初心者でも安心の"
行2: "入門講座"
フォントサイズ: 60px
フォントカラー: "#FFFFFF" # 白文字
背景ボックス:
塗り色: "#FFC400" # メインイエロー
角丸: 4px
余白上下: 14px
余白左右: 28px
行間: 1.0
ウェイト: 700
位置:
基準: "左下タイトル"
オフセットY: 40px # タイトルブロック下から 40px
# --------------- 被写体（人物写真） ---------------
被写体:
種類: "若いビジネスウーマン"
表情: "穏やかな笑顔"
ポーズ:
手: "右手の人差し指を立てる"
小道具: "左手にスマートフォン"
衣装: "黒のテーラードジャケット、白インナー"
髪型: "肩上のボブ、ダークブラウン"
配置:
基準: "右下" # 画面右側に固定
高さ占有率: 90% # 画像が切れない程度で大きく配置
オフセットX: -40px # 右端から少し内側
オフセットY: 0px
# --------------- 色パレット（再利用用） ---------------
パレット:
ブルー濃: "#004B80"
ブルー淡: "#B3DCFF"
グリーン淡: "#E8FFF4"
イエロー: "#FFC400"
ホワイト: "#FFFFFF"
構造化プロンプトを生成できたら、再度実行してみてどのような画像ができるのか確認しましょう。
ChatGPTより
ここからさらにプロンプトを修正します。修正内容は以下の通りです。
- 被写体がアニメ調なので実写に固定したい
- 画像の左が窮屈
- さらにワンポイントデザインを追加したい
これらの内容を以下のように修正します。
- 被写体がアニメ調なので実写に固定したい：被写体に「スタイル：実写の女性」の要素を追加
- 画像の左が窮屈：キャンバスのサイズを「1920 × 1280」に変更
- さらにワンポイントデザインを追加したい：フッターデザインを追加
もし個人的に変えたいところがある場合は、該当するブロック部分に「変数変数はデータを一時的に記憶しておく場所です。名：内容」という形で追記しましょう。
上記の修正を加えた最終的なプロンプトが以下の通りです。
# --------------- 全体設定 ---------------
キャンバス:
幅: 1980
高さ: 1280
padding: "60px 40px 60px 60px"
背景色: "#e0f7fa"から"#ffffff"へのグラデーション
スタイル: "フラットデザイン"
# --------------- 装飾ストライプ ---------------
ストライプ群:
- 幅: 90px
色: "#E8FFF4"
角度: 6deg
位置:
X: 65%
Y: 0%
高さ: 120%
- 幅: 90px
色: "#FFFFFF"
角度: 6deg
位置:
X: 71%
Y: 0%
高さ: 120%
- 幅: 90px
色: "#B3DCFF"
角度: 6deg
位置:
X: 77%
Y: 0%
高さ: 120%
# --------------- テキストブロック ---------------
タイトル:
行: "AIで副業を始めよう"
フォントサイズ: 148px
フォントカラー: "#004B80"
行間: 0.9
ウェイト: 700
位置:
基準: "左上"
X: 0px
Y: 40px
サブタイトル:
行1: "初心者でも安心の"
行2: "入門講座"
フォントサイズ: 60px
フォントカラー: "#FFFFFF"
背景ボックス:
塗り色: "#FFC400"
角丸: 4px
余白上下: 14px
余白左右: 28px
行間: 1.0
ウェイト: 700
位置:
基準: "左下タイトル"
オフセットY: 40px
# --------------- 被写体（人物写真） ---------------
被写体:
スタイル：実写の女性
種類: "若いビジネスウーマン"
表情: "穏やかな笑顔"
ポーズ:
手: "右手の人差し指を立てる"
小道具: "左手にスマートフォン"
衣装: "黒のテーラードジャケット、白インナー"
髪型: "肩上のボブ、ダークブラウン"
配置:
基準: "右上"
高さ占有率: 80%
オフセットX: -20px
オフセットY: 0px
# --------------- フッター（Footer） ---------------
内容: "お問い合わせはこちらから"
フォントスタイル: "太字"
フォントサイズ: "中"
文字色:
- "通常部分は白"
- "「こちら」は黄色で強調"
背景色: "ダークブルー"
配置位置: "左下"
高さ："150px"
実際に以下のような画像ができるはずです。
ChatGPTより
バナーとして利用しても問題なさそうなデザインになりました。このようにChatGPTで1からバナーを作る場合は、まず画像を作る目的やイメージを元に応じて簡単な構造化プロンプトを作り、その内容をブラッシュアップして再度構造化プロンプトに落とし込むという過程で作ってみてください。
画像生成で変わってしまう部分を固定する際のポイント
これまでの過程で一定画像を出力できるようになるものの、複数回作っていくとどうしても特定部分が変わることがあります。本節で作った画像の場合、以下のようにぶれることがあります。
- 画像のアスペクト比が崩れて縦長の画像を生成することがある。
- 人物画が実写ではなくアニメ調になることがある。
上記のように固定したい指示が変わってしまう場合は、プロンプトの最後に再度指示する内容を入力してください。プロンプト例は以下です。
# --------------- プロンプト実行時の注意点---------------
-人物画は実写を採用してください。
-画像の縦横比（アスペクト比）は「3:2」のサイズで生成してください。
ChatGPTはしばしばプロンプトの指示内容を無視することがあるので、重要なポイントは再度指示することが効果的です。
