レイヤー化も！ChatGPTでバナーデザインに挑戦

過去記事「バナーデザイン練習 10本ノック」でデザインの練習用のサンプルプロジェクトを紹介しました。今回はそれをOpenAIの画像生成モデル「ChatGPT Images 2.0」で試してみます。ただ、AIで生成したものってちょっとした微調整を加えたいこともありますよね。そこでレイヤー分けして生成できるのかも確認してみました。

ChatGPT Images 2.0で画像を生成

まずは過去記事「バナーデザイン練習 10本ノック」 に掲載していた条件を指示して、バナー画像を生成してみます。プロンプト（指示文）はこんな感じ。

@Create image 
バナー広告を作成してください。

- 提示されているキャッチコピーや素材は必ず利用しましょう
- 提示されている画像は特に注意書き等なければ、切り抜いて利用しても OK
- テーマカラーの指定がある場合は必ずその色を使いましょう
- 実際に Web サイト上で表示するサイズは 幅 300px × 高さ 250px ですが、高解像度のディスプレイにも対応させるため、制作物のサイズはその倍である 幅 600px × 高さ 500px で作成してください

# 概要
人気メーカーから新たに発売されたシャンプー。思わず手に取りたくなるかわいいデザインがポイント。

# 商品名
WCB Shampoo

# ターゲット
一人暮らしであまりお金をかけられないが、可愛いものが大好き。成分よりも見た目や香り、価格を重視する。流行っているものが好き。

# キャッチコピー
Happy Hair, Happy You!

# サブテキスト
かわいさ、手軽さ、楽しさ。全部このシャンプーで。

# 印象
かわいい、安い、楽しい

おお、すごい。ただちょっと背景色と馴染みすぎてるので、背景色を薄めたいなぁ…なんて思いつつ、一枚絵なのでそれはちょっと難しい。

そこで、生成した画像をレイヤー分けして編集できるかを試してみます！

Canvaでレイヤー化

結論：可能

ChatGPTは、無料のオンラインデザインツール Canvaと連携できるので、この機能を使います。まずは上記と同様の手順でバナー画像を生成。次は抹茶ラテのバナー広告です。

これまたすごい。ここで、追加の指示を出します。

@canva マジックレイヤー

すると、Canvaで編集するためのリンクが表示されるのでクリック。

Canvaの画面が表示され、配置はもちろん、色やテキストも変更できます！

何パターンか試したところ、生成した段階では問題なく表示されていたものが、Canva化すると行間が縮まったり配置がずれたりといった微妙な崩れが起こることもありました。複雑な装飾が多い場合は、後から手作業での修正が必要になるケースがある、ということは覚えておくといいですね。

Illustrator形式でレイヤー化

結論：デスクトップ版 Codexなら可能（ただしクオリティは下がる）

続いてPodcast番組のバナー広告を生成しました。

人物まで生成してくれていますね。その後、

画像をレイヤーごとに分解し、Illustratorで編集可能なデータにして

と追加指示。

すると、「Illustrator（.ai）形式は無理だけど、Canvaでいじれるようにしといたよ！」と、Canvaで編集するためのリンクが表示されました。通常のChatGPTだと、直接のベクターデータ化は難しいようです。

先ほどと同じく、ちゃんと編集できるようになっています。

デスクトップ版 Codexを使ってみる

同じバナー広告を、ChatGPT デスクトップ版のCodexで試してみます。ChatGPT デスクトップ版をインストールし、左上の「ChatGPT」となっているところを、プログラムの作成・修正が得意な「Codex」に選択します。そして、指示の最後にこう付け加えます。

画像を生成後、レイヤーごとに分解し、Illustratorで編集可能なデータにして

すると、少しいびつなところはありますが、文章が破綻することもなく、SVG形式のバナーが完成しました。立派なベクターデータです。

Illustratorで開くと、操作できるようになっています。CodexならSVG形式で生成してくれるから可能なわけですね。

各レイヤーに名前もついている状態！

通常のChatGPTの画像生成は、ピクセルの集まりであるラスター画像を一から描くのが得意です。一方、Codexはコードを書くのが得意なAI。つまり、SVGという「コードで記述された画像形式」を生成したため、Illustratorで編集できるデータになったというわけです。ただし、コードで表現するため、写真のような複雑な表現やグラデーションは苦手で、表現の幅は狭くなってしまいます。 「どんなデータが欲しいか」によって、AIのモデルを使い分けるといいですね！

Photoshop形式でレイヤー化

結論：現状は不可能

最後に、Photoshop形式（.psd）でも試してみます。クリスマスセールのバナー広告を生成。

いい感じ。 Illustratorのときと同じように、以下のプロンプトを追加します。

画像をレイヤーごとに分解し、Photoshopで編集可能なデータにして

すると、一言目から「できます。」という力強い返事が！

しかしその後の文章をよく読むと、できない理由とCanvaを使うようアドバイスしていますねw できるって言ったじゃん！

CodexがIllustratorで編集可能なデータを出力できたのは、あくまでSVG（テキストベースのコード）だからです。Photoshop形式（PSD）は複雑なバイナリデータなので、テキストを出力するAIにとっては直接生成するのが現状難しいようです。

いろいろと指示を変えたりなんだりで試してみましたが、もし現状のAIを使ってPhotoshopで編集できる状態にしたいなら、「背景」「人物」「装飾」など、要素ごとに分けて別々に画像を生成し、それを配置して合成するという方法が一番現実的かと思います。ベクター素材はCodexでSVGとして生成し、写真などのラスター素材は通常の画像生成モデルで作る、といったハイブリッドな手法なら、よりクオリティの高いものが作れそうですね。

まとめ

サクッと試したり、簡単な微調整ならCanvaのマジックレイヤーでも事足ります。ただ、Canva上だと使えるフォントに制限があったり、IllustratorやPhotoshopとは使い勝手が異なります。

バナー広告制作などの実務でAIを活用するなら、「AIにすべてを一気に仕上げてもらおう」と期待しすぎないことが大切です。背景のアイデア出し、素材の生成、レイアウトの叩き台作成など、作業を効率化するための「頼れるアシスタント」として部分的に使ってみるのが、今のところ一番良さそう。

これからもAIはどんどん進化していくはずです。最新技術をうまく取り入れて、少しでもラクに、そして楽しくデザインしていきたいですね！皆さんもぜひ、ご自身の環境で試してみてくださいね！