メインコンテンツへスキップ
レッスン一覧に戻る

atom.ec-operator.create-promo-text-images

訴求テキスト入り画像を作る

訴求テキスト入り画像を作る

create-promo-image-with-aicreate-promo-image-with-ai「create promo image with ai」に関するスキルがこのレッスンで身につきます。
想定時間未設定公開状態: draft
学習メモ

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: screenshot検証: basic_manual_check_v1

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

screenshot

メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。

diagramscreen_capture

レッスン本文

訴求テキスト入り画像を作る

このレッスンでできるようになること

ECサイトで商品を売るとき、お客様の目を引く画像が大きな武器になります。このレッスンを終えると、あなたはAIツール(=人工知能を使った便利なWebサービス)を使って、キャッチコピー(=商品の魅力をひとことで伝える短い文)入りの訴求画像を15分で作れるようになります。

料理に例えると、材料(キャッチコピーと商品イメージ)を用意して、AIという便利な調理器具に渡すだけで、プロ仕様の一品(訴求画像)が出来上がるイメージです。

訴求画像作成の全体フロー

前提を確認する

このレッスンに必要なものは次のとおりです。

  • インターネットにつながるパソコンまたはスマートフォン
  • ChatGPT または Claude のアカウント(無料プランでOK)
  • 商品の写真1枚と、伝えたい文言のメモ

プログラミングの知識は一切不要です。

キャッチコピーをAIに考えてもらう

まず画像に載せるテキストを決めましょう。自分で考えるのが難しいときは、AIチャットに手伝ってもらいます。

ChatGPT や Claude に、次のようなプロンプト(=AIへの指示文)をコピペして送ってみてください。

あなたはECサイトのコピーライターです。以下の商品情報をもとに、お客様が「欲しい!」と感じるキャッチコピーを5案出してください。1案あたり20文字以内でお願いします。

商品名:(あなたの商品名) 特徴:(あなたの商品の良いところを2〜3個) ターゲット:(どんなお客様に届けたいか)

AIが5つの候補を出してくれるので、一番しっくりくるものを選びましょう。

コツは「1文でベネフィット(=お客様が得するうれしい結果)を伝える」ことです。

良い例:

  • 「肌が吸い込むうるおい。初回20%OFF」
  • 「届いたその日から、部屋がホテルに」

悪い例:

  • 「新商品発売中」(どんな商品か、何がうれしいか分からない)
  • 「特徴:有機成分配合・無香料・敏感肌対応・120ml・税込1,980円」(情報が多すぎて印象に残らない)

画像をAIで生成する

次に、キャッチコピー入りの訴求画像を作ります。ここでは ChatGPT の画像生成機能 を使う方法を紹介します(無料プランでも利用可能です)。

ChatGPT に次のようなプロンプトを送ってください。

以下の条件で、ECサイト用のプロモーション画像を1枚作成してください。

  • 画像サイズ:正方形(SNS投稿にも使いやすい)
  • 画像の中央付近に「(あなたのキャッチコピー)」というテキストを大きく配置
  • 背景:(商品のジャンルに合う雰囲気。例:ナチュラル、クール、ポップ)
  • 全体の色合い:(希望があれば。例:白とゴールド基調)
  • テキストは読みやすく、背景とのコントラストをしっかり付けてください

生成された画像が気に入らない場合は、「文字をもっと大きくしてください」「背景をもう少し明るくしてください」のように、変えたい部分だけを伝えて再生成を頼みましょう。

ChatGPTで画像を生成している操作画面

Microsoft Designer を使う場合

ChatGPT のほかに Microsoft Designer(=マイクロソフトが提供する無料のAI画像作成サービス)も使えます。

  1. Microsoft Designer(designer.microsoft.com)にアクセスする

  2. トップ画面の入力欄に、次のような指示文を入力する

    商品写真の背景に、「(あなたのキャッチコピー)」のテキストを大きく配置したプロモーション画像

  3. 「生成」ボタンを押す

  4. AIが複数の候補を出すので、一番しっくりくるものを選ぶ

どちらのツールでもOKです。使いやすいほうを選んでください。

テキストを微調整する

AIが生成した画像のテキスト部分を確認して、必要に応じて修正します。

AI画像生成では、日本語テキストが崩れることがあります。その場合は次の方法で対処してください。

  • ChatGPT の場合: 「テキスト部分の日本語が崩れています。正しく『(あなたのキャッチコピー)』と表示されるよう修正してください」と伝える
  • Microsoft Designer の場合: 編集画面でテキスト部分をクリックして手動で修正する

テキストの見やすさチェックポイント:

良い例:

  • 白い背景に濃い色の文字、または濃い背景に白い文字
  • 文字サイズが大きめ(スマホでパッと読める程度)

悪い例:

  • 黄色い背景に白い文字(コントラストが低く読みにくい)
  • 文字が小さすぎてスマートフォンで読めない

画像を保存して確認する

  1. 完成した画像をダウンロードする(ChatGPT の場合は画像を長押しまたは右クリックで保存、Designer の場合は「ダウンロード」ボタン)
  2. PNG形式(=画質がきれいな画像形式)で保存する
  3. スマートフォンに画像を送って、次の3つを確認する

確認チェックリスト:

  • スマホ画面でテキストがはっきり読めるか?
  • キャッチコピーの内容が1目で伝わるか?
  • 商品の雰囲気やブランドイメージと合っているか?

すべてにチェックが入れば完成です。もし1つでも「いいえ」があれば、AIに修正を依頼しましょう。たとえば「文字がもう少し目立つように、フォントサイズを大きくして背景色を暗くしてください」のように伝えます。

つまずきやすいポイントと解決策

つまずき解決策
AIが生成した日本語テキストが文字化けするChatGPTに「日本語テキストが正しく表示されるよう修正して」と伝える。または英語で画像を生成した後、手動で日本語テキストを追加する
思ったようなデザインにならないプロンプトに「背景は白で」「フォントはゴシック体で」のように具体的な指示を足す。一度に全部変えず、1つずつ修正依頼するのがコツ
文字が小さすぎる「テキストをもっと大きく、画像の中央に配置して」と伝えて再生成する
背景と文字が混ざって読めない「テキストの背景に半透明の黒い帯を敷いて読みやすくして」と伝える
画像サイズが合わない「画像を1080×1080ピクセルの正方形で作り直して」のようにサイズを指定する

まとめ:今日やったことを振り返る

  1. AIチャットにキャッチコピーを考えてもらった
  2. AIの画像生成機能で訴求画像を作った
  3. テキストの見やすさを確認して、必要なら修正を依頼した
  4. スマホで最終チェックして保存した

これで、商品の魅力を伝える訴求画像を自分で作れるようになりました。次の商品でも同じ手順で作ってみてください。慣れると10分かからずにできるようになります。

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: screenshot

検証: basic_manual_check_v1

証跡とメディア

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

screenshot

メディア

diagramscreen_capture
前提 atom

必須

なし

あると楽

なし

学習完了