ecforce AIを用いたページ制作で使用する、AIエージェント・AIモデル・システムプロンプトの設定、および基本的な作業の流れをまとめています。制作内容に応じてAIモデルを選択します。
基本設定は共通ですが、AIモデルは制作内容に応じて選択します。
はじめての方へ：AIエージェントの起動・チャット・承認の流れなど、基本的な使い方は公式FAQ 「ecforce AIの使い方と活用方法」 をご覧ください。
エージェントの「システムプロンプト」欄に一度だけ設定する共通の定義文です。以下の内容をそのまま設定してください。
各ページ制作では、基本的に以下の流れで作業します。必要な入力内容や生成物、承認の有無は、作業内容によって異なります。
共通設定を適用したページ制作用のAIエージェントを選択し、新しいチャットを開始します。マンガ形式LPでは Gemini 3.7 Flash、それ以外は Claude Sonnet 5 を選択してください。
実施する作業の案内を確認し、実行プロンプト、商品情報、URL、画像、仕様書など、記載されている必要な情報やファイルを用意します。
実行プロンプトに必要事項を入力し、用意した画像やファイルなどと一緒にAIエージェントへ送信します。
AIが指示内容に応じて、情報の取得・分析、画像生成、ファイル保存、コーディングなどの必要な処理を進めます。作業内容によっては完了まで時間がかかります。
ファイルのアップロードやページへの実装などで実行承認を求められた場合は、内容を確認して承認します。追加の確認が表示された場合も、順に対応します。
出力されたURLや管理画面のプレビューを開き、デザイン、文言、画像、価格、リンク、表示崩れ、各機能の動作を確認します。必要に応じて修正を指示してください。
公開前の確認：AIが生成した内容には、事実と異なる表現や意図しない数値・リンクが含まれる可能性があります。必ずプレビューと実際の動作を確認してから公開してください。
ecforce AIに「プロンプト」「訴求ファイル」「商品画像」を渡して一度指示するだけ。カラー設計から画像生成、LPテンプレートへの実装まで、AIが最後まで一貫して作り上げます。
商材はコスメに限らず、フード・アパレル・ヘアケア・健康食品・嗜好品・オンライン診療など、幅広いジャンルで生成できることを確認しています。
発売前後で手が足りないときに、商品画像から土台となるLPを一気に立ち上げられます。
母の日・年末など、期間限定の訴求LPを短時間で作り、施策の回転を上げられます。
「悩み訴求」「ベネフィット訴求」など軸を変えて作り分け、比較・改善の検証に使えます。
AIが作ったLPを起点に、文言や配色を調整して自社トンマナに寄せていけます。
次の4点をそろえて、ecforce AIのエージェントにまとめて渡します。
LP制作の指示・仕様書となるプロンプト（下の「一度の指示で実行させるプロンプト」からダウンロードできます）。
訴求軸ごとに5種類あります。商材に合うものを1つ選んで添付します（下の一覧からダウンロード）。
商品のスクリーンショットを1枚以上貼り付けます。LPの色味・世界観はこの画像から読み取られます。
画像選びのコツ：LPの配色や世界観は、添付した商品画像の雰囲気からAIが自動で設計します。商品の魅力が伝わる画像を選ぶと、LPの完成度が上がります。
作成手順のSTEP2で、訴求ファイル・商品画像と一緒に毎回渡す指示文です（上のシステムプロンプトとは別物）。商品ジャンル・商品名・価格などの差し込み変数を書き換えて使用します。
ヒント：CTAボタンとよくある質問（FAQ）だけは、画像ではなくテキストでの設置も可能です。あとから文言修正やリンク設定がしやすくなります。
商材の訴求軸に合わせて、次の5種類から最適なものを1つ選び、LP作成時にAIエージェントへ添付してください。
ツール選択が動かない・エラーになるときは、次のいずれかで改善するケースが多いです。
画像生成後にエラーが出た場合は、AIに「続きをやって」と指示すると再開できます。
うまく動かないときは、別のチャットを開いてお試しください。
ecforce AIに「プロンプト」「訴求定義ファイル」「商品画像」を渡し、設定商品を指定して一度指示するだけ。カラー設計から画像生成、テキスト生成、カート連動のCTAボタン実装まで、AIが最後まで一貫して作り上げます。
訴求テーマに合わせた「定義ファイル」と商品画像を添えて使い分けることで、食品・アパレル・シーズンイベントなど、さまざまな企画に合わせたセレクションページを瞬時に作成できます。
食べ比べ・飲み比べセットや、お中元・お歳暮の大口・限定アソート販売の魅力をシズル感たっぷりに引き立て、購入単価の最大化に貢献します。
日常やオフィスなど着用シーンに合わせたルック提案や、サイズ・カラーバリエーションの魅力を整理し、購入時のサイズ不安を解消します。
クリスマス・母の日・バレンタインなど、直接配送やのし・ラッピング指定を伴う特別な日のギフト訴求を、上質な世界観とともに設計します。
次の3点をそろえて、ecforce AIのエージェントに指示としてまとめて渡します。
指示・仕様書となるプロンプト（下の「一度の指示で実行させるプロンプト」からコピーできます）。
商材に応じた訴求定義ファイルと、AIがカラーパレットや商品カットを抽出するための商品画像を添付します。
商品画像と訴求ファイルの重要性：AIは添付した商品画像から色味・世界観・パッケージデザインを読み取り、訴求ファイルに定義された構造・コーディングルールに従って最適なセレクションページを全自動で構築します。
作成手順のSTEP2で、訴求ファイルと一緒にチャットへ毎回渡す指示文です。下の枠を差し替えて使用します。
AIエージェントに渡す、訴求仕様を詳細に定義したテンプレートファイルです。商材やキャンペーンの訴求軸に合わせて最適なものを1つ選び、商品画像とセットでAIに添付してご活用ください。
食べ比べ・飲み比べセットや、お中元・お歳暮の大口・限定アソート販売向け。おいしさを五感で訴求します。
着用シーンに合わせたルック提案や、サイズ・カラー展開を整理。購入時のサイズ不安を解消します。
クリスマス・母の日・バレンタインなど、直接配送やのし・ラッピング指定を伴うギフト企画向け。
ツール選択が動かない・エラーになるときは、次のいずれかで改善するケースが多いです。
画像生成後にエラーが出た場合は、AIに「続きをやって」と指示すると再開できます。
うまく動かないときは、別のチャットを開いてお試しください。
すでに公開しているLPに、追従動画などの改善パーツをAIで追加します。既存のHTML・CSS・JavaScriptは保持したまま、必要な要素だけを差分で実装できます。
LPOは、公開済みのLPを作り直さずに改善パーツを足していく手法です。ここでは代表的な施策を、そのまま使えるプロンプト付きで紹介します。
大切な前提：各プロンプトには「実装前に必ず既存のHTML・CSS・JavaScriptを取得し、完全に保持したうえで差分追加する」指示が含まれています。既存LPを壊さずに要素を足せます。
FVを通過したタイミングで縦長動画のミニポップアップを右下に表示し、クリックで全画面モーダルに拡大します。追従CTAバーに被らないよう位置も自動調整します。プロンプト内の【動画URL】に動画を差し込んで使用します（動画は10秒程度が目安、アップロード先はecforceのファイルアップロード（オプション））。
縦長動画ポップアップ（ミニ表示→クリックで拡大モーダル）を追加してください。
実装前に必ず ec_force_lp_template_detail でテンプレートの現在の内容を取得し、
既存のHTML・CSS・JavaScriptを完全に保持したうえで差分追加してください。
━━━━━━━━━━━━━━━━━━━━━━━
【動画URL】
https:xxxxx
━━━━━━━━━━━━━━━━━━━━━━━
【機能仕様：ミニポップアップ】
・FV（ファーストビュー）セクションをスクロールで通過したタイミングで出現
・出現アニメーション：フェードイン＋右下起点のスケールアップ
・出現と同時に動画を自動再生
・✕ボタン（右上）で閉じる。閉じたらセッション中は再表示しない
・▐▐/▶ボタン（左下）で再生・一時停止を切り替え
・Escキーでも閉じられるようにする
・追従CTAバーがある場合、その高さをJSで動的に取得して
動画ポップのbottomを「追従CTAの高さ + 12px」に設定し、バナーに被らないようにする
・PCはLP幅（750px）内の右端に収まるよう位置調整する
・閉じたら同一セッション中は再表示しない
・カード中央にホバーで⛶（拡大ヒント）アイコンをふわっと表示する
【機能仕様：拡大モーダル】
・ミニカードクリック（✕・▐▐ボタン以外の領域）でモーダルを開く
・✕・▐▐ボタンはstopPropagationしてモーダル開閉に干渉させない
・モーダルは全画面オーバーレイ（黒）＋中央に縦長カード
・モーダルを開いたとき：ミニ動画をpause → モーダル動画をミニのcurrentTimeから再生（シームレス）
・モーダルを閉じたとき：モーダル動画をpause → ミニ動画をモーダルのcurrentTimeから再開（シームレス）
・モーダル内に✕ボタン（右上）と▐▐/▶ボタン（左下）を設置
・オーバーレイクリック・Escキーでもモーダルを閉じられる
・モーダル表示中はdocument.overflow:hiddenで背景スクロールを抑制
・キーボード操作：tabindex="0" + Enter/Spaceキーでもモーダルを開けるようにする
【スタイル仕様：ミニ】
・縦長カード型：幅120px・アスペクト比9:16・object-fit: cover
・角丸：border-radius 12px
・影：box-shadow あり
・z-index：追従CTAより上（10000以上）
【スタイル仕様：拡大モーダル】
・モーダルカード：width: min(80vw, 360px)・max-height: 85vh・aspect-ratio: 9/16
・border-radius: 16px・box-shadow あり・z-index: 10001
・出現アニメーション：フェードイン + scale(0.85→1)
【動画タグの実装ルール（必須）】
以下をすべて属性として付与すること：
autoplay muted loop playsinline preload="auto"
srcはsrcではなく <source> タグで指定し、type="video/mp4" を明示すること：
<video autoplay muted loop playsinline preload="auto">
<source src="【動画URL】" type="video/mp4">
</video>
※ crossorigin属性は付与しない（CORSエラーの原因になるため）
※ preload="none" / preload="metadata" は使用しない（黒画面になるため）
※ ミニとモーダルは別々の<video>要素として実装する（同一要素の使い回し不可）
※ モーダル動画にはautoplayは付与しない（JSで制御するため）
【FVしきい値の算出方法（必須）】
スクロールイベント内でgetBoundingClientRect()を使うと
画像ロード前後でサイズがずれるため、以下の静的算出を使うこと：
fvSection.offsetTop + fvSection.offsetHeight
FVセクションのHTML要素には id="fv-section" を付与すること。
【JSの構造】
・DOMContentLoaded 内にすべてまとめる
・vidDismissed フラグでセッション中の再表示を制御
・showVidPop() / closeVidPop() / openModal() / closeModal() を関数として分離
・追従CTAの is-visible クラスの有無で floatingCta.offsetHeight を動的取得し
vidPop.style.bottom を毎スクロールで更新する
・window.addEventListener('scroll', ..., { passive: true }) を使用
・✕ボタン・▐▐ボタンには必ず e.stopPropagation() を付与し
カードクリック（モーダル開閉）に伝播させない
本オファーの前に挟む「クッションLP」をAIで作成します。小さな回答や診断、ストーリーズ風の体験、共感マンガでユーザーを温め、本LPへ自然に橋渡しします。アンケート型・診断型・スワイプ型・マンガ形式の4タイプを用意しています。
いずれもLP作成用のAIエージェントを使用します。各タイプで、実行プロンプトに加えて雛形・制作キット（.txt）や商品画像・スクショの添付が必要です（各カードに記載）。
添付物について：各タイプの実行プロンプトには、専用の雛形・制作キット（.txt）や、LPのFV・オファーのスクショ、遷移先の商品画像などの添付が必要です。マンガ形式では、指示内容＋商品画像＋制作キットの3点をまとめて送信してください。
3〜5問の簡単なアンケートで広告流入を温め、本オファーへ橋渡しします。設問はAIが設計し、FVに文言を焼き込んだ画像も自動生成します。
あなたはD2C ECの「アンケート型クッションLP」を制作する担当です。
広告流入を温め、(1)小さな回答で離脱を防ぎ、(2)ベネフィットを自分で選ばせて本オファーへ橋渡しします。
添付の「お手本HTML（anke_lp_template.txt）」の中身をそのまま雛形に使い、下記ルールで完成させてください。
■テンプレートの扱い（厳守）
- 添付txtは中身がHTMLの雛形。.anke- の構造・CSS・JS・並び順は一切変えない
- 変えてよいのは「▼AI差し替え」で囲まれた箇所（設問文・選択肢）と、画像トークンの生成／差し込みだけ
- レイアウト（FV全体表示／各設問=見出し→画像→選択肢／画像サイズ／選択で次設問へスクロール・選び直し可／「結果を見る」でローディング→特典表示）は変更しない
■設問の構成（3〜5問）
- Q1：現状・課題認識。最も答えやすい単一選択で離脱を防ぐ（訴求のトリガーを反映）
- Q2：商品USP／独自メカニズムへの関心を問う単一選択
- 最終Q：ベネフィットを複数選択。選択肢はすべて商品の実ベネフィット（"欲しい理由"を自分で選ばせる）
- 訴求軸は前半（Q1トリガー・Q2の言い回し・トーン）にのみ反映。最終Qのベネフィットとオファーは商品固定で、訴求が変わっても変えない
- 設問文・選択肢は一人称目線で書く（「〜が気になる」「〜したい」）
■コピー制約（薬機法・景表法）
- 効果の断定・最上級・体験談による効能効果の保証表現を使わない
- 価格・割引・打消し表示は下記の実値と完全一致させる（憶測で数値を作らない）
- 統計・実績を使う場合は出典を併記する
■出力の基本（画像生成の品質）
- アスペクト比：幅750px相当を基準に、各セクションで指定する比率で生成する（FVは横長で文言を焼き込む／設問画像は横長でPCでも高さが出る比率）
- 日本語テキストは指定文言を一字一句正確に描画する。文字化け・崩れた文字・存在しない漢字を出さない
- 英単語の綴りミスを出さない
■FV画像（{{FV_IMAGE}}＝生成。文言を画像に焼き込む）
- 横長構図（3:2〜16:9目安）。文言は上下が見切れないよう内側の安全余白に配置
- 焼き込む文言（一字一句正確に。※下記をそのまま描画）：
・バッジ「30秒アンケート」
・見出し「おめでとうございます！」
・リード「全〔質問数〕問・約30秒のアンケートに回答で、〔割引額〕円OFFでお試しできるチャンスです！」
- 商材の世界観に合う写真調＋可読性の高い日本語テロップ
■その他の画像
- 各設問画像（{{Q1_IMAGE}}等）＝設問内容に合わせて生成し各スロットに配置。文字は入れない・被写体は中央寄り
- 添付のオファー画像＝そのまま貼らず、アンケートLPに合う形へ加工して配置（{{OFFER_IMAGE}}）。FV・設問画像と同じ画風/色調/トーン・幅750px相当に整える。画像内の価格・割引・送料などの表記は正確に保持し崩さない
- FV・全設問で画風／色調／トーンを統一
- 設問文・選択肢・ボタンはコードで実装し画像に描かない（文言焼き込みはFVのみ）
■画像の格納（重要）
- 生成画像・オファー画像はecforce側のファイル/媒体管理に保存し、各トークンには保存後のecforce URLを設定する
- base64や生成モデルの一時URLを直接埋め込まない（リンク切れ防止）
■今回の商材・訴求
- 商材：（例）食品／バスクチーズケーキ
- SKUコード：
- ベネフィット（最終Qの選択肢＝訴求が変わっても固定／4〜6個）：
- 訴求軸：
- ターゲット・ペルソナ：
- 質問数：3問
- 割引額：（例）1,000
- 最終ボタンの遷移先（通常LP URL）：{{NORMAL_LP_URL}} に設定
■実行フロー（途中でユーザーに確認・承認を求めず、一度の応答で最後まで完了させる）
1. 設問設計：各設問の意図・設問文・選択肢を確定し、FVに焼き込む文言の実値を確定する
2. 画像：FV・設問画像を生成し、オファー画像を加工する
/tool:gpt-image-2:画像生成(GPT Image 2)
3. 格納：生成/加工した画像をecforce側のファイル/媒体管理に保存し、各URLを取得する
/tool:ec_force_upload_file:ファイルアップロード
4. 実装：取得URLを各トークンに差し込み、お手本HTMLの構造・CSS・JSを変えずにHTMLを出力する
/tool:ec_force_create_lp_template:LPテンプレート作成
※1〜4を止まらず一気に実行し、最終的な完成HTMLまで出力すること。設計案の提示や中間承認は不要。
必要な添付：雛形ファイル アンケートLP.txt、オファー画像、およびLPのFV・オファーセクションのスクショ。
アンケート型クッションLPのお手本HTML雛形。実行プロンプトと一緒に添付します。
3問の診断で回答者を温め、最適な1商品を出し分けてCTAへ送ります。3つのSKUの商品情報を読み取り、タイプA/B/Cに対応させて設計します。
あなたはD2C ECの「診断型LP」を制作する担当です。 3問の診断で回答者を温め、最適な1商品を出し分けてCTAへ送るLPを作ります。 作り方の規則（第1部）と雛形（第2部）は、添付の「診断型LP 制作キット（shindan_lp_kit.txt）」に定義されています。これに従って、下記入力から完成HTMLを一気に作成してください。 ■入力（ショップが記入） - 商品①：SKUコード＝________ ／ CTA遷移先URL（診断後の販売ページ）＝________ - 商品②：SKUコード＝________ ／ CTA遷移先URL＝________ - 商品③：SKUコード＝________ ／ CTA遷移先URL＝________ - 診断テーマ（任意・1行。未記入ならSKUの商品情報から設計）：________ - 割引の有無と実値（任意）：________ - ブランド禁止語・避けたい表現（任意）：________ ■添付（このプロンプトと一緒に送る） - 制作キット（shindan_lp_kit.txt） - 商品画像 複数枚：トンマナ（色調・世界観）の基準にし、各商品①→A/②→B/③→C の商品画像として加工せずそのまま結果に配置する ■前提 - 各SKUコードから商品マスタの情報（商品名・価格・特徴・カテゴリ等）を読み取って設計に使う - FV・設問画像は、添付した商品画像のトンマナに合わせて生成する - 商品①=タイプA、商品②=タイプB、商品③=タイプC に対応させる - 診断ロジック（3問×3択・1設問ずつ表示・最多タイプ表示・同数はQ1優先）は雛形JSに内蔵済み。変更しない ■実行フロー（途中でユーザーに確認・承認を求めず、一度の応答で最後まで完了させる） 1. 読み取り：3つのSKUから商品情報を読み取る（読めない項目は明記し、推測で断定しない） 2. 設計：仕様に従い、3商品を弁別する軸→A/B/Cのタイプ名とコメント→3問×3択（各選択肢のdata-tag）を確定 3. 画像：添付商品画像のトンマナに合わせFV（文言焼き込み・横長）／各設問画像を生成する。商品画像は添付をそのまま結果に配置（加工しない） /tool:gpt-image-2:画像生成(GPT Image 2) 4. 格納：生成/加工した画像をecforce側のファイル/媒体管理に保存し、各URLを取得 /tool:ec_force_upload_file:ファイルアップロード 5. 実装：取得URLと設計内容をお手本HTMLの各トークン・data-tag・CTAのhref（各SKUのURL）に差し込み、.shindan- の構造・CSS・JSを変えずに完成HTMLを出力 /tool:ec_force_create_lp_template:LPテンプレート作成 ※1〜5を止まらず一気に実行する。設計案の提示や中間承認は不要。 ■出力後に必ず確認を促す一言を添える - FVに焼き込んだ日本語／商品名・価格の表記に崩れがないか - 各CTAが対応SKUの正しい遷移先URLになっているか - スマホ/PC両方の表示
必要な添付：雛形ファイル 簡易診断型LP.txt、およびCTA遷移先の商品画像（複数枚）。
診断型LPの制作キット（規則＋お手本HTML雛形）。実行プロンプトと一緒に添付します。
6枚の全画面カードを横スワイプで見せる、ストーリーズ風のLPです。上部プログレスバー・追従CTAバー・末尾FAQ・ボトムシート決済フォームまで一貫して実装します。商品画像から配色を自動設計します。
添付のtxtファイルを、このLP制作の仕様書として読み込んでください。
このLPは「横スワイプ型・全画面カード（ストーリーズ風）LP」として出力します。記載の「実行フロー」に従い、以下を最後まで一貫して実行してください。
ただし色（カラーパレット）については、下記「■ カラーパレット設計」を最優先とし、仕様書内のデザイントーンの色指定を上書きします。レイアウト・構成・出力仕様・スワイプUI・禁止事項など、色以外の仕様はすべて仕様書に完全準拠してください。
# ■ カラーパレット設計（最初に必ず実行する）
あなたは世界トップクラスのD2C・ビューティー領域のアートディレクターです。画像を1枚も生成する前に、添付の商品画像を精緻に観察し、この商品にとって最も洗練され、購買につながるカラーパレットを設計・確定してください。
観察の視点:
- 容器・パッケージの主要色／質感（マット・グロス・透明・メタリック等）／余白の色
- カテゴリと世界観（清潔感・高級感・ナチュラル・クリニカル 等、商品から読み取れる方向性）
- ターゲット像から逆算した「刺さる」色調（例：エイジングケア＝上質、敏感肌＝低刺激・淡色）
設計ルール:
- 下記6役割のhexを必ず確定し、テーブルで一度出力してから画像生成に進む
- ベースは背景として広く使うため、彩度を抑えた明るい色を基調にする
- テキストは背景に対しコントラスト比4.5:1以上を確保する
- CTA（追従CTAバー）はコンバージョン最優先。ベースと高コントラストの色にし、ベースと同系で埋もれる場合は反対色相に振る
- 商品パッケージの世界観を核にしつつ、全画面カード6枚とLP全体で調和する配色にする（商品色をそのまま全面採用せず、面積配分を設計する）
- 一度確定したhexは6枚の画像とLPのCSS（:root）で一字一句そのまま使用し、勝手に変更しない
確定する6役割:
- ベース背景 (--base): 設計する
- 見出し／本文テキスト (--text): 設計する
- アクセント (--accent): 設計する
- CTAボタン／追従CTAバー (--cta): 設計する
- 価格強調 (--price): 設計する
- 区切り線・図解ライン (--line): 設計する
# 実行フロー(この順序で必ず実行する)
1. 画像生成
/tool:gpt-image-2:画像生成(GPT Image 2)
を6回呼び出し、セクション1〜6の「全画面カード画像（9:16・750×1334px相当）」を1枚ずつ生成する。GPT Image 1.5は絶対に使わない。（仕様書「セクション別画像生成プロンプト」を使用）
- 各セクションの画像生成プロンプトを組み立てる直前に、上記「■ カラーパレット設計」で確定したhex値を必ず再掲してからツールを呼び出すこと。6枚のトンマナを揃えるため、目測での色変更・独自解釈は禁止する
- 各カードは1画面で完結する独立コンポジションとし、重要要素（星評価・実績バッジ・価格・オファー）はセーフゾーン（上10%・下8%・左右各8%を避けた中央域）に収める
2. ファイルアップロード
/tool:ec_force_upload_file:ファイルアップロード
を6回呼び出し、生成済み6枚を順次アップロードする
- 各アップロード完了時、レスポンスの liquid_path フィールド（例: {{ file_root_path }}/swipe-lp/section-1-hero.png）を変数として保存する
- 6枚すべてのアップロード完了を確認してから次の手順へ進む
3. LPテンプレート作成
/tool:ec_force_create_lp_template:LPテンプレート作成
を1回呼び出し、横スワイプ型LP（画面高さから9:16を逆算する中央寄せデバイスフレーム＋scroll-snap横カルーセル＋上部プログレスバー＋画像に重ならない専有領域の追従CTAバー＋末尾FAQスライド＋押下でせり上がるボトムシート表示の決済フォーム #lp-form）を実装する
- 各カードの <img src="..."> には、手順2で保存した liquid_path を使用する
- 一時的な画像生成パス(/files/private/.../image_xxxxx.png)を直接使用してはならない
- 例: <img src="{{ file_root_path }}/swipe-lp/section-1-hero.png">
- CSSの :root には上記「■ カラーパレット設計」で確定したhex値をそのまま定義し、全要素はそのCSS変数を参照すること
# 差し込み変数
- SKUコード: ◯◯
- ターゲット像: ◯◯
- 通常価格: ◯◯円 / 特別価格: ◯◯円 / 割引率: ◯◯%
- CTA文言: ◯◯
- CTA_URL: ◯◯
（未指定の変数は、テーマに沿った内容を推論して使用してください）
商品は添付の商品画像を使用してください。
価格・割引率の数字は指定値どおり正確に描画してください。
不明点がある場合も、デモのためのシステムプロンプトのため、ユーザーに追加質問はせずに推論で判断して画像生成やLPテンプレート作成、ファイルアップロードを実行して下さい。
必要な添付：仕様書ファイル 悩み訴求_横スワイプ全画面カード版_仕様書.txt、およびCTA遷移先の商品画像。
横スワイプ全画面カード版LPの仕様書。実行プロンプトと一緒に添付します。
共感マンガ、専門家との対話、オファー解説を縦スクロールでつなぎ、SNSなどの広告流入を本オファーへ橋渡しします。Character DNAで画風・人物・商品デザインを固定し、全コマの一貫性を保ちます。
あなたはD2C ECの「Webマンガ・対話型共感LP」を制作する担当です。 添付の「［統合版］manga_lp_kit.txt」を制作仕様書・お手本HTMLとして読み込み、下記入力と商品画像を使って完成HTMLまで一気に作成してください。 ■入力（ショップが記入） - 商材カテゴリー：________ - 商材名：________ - SKUコード：________ - ターゲット・ペルソナ：________ - 主な悩み・課題：________ - ベネフィット／期待する変化：________ - 訴求軸／解決の理由：________ - 通常価格：________円 - 初回・割引オファー（実値）：________ - CTA遷移先URL：________ ■添付（この指示と一緒に送る） - 商品実物画像 - 制作キット：［統合版］manga_lp_kit.txt ■制作要件（厳守） - 全7話・計19コマの縦スクロールWebtoon形式で、悩みの発覚→自己流ケアの挫折→商品との出会い→使用体験→専門家解説→オファー解説→3か月後の変化、の順に構成する - 画像生成前に、画風・主人公・相談相手・専門家・商品の「Character DNA」を固定文で定義し、全コマのプロンプト冒頭に同一文を入れる - 主人公の顔・髪型・服装・体型、相手役、専門家、商品パッケージを全コマで統一する - 商品画像は登録済みの実物画像をそのまま商品枠に使い、生成・加工・トリミング・再描画しない。マンガ内の商品も実物と同じ形状・ラベル・配色にする - スマホで読みやすい本文18px以上を基準にし、重要箇所は太字・赤字・黄色マーカーで強調する - 冒頭にPR表記を置き、効果効能の断定・最上級・架空の実績や証言を避ける。価格・割引・送料・条件は指定実値と完全一致させ、必要な打消し表示・出典を付ける - 制作キット内のお手本HTMLの構造・CSS・JS・画像トークンを基準に実装する ■実行フロー（途中で確認・承認を求めず、最後まで実行） 1. SKU・添付画像・入力値を読み取り、不明な事実や数値を推測で断定しない 2. Character DNA、全7話のストーリー、各コマのセリフ、対話UIの内容を設計する 3. 各話のマンガ画像と主人公・専門家アイコンを生成する /tool:gpt-image-2:画像生成(GPT Image 2) 4. 生成画像をecforce側のファイル／媒体管理へアップロードし、永続URLを取得する /tool:ec_force_upload_file:ファイルアップロード 5. 制作キットのお手本HTMLに画像URL・商品情報・CTAを差し込み、LPテンプレートを作成する /tool:ec_force_create_lp_template:LPテンプレート作成 6. セリフの文字化け・誤字、同一キャラクター／画風、画像の配置順、価格・CTA URL、スマホ／PC表示を確認する ※画像や配置に誤りがある場合は、該当箇所だけを修正し、その他の完成済み部分は保持してください。
使用モデル：Gemini 3.7 Flash
必要な添付：上記の指示内容、商品画像、制作キット ［統合版］manga_lp_kit.txt の3点をまとめて送信してください。
全7話・計19コマの構成、Character DNA、対話UI、お手本HTML、コンプライアンス要件をまとめた統合版キットです。
生成後は必ず確認：一度の指示で作成した際、マンガ画像のデザインや配置順に誤りが出る場合があります。その場合は「キャラクターのデザインがブレないように修正してください」「マンガ画像の順番を正しく修正してください」など、該当箇所を追加で修正指示してください。
AIがまず商品情報や訴求をヒアリングしてドラフトを作り、あなたは気になる箇所だけ確認する「添削型」で進めます。承認後、14セクションのLPを画像生成からテンプレート作成まで一貫して仕上げます。
簡易LP作成（一度の指示で完了）に対し、こちらはヒアリングで訴求・価格・成分などを固めてから作る、作り込み重視の方式です。SKUコードを指定すれば商品情報を自動取得し、一次情報として設計に反映します。
AIがカラーパレットや各変数を先にドラフトで埋め、あなたは気になる箇所だけ確認。ゼロから答える負担がありません。
SKUコードから商品名・成分・価格・定期条件などを取得し、事実に基づいて設計。画像と食い違う場合は事実を優先します。
FV・特徴・中間/最終オファー・FAQまで、CVを意識した14セクションを一貫生成します。
LP作成用のAIエージェントに、次を渡して指示します。
ヒアリング→生成の進め方を定義した指示文（下からコピー／ダウンロード）。
14セクションの統合仕様書（.txt）。実行プロンプトと一緒に添付します。
SKUコードがあれば商品情報を自動取得。商品画像は配色・商品カットの基準にします。
ヒアリングでまとめ、1回だけの承認ゲートを経て、生成フェーズに進みます。
SKU情報・商品画像をもとに、訴求軸・カラーパレット・各変数をAIがドラフト。気になる箇所だけ確認します。
まとまった『確定仕様ブロック』を確認して承認（中間ゲートは1回だけ）。
6役割のカラーパレットを確定し、商品画像＋画像生成指定を1通でまとめて送信します（参照URLの失効防止）。
FVから順に生成。初回は①〜④の4枚、以降は最大5枚ずつに区切って進めます。⏱ 全14枚
14枚そろったらアップロードし、LPテンプレートを作成します。
画像は必ず GPT Image 2 で生成します（1.5は使用不可）。実行時に1.5へ落ちることがあるため、各画像の生成直前にAIが依頼→あなたが実行する半手動運用が推奨です。
仕様書ファイルと一緒に、AIエージェントへ渡す指示文です。差し込み変数はショップ様に合わせて記入します（SKU指定で多くは自動取得）。
添付の仕様書「添付_LP統合仕様書_ヒアリング型14セクション.txt」を、このLP制作の作業仕様書として読み込んでください。記載の「フェーズ1:ヒアリング」→「フェーズ2:生成」の順で、最後まで一貫して実行してください。 【進め方】 1. まずフェーズ1のヒアリングから始めてください。SKUコードが記入されている場合は、ドラフト作成の前に /商品詳細情報 でそのSKUの商品情報を確認し、商品名・配合成分・通常価格・定期の縛り回数・配送サイクル・カテゴリ・商品説明を、特徴・訴求・価格の検討材料として最優先の一次情報に使ってください。定期のオファー価格・送料は下記の差し込み変数を優先し、未記入なら商品情報とヒアリングで補ってください。商品情報の事実(成分・価格・条件)と商品画像の見た目が食い違う場合は事実を優先し、私に確認してください。SKU未指定・取得不可の場合は商品画像の観察とヒアリングで補ってください。そのうえで、カラーパレット(6役割hex)と各変数をあなたが先にドラフトで埋め、私には気になる箇所だけ確認する「添削型」で進めてください。訴求軸を最初に確定してください。価格は、商品情報が取れていればその値を提示して確認、取れていなければ推論で決めず必ず私に確認してください。私が「おまかせ」と言った項目は、あなたの推論で確定して構いません。 2. ヒアリングがまとまったら『確定仕様ブロック』を提示し、私の承認を取ってください(中間ゲートは1回だけ)。 3. 承認後、フェーズ2に進みます。順序が重要です。(a)先にカラーパレット(6役割hex)を最終確認する → (b)私に『商品画像をもう一度添付＋ /画像生成(GPT Image 2) を指定』を1通でまとめて送るよう依頼する(ecforceは商品画像の参照URLが失効しやすく、添付後にやり取りを挟むと失効するため、パレット確認は添付より前に済ませる) → (c)私が[画像＋ツール指定]を送ったら、確認や再掲を挟まず、ただちに①ファーストビューから順に画像を生成する。ただし連続生成は途中でエラーになる場合があるため、最初のバッチは①〜④の4枚で区切り(初回はエラーが起きやすいため)、以降は最大5枚ずつで区切ってください。バッチごとに一旦停止し、私に『次のバッチ(◯〜◯枚目)を作るので、商品画像を再添付＋ /画像生成(GPT Image 2) を指定して送ってください』と依頼し、受け取ったら次のバッチを連続生成してください(区切りごとに◯/14完了を明示)。全14枚そろったら /ファイルアップロード でアップロード(liquid_pathを保存)します。**1回のアップロードは最大7ファイルまでに分割してください**(14枚なら7枚＋7枚、またはバッチ単位で複数回に分ける)。アップロード後、/LPテンプレート作成 でLP作成。GPT Image 1.5 は使わないでください。 【厳守事項】 - 画像は必ず GPT Image 2 で生成してください。GPT Image 1.5 は使わないでください。AIが自分で /画像生成(GPT Image 2) を指定しても実行時に1.5へ落ちるため、各画像の生成直前にAIが私へ『この内容で /画像生成(GPT Image 2) を実行してください』とプロンプト付きで依頼し、私が実行して生成する半手動運用にしてください。1枚目実行後にGPT Image 2 が以降も持続するなら都度依頼は不要です。1枚出すたびにモデルが「GPT Image 2」かを確認し、1.5になっていたら私に /画像生成(GPT Image 2) を再実行してもらって作り直してください。それでもGPT Image 2にできない場合は続行せず、その旨を私に報告してください。 - カラーパレットは、フェーズ1で商品画像から設計した6役割hexを、全画像(14枚)とLPのCSS(:root)で一字一句そのまま使用してください。目測での色変更・独自解釈は禁止です。 - 商品パッケージが写る全カットで、フェーズ2開始時に再添付した商品画像を参照入力に使ってください。ecforceの特性上、商品画像を添付した後にやり取り(ラリー)を1往復でも挟むと参照URLが失効します。私が[画像＋ /画像生成(GPT Image 2) 指定]を送ったら、確認・再掲を挟まず即座に生成に入ってください(容器の形・色・ラベルの同一性を保つため)。 - 価格・割引率の数字は指定値どおり正確に描画してください。 - CTAボタン・FAQ はコード実装です(画像に描き込まない。FAQは最終CTAボタンの後ろに設置)。ただしオファー(⑦中間・最終)の価格・送料・特典は画像に含めます。FV直下のCTAはボタンのみとし、価格や定期条件注記は表示しないでください(価格は中間・最終のオファー画像側にあります)。 - 特徴①②③は各セクションを1枚の画像(IMG_URL_5/6/7。番号・見出しも画像内)で生成します。番号・見出しのフォント/サイズ/位置を3枚で極力揃えるため、⑤-1をマスターとして先に確定し、⑤-2・⑤-3を作るときは⑤-1の画像を参照入力に添付して「番号と見出しの位置・フォント・サイズを①に合わせ、番号と内容だけ差し替える」と指示してください。3枚は画像サイズ(縦横比・高さ)も統一してください。 - 定期便商品の場合は、中間オファー・最終オファーの2か所のCTAボタン直下にのみコードで「定期条件注記」を記載してください(FV直下のCTAには付けない)。注記はできる限りコンパクトにし、手動改行(<br>や項目ごとの折り返し)を入れず、1続きの文章のようにつなげてください。内容は 定期初回/2回目以降価格(税込)/送料(初回・2回目)/お届けサイクル/最低継続回数(縛りがあれば支払総額目安)/「解約・返金などの詳細は特商法表記をご確認ください」。解約方法・違約金・返品/返金のフル開示はこのLPには載せず特商法表記(特商法ページ)側で担保、フッターは仕様書の標準フッターHTML(会社概要/特商法/プライバシー/利用規約リンク＋コピーライト)を使ってください。価格や送料は正確に描画してください。 - 1枚でも画像生成に失敗したら、その1枚だけ再生成・再アップロードしてください(全体をやり直さない)。 - CSS編集欄用のCSSは「①ecforceデフォルトCSS(仕様書末尾の付録。先頭が __PAYMENT_FORM_CSS__)の全文 → ②その下にLP専用CSS」の2段構成で丸ごと出力してください。私はCSS欄を全選択して貼り替えるだけにします。①は改変・省略せずそのまま、__PAYMENT_FORM_CSS__ を必ず出力の先頭に含めてください(これが無いとフォームが崩れます)。ボディーの __PAYMENT_FORM__ は #lp-form 内に1つだけ残してください。 - PCで決済フォームが見切れないようにしてください。LP全体を750pxに絞るラッパー＋overflow-x:hidden でフォームを切らず、決済フォームセクションだけPC(769px以上)でビューポート全幅にブレイクアウトさせて中央表示します(スマホは750px基準のまま)。フォーム内部の色・枠線・余白などデフォルトデザインは一切変えないでください(詳細は仕様書のフォーム干渉防止ルール(7))。 - 薬機法・健康増進法・景表法の観点を、変数の文言確定時とコード実装時の両方で点検してください。 【差し込み変数】 ※ SKUコードを指定すれば、商品ジャンル・商品名・商品名英字・通常価格・定期の縛り回数・配送サイクルは /商品詳細情報 で自動取得するため記入不要です。以下も空欄でよく、その場合はヒアリングで確認・推論します。 - SKUコード: - ターゲット像: - CTA文言: [定期オファー(定期商品の場合に記入。空欄はSKUの定期価格・ヒアリングで補完)] - 定期初回価格: 円 / 初回割引率: % - 定期2回目以降価格: 円 - 送料(初回): 円 / 送料(2回目以降): 円 - 定期3大特典①: （例:初回半額。空欄はオファー内容から推論） - 定期3大特典②: （例:2回目以降も最大◯%OFF） - 定期3大特典③: （例:全国どこでも送料無料） - 解約方法・締切: （分かれば記入。空欄は入稿時差し替え） - 初回解約の違約金: （ある場合のみ。空欄は無し扱い/入稿時差し替え） - 返品・返金条件: （分かれば記入。空欄は入稿時差し替え） ※単品商品の場合は「定期初回価格」に販売価格を記入し、2回目以降価格・送料・定期条件の項目は空欄にしてください。 商品は添付の商品画像を使用してください。 ※ヒアリングを省略して一気に作りたい場合は、この実行プロンプトの冒頭に「ヒアリングは省略し、すべて推論で確定してフェーズ2まで一気に実行して」と書き添えてください。その場合はSKUコード(または商品画像)を必ず指定してください。定期のオファー価格・送料は、SKUの定期価格と異なるときだけ上の変数欄に記入してください。
実行プロンプトと一緒に添付する、14セクションの統合仕様書です。
ヒアリング型LPの作業仕様書。フェーズ構成・14セクション定義・ecforceデフォルトCSS付録を含みます。