ECバナーをAIで作るには？商品写真・コピー・余白の決め方と制作前の条件シート

商品写真からAIでECバナーを作るときは、最初に掲載する枠・伝える内容・残す商品情報を決めます。「おしゃれにして」と一度に任せるより、写真、コピー、配置を分けて指示すると、修正する場所を整理できます。

この記事では、制作前に埋める条件表、AIへ渡すプロンプト例、PCとスマホの切り抜き確認までを紹介します。読み終えたら、手元の商品写真と掲載画面を使って、依頼内容を1枚にまとめられます。

作例について：サムネイルの商品はAIで生成した架空のトートです。本文の条件・文案・配置案は編集部が手作業で組み立てた想定例で、実在ショップの制作実績やAIツールの比較実験ではありません。

ECバナーは「商品画像」と「文字・リンク」を分けて考える

まず、作りたいものが「商品ページの写真」なのか、「特集や商品へ誘導するバナー」なのかを区別します。本稿は後者の、ショップ内に置く案内用バナーが対象です。モールの主画像規定を解説する記事ではありません。

バナーには、商品の見た目だけでなく、見出し、ボタン、遷移先があります。画像を生成してから文字の置き場を探すと、商品にコピーが重なったり、スマホで重要な部分が切れたりします。先に掲載枠を確認し、文字をテーマ側で置くか、画像に含める必要があるかを決めましょう。

Shopifyの公式ヘルプは、スライドショーや背景画像について、画像内への文字の埋め込みを避け、テーマエディタで文字やリンクを追加する方法を案内しています。また、横長画像は縦長のスマホ画面で左右が切れることがあります。これはShopifyの該当セクションに関する説明で、すべてのECシステムで同じ操作ができるという意味ではありません。利用中のテーマと実際の表示を確認してください。出典：Shopify公式「Images for your theme」

AIへ渡す前に、8つの条件を決める

サイズは「ECバナーの推奨サイズ」をひとつだけ探すのではなく、実際に使う枠から決めます。管理画面の設定、使用テーマの説明、現在のPC・スマホ表示を照合してください。不明な項目は仮の数値で確定せず、担当者への確認事項として残します。

「大容量」「疲れにくい」「売れている」などは、写真だけでは確認できません。AIに文章を考えさせる場合も、根拠のない特徴や実績を足さない条件を明記します。価格・在庫・キャンペーンを載せるなら、公開時点の実データと期間を別途確認してください。

手順1：写真の原本を残し、背景と余白の案を作る

元の写真を複製して作業を始めます。商品を変形させずに使える範囲を決め、背景や配置だけを検討します。細かな柄やロゴ、持ち手などが生成で変わる場合は、その結果を商品写真として採用せず、原本を配置できる画像編集の方法へ戻してください。

背景の指示を詳しく詰める方法は、商品画像の背景をAIで作るプロンプトと確認項目で紹介しています。本稿では、その写真を「文字・ボタンと一緒に見せる条件」に集中します。

図は編集部作成の配置説明で、実際のショップやテーマの画面ではありません。図の比率が推奨仕様という意味でもありません。

手順2：AIへの指示を「確定条件」と「確認事項」に分ける

次は、画像案や構成案を依頼するための入力例です。画像を添付できる機能があるか、原本の部分編集ができるかは利用ツールで確認してください。以下は汎用的な指示の書き方であり、特定ツールで実行して精度を検証したプロンプトではありません。

目的：ショップ内の案内バナーの構成を2案考える。
掲載場所：[ページ名とセクション名]
枠の仕様：[管理画面で確認した比率・寸法・端末別設定]
※未確認の仕様があれば、画像を作る前に質問として列挙する。
読者：[読者が商品について確認したいこと]
伝える事実：[資料・写真で確認できた内容だけ]
使用素材：[正面写真、内側写真など。使う素材を指定]
変えない部分：商品本体の形、色、柄、縫い目、ロゴ。
文字：[確定した見出し・補足。未確定なら文案のみ別出力]
CTA：[ボタン文言]。遷移先には[対応する情報]を載せる。
構成：商品写真・文字・ボタンの配置を分けて説明する。
画像案を作る場合、文字は画像に焼き込まず余白として確保する。
制約：価格、性能、売上、口コミを推測して追加しない。
出力：A案/B案それぞれの配置、必要素材、不足情報、
PCとスマホで切れそうな部分を表で示す。

生成結果をそのまま完成品にせず、「商品が別物になっていないか」「条件表にない説明を足していないか」を原本と比較します。条件の未確認が残る場合は、デザインの好みを決める前にそこを埋めましょう。

手順3：違いのある2案を作り、比較する場所を固定する

以下の2案は編集部が作った想定の構成です。A案が売れる、B案のクリック率が高いといった実測結果はありません。今回は伝える事実とCTAをそろえ、配置の違いを検討します。

実装する場合は、端末ごとに文字が読めるかを先に確認します。配信後に比較する場合も、掲載場所、期間、流入元などの条件を記録し、クリック数だけで優劣を決めないようにします。表示が少ない段階は判断材料をためる期間です。

公開前チェック：PC・スマホ・遷移先をひと続きで見る

スマホで切れるからと、同じ比率の画像を大きく書き出すだけでは解決しないことがあります。Shopifyは、画像とセクションの比率が違う場合に切り抜きが起きると説明しています。画像、セクション設定、端末別の表示を一緒に確認します。出典：Shopify公式「Images for your theme」

記入シート：制作担当へ渡す情報を1枚にする

次のシートは、印刷や社内共有用の静的な記入欄です。サイト上で入力・保存するフォームではありません。掲載枠が未確認なら、その欄に「要確認」と書いてから相談できます。実際の印刷設定は利用端末で調整してください。

ECバナー制作前の記入シートを開く（SVG）

画像の次に、商品動画まで展開する場合

バナーで伝える内容が決まると、動画で見せるべき箇所も整理できます。ただし、静止画の構成をそのまま動かすのではなく、原本で説明できる動きと順序を考えます。商品説明から15秒の動画台本を組み立てる手順、商品写真からAI動画を作る工程も参考にしてください。

制作条件の整理やコンテンツ展開から相談したい場合は、SIGNALの相談フォームへ。商品写真を活用した動画制作を依頼したい場合は、KASANEの商品動画制作でサービス内容を確認できます。バナー制作の定額プランを案内するものではありません。

更新：2026年10月21日。参照：Shopify公式「Images for your theme」。テーマごとの機能や掲載条件は、利用環境の最新仕様で確認してください。