Webデザインなどでバナーと呼ばれる広告グラフィックスを作る場合があります。このバナー制作ができるようになれば、サイト全体のデザインもできるようになると考えていますが、今回はAIでこのGAIJPのサイトの広告バナーを作ってみましょう。利用するのはChatGPTです。
必要とされる文字情報を確定
今回は下記内容を表示してもらいたいと思います。
- サイト名：GAIJP
- キャッチフレース：誰もが学習できるGAI情報サイト
- URL：gaijp.com
文字を含めたバナーの方向性を確定
文字内容は確定しましたがデザインの内容は確定出来てないので今回日本人女性が案内している形にします。そこで作ったプロンプト（指示文）は以下の通りです。画像の縦横の比率は 1:1 とします。
AIの事を学べる「GAIJP」というウェブサイトのためのバナーを作ってください。
日本人女性の写真をベースに以下の文字内容をいれること。アスペクト比は1:1。
サイト名：GAIJP
キャッチフレース：誰もが学習できるGAI情報サイト
URL：gaijp.com
それで出来たのが下記。
ここで、もう少し調整してみましょう。以下のプロンプトを追加して作り直させます。ちなみに一度作った画像に指示を追加して作り直せるのは ChatGPT だけではありませんが、その精度のは、ChatGPTが一番高いと思われます。
「背景を全体を写真して女性を右寄せで文字を再配置。女性服装はスーツ姿で女性の背景にはICTを想像させるデザインにして。」
文字数の関係などでアスペクト比を無視した仕上がりになりましたが、それなりの物が出来ました。
その他のGAIによる生成結果
それでは他のいくつかのAIではどのような結果になるかテストしてみます。
使用したプロンプトは以下のものです。
AIの事を学べる「GAIJP」というウェブサイトのためのバナーを作ってください。アスペクト比は1:1。
背景を全体を写真にして、スーツ姿の日本人女性を右寄せで文字を左に配置。
女性の背景にはICTを想像させるデザイン。記入する文字は下記。
#サイト名：GAIJP
#キャッチフレース：誰もが学習できるGAI情報サイト
#URL：gaijp.com
サムネイルが切れている場合がありますが、クリックで拡大出来ます。
Google Gemini（無料版）
文字関係はほぼ使えないのですがバランスは悪くないですね。縦横の比率は無視されてしまいました。また、無料版の場合はAIのロゴが入ります。これも問題ですね。
Coilot（無料版）
これは完成度高いですね・・どうもこれまでは完成度が低いという認識だったのですが、進化しているようで、アスペクトも含め、ほぼ完璧かもしれません。まぁ、裏ではChatGPTの開発元のシステムが動いていますので、ChatGPTの進化と連動していると考えていいでしょう。(Microsoft365の有料版Copilotでは多分過去バージョンの画像生成システムが使われているようですので、同じような結果は得られませんでした）
Grock（無料版）
おっと、日本語を英訳してしまいました。バランス的にはいいのですが、このままでは使えないとおもいます。ロゴマークも入っちゃいますね。
更に一歩進んだプロンプトの生成
今回は自作したプロンプトを作りましたが、同様に他のバナーを作る際に必要となるプロンプトの作り方自体をChatGPTに解析させてみました、その結果下記のような項目をいれることでより現実的な使えるプロンプトになります。
[目的]
{◯◯のバナーを作成する}
[基本条件]
- 画像のアスペクト比は {サイズ指定}
- 背景は {背景のイメージ}
- メインの被写体は {人物やモチーフ}
- 配置は {被写体の位置指定}
[テキスト情報]
- タイトル：「{タイトル文}」
- キャッチコピー：「{キャッチコピー}」
- URL：「{URL}」
[デザインの方向性]
- テイスト：{未来感／和風／ビジネス風／カラフル／シンプル}
- 雰囲気：{明るい／落ち着いた／高級感／ポップ}
それを元に作り直したプロンプトが以下
[目的]
学習サイト「GAIJP」の宣伝用バナーを作成する
[基本条件]
- 画像のアスペクト比は 1:1 の正方形
- 背景はICTを連想させる抽象的なデジタルデザイン
- スーツ姿の日本人女性を右側に配置
[テキスト情報]
- タイトル：「GAIJP」
- キャッチコピー：「誰もが学べる生成AI情報サイト」
- URL：「gaijp.com」
[デザインの方向性]
- テイスト：未来感のあるビジネス風
- 雰囲気：明るく信頼感がある
結果は下記
結果としては概ね同じ様な形になりますが、他のバナー制作でも応用が効くと思います。
文字装飾など
来月開催する予定の生成AIのレクチャーのバナーを完全にAIだけで作るとどうなるか？更に実験してみました。使ったプロンプトは以下。要点としては、目的などを明確に書くということと、画像内に入れるべきテキストに関しては「」で区切るという部分です。これをやっておかないと、命令文としてご認識する場合があります。使用したのは ChatGPT です。
[目的] イベントの宣伝用バナーを作成する
[基本条件]
- 画像の縦横比は 16:9
- 背景は未来的オフィスの写真
- テキストが基本のイラストレーション
-タイトルが目立つように装飾的デザインを行う
[テキスト情報]
- タイトル：「AIを使えない事業者に未来はない」
- 開催日：「2025年10月9日」
- 時間：「15:00-18:00 」
- 参加費用：「無料」
- キャッチコピ
-：「AIを理解しない事業者は時代から退場させられる」
- URL：「gaijp.com」
[デザインの方向性]
- テイスト：未来感のあるビジネス風
- 雰囲気：明るく信頼感がある
結果
残念ながら縦横の比率に関しては無視されていますが、それ以外に関しては概ねよくできていますね。「無料」などの文字が崩れてますが、何度が指示して作り直せば使えると思います。
