ChatGPT新画像生成AIで高精度バナーを作る（レベル別作成法３選：ワイヤーフレーム・YAML・カスタムGPTs）

今回はChatGPT新画像生成AI「ChatGPT 4o image generation」で高精度バナー画像を作る方法を紹介します！レベル別に、①ワイヤーフレームから作る方法、②YAML風プロンプトを使う方法、③検索まで自動化するカスタムGPTsを使う方法の、３つの方法を紹介します。

▼目次
0:00 はじめに：ChatGPT画像生成でバナー作成
2:49 ダメなプロンプト例
4:20 ①ワイヤーフレームi2i
6:29 ②YAML風プロンプト
10:42 ③自動検索カスタムGPTs
15:28 まとめ：ChatGPT画像生成でバナー作成

▼文字起こし

こんにちはAIキャンプの中村です。今回のテーマはこちら。ついにこれが一発生成、ChatGPT 4o image generationで高度なバナー画像が作れるレベル別作成法3選。このようなテーマでお届けさせていただきます。今回は2025年3月に登場した新しい画像生成、ChatGPT 4o image generationを使用して高度なバナー画像を作ってみよう、こんなテーマでお届けさせていただきます。皆さんこちらの右側の画像を見てください。こちらは編集ソフトで文字を入れたわけではなく、この画像生成AIでプロンプト一発で生成しています。しかも修正も全く入れておりませんので、画像生成をしっかりと極めていくとこのレベルのバナー画像を一発で作れるようになる、そんな時代がついにやってきたわけです。厳密に言うとこの辺の最新情報みたいな感じが多少文字化けしてしまったりとか、少し気になる点はあるんですけど、ちょっとしたバナー画像を作る時は十分かなと思います。画像生成、本当に便利に進化しましたので今日は皆さんにこれをお届けしていきます。ChatGPT 4o image generationですけど、これ前回の動画でも紹介してるんですけど、本当にたくさんのことをやることができます。高度な画像を作ったり広告の素材を作ったり、画像を変換したり、差し絵とかピクトグラムを作ったり、ゲームを制作したり、図やグラレコを作ったり、漫画を作ったり、シーンを変えたり、そして今回のようにバナー画像を作ることが可能になっています。このあたりの方法は前回の動画で紹介してますので、こちらの動画も合わせてご覧いただけると幸いです。さて、それでは今回の流れなんですけど、高度なバナー画像を作る方法は1つだけじゃないので今回は3つ紹介させていただきます。まず初めにダメなプロンプトの事例を紹介させていただきます。実は適当なプロンプトだとなかなかこのレベルのアウトプットは出てこないので、結構工夫をしてあげる必要があります。1つ目の方法としてはワイヤーフレームI2Iという方法を使っていきます。2つ目がYAMLプロンプト、3つ目が自動検索カスタムGPTということでやっていきます。今回の方法は下に行けば行くほど精度も高く便利になるんですけど、その分難易度も高くなっています。特にこの2番と3番に関しては結構長めのプロンプトを打ち込んでいかないといけないので、本当に入門の方だとちょっと難しいかなと思います。このあたりをしっかりと使いこなせるかどうかでかなり差がつくんじゃないかなと思います。今回この方法を紹介させていただきますので、ぜひ最後までご覧ください。このチャンネルではChatGPTや生成AIに関する役立つ情報をお届けします。よければチャンネル登録もお願いします。それではまず始めにダメなプロンプトの事例を紹介します。ダメなプロンプトっていうのは曖昧なプロンプトですね。指示が曖昧だと結果も曖昧になってしまうんですけど、例えばこんな感じのプロンプトだとこんな感じのちょっと微妙な画像ができてしまうんですね。ちょっと見ましょうか。指示文以下の要件に従い画像を生成してください、要件、タイトルをつけて、詳細をつけているだけという、これだけになりますので、これだとなかなかいいものが出てこないということです。実際にやってみましょう。画像生成する時はここにプロンプトを打っていただいて、この画像生成するっていうのをここで有効にしてあげてもいいんですけど、できればOpenAIのツールから使っていただくといいかなと思います。有料プラン限定になります。OpenAIのツールでは1度に4枚同時生成ができますので、このほうがいいかなと思います。使い方はとっても簡単で、ここですね動画を作るか画像を作るかなんですけどイメージを選んでもらってアスペクト比を今回1対1で4枚同時に作るみたいな状態にして、ここにプロンプトを貼り付けていきましょう。ではこれで画像生成してみたいと思います。はいそれではできました。いかがでしょうか。こんな感じで今回8枚作ってみたんですけど、この辺なんか意外といいかなとも思いますけど、バナー画像としてはちょっと面白くないかなっていうか、あまりにもシンプルすぎるかなと思いますので、このあたりが限界だよということです。なのでこういう曖昧な指示ではなくて、もう少し高度な方法を使っていきましょう。それでは1つ目ワイヤーフレームI2Iを紹介していきます。ここで紹介するワイヤーフレームI2Iなんですけど、ワイヤーフレームっていうのはウェブサイトを作る時の配置図みたいなものですね。こんな感じで右側に人を置いて左上にロゴを書いてみたいなことを手書きのスケッチみたいので指示をするみたいなことです。I2Iってのはイメージトゥイメージ、つまり画像から画像を作るよってことで、正確には画像認識から画像を振るっていう使い方になります。今回はこの配置図を与えた状態でロゴは私たちのAIキャンプのこの画像を使って、キャラクターは私たちAIキャンプのキャラクターAIあおいさんの画像をここで使ってくださいっていう風に指示をしています。ポイントはこの配置図とか使いたいイラストやロゴをアップして指示を出すというところになります。プロンプトは先ほどとそんなに変わっていないんですけど、添付のワイヤーフレームを使ってくださいとか、添付のロゴを使ってくださいとか、添付のキャラクターを使用してくださいっていう風に一応指示をしていると、こんな感じで生成できるということです。ではこれやってみましょう。やり方はこちらのプラスマークのところからアップロードしていただければ大丈夫です。ということで3つの画像を上げた状態でこの指示を出していきます。はい、ということでできました。いかがでしょうか。こんな感じの画像ができました。しっかりとAIあおいさんのキャラクターの画像が反映されていて、私たちAIキャンプのロゴもできています。配置もしっかりと左上にロゴで右側に人でタイトルで詳細っていうのが守られているかなと思います。どうでしょうか。先ほどのバナーと比べて全然クオリティが上がったと思いませんか。ちょっとこの女の子のキャラクターが好きか嫌いかっていう好みはあると思うんですけど、こんな感じで自分たちのロゴとかデザインとかもしっかりと指定して作ることができるので、手書きの配置図と自分たちの好きな画像をアップして指示するってやれば、どなたでも簡単にそれなりの画像を作ることができるかなと思います。これがワイヤーフレームによるI2Iのバナー画像の生成法になります。続いてYAMLプロンプトを紹介させていただきます。YAMLって聞いたことないと思うんですけど、簡単に言ってしまうと配置とか構造を厳密に指定できる記述法だと思ってください。ちょっと意味は違うんですけど、今回はこの理解で大丈夫です。具体的にはこんな感じのプロンプトを打つことになるんですね。これ見てみると、英語がいっぱい書いてあってわけが分からない、気持ち悪いって思うかもしれないんですけけど、これ日本語に翻訳して意味を理解すると実は結構簡単なことをやっています。実際にこんな感じの画像ができますのでちょっと説明していきますね。まず上のところのロゴの設定ですね。このロゴの部分なんですけど、画像パスっていうことで「AI_camp_logo.png」というファイルをアップしています。表示位置はX座標が40、Y座標が40ということで、この左上のここが00だとすると40、40ピクセルいったここからスタートしてくださいねって意味です。サイズは横幅が180ピクセルで高さは自動で調整してくださいねっていう風に、配置とかサイズをただ指定してるだけなんですよね。ここで書いた日本語を英語で変換するとこんな感じになるということです。じゃあこのサブタイトルの部分どうやって書いてるかなんですけど、サブタイトルの設定「AI最新機能体験」ということでこのテキストを打っています。フォントはNoto Sans JPっていう日本語のフォントファイルを使っていて、フォントサイズが52ピクセル、太さが700、色は白で、これはカラーコード#FFFFFFってやつを使っています。表示位置は横X座標が40で縦のところが上から数えて360のところですね。40、360のところからテキストを始めてくださいっていう指示になっているということになります。こんな風に日本語でこういう風に書いてほしいよってのを指示しながら英語に変換してプロンプトを打てばいいので、こんな感じの高度な画像を作ることができるということですね。このYAMLプロンプトはこういうのを1つ1つ記述しなきゃいけないので0から結構記述してくってのは大変なんですけど、メリットとしては画像の出力を非常に高いレベルで制御できるんです。例えばロゴが40、40の場所に表示してって指示を出してるので、このロゴがこっち行っちゃったりとか、この辺に行ったりってことはもうないわけです。正確に記述ができるっていう意味で、使いこなすことで高いレベルの画像生成をすることができるということになります。もしかしたらこれからの新しいAIデザインの1つの戦略になるんじゃないかっていうぐらい、結構面白い手法かなと思います。では実際にこれ完成版のプロンプト打ってみましょう。はい、完成版のプロンプトはこんな感じになっています。これを真似てもらうというよりも、むしろ皆さんが自分でしっかり書けることのほうが大事かなと思います。この状態で先ほどと同じように画像をアップしていきます。はい、ということで生成できました。いかがでしょうか。今回プロンプトに左上のほうにロゴ、サブタイトルでシップ静岡で下に青色の背景をしながら白地で打って、人をここに書いてとか指示していますので、しっかりと4枚とも構造が固定されてるかなと思います。若干ロゴの青色のものが白に変わったりとか、そのぐらいの変化はあるんですけど、こんな感じでいい感じの画像ができたんじゃないかなと思います。こんな感じでプロンプトは色々ガチャガチャ書かなきゃいけないので結構難しいんですけど、しっかりと書いていくことでこんな感じの構造が整ったバナー画像を作ることができるということですね。正直、細かい配置のところ考えるとCanvaとかで編集したほうがいいかなとは思うんですけど、素人が作るデザインよりもはるかにレベルが高くなってきてるので、このあたりのバナーとかを例えばすぐ作んなきゃいけないっていう時なんかはこれでいいんじゃないかなと感じたりしています。それでは最後です。自動検索GPT。最後はちょっとハイレベルな活用法になります。今回はセミナーの情報を自動で取得して先ほど紹介したYAMLプロンプトを1発で生成するカスタムGPTを作ってみました。名前はYAMLバナージェンあおいさんっていうキャラクターで作っているんですけど、今回は私たちのこのシップ静岡で開催しているセミナーの情報を勝手にあおいさんが取得して、それに対するプロンプトを一発で生成してくれるということです。このあおいさんの裏側にはYAMLプロンプトの作り方やWebPilotっていう検索の能力を与えていますので、セミナー情報を自動で取得してプロンプトを作るってことを簡単にやることができます。このあおいさんを使ってあげるともう本当に超簡単にプロンプトを作ることができます。残念ながら今のカスタムGPTはこの新しい画像生成がまだ対応していないので画像生成まで一発でやることはできないんですけど、今後のアップデートで画像生成が対応されれば本当画像生成まで一貫してできるようになりますし、この画像生成のAPIが公開されれば他のツールにこういうのを組み込むことができるかなと思います。何が言いたいかっていうと、これからは「バナー作っといて」って一言言うだけでバナーができるっていう時代になってきてるということです。では実際にこれ実演させていただきます。はい、これがYAMLバナージェンあおいさんというものになります。私たちAIキャンプではこんな感じで色々あおいさんを作っていますので、これをちょっとやっていきたいなと思います。「あおいさん、今度シップでやる講座のバナー画像を作って欲しいんだけど」ってお願いすると、「何月にやりますか」って返事が来るので、「2025年の4月」とかって言ってみます。そうするとこうやって検索が今走ります。ここであおいさんが自動的に検索を始めてくれています。そうすると4月30日の4時から生成AI最新体験会というセミナーをやるよってことをやってくれて、この情報をベースにYAMLプロンプトをこんな感じでコピーできる状態で吐き出してくれました。あおいさんは私が指定しているこのページを先に見ています。これは私たちの会社のウェブサイトの、静岡のシップってところで開催している勉強会の情報になります。今度4月30日の4時から生成AI最新機能体験会っていう勉強会をシップって会場で4時からやるよっていうこの情報をあおいさんが引っ張ってくれて、ここで回答してくれるということです。なので今回のこのYAMLプロンプトの中にも「生成AI最新機能体験会 4月30日水曜日4時から」みたいな情報をしっかりと反映させた状態でYAMLプロンプトを作ってくれたということになります。では実際にコピーしてOpenAIのツール上で実行してみましょう。実行してる間にもう1個ぐらいやってみましょうか。「2025年1月のやつも」ってお願いしました。1月のこの情報も引っ張ってくれて、バナー画像を作ってくれていますね。じゃあこれもやっていきましょう。はい、ということで色々できましたのでちょっと見ていきましょうか。まず最初の生成AI最新体験会ということで、4月30日の水曜日の4時からということでしっかりと情報が回っています。AIキャンプ シップ静岡って、さっきと少しデザインが違いますけど、こんな感じで画像ができているかなと思います。これを1月のセミナーでやってって言ったのがこちらなんですけど、その場合は「セキュリティ重視のAI導入へ」とかっていうスローガンを勝手に作ってくれて、「法人向け導入法 1月21日」ってことで、このセミナー情報もしっかりと反映されています。さらに昔の2024年8月のやつもやってみましたけど、「AIディスカッション会」ということでこれもしっかりとできていますし、さらに昔のやつですね1年以上前ですけど「ChatGPTのゲーム作成体験会」ってのもやってみましたので、こんな感じでできているかなと思います。どうでしょうか。こんな感じで「2月のやつ作って、バナー画像作って」って指示するだけで次から次へとこんな感じで自分たちの好きなバナー画像をサクッと作れるような時代になったということになります。めちゃくちゃ面白いですね。ちなみにちょっとデザイン変えたいよって時はアップするあおいさんのキャラを変えたりとか、配置を変えてみたり色々やってみるといいかなと思います。私たちはいっぱい作ってるんですけど、変えることができますので、この虫メガネを持ってるあおいさんじゃなくて、この青いシャツを着たあおいさんとかにしてみましょう。これはこれでいいんじゃないかなと思います。ちなみに画像を上げ忘れるとあおいさんじゃなくていきなり知らない女性が出てきたり、AIキャンプのロゴがわけわかんないものに変わったりとか色々しますので、しっかりとこの辺は忘れないようにやっていただけるといいかなと思います。今回は新しい画像生成AI、ChatGPT 4o image generationを使って高度なバナー画像を作成してみるということで紹介させていただきました。今回はレベル別に3つ、ワイヤーフレームI2I、YAMLプロンプト、そして自動検索カスタムGPTということで3つの方法を紹介させていただきました。もしプロンプト打つのがめんどくさくて嫌だなって方は手書きのラフスケッチからやっていくのもいいですし、もう少し厳密にやりたいよとか自動化したいよって方は下の方法を使っていただくとスムーズにバナー画像ができるんじゃないかなと思います。今回ChatGPTの画像生成の威力を紹介する動画とさせていただきましたが、私の感想としてはこれ本当すごいなと思ってまして、現時点でもしっかりと実用的ですし、これがどんどん進化したら本当にこれからはちょっとしゃべっただけで「あの感じでバナー作ってくれない？」とか「あれでデザイン作ってくれない？」ってお願いしただけでできる、そんな時代がもうやってくるんじゃないかなと思うと本当にワクワクしています。このあたりすごく進化してくると思いますので、今日の動画の内容をぜひ真似ていただきながらやっていただければいいかなと思います。それでは今回は以上です。ありがとうございました。