【2026年版】ChatGPTでバナーを作る方法｜AI画像生成×Canvaで実務レベルに仕上げる手順

動画でも内容を確認したい方はこちら

「AIで画像は作れるけど、仕事でどう使えばいいか分からない」
「それっぽいバナーが出てきても、そのまま使っていいのか判断がつかない」
そんな悩みを持つ方は多いのではないでしょうか。

ChatGPTでバナーを作る方法は、今や文章の指示ひとつでかなりのクオリティまで到達できます。
ただし、AIのポン出しで終わらせず実務で使えるバナーに仕上げるには、生成したあとの「見方」と「判断軸」が欠かせません。

この記事を読めば、ChatGPTでバナーを生成し、Canvaで微調整し、実際に使用できる状態まで仕上げる一連の工程がわかります。
解説はデイトラのWebデザイナー「トム」が、実際の制作画面をもとに行っています。

本記事の内容

・ChatGPTでバナー画像を生成する基本の流れ
・生成したバナーが「実務で使えるか」を見極める5つのチェックポイント
・Canvaのマジックレイヤーで情報量とレイアウトを微調整する手順
・調整したバナーを再度ChatGPTに返してブラッシュアップする方法
・AIでデザインを作るこれからの時代に必要な「2つの力」と「審美眼」

ChatGPTでバナーを作る手順は3ステップ

今回の作業は、大きく3つのステップに分かれます。

ChatGPTでバナーを生成する
Canvaで文字や配置を微調整する
デザイナー目線で「どこをどう見るべきか」を整理・調整する

バナーが一瞬で作れるようになったからこそ、最後にどこを見るかがかなり大事になってきます。
今回はジムの体験キャンペーンのバナーを題材に、この3ステップを実践していきます。

先に完成品をお見せすると、ChatGPTの画像生成で作ったバナーがこちらです。
今の画像生成は、文章の指示ひとつでここまで作れるようになっています。
ただ、それっぽいバナーが出てきても「そのまま使っていいのか」「どこをどう直せばいいのか」が分からない、という悩みはかなり自然なものです。

この記事では、よくある便利ツールの紹介はしません。
実際にChatGPTでバナーを作り、Canvaで微調整し、使用できる状態まで仕上げる工程を解説していきます。
デザイナー目線でAIをどう活用し、制作をどう効率化するかにフォーカスした内容です。

※バナー
バナーとは、Web広告やSNS、サイト内で使われる帯状・長方形の画像広告のことです。この記事では、ジムの無料体験キャンペーンを告知するためのバナーを題材にしています。限られたスペースで「誰に・何を・なぜ」を伝える必要があるため、情報量のコントロールが特に重要になります。

ChatGPTでバナー画像を生成する

まずはChatGPTでバナー画像を生成していきます。

プロンプトを貼り付けて生成する

用意したプロンプトをコピーしてChatGPTに貼り付ける操作画面 — 要件をまとめたプロンプトをコピーし、ChatGPTに貼り付けてバナー生成を指示します。

入力するプロンプトを用意し、それをコピーしてChatGPTに貼り付けます。
貼り付けると画像の生成がスタートするので、少し待ちます。
しばらくすると、バナーが生成されました。

今のChatGPTでは、文字だけの指示でもここまで作れるようになっています。
生成されたバナーをダウンロードすると、実際のファイルとして手元に残ります。

ChatGPTで生成されたジムの体験キャンペーンバナー — プロンプトを貼り付けるだけで、ジムの体験キャンペーンのバナーがここまで生成されました。

※プロンプト
プロンプトとは、AIに対して出す「指示文」のことです。バナー生成では、何の広告か・誰に向けるか・入れたい文字情報などをプロンプトに書き込みます。この記事の後半で解説するとおり、プロンプトの書き方（情報の入れ方）がバナーの完成度を大きく左右します。

実務で使えるバナーかを5つのポイントでチェックする

生成したバナーを5つのチェックポイントと並べて確認する画面 — 生成したバナーを左に置き、5つのチェックポイントと照らし合わせて実務で使えるか確認します。

生成したバナーが「実務で使えるバナーかどうか」を、5つのポイントで見ていきます。

一瞬で何の広告か伝わるかどうか
情報量は多すぎないかどうか
主役と脇役が明確になっているか
次の行動が分かるかどうか
画像のトリミングや人物の見せ方は適切かどうか

この5つの視点で、生成されたジムのバナーを順に確認していきます。

① 一瞬で何の広告か伝わるか

この点は全く問題ありません。
「ジムのバナーである」ということは明確に伝わる印象になっています。

② 情報量は多すぎないか

この点については、全体的に情報量がすごく多い印象です。
なぜ多くなっているかというと、与えている文字の原稿がもともとかなり多く、それを何とか全部バナーに入れ込もうとした結果、こうなってしまっています。

情報量が多いかどうかを見るポイントとして、3秒以内に情報がちゃんと認識できるかどうかを確認するとよいです。
「3秒以内に、誰に・何を・なぜ伝えるか」を意識して見てみると、本来の倍くらいの情報量になっていることが伝わります。

③ 主役と脇役が明確になっているか

画像は概ね問題なさそうで、タイトルの部分も問題ないと思います。
下が脇役であることも分かるのですが、いずれにせよ情報量が多い状態なので、そこは削っていく必要があります。
そのため、この項目は「三角（△）」というイメージです。

④ 次の行動が分かるか

「初回無料体験受付中」というボタンっぽく見える要素があるので、良い一面もあります。
ただ、そのままタップまで至るかという点では少し惜しい印象です。
もっとボタンであることを画面全体に対して大きく目立たせる必要があります。

⑤ 画像のトリミングや人物の見せ方は適切か

この点は概ね問題なさそうです。
人物がバンと大きめに出ているので、小さすぎるということはありません。
一点気になるのは、ワイヤーのようなものが見えてしまっているところです。
これは画像の作り方の問題ですが、広告としてはここはない方が望ましいです。

※主役と脇役
デザインでは、最も伝えたい要素（主役）と、それを補足する要素（脇役）の優先順位をつけます。バナーの場合、主役はキャッチコピーやメインビジュアル、脇役は料金や特典などの補足情報です。主役が埋もれないよう、脇役の情報量や大きさを抑えることが「伝わるバナー」のポイントになります。

Canvaのマジックレイヤーで文字・配置を微調整する

Canvaに取り込んだバナーの文字・配置を編集する画面 — マジックレイヤーで編集できる状態にしたバナーを、Canvaで要素ごとに調整していきます。

次に、生成したバナーをCanvaで調整していきます。

マジックレイヤーで編集できるデータに変換する

Canvaを開くと、ホームにマジックレイヤーという機能があります。
今回はこれをクリックして使用します。
「アップロード」をクリックし、ChatGPTから落としてきたバナーを入れると、インポートが始まります。

現在、マジックレイヤーが調整できる状態のデータに変換してくれています。
編集できるデータへの調整が終わると、元のバナーと比較して結構崩れて見えてはしまうのですが、編集できる状態のデータにここまで一発でしてくれるのはとてもありがたいところです。

情報量を落とす（必要な情報を見極める）

まずは情報量をかなり落としていきます。
このバナーに本来必要な情報を、デザイナー目線で見ていきます。

「夏前に自分を変える一歩」 → 良い
「夏の無料体験キャンペーン」 → 良い
「初回無料体験受付中」 → 良い
「キャンペーン期間 5月15日〜6月30日まで」 → 期間なので必ず入れる

一方で、その下の通常料金・入会の特典・手ぶら・完全個室・駅から3分といった情報は、バナーに絶対に入れなければいけないわけではありません。
なぜなら、先ほどの「3秒で伝わるか」という点で言えば、上部の初回体験に振り切っている方が情報が明確に伝わるからです。
振り切ることで、それ以外の情報もすごく大きく見せることができます。

ジムの名前は入れるべきですが、そのジム名以外の要素はカットしてもいいので、そこを調整していきます。

レイアウトを整える

変換するとどうしても画像は崩れてしまうので、そのままカットしていきます。
具体的には、次のように調整しました。

「初回無料体験受付中」は下に帯で置いてあげる
不要なカードは取っていく
傾いている要素は一旦すべてフラットにする
画像のトリミングで位置も少し調整する
「初心者でも安心して変える」など、無理して入れなくてよい文言はカットする
「キャンペーン」という文字が重複しているのでカットし、期間だけ目立たせる
重なってしまっている部分も消す

一旦ここまで詰めると、少しすっきりしました。
色が悪い部分は一旦青にしていきます。
このデザインをそのまま使うというよりも、再びChatGPTに返していける状態＝元のデータにするイメージで調整するとよさそうです。
これで、大体全体のレイアウトの調整が終わりました。

※Canva／マジックレイヤー
Canvaは、ブラウザ上で使えるデザインツールです。マジックレイヤーは、1枚の画像を「文字や配置を個別に編集できるデータ」に自動変換してくれる機能を指します。AIが生成した1枚絵のバナーはそのままでは文字を動かせませんが、この機能を使うことで要素ごとの調整が可能になります。

調整したレイアウトを再度ChatGPTに返してブラッシュアップする

Canvaで調整したバナーをChatGPTに入れてブラッシュアップを指示する画面 — Canvaで整えたレイアウトをChatGPTに入れ、「既存のデザインを参考にブラッシュアップして」と指示します。

Canvaで整えたレイアウトを、もう一度ChatGPTに返してデザインを仕上げていきます。

調整後のバナーをChatGPTに入れる

まず、Canvaで調整したバナーをダウンロードします。
新しいチャットを立ち上げ、調整したバナーのレイアウトをChatGPTに入れます。
そのうえで、「この状態で既存のデザイン・レイアウトを参考にブラッシュアップをしてください」と投げます。

このまま少し待つと、デザインの調整が終わります。
仕上がったバナーをダウンロードして、調整前のバナーと比較していきます。
左が調整した後のバナー、右が修正指示を与える前の最初のバナーです。