連載の第３回「イメージ写真作成2つのアプローチ」では、DALL-E 3でイメージ写真を２つの方式で生成するプロセスについて解説しました。

　画像生成AI（DALL-E 3）により画像を作成することが、実用的であると理解できたのではないでしょうか。

　第4回となる本稿では、画像生成AIとデザインツールを使いバナー画像の作成に挑戦していきます。イメージ通りのバナー画像を画像生成AIだけで作ることはできないため、画像生成AIで作成した素材をデザインツールで合成して仕上げる必要があります。

　本稿では、ChatGPTに搭載されている画像生成AIのDALL-E 3と、デザインツール「Canva（キャンバ）」を使い、バナーを制作します。外部ツールによって広がる画像生成AIの活用法と、その作成プロセスを見ていくことにしましょう。

画像生成AIを活用したバナー画像作成の流れ

　最初に、作成したバナー画像をご覧いただきましょう。DALL-E 3で生成した素材は左端の女性と背景画像です。筆者は、特にデザインを学んだことはありませんが、デザインツールの助けを借りることで、このようなバナー画像を作成することが可能となります。

作成したバナー画像。解像度は、DALL-E 3が出力可能なサイズに合わせて1792×1024ピクセルとしたが、リサイズやトリミングによりバナーサイズの変更は可能

　作成の流れとしては、DALL-E 3でバナーに必要な人物と背景の画像素材を生成し、それらの素材をCanvaにアップロードして合成、文字や装飾を入れるというプロセスをたどります。全体の作業にかかった時間は約30分。その内訳は、画像生成に10分強、残りがCanvaでのデザイン作業です。

　これらのツールを活用することで、社外のデザイナーに依頼しなくとも一定のクオリティのバナー画像を作れます。デザインに慣れているならば、短時間で内製することも可能です。以降、実際にバナー画像を作成したプロセスを、順を追って解説していきましょう。

必要な画像素材を生成する／人物画像

　バナーの用途によって必要な画像素材は異なりますが、今回は背景に敷く画像と女性の写真を作ることにしました。

　画像の生成にあたっては、連載の第３回で紹介した画像生成における「反復型」と「単発型」のアプローチうち、前者の反復型（簡単なプロンプトで生成した、たたき台の画像をブラッシュアップさせていく方法）を用いています。

　では、案内役の女性の画像から生成していきましょう。まず、画像生成AIのDALL-E 3に『オフィスの受付をしている、スーツ姿の日本人女性のリアルな写真を作成してください』と指示しました。

『オフィスの受付をしている、スーツ姿の日本人女性のリアルな写真を作成してください』とのプロンプトで生成された画像。イラスト的だが、ほぼ指示通りのイメージだ

　これをたたき台として、修正を重ねていきます。最初の修正指示は次の通りです。『背景を真っ白にしてください。画像を縦長の長方形にして、女性は腰から上を描いてください。左手の肘を曲げて手のひらを広げ、「こちらです」と案内しているようなポーズにしてください』というものです。

画像は長方形、背景は白一色になったが女性は横向きとなり、上下には同じような画像が多数配置されてしまった

　修正指示の結果、意図しない画像が出力されてしまいました。このままではとても使えないので、『女性は横向きではなく、縦向きにしてください。人物は一人だけを描いてください。また、腰より上を描いてくださいと伝えたのにも関わらず、腰が映っていません。腰まで入れてください。なお、ポーズはこのままで大丈夫です』と修正を指示しました。それを受けて生成された画像が以下です。

『ポーズはこのままで大丈夫』と指示していたにも関わらず、それが変わってしまった。それ以外の部分については、ほぼ指示通りに修正された

　このように、“二歩進んで一歩下がる”という作業を繰り返しながら、たたき台から7回の修正を経て以下の画像にたどり着きました。

7回の修正の後に生成された画像。イラスト感は抜け切らないが、このまま使えそうだ

　DALL-E 3で生成した画像はwebp形式で保存されるため、人物の背景を透過処理するためpngに変換します。そのうえで、「Adobe Express（*1）」を用いて画像の背景を透過させ、素材のひとつが完成しました。なお、画像の背景を透過させる理由は、人物画像の余白部分にバナーの背景を表示させるためです。
（*1）ブラウザ上で動作する、モバイルやWeb用のメディア作成アプリケーションツール。機能制限はあるが無料利用が可能

必要な画像素材を生成する／背景画像

　続いて、バナーの背景となる画像を作成していきます。最初に次のように指示しました。『あなたに、バナーの背景を作ってもらいたいです。白基調で、アクセントに黒色を混ぜた、シンプルな背景を作ってください。画像のサイズは、横長の長方形でお願いします』。色は迷いましたが、とりあえず白基調で作ってもらうこととしました。

曖昧な指示だったが、スタイリッシュな画像が出力された。とはいえ、外側が余白のようになっており、このままでは使いにくい

　外周の余白など気になる部分はありますが、ブラッシュアップしていくためのたたき台としては十分な画像が出力されました。これを受けて、文字を入れるうえで邪魔になりそうな左上の黒い丸と、余白の削除を指示します。しかし、再び似たような画像が出力されてしまいました。

模様は変化したものの、全体的にはたたき台の画像と変わっておらず、2点の指示は守られていなかった

　生成AIがいうことを聞いてくれなかった場合、同じ指示を繰り返してもムダになってしまうことが多々あります。そうした場合には、方向性を変えてみるのも一つの方法です。

　今回は、『全体を水色基調に変えてもらえませんか？また、先ほど指示したように、この長方形の画像全体を背景として使えるよう、余白はなくしてください』と修正指示を出し、カラーリングから変えてしまうこととしました。

黒色で文字を入れた時に、視認性が高そうな色使いになった。しかし、中央の白い長方形が邪魔になりそうだ

　雰囲気が大きく変わりました。バナーにすることを考えると、中央の白い長方形に違和感はありますが、これを拡大する、あるいは削除するなどの修正をすれば、使えるものになりそうな印象です。しかし、難航したのはここからでした。

　まず、中央の白い長方形を横に4割、縦に3割り広げるよう指示してみましたが、同じような画像が生成されてしまいました。同様の指示を3回繰り返してみましたが、結果は変わらず。そこで、長方形を削除するように指示したものの無視されてしまい、試行錯誤することになりました。

　最終的に、『いや、だから、長方形が残っていますって。では言い方を変えますね。全体を水色にしてください』というプロンプトによって、初めて長方形を消すことができました。

長方形は消えたが、今度は立体感のある球体が出現した。これがなければ、そのまま使えそうなのだが

　今度は、中央に球体が出現しました。これを削除するように伝えると、また雰囲気が違う画像が生成されました。

これまでの中では、最も使えそうな画像に見える。しかし、文字を入れた時の視認性が低そうなのが気になる

　かなり理想に近づいてきました。ただ、中央の模様に文字を重ねると、見づらくなってしまいそうです。そこで、『もう少しシンプルにしてください』と伝えたのですが、再び中央に球体が出現してしまいました。

　その後、『シンプルにしすぎです。もう少しガチャガチャ感を出してください。色の使い方はこのままでOKです』と指示した結果、ようやく満足できる画像を得ることができました。

模様は入っているが、全体的に線が細く目立つ色も使われていない。文字を入れた際の視認性も問題なさそうだ

　ここに至るまでの修正回数は9回。女性の画像と合わせて10分強の時間を費やしました。これで、バナー画像に必要な2つの素材が完成しました。

Canvaで画像を合成し文字や装飾を入れる

　では、次のステップに進みます。ここからはデザインツールのCanvaを使って、バナー画像を完成させていきましょう。
 

　Canvaでは先にDALL-E 3で作成した素材画像をアップロードして、画像や文字、図形をレイアウトするといったデザイン作業を行います。

Canvaのトップ画面。左メニューの「デザインを作成」から作業画面（キャンバス）を起動する

　作業を行うスペースであるキャンバスは任意のサイズに設定できますが、今回はDALL-E 3が出力した画像のサイズに合わせ、1792×1024ピクセルに指定しました。もちろん、これ以外の任意のサイズのバナーを作成することも可能です。その場合は、DALL-E 3で生成した背景の画像をリサイズ・トリミングするなどして、サイズを調整しましょう。

「デザインを作成」→「カスタムサイズ」で、キャンバスのサイズを設定。パンフレットやプレゼンテーションのスライドなどのサイズ・フォーマットも用意されている

　具体的な作業プロセスを見ていきましょう。まず、作業画面のキャンバス上にDALL-E3で作成した背景を敷き、左側に女性の画像をレイアウトしました。続いて、右側のスペースに文字を入れていきます。

背景と女性の画像を配置したところ。女性の画像サイズは拡大・縮小が可能

　テキストについては、メインの見出しとして「DALL-E 3ではじめる画像生成AI入門」を2行に分けて入れ、その上に「生産性大幅アップを実現！」という表現をサブ的に入れることにしました。画面左側のリストから「テキスト」を選び、文字を入れていきます。

　Canvaは、同一のテキストボックス内であっても、異なる文字サイズのレイアウトに対応しています。そこで、メインの見出しについて「DALL-E 3ではじめる」と「画像生成AI入門」のサイズに差をつけ、上段と下段の両端が揃うように調整しました。

　また、文字のフォントは無料利用でもそこそこの選択肢が揃っており、標準的なフォントであれば袋文字や影付きなどの加工にも対応しています。今回は丸みのあるゴシック体を採用し、視認性を上げるために枠線が太めの袋文字としました。

文字を入れた状態。画面の左側はフォント選択パネル（選択時に王冠マークが表示されているものは有料版フォント）

　さらに、文字部分をデザインしていきます。今回は、サブの見出し部分の装飾として、直線を組み合わせた簡単な吹き出しを自作しました。

　Canvaでは、有料版の契約により吹き出しを含む多彩なデザイン素材を使うことができますが、無料で利用できる素材は限られています。ただ、今回のようなデザインであれば簡単に自作することができます。

　画像やテキスト、吹き出しを入れた後、フォントのサイズや縦横の余白などを調整し、バナー画像が完成しました。その成果物をもう一度掲載します。

完成したバナー。再掲

デザイナーでなくとも実用的なバナー作成が可能

　いかがでしたでしょうか。画像生成AIとデザインツールを活用することにより、デザイナー経験のない素人でも十分なクオリティのバナー画像を短時間で作成できることが見てとれたかと思います。

　画像生成AIもそうですが、デザインツールにもラインアップがあります。それこそ、本格的なAdobe Illustratorから本稿で紹介した無料でも使えるCanvaまでさまざまです。導入やランニングのコスト、操作性などを鑑みながら使いやすい組み合わせを見つけることが、生産性の向上につながります。

　画像生成AIの出現によって、時間やスキルの面でクリエイティブ作業のハードルが大きく下がったことは間違いありません。ぜひビジネスに導入して、Webサイトやオウンドメディアなどのデザイン業務のDXを実現してください。