【デザイン未経験OK】AI×Canvaでバナーを1枚完成させる｜実際の制作手順を公開

「AIツールを触ってみたけれど、結局どれを何に使えばいいのか分からない……」

「AIで画像はキレイに作れたけれど、文字を乗せたら急に素人っぽくなった……」

そんな経験はありませんか？

AIを使えば、文章も画像も簡単に作れるようになりました。

でも、AIに全部任せれば、そのまま「伝わるバナー」が完成するわけではありません。

大切なのは、

AIとCanvaにそれぞれ違う役割を持たせること。

この記事では、

ChatGPT → 画像生成AI → Canva

という流れで、デザイン未経験の方でもバナーを1枚完成させるまでの具体的な手順を紹介します。

今回は、架空のスキンケア商品を使って実際に制作していきます。

この記事でいう「伝わるバナー」とは？

この記事でいう「伝わるバナー」とは、

のことです。

「おしゃれに見えるか」だけを目指すのではありません。

誰に、何を伝え、何をしてほしいのか。

この3つを整理してからデザインします。

この記事で1枚完成させます

今回制作するのは、

「秋から始める、大人の美肌習慣」

という架空のスキンケア商品のバナーです。

完成するもの

• サイズ：1280×720px

• 用途：SNS投稿、ブログ用画像、Web広告など

• 使用ツール：ChatGPT・画像生成AI・Canva

• 初回の目安：30〜60分程度

※制作時間は、使用するAIや画像の生成回数、Canvaでの調整量によって変わります。

こんな人におすすめ

• AIでバナーを作ってみたい

• Canvaは触ったことがあるけれど、デザインに自信がない

• AIで作った画像をバナー制作に活用したい

• デザイン未経験でも、まず1枚完成させてみたい

• 将来的にバナー制作を副業などに活かしたい

この記事には、コピペして使えるプロンプトとチェック項目も載せています。

制作するときに見返せるよう、保存しておくと便利です。

まずは3つのツールの役割を分ける

今回使うツールは3つです。

それぞれに役割を持たせます。

ChatGPT

企画・コピー・画像生成用プロンプトを作る

↓

画像生成AI

バナーの土台となる画像を作る

↓

Canva

画像に文字・CTAを配置して仕上げる

つまり、

という流れです。

画像生成AIは何を使えばいい？

この記事では、Microsoft Designerを例に進めます。

ただし、ここで紹介する考え方は、ほかの画像生成AIでも応用できます。

たとえば、

• Microsoft Designer

• Adobe Firefly

• Canvaの画像生成機能

などです。

サービスによって機能や無料利用条件は変わるため、実際に利用するときは各サービスの最新情報・利用規約を確認してください。

STEP0｜制作前に「4項目」を決める

いきなりAIに、

と指示しても、どんな文章や画像が必要なのかは決まりません。

そこで、最初に4つの項目を整理します。

バナー制作ミニ設計シート

1. 誰に見せる？

秋の乾燥やエイジングケアが気になり始めた30〜50代の女性

2. 何を伝える？

秋の肌悩みに秋寄り添う、大人のための保湿美容液

3. 見た人に何をしてほしい？

商品ページで詳細を見てもらう

4. 一番伝えたい言葉は？

秋から始める、大人の美肌習慣。

この4項目が決まったら、実際の制作に進みます。

STEP1｜ChatGPTでコピーと画像生成プロンプトを作る

まずは先ほどの設計シートをChatGPTに渡します。

ここでは、

• メインコピー

• サブコピー

• 画像生成AIに入力するプロンプト

を考えてもらいます。

コピペで使えるChatGPT用プロンプト

あなたはWeb広告の企画者です。
以下の条件で、コスメ商品のバナーに使用するコピー案と画像生成用プロンプトを作成してください。

【ターゲット】
秋の乾燥やエイジングケアが気になり始めた30〜50代の女性

【商品】
秋の肌悩みに寄り添う、大人のための保湿美容液

【目的】
商品詳細ページへ誘導する

【出力内容】
・メインコピー案を5個
・サブコピー案を3個
・画像生成AIに入力するプロンプト

【画像の条件】
・高級感のある秋のコスメ
・商品は左側に配置
・右側に文字を配置できる広い余白を作る
・秋らしい温かみのある雰囲気
・文字やロゴは入れない

ChatGPTから複数のコピー案が出てきたら、すべてをそのまま使う必要はありません。

コピーはどうやって選ぶ？

初心者の場合、

となるかもしれません。

そこで、次の3つを基準に選びます。

① 誰向けなのかイメージできるか

② 一番伝えたい印象が1つに絞られているか

③ 長すぎず、バナー上で読みやすいか

今回の

は、

• 秋という季節感

• 大人向け

• 美肌というテーマ

を短い言葉で伝えられるため、このコピーを採用します。

AIが出した文章をそのまま使う必要はありません。

最終的にどの言葉を使うかは、自分で判断します。

STEP2｜画像生成AIで「文字を置きやすい画像」を作る

次に、ChatGPTが作った画像生成用プロンプトを使って、画像生成AIで背景画像を作ります。

ここで重要なのは、

「キレイな画像を作ること」だけを目的にしないこと。

今回のバナーでは、

商品がある側

と

文字を置く側

を分けます。

商品が左側なら、文字は右側。

商品が右側なら、文字は左側。

このように、画像を生成する段階から完成後のレイアウトを考えておくことがポイントです。

コピペで使える画像生成プロンプト

高級感のある秋のスキンケア製品（美容液ボトルなど）が左側に配置されている写真。

秋の柔らかく温かい光、落ち着いたベージュとゴールドのトーン、エレガントで大人っぽい雰囲気。

画面の右側は、文字を配置できる広くシンプルな余白（ネガティブスペース）にする。

商品は左側にまとめ、右側をできるだけすっきりさせる。

文字、ロゴ、グラフィックテキストは一切含めない。

画像を選ぶときの3つのチェック

画像生成AIでは、1回で理想の画像が出るとは限りません。

何枚か生成したら、次の3点を確認します。

① 文字を置く余白があるか

今回のメインコピーは右側に配置します。

背景がゴチャゴチャしていると文字が読みにくくなるので、右側がスッキリしている画像を選びます。

② 商品が片側にまとまっているか

商品が中央に寄りすぎると、文字を置くスペースが狭くなります。

できるだけ、

商品＝左

文字＝右

という関係が作りやすい画像を選びます。

③ バナーの目的に合った雰囲気か

今回は「大人向けの保湿美容液」という設定です。

そのため、

• 落ち着いた色

• 上品な光

• 高級感

• 秋らしさ

が感じられる画像を選びます。

ただし、これは「30〜50代だからこの色」という単純な話ではありません。

商品の価格帯、ブランドの世界観、伝えたい価値なども含めて判断します。

画像生成がうまくいかないとき

AI画像生成では、意図した通りにならないことがあります。

そんなときは、短い指示を追加して再生成します。

商品が中央に出てしまう

右側に余白ができない

文字やロゴのようなものが入る

それでも不自然な場合は、無理に修正するより別の画像を生成する・別の画像を選ぶ方が早いこともあります。

今回の商品画像について

今回は練習用の架空商品なので、AIで生成した美容液ボトルを使用します。

実在の商品を紹介する広告や販売ページを作る場合は、商品部分には原則として、

公式の商品写真や、使用許諾を得た素材

を使うようにしましょう。

AIで生成した架空の商品を、実在商品のパッケージや効果を示す画像として扱うのは避けてください。

STEP3｜Canvaでバナーに仕上げる

画像が決まったら、Canvaでバナーとして仕上げます。

今回は、

1280×720px

で制作します。

STEP3-1｜Canvaで新規デザインを作る

Canvaでカスタムサイズを選択し、

幅：1280px

高さ：720px

に設定します。

STEP3-2｜画像を配置する

生成した画像をCanvaにアップロードします。

今回は商品が左側にある画像なので、

左側＝商品

右側＝文字

となるように配置します。

ここで大切なのは、完成見本とまったく同じ画像を作ることではありません。

AIが生成する画像は毎回変わります。

「商品と文字を置くスペースを分ける」

という考え方を再現できればOKです。

STEP3-3｜背景色を整える

画像だけではキャンバス全体を埋められない場合、背景色を画像の端に近い色に合わせます。

Canvaのスポイト機能が使える場合は、画像のベージュ系の色を拾います。

スポイトが見つからない場合は、画像に近いベージュ・アイボリー系の色を選ぶだけでも十分です。

完全に同じ色にする必要はありません。

STEP3-4｜メインコピーを配置する

今回のメインコピーは、

です。

右上〜中央付近に、大きめに配置します。

今回のような落ち着いた美容系のデザインでは、明朝体を使うと上品な印象を作りやすくなります。

ただし、重要なのは「明朝体を使うこと」ではありません。

一番伝えたい言葉が、一番目立っているか。

ここを確認してください。

設定の目安

• メインコピー：明朝系

• 色：濃いブラウン系

• サイズ：80〜100pt前後

※サイズは文字数や配置によって調整してください。

STEP3-5｜サブコピーを配置する

サブコピーは、

です。

メインコピーの下に、小さめに配置します。

ここでは、

メインコピー ＞ サブコピー

という情報の強弱を作ります。

すべての文字を同じ大きさにすると、どこから読めばいいのか分かりにくくなります。

設定の目安

• メインより小さく

• 24〜32pt前後

• メインコピーと同系色

数値を完全に守る必要はありません。

縮小して見たときに、メインコピーが最初に目に入ることを優先してください。

STEP3-6｜CTAを作る

最後に、

というCTAを配置します。

CTAとは、

「詳細を見る」「購入する」「申し込む」

など、見た人に次の行動を促す要素です。

今回は「詳細を見る」をボタンにします。

Canvaの「素材」から角丸の長方形を追加し、その上に「詳細を見る」という文字を配置します。

例えば、

• ボタン：濃いブラウン系

• 文字：白

• 文字サイズ：28〜36pt前後

などにすると、今回の世界観に合わせやすくなります。

STEP4｜最後の微調整で完成度を上げる

ここまで配置できたら、いったん完成です。

でも、

と感じることがあります。

そんなときは、次の3点を確認してください。

① 文字と背景が重なっていないか

背景の明るさや模様によって、文字が読みにくくなることがあります。

特にサブコピーが背景と同化していないか確認します。

読みにくい場合は、

• 文字の位置を少し移動する

• 文字サイズを調整する

• 文字色を変更する

などで改善します。

② CTAが端に寄りすぎていないか

「詳細を見る」を画面の右下ギリギリに配置すると、窮屈に見えます。

少しだけ内側に配置して余白を作る。

これだけでも落ち着いて見えます。

③ 情報の優先順位が分かるか

完成したバナーを少し離れて見て、

最初にどこを見るか

を確認します。

今回なら、

メインコピー → 商品 → サブコピー → CTA

というように、情報が自然に拾える状態を目指します。

すべてが同じくらい目立っているなら、

• メインコピーを大きくする

• サブコピーを小さくする

• CTAの大きさや色を調整する

などして、情報に強弱をつけます。

完成です！

ここまでで、

企画

↓

コピー作成

↓

画像生成

↓

画像選定

↓

Canvaでレイアウト

↓

最終調整

という流れで、1枚のバナーを完成させました。

最初から完璧なデザインを作る必要はありません。

まずは、

という経験を作ることが大切です。

AI画像を使う前の「3分チェック」

実際に制作物を公開・利用する前に、最低限ここだけ確認しておきましょう。

AIサービスの利用規約や無料プランの条件は変更されることがあります。

「無料で作れる＝どんな用途でも自由に使える」

とは限りません。

① 各ツールの最新利用規約を確認する

SNS、ブログ、広告、クライアントワークなど、使用目的に応じて各サービスの最新規約を確認してください。

② 第三者の権利に注意する

AIが生成した画像に、

• 著名人に似た人物

• 既存キャラクター

• ブランドロゴ

• 特定の商品に酷似したデザイン

などが含まれている場合は注意が必要です。

「AIが作った画像だから問題ない」と自動的に判断しないこと。

最終的には人間が確認して使用しましょう。

③ クライアントワークでは案件条件を確認する

仕事でAI生成素材を使用する場合は、

クライアント側のルールや案件の利用条件

も確認します。

「作れるか」だけではなく、

「その素材を、その用途で使用して問題ないか」

まで確認することが実務では重要です。

まとめ｜AIは「たたき台を作るアシスタント」

今回覚えてほしいのは、

AIに全部を任せる方法ではありません。

役割を分けることです。

ChatGPT

企画・コピー・画像生成用プロンプト

↓

画像生成AI

バナーの土台となる素材

↓

Canva

文字・CTA・レイアウトを整えて完成

つまり、

という考え方です。

まずは今回の設計シートを使って、実際に1枚作ってみてください。

次は「見本なしでも作れる」へ

この記事では、秋の美容液バナーを例に、

企画 → AIで素材作成 → Canvaでレイアウト → 最終調整

までを体験しました。

ただ、実際の案件では毎回同じ商品・同じ構成ではありません。

「転職サービスなら？」

「スクールなら？」

「EC商品なら？」

さらに、

と修正を求められることもあります。

今後は無料記事で基礎を深掘りしながら、有料記事では以下の内容を実例を使って解説していきます。

• 業種が変わっても使えるプロンプト設計

• AI画像の選び方と素人感を減らすデザインチェック

• 修正依頼への対応から制作・納品までの実践フロー

「1枚作れる」から「自分で考えて別の案件にも対応できる」へ。

その先を学びたい方は、ぜひフォローしてお待ちください。

この無料記事で覚えてほしいこと

最後に、今回の記事で一番覚えてほしいことをまとめます。

① いきなり作らず、4項目を決める

② AIに全部任せず、役割を分ける

③ 画像生成の段階から、文字を置く場所を考える

④ 「キレイな画像」ではなく「バナーとして使いやすい画像」を選ぶ

⑤ Canvaでは情報に強弱をつける

⑥ 完成後に「誰に・何を・どう伝えるか」を確認する

この6つを意識するだけでも、AIで作った素材をそのまま並べるだけのバナーから、一歩進んだ制作ができるようになります。

まずは、このページを保存して、実際に1枚作ってみてください。