皆さん、こんにちは。okamoです。
昨日、Claude Fable 5を使った面白い実験プロジェクト(通称:Akira)に取り組む予定だったのですが、なんとClaude Fable 5が一時利用停止になってしまいました……。ガーン。
すっかり手持ち無沙汰になってしまったので、今回はその代わりに「商品CSV+商品写真」から、販促バナーを大量生成するHowToネタを紹介したいと思います!
実は、okamoがいつも使っている「VSCode + GitHub Copilot(内部でClaudeが動いています)」と無料枠もあるGemini APIがあれば、非エンジニアの方でも簡単なプロンプトだけで、訴求ポイントを完全にコントロールした高品質なバナーを量産できます。もちろん、Photoshopなどの高価なツールは一切不要です!
それでは、実際の作業手順からコストまで詳しく見ていきましょう。
💡 全体像と準備するもの
用意するのはこれだけです。
- VSCode(GitHub Copilot Pro/Pro+などチャット機能が使える状態)
- 商品のデータが載ったCSVファイル
- 商品の写真(スマホで撮ったものでOK)
- Gemini API Key
🛠️ かんたん作業手順
(手順1)VSCode + GitHub Copilot のセットアップ
まずはVSCodeを起動します。今回は内部でPythonスクリプトを動かすため、Pythonの実行環境が必要です。 もしPCにPythonが入っていない場合は、超高速パッケージマネージャー「uv」をインストールしましょう。一瞬で環境が整います。
VSCode上で Ctrl + @ キーを同時に押してターミナル(Terminal)を開き、以下のコマンドをコピー&ペーストしてEnterキーを押します。(Windowsの場合の例)
winget install --id=astral-sh.uv -e
💡 ワンポイントアドバイス 途中で確認ダイアログが出た場合は、あわてずに「Y」や「はい」を選択してください。インストールが完了したら、一度PCを再起動してくださいね。
(手順2)「sozai」フォルダの作成とデータ格納
作業用ディレクトリに sozai という名前のフォルダを作り、そこに「商品データCSV」と「商品写真ファイル」をまとめて放り込みます。
「sozai」フォルダの中に商品写真(JPG/PNG)と、ベースとなる商品リスト(products.csv)が綺麗に格納されている様子です。
(手順3)【最重要】Claudeに「訴求ポイント」を自動追加してもらう
ここが今回の一番のポイントです! きれいなバナーを作る前に、「何がこの商品の魅力なのか」をCSVに事前に整理しておくことで、生成されるバナーのキャッチコピーの品質が劇的に向上します。
VSCodeのGitHub Copilot(Claude)に、以下のように依頼します。
【Claudeへの実際の依頼プロンプト(原文ママ)】 商品はokamoの私物をオンラインでガレージセールしている。付属品や周辺品(例iPadなど)もセットになっていて市場価格(中古)よりも相当安く、周辺品(例iPadなど)もセットになっているのですぐ使える。braveサーチmcpなどで市場価格などもしらべながら、訴求ポイントをCSVに追加できますか?
Claudeにお願いすると、自動的にWebで中古相場を調べて、驚くほど的確な「中古相場」と「訴求ポイント」のカラムをCSVに追加してくれます。
Claudeによって「marketPrice(中古相場)」や「appealPoint(訴求ポイント)」の列が美しく追加・補完されたCSVデータの画面です。
(手順4)Gemini API KEY の取得と設定
バナー(画像)を生成するために、Google Geminiの画像生成モデルの力を借ります。
- Google AI Studio (Gemini API KEY取得ページ) にアクセスし、APIキーを無料(または従量課金)で取得します。
- プロジェクトのルートディレクトリに
.envという名前のファイルを作成し、以下のように記述して保存します。
GEMINI_API_KEY=あなたのAPIキーをここに貼り付け
(手順5)バナー生成コードの作成&実行依頼
今回は「Claude Sonnet 4.6」に、バナー作成を依頼します。Copilot チャットに以下のプロンプトを投げます。
【Claudeへのバナー生成依頼プロンプト(原文ママ)】 以下URLをみて、Nano Bananaを利用して各商品の販促バナーを作成してください。 https://ai.google.dev/gemini-api/docs/image-generation?hl=ja
ポイント) gemini-3.1-flash-imageを利用。API KEYは.envのGEMINI_API_KEYに定義済。 1商品で1バナー画像。 画像モデルには商品CSV(市場価格/訴求ポイント込)情報と商品写真ファイルを渡す。 できあがったバナーはoutputフォルダに。ファイル名と商品IDがひもづけできるように。 レビューして指摘があればそのバナーだけを再生成してもらう予定。 質問ありますか?Nano BananaのURLがみれない場合は言ってください。
これでClaudeがPythonのバナー生成スクリプト(generate_banners.py)を書いて実行してくれます。一瞬にしてすべての商品のバナーが生成されました。
🎨 実際に完成したバナーがこちら!
CSVで自動定義した訴求ポイントが、不自然な日本語になることもなく、完璧にデザイン内に落とし込まれています。実物を見てみましょう。
ピックアップ1:Kindle Scribe 16GB
- CSVデータ上のmarketPrice: 中古メルカリ相場 約27,500〜29,700円(本体のみ)
- CSVデータ上のappealPoint: 【中古相場比 約64%OFF!】メルカリ相場27,500円超の2024年モデルKindle Scribe 16GBが10,000円。さらにプレミアムペン(消しゴム・ショートカットボタン付き)と植物性レザーカバーもセットで追加費用ゼロ。届いたその日からフル装備で使えます。
「メルカリ相場比約64%OFF!」や「14日間返品OK」などの文字要素、そして実際の製品写真がバランスよくレイアウトされた高品質なKindle Scribeの販促バナー画像です。
ピックアップ2:LEGO WeDo 2.0 基本セット(iPad付き)
- CSVデータ上のmarketPrice: 中古メルカリ相場 約17,000〜26,000円(本体のみ)/ 新品参考価格 約88,000円
- CSVデータ上のappealPoint: 【本体のみの中古相場より安い!しかもiPad付き!】メルカリ相場17,000円〜のWeDo 2.0が10,000円。しかも専用アプリインストール済みiPad・充電ケーブルをセットにしたので面倒な初期設定不要。届いたその日からお子様が一人でプログラミングを始められます。
LEGOのキットとiPad、充電ケーブルの写真が綺麗に配置され、「本体のみの中古相場より安い!」という強烈なキャッチコピーが強調された明るいバナー画像です。
素晴らしいクオリティですね! 「国立市エリア限定・直接手渡し」や「14日間返品OK」などの地域・取引ルールに関わる細かなバナーの共通フッターパーツまで、AIが見事にレイアウトしてくれています。
💸 気になる「生成コスト」を徹底解説
実際に今回の作業にかかったコストを赤裸々に公開します!
1. Claude(GitHub Copilot Pro+クレジット)の消費量
今回、コード作成やCSV加工で使用した「GitHub Copilot Pro+」でのクレジット消費推移は以下の通りです。
- 作業前: Credits 39%
- 作業後: Credits 56% (約17%の消費)
※Copilotの各プランごとの月間AIクレジット枠については公式ドキュメントをご参照ください。
2. Gemini API (Nano Banana 2 / Gemini 3.1 Flash Image) のコスト計算
バナー画像を生成した「Gemini 3.1 Flash Image」の実際の利用料金です。
Google AI Studioのコンソールから確認できる、API呼び出し時の入力・出力トークン数のスパイクを示したグラフです。
公式の料金プランをベースに、今回バナーを6枚生成したときのスパイクデータ(18時台)から計算してみます。
【料金表】
- 入力(テキスト/画像): $0.50 / 1Mトークン
- 出力(画像): $60.00 / 1Mトークン
- 出力(テキスト): $3.00 / 1Mトークン
【今回の使用量(6枚生成時)】
- 入力トークン:約 8,000 (1枚あたり 約1,333)
- 出力トークン:約 12,000 (1枚あたり 約2,000)
【1枚あたりの単価】
- 入力コスト:1,333トークン ÷ 100万トークン × 0.50ドル ≒ 0.0007ドル(約0.1円)
- 出力コスト(画像生成):2,000トークン ÷ 100万トークン × 60ドル = 0.12ドル(約18円)
- 合計:約18円 / 1枚
バナー1枚あたり、約18円でした。
💻 成果物はGitHubに全公開中!
今回、Claudeが作成したバナー生成Pythonスクリプトや、AIへのプロンプト指示のカスタマイズ詳細は、以下のGitHubリポジトリにすべて公開しています。ぜひ自由に使ってください!
📢 【宣伝】okamoのリサイクルLPも作っちゃいました!
実は今回、okamoがバナーを自動生成していた本当の目的はこれなんです。 okamoが私物を処分するために運営しているガレージセールサイト「okamoのリサイクル」の販促用ランディングページ(LP)を制作しました。
今回自動生成したバナー画像のスライドショーが埋め込まれ、スッキリとしていて信頼感のあるデザインのランディングページです。
- 🔗 実際のLPはこちら:okamoのリサイクル 特設LP
このLPを制作するにあたって、Claudeにはあらかじめokamoのリサイクルの紹介記事をコンテキストとして読み込ませました。
そのため、LPの「安心の14日間返品OK」というコーナーには、okamoちゃんねるでお馴染みの「Geminiお母さん」からの心温まる推薦コメントがちゃっかり入っています。
14日間返品OKだなんて、okamoさんどんだけいい人なの!? ── AIのお母さん(Gemini)談
検索エンジンフレンドリー(SEO)になるよう、OGP設定やJSON-LD構造化データもコードに組み込まれています。
WebPage、ItemList、FAQPageのスキーマが検出されている検証画面です。
🏁 まとめ
いかがでしたでしょうか? PhotoshopやCanvaの有料プランを契約しなくても、手元の GitHub Copilot (Claude) と Gemini API(Nano Banana) を組み合わせるだけで、高品質なバナーが1枚約18円で量産できました。
ポイントは、画像生成を実行する前に、AIに商品の訴求点や競合を調べさせ、CSVデータをリッチ化させておくことです。これでデザイン側のテキストにブレがなくなります。
「自分のネットショップのバナーを大量に作りたい」「フリマ出品の画像を差別化したい」という方は、ぜひ本記事のスクリプトやプロンプトを参考に挑戦してみてくださいね!
おまけ:okamoちゃんねるのレビュー
この記事について、3人のAI仮想読者がレビューしてくれました。
- クロード(辛口エンジニア)
- 「Gemini APIは画像入力の料金体系が別扱いになってる場合があるぞ。もう少し丁寧にトークン計算を見せてほしかった」
- GPT(税理士)
- 「記事では“簡単”寄りに見せてるが、実際はそこそこ工程が多い」
- Gemini(お母さん)
- 「子育て世代の心に刺さるバナーデザイン!」