- ✓架空カフェの依頼書を読み解き、支給された写真を主役にして6要素フレームワークで自分のプロンプトを組み立てられる
- ✓ChatGPT Images 2.0でバナーを生成し、ChatGPTと壁打ちして構図やトーンの調整まで完了させる
- ✓Canva Magic Layersでレイヤー化し、デザイナーとして仕上げて1:1 × 2バリエーション = PNG 2枚を保存できる
バナーのスペックを確認する
このレッスンでは、架空カフェ Café Hizashi のInstagramバナーを2バリエーション制作します。まずは作る対象のサイズを確認しておきましょう。
Chapter 2では素材の支給がない案件で、被写体からすべてAIに生成してもらう練習をしました。今回の案件はクライアントから商品写真が1枚支給されています。支給された写真をそのまま主役に使い、その周りにテキストを配置していく作り方を練習します。これで「支給なし＝ゼロから生成」「支給あり＝写真を活かす」の両方のパターンを扱えるようになります。
| サイズ名 | ピクセル | 主な用途 |
|---|---|---|
| 正方形 1:1（今回制作） | 1080 × 1080 px | Instagramフィード・Facebook広告 |
SNSバナーは媒体ごとにサイズが決まっています。依頼書のサイズ指定を最初に確認してから、Canvaのキャンバスや生成プロンプトに反映する流れを徹底してください。
クライアントの依頼書を確認する
実際のクラウドワークスでは、以下のような依頼書が届きます。まず全体を読んで、指定されている情報とお任せになっている情報を仕分けします。
Instagramに載せるカフェのバナーを作ってください。
いちごを使ったアフタヌーンティーをPRしたいです。店舗で撮影した写真を1枚お送りするので、その写真を使ってバナーにしてください。
春らしい雰囲気でお願いします。キャッチコピーはお任せします。
・アフタヌーンティーセット ¥2,800（3/1〜4/30 期間限定）
・店名：Café Hizashi
・サイズ：正方形 1:1（1080 × 1080 px）
・テーマカラー：クリーム × テラコッタ系（お任せでも可）
・支給素材：いちごのアフタヌーンティーの写真 1枚（下記。このまま使ってOK）
・連絡先：TEL 000-0000-0000 ／ 営業時間 11:00〜19:00
▼予算：5,000円 ▼納期：1週間以内
支給された写真（この1枚を主役に使います）：
クリックするとファイルがダウンロードされます。
依頼書の読み解き方（写真提供型）：今回は写真が支給されている案件です。支給写真を主役に据えたうえで、転記できる情報と自分で補完が必要な情報を分けてからプロンプトを組み立てます。
| 情報の種類 | 今回の依頼書での内容 |
|---|---|
| 支給写真の扱い | いちごのアフタヌーンティーの写真をそのまま主役に使う。被写体・構図は写真で決まっているので、ゼロから作り直す必要はない |
| 転記できる情報 | テキスト全文・サイズ（1:1）・テーマカラー（クリーム × テラコッタ）・ターゲット属性 |
| 自分で補完が必要な情報 | 印象（支給写真のトーンに合わせる）・テキストのレイアウト・フォント系統（6要素フレームワークで考える） |
| キャッチがお任せの扱い | 先にChatGPTでコピー案を出してもらい、自分で採用案を選ぶ |
| 連絡先の扱い | バナーには入れない方針で進める（情報量を絞ってビジュアル重視） |
依頼書を読み解いてプロンプトを組み立てる
依頼書の情報を土台に、6要素フレームワークで不足要素を自分の言葉で補完します。この補完こそがデザイナーとしての判断です。
依頼書のキャッチはお任せです。まずコピー案を複数出してもらい、採用案は自分で選びます。
春らしい雰囲気で、いちごが旬のカフェのSNSバナー用に キャッチコピーを5案出してください。 ターゲットは30代女性、上品でおしゃれな雰囲気です。
出てきた案から、なぜこのコピーが今回の依頼に合うかを考えて選びます。今回は 春のしあわせカップの中に を採用します。
依頼書を見ながら6要素を埋めます。書かれているものはそのまま転記、書かれていないものは自分のデザイン判断で言葉にします。
| 要素 | 出どころ | 今回の内容 |
|---|---|---|
| ①印象 | 自分で補完 | 添付写真のトーンに合わせた上品でおしゃれな仕上がり・やわらかな自然光・高コントラスト（30代女性のSNSに刺さる美しさ） |
| ②配色 | 依頼書に記載 | クリーム × テラコッタ |
| ③サイズ | 依頼書に記載 | 正方形 1:1（1080 × 1080 px） |
| ④テキスト | 依頼書に記載 | 春のしあわせカップの中に／ Café Hizashi ／ アフタヌーンティーセット ¥2,800 ／ 3/1〜4/30 期間限定 |
| ⑤対象 | 依頼書に記載 | いちごのアフタヌーンティーセット（春の季節感） |
| ⑥構図 | 自分で補完 | 3段ティアードスタンドを中心に、テキストは上部から中央に集約 |
印象と構図は依頼書には書かれていません。ターゲットにどんな気分になってほしいかを考えて言葉にすることが、デザイナーとしての判断になります。
ここでもらった商品写真をChatGPTに貼り付けて、組み立てたプロンプトと一緒に送信します。依頼書の文章はそのままプロンプトに貼り付けて使い、①印象と⑥構図など足りない部分を自分の言葉で追記します。Chapter 2で学んだように、依頼書から転記したクライアントからの指示と、自分で補った追加指示を分けて書くと、抜け漏れに気づきやすくなります。下の完成例も、この2つを色分けして示しています。
完成例を読む前に、自分ならどう書きたいかを考えてプロンプトを組み立ててみましょう。STEP2の6要素フレームワーク表を見ながら、①印象・⑥構図に入れたい文言を自分の言葉で補い、自分なりの完成形を一度つくります。ゼロから書くのが難しいと感じる方は、下の完成例の一部を自分の言葉で書き替える形でもかまいません。書き終わったら下の完成例と読み比べて、押さえられた点と抜けた点を確認してください。
Café Hizashiのプロンプト例（手本）
支給写真を1枚添付したうえで、次のプロンプトを送ります。緑＝依頼書から転記したクライアントの指示、橙＝自分で補った追加指示です。
ChatGPT Images 2.0で生成する
組み立てたプロンプトをChatGPT Images 2.0に送って生成します。プロンプトの精度を上げるコツは以下の5項目です。
| コツ | 狙い・書き方 |
|---|---|
| ①添付写真を背景に使い、加工しないと明示する | 最初の1文で「添付した写真を加工せず、そのまま背景写真として使う」と書く。素材を渡していることと、写真に手を加えない方針を最初に伝える |
| ②ターゲットと世界観を入れる | 30代女性向け・上品、SNSのフィードでスクロールが止まるような、など感情ワードで空気感を指定する |
| ③テキスト階層を指定する | キャッチ（最大）→ 店名（中）→ 詳細情報（最小）と文字サイズの差を明示する |
| ④写真の上へのテキストの重ね方を指定する | 写真は背景として固定し、その上にテキストやあしらいを重ねる位置・余白を指定すると、意図したレイアウトが出やすくなる |
| ⑤フォントの種類・太さを指定する | 白い細いセリフ体フォントのように、太さと字体の両方を書くと精度が上がる |
今回はロゴの支給はありませんが、案件によっては写真に加えてロゴ画像が支給されることもあります。その場合は、ロゴをどこに配置するかを画像の出力段階で確認し、その箇所に余白を空けておきましょう。ロゴ自体はあとからCanvaで重ねて配置します。
落ち着いた夕方イメージやフラットレイ構図など、方向性を変えたプロンプトも用意して生成しましょう。選択肢が増えるほど、ベストを選びやすくなります。
逆画像検索で類似を確認する
生成できたら、すぐに逆画像検索を行います。1分で終わるので習慣化してください。
生成画像を右クリック → 名前を付けて保存。
Googleトップ画面を開き、検索バー右端のカメラアイコン（画像で検索）をクリック → 保存した画像をアップロードします。
著名な商業作品や写真素材と酷似していないか目視確認します。類似が強く出た場合は、プロンプトの特定スタイル指定（〇〇風など）を削除して再生成してください。問題がなければ次へ進みます。
なお、Googleは全著作物をカバーしているわけではないため、検索結果に出なかったから絶対に安全、とは言い切れません。明らかな類似を事前に排除するためのチェックと位置づけてください。
AIと壁打ちして画像を仕上げる
逆画像検索をパスしたら、ChatGPTに追加指示を出して被写体・構図・ビジュアルトーンの修正を行います。画像そのものの変更はここで完了させます。テキストのサイズ・フォント・色・レイアウトはCanvaで自由に変えられるので、ここでは画像本体の修正に集中します。
| 修正したい内容 | ChatGPTへの指示例 |
|---|---|
| 背景の整理 | 背景をもっとシンプルにして |
| 被写体の強調 | いちごをもっと前面に出して |
| トーンの調整 | 全体のトーンをもっと暖かくして |
| 被写体サイズ・配置 | 被写体をもっと大きく、手前に配置して |
| 主役と背景のメリハリ | 主役と背景のコントラストをはっきりさせて |
なぜこのデザインにしたかを1文で説明できる状態になったら、画像本体の修正は完了です。テキストのサイズ・フォント・色・レイアウトは、このあとCanvaで自由に変えられます。
Canva Magic Layersで仕上げる
壁打ちで構図・配置が確定した画像を Canva に取り込み、以下の6ステップで仕上げて書き出します。chap2 lesson-05 で学んだ正本フローと完全に同じ手順です。
Canvaを触る過程で「ボタンが見つからない」「操作方法がわからない」と詰まる場面があるはずです。そんなときは、chapter 2でも紹介した下記のCanva教材を参考にしてください。レベル別に3つ用意しています。制作物を進めながら、適宜このCanva教材も学習していきましょう。一気に全部学習する必要はありません。少しずつ並行して進めていけば十分です。
Canvaを初めて触る方向けの入門編です。
基本操作を覚えた次のステップの実践編です。
さらに使いこなしたい方向けの応用編です。
Step 1：画像をCanvaにアップロード
ChatGPT Images 2.0でダウンロードした画像を、案件サイズに合ったCanvaキャンバスに配置します。
| 操作 | 手順 |
|---|---|
| サイズ指定 | Canvaトップ画面の左上にあるデザインを作成をクリック → 検索バーに「フィード」と入力 → 「1080×1080 インフィード広告（正方形）」をクリックしてキャンバスを開く |
| 画像配置 | 左パネルのアップロードから壁打ち確定画像を取り込み、キャンバスにドラッグ＆ドロップで配置する |
Step 2：Magic Layersを適用する
画像をレイヤーに分解します。背景・テキスト・オブジェクトが個別レイヤーに自動で分解されます。
| 項目 | 内容 |
|---|---|
| 操作 | 画像を選択 → 編集（画像上部メニュー）→ Magic Layers → 3〜5秒待機 → レイヤー分解を確認 |
| 確認ポイント | テキストがテキストレイヤーとして分離されているか |
Step 3：背景画像を支給写真に差し替える
Magic Layersで分解しても、ChatGPTが生成した背景は写真とグラデーションやぼかしが同じレイヤーにまとまってしまうことがあります。このままだと、写真だけを差し替えたり、グラデーションやぼかしの濃さや位置を自由に編集したりすることができません。そこで背景をクライアント支給の写真に差し替え、グラデーションやぼかしは自分で別レイヤーとして作ると、写真・グラデーションやぼかし・テキストがそれぞれ独立し、修正が自由自在になります。
① 背景を支給写真に差し替える
| 手順 | 操作 |
|---|---|
| ①レイヤーを開く | Magic Layersでレイヤー分解したあと、編集画面の「配置」→「レイヤー」をクリックする |
| ②背景を全選択 | 現在の背景になっている要素をすべて選択する（Shiftキーを押しながら対象のレイヤーを順にクリックし、まとめてグループ化してから消すと楽です） |
| ③背景を削除 | 選択した背景要素を削除する |
| ④支給写真を差し替え | アップロードからクライアント支給の写真を挿入する。挿入した写真を右クリック →「レイヤー」→「最背面へ移動」を選び、いちばん下のレイヤーに配置する |
② グラデーションやぼかしを別レイヤーで作る
グラデーションやぼかしはChatGPTの出力デザインを手本に、自分でCanvaの別レイヤーとして作成します。あとから別レイヤーとして挿入できるので、写真の上に重ねて濃さや位置を自由に調整できます。写真・グラデーションやぼかし・テキストがそれぞれ独立したレイヤーになっていれば、あとからいくらでも手を入れられます。
Step 4：画像生成・Magic Layers後の意図しない変化を修正する
画像生成やMagic Layers適用後には、いくつかの意図しない変化が起きます。文字化け・英語圏フォント・揃えズレ・図形欠けなど、起きやすいものはほぼ決まっているので、以下の表で一気にチェックして修正してください。
| カテゴリ | 起きやすい変化 | 対処法 |
|---|---|---|
| 文字化け | テキストレイヤーとして抽出された日本語が崩れている | テキストレイヤーをダブルクリックして、正しい日本語に直接書き換える |
| フォント | ChatGPT Images 2.0の生成フォントが英語圏向けで、日本語表示に不適 | テキストレイヤーを選択 → 上部のフォント名をクリック → 日本語フォントに置き換える。 推奨フォント例： ・セリフ系（上品・高級感）：Noto Serif JP ／ Shippori Mincho ／ はんなり明朝 ・サンセリフ系（現代的・汎用）：Noto Sans JP ／ Zen Kaku Gothic New ／ BIZ UDPGothic ・手書き系（温かみ・親しみ）：Zen Kurenaido ／ Hachi Maru Pop |
| 配置 | 左揃え・中央揃えがズレた | テキストレイヤーを選択 → 整列パネルで揃え直す |
| 配置 | 文字が一部消えた | Canva側で改めてテキストとして配置する |
| サイズ | 文字サイズが意図せず統一されてしまう | テキストレイヤーを選択 → 手動でフォントサイズを変更する |
Step 5：AI出力をデザイナーとして修正して完成させる（最重要）
AIが生成した素材をそのまま納品するのはデザイナーの仕事ではありません。次の修正カテゴリから複数を選んで実施してください。どれを選ぶかもデザイナーとしての判断です。
| 修正カテゴリ | 具体的な修正内容 |
|---|---|
| ①テキストの配置変更 | キャッチや詳細情報の位置・余白・揃え方をデザイナーとして意図的に選択する |
| ②フォント・あしらいのこだわり | フォントの組み合わせ・ドロップシャドウ・背景バーなどで、ブランドに合った雰囲気に仕上げる |
| ③オブジェクト配置の調整 | 被写体・装飾の位置やレイヤー順序を調整して、視線誘導を意図的に設計する |
| ④デザイン要素の追加 | 図形・ライン・アイコンをゼロから配置する。最もデザイナーとしての寄与が明確になる修正 |
| ⑤テキスト内容の調整 | AIが生成したキャッチコピーの語順や言葉を、自分の言葉で書き直す |
| ⑥配色の変更 | テキスト・背景・装飾の色をカラーピッカーで選び直し、ブランドカラーや意図に合わせる |
ChatGPT Images 2.0が生成する画像には、デザインとして以下のような問題が含まれることがよくあります。Step 4で意識的に修正してください。
(1) スマホで見たときに文字が小さすぎる（SNS投稿は特にスマホ閲覧前提なので、キャッチや訴求情報のサイズを上げる）
(2) 視線誘導が正しく設計されていない（目を引かせたい順に配置・サイズ・コントラストの差をつけ直す）
書き出し前の最終チェック
Step 5を終えたら、書き出す前に以下の5項目を必ず確認します。1つでも引っかかれば修正してから書き出してください。
| チェック項目 | 確認内容 |
|---|---|
| ①フォント | 2種類以内に収まっているか |
| ②文字サイズ階層 | キャッチ → 店名 → 詳細の順に小さくなっているか |
| ③あしらい | 1種類以内に収まっているか（ドロップシャドウ＋アウトラインの重ね掛けをしていない） |
| ④テキストの揃え | 左揃えか中央揃え、どちらかに統一されているか |
| ⑤最終3軸 | コントラスト・余白・フォント統一の3軸がすべてOKか |
Step 6：書き出す
書き出し形式はクライアントの要求に従います。Canva上部の共有 → ダウンロードから、用途に合った形式を選んでください。今回のSNSバナーはPNGで書き出します（共有 → ダウンロード → ファイルの種類「PNG」→ ダウンロード）。
バリエーション2の書き出しと完了確認
Step 6まで終わったら、もう1パターン（バリエーション2）を同じ流れで仕上げて書き出します。最終的に 1:1 × 2バリエーション = 計2枚 のPNGが揃ったら完了です。
例：banner_lumiere_1x1_v1.png
夕方イメージやフラットレイ構図など、方向性を変えたプロンプトで生成 → 同じCanva仕上げフローを通します。バリエーション2のPNGも保存（例：banner_lumiere_1x1_v2.png）。
複数サイズを求められた場合：クライアントから複数サイズを求められたときは、Canvaのリサイズ機能（Canva Pro専用）で他のサイズ（1280×720・1080×1920など）に展開できます。依頼書にサイズ指定があれば、その指定に従って展開してください。
- 支給された写真をそのまま主役に使い、依頼書から転記できる情報と自分で補完が必要な情報を仕分けることが、プロンプト組み立ての出発点
- キャッチがお任せの場合は、ChatGPTで複数案を出してから自分で採用案を選ぶ
- ChatGPT Images 2.0で生成したら、まず逆画像検索で類似確認を行う習慣をつける
- ChatGPTとの壁打ちで画像本体（構図・被写体・トーン）の修正をここで完了させる
- Canvaは細かい仕上げだけのツールではない。テキスト・フォント・色・レイアウトはCanva側で自由に変えられる
- AI出力をそのまま納品しない。デザイナーとして修正を加えてこそ、デザイナーの仕事になる
依頼書から、転記できる情報と自分で補完が必要な情報を仕分けられる
ChatGPT Images 2.0のプロンプトで押さえる5つのコツを説明できる
ChatGPT壁打ちで完了させる修正と、Canvaで行う修正の違いを説明できる
デザイナーとして加える修正の例を3つ以上挙げられる
制作が終わったら、3-4（納品前チェック）と3-5（こだわりポイントの言語化）を済ませたうえで、コーチに提出してフィードバックをもらうのがおすすめです。プロの視点で見てもらうと、自分では気づけない改善点が見つかります。