ECサイトの商品バナーを週50枚量産した話

「商品の画像も作って」が最初の罠だった

クライアントのECサイトで夏セールのキャンペーンバナーを40枚近く作る必要が出た。商品カテゴリごとに、Amazonトップ・楽天用・自社サイト用と3サイズ、計15カテゴリ。以前なら外注して数日かかっていた案件です。

最初のミスは「商品を描かせようとしたこと」でした。「夏用扇風機の商品バナーを作って」と頼んだら、実際の商品とは似ても似つかない謎の扇風機が生成されてきた。当たり前ですが、Claude Designは実在する商品を知らない。

ここで方針転換しました。商品画像はこちらが用意して貼る。Claude Designにはバナーの「フレーム」と「背景・テキストデザイン」だけを作らせる。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。

効いたプロンプトの型

ECバナーで安定するようになったのは、この型を使い始めてからです：

商品バナーのデザインを作ってください。

【用途】ECサイトのカテゴリートップ用バナー
【サイズ】728×90px（横長レクタングル）
【商品エリア】左1/3に商品画像を配置するスペースを空けておく
【テキスト】
  - メインコピー：「夏セール開催中」（大きく）
  - サブコピー：「最大40%OFF」
  - 期間：7/1〜7/31
【カラー】背景はネイビー（#0A2463）、テキストは白、値引き数字はオレンジ（#FF6B35）
【雰囲気】清潔感のある夏らしいデザイン。ごちゃごちゃしない。

ポイントは「商品エリアをスペースとして確保させる」こと。Claude Designが生成したバナーに、後からFigmaやPhotoshopで実物の商品画像を差し込む前提で作っています。

※Figma: デザイナーが多く使うUIデザインツール。Claude Designの主要な比較対象。※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

サイズ違いを一気に展開する方法

Amazonは複数の規格が混在しています：

配置場所	サイズ
トップバナー	970×250px
商品ページ	600×500px
スポンサー枠	300×250px

最初のバナーが決まったら、こう続けます：

このデザインのスタイル・カラー・テキストをそのままに、
サイズを300×250pxに変更してください。
商品エリアは上半分に確保してください。

「スタイルをそのままに」を入れるかどうかで、仕上がりの安定感が全然違います。入れないと毎回別デザインになる。

ハマりポイント：値引き率の表示

セールバナーで「40%OFF」の数字を大きく出したいとき、最初は「目立つように」と書いていましたが、出力にバラつきがありました。

今はフォントサイズを直接指示しています：

「40%OFF」は全体の文字の中で最大サイズ（画面の1/3程度の高さ）で表示。
他のテキストより明らかに大きく。

抽象的な「目立たせて」より、比率や大きさのイメージで伝えた方が再現性が上がります。

今の運用実態

週50枚というのは、カテゴリが15、サイズが3つ、A/Bテスト用バリエーションが1カテゴリに2〜3種という計算です。一日10枚ペースで5日。

1枚あたりの作業時間は今プロンプト作成と調整込みで4〜6分。以前の外注コストと比べると、月の費用が大幅に落ちました。ただ商品画像の合成はまだ手作業が残っています。ここがボトルネックで、Claude Design単独では完結しない。

「バナーのデザイン部分を秒速で出して、素材はこちらが持ち込む」という役割分担が、ECバナー量産ではいちばんしっくりきています。