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

atom.ai-marketer.banner-variants-create

静止画バナー案をつくる

静止画バナー案をつくる 料理で例えると、バナー案づくりは「メニューの看板を作る」ようなものです。お店の前を通る人に「これが食べたい!」と思わせる看板——それをAI(=人工知能のことで、ここでは言葉で説明すると画像を...

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

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

種類: markdown_doc検証: basic_manual_check_v1

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

screenshot

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

diagramscreen_capture

レッスン本文

静止画バナー案をつくる

料理で例えると、バナー案づくりは「メニューの看板を作る」ようなものです。お店の前を通る人に「これが食べたい!」と思わせる看板——それをAI(=人工知能のことで、ここでは言葉で説明すると画像を自動で作ってくれるツール)を使って15分で仕上げます。

このレッスンが終わると、あなたは AIへの指示だけで3パターンのバナー画像を作り、文字を載せて仕上げる ことができるようになります。

バナー制作フロー図


バナーの目的を一文で決める

まず「このバナーで何を伝えたいか」を一文で書き出しましょう。目的がはっきりすると、AIに出す指示(プロンプト=AIへの指示文のこと)もブレなくなります。

  • 良い例: 「夏限定のかき氷キャンペーンを知らせる、爽やかな青空の写真バナー」
  • 悪い例: 「いい感じのバナー」

悪い例のように曖昧だと、AIが何を作ればよいか判断できず、思い通りの画像になりません。

やること: メモ帳でもスマホのメモでもよいので、目的を一文だけ書いてください。書けたら次に進みましょう。

AIツールを選んで画像を生成する

画像生成AI(=言葉で説明すると画像を作ってくれるサービス)を使います。どれか1つを選んでください。

ツール特徴料金の目安
ChatGPT(画像生成機能)会話の流れで画像を作れる。修正指示も日本語でOK無料プランでも数枚/日
Canva AI画像機能デザイン編集とセットで使える。文字載せまで1画面無料プランで月5回
Microsoft DesignerMicrosoftアカウントがあればすぐ使える無料枠あり

迷ったら ChatGPT がおすすめです。日本語の指示がそのまま通り、「もう少し明るく」「背景を海に変えて」のような追加指示もチャット形式で出せます。

プロンプト(AIへの指示文)を書く

以下をコピーして、太字の部分だけあなたの商品・サービスに書き換えてください。

SNS用のバナー画像を作ってください。
- 商品: **夏限定のかき氷**
- 雰囲気: **青空と海が見える爽やかな写真風**
- 構図: 商品が中央に大きく映る
- テキストは含めないでください
- 横長 16:9 のアスペクト比でお願いします

ポイント: 「テキストは含めない」を必ず入れる

AIは日本語の文字を正確に描くのが苦手です。文字が崩れた画像が出てきてやり直し……を防ぐため、文字はあとから別のツールで載せます。

  • 良い例: 「テキストを含めない。商品が中央に大きく映る写真風の画像」
  • 悪い例: 「『半額セール』という文字を大きく入れて」

ChatGPTでの画像生成画面

バリエーションを3パターン作る

1枚だけでなく、用途に合わせて3つのバリエーション(=見せ方の違うバージョン)を作ります。

パターンプロンプトに追加する文使い道の例
A: 横長「横長 16:9、商品全体が見える構図」Webサイトのトップバナー
B: 正方形「正方形 1:1、商品をクローズアップ」Instagramの投稿
C: 縦長「縦長 9:16、縦に情報を並べる構図」スマホアプリ内の広告、ストーリーズ

実際の操作手順

  1. 先ほどのプロンプトをAIに送り、パターンA(横長) を生成する
  2. 「同じ雰囲気で正方形 1:1 に変えてください」と追加で指示 → パターンB
  3. 「今度は縦長 9:16 でお願いします」と追加で指示 → パターンC
  4. 各画像をパソコンにダウンロード(右クリック →「画像を保存」)する

うまくいかないとき: 3パターンの構図が似てしまう場合は、「クローズアップ」「引きの全体像」「真上から見下ろす」などカメラの角度を変える指示を追加してみてください。

テキストを書き足して仕上げる

画像ができたら、Canva(=デザインをかんたんに作れるWebサービス)などで文字を重ねます。この手順はAIではなく手作業で行います。

  1. Canva(canva.com)を開き、生成した画像を読み込む
  2. 「テキストを追加」で「夏限定かき氷キャンペーン」などのメッセージを入力する
  3. 文字が背景と重ならないよう工夫する

文字を読みやすくするコツ:

  • 良い例: 白い太字+文字の後ろに半透明の黒い帯を置く → どんな背景でも読める
  • 悪い例: 背景と同系色の文字をそのまま置く → 読めない

3パターンすべてに同じメッセージを載せたら、それぞれPNG形式で書き出してください。

成果物を確認する

次のチェックリストで、すべて「はい」になるか確認しましょう。

  • 目的のメッセージが一目で伝わるか
  • 3つのサイズ(横長・正方形・縦長)が揃っているか
  • どのバナーでも文字がはっきり読めるか
  • 画像がぼやけたり、不自然な部分がないか
  • 人に見せて「何のバナーかわかる」と言ってもらえそうか

すべて「はい」なら完成です! スクリーンショット(=画面の写真を撮ること)で3枚のバナーをまとめて保存しましょう。

つまずきやすいポイントと対処法

つまずき原因対処法
AIが日本語の文字を崩して描く画像生成AIは文字の描画が苦手「テキストを含めない」と指定し、文字はCanva等で後から載せる
画像のサイズが合わないアスペクト比の指定漏れプロンプトに「横長 16:9」「正方形 1:1」「縦長 9:16」と明記する
3パターンの構図が似てしまう指示が抽象的すぎる「クローズアップ」「全体像」「真上から」などカメラ角度を変える
生成に時間がかかる・エラーが出るサーバー混雑など数分待ってリトライ。改善しなければ別のツールを試す
どのツールを使えばいいかわからない選択肢が多いまずChatGPTで試す。うまくいかなければCanva AIに切り替える
成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: markdown_doc

検証: basic_manual_check_v1

証跡とメディア

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

screenshot

メディア

diagramscreen_capture
前提 atom

必須

なし

あると楽

なし

学習完了