LP作成業務での活用事例

サイトページ制作支援AIエージェントを体験する

LPの企画・デザイン・コーディング・実装までを一気通貫で支援する、サイトページ制作支援AIエージェントのシステムプロンプトはこちら。

▶ システムプロンプトをコピーする

依頼例

（指示内容＋商品画像＋訴求別ファイルを添付）

添付のtxtファイルを、このLP制作の仕様書として読み込んでください。
記載の「実行フロー」に従い、以下を最後まで一貫して実行してください。
ただし色（カラーパレット）については、下記「■ カラーパレット設計」を最優先とし、仕様書内のデザイントーンの色指定を上書きします。レイアウト・構成・出力仕様・禁止事項など、色以外の仕様はすべて仕様書に完全準拠してください。

# ■ カラーパレット設計（最初に必ず実行する）
あなたは世界トップクラスのD2C・ビューティー領域のアートディレクターです。画像を1枚も生成する前に、添付の商品画像を精緻に観察し、この商品にとって最も洗練され、購買につながるカラーパレットを設計・確定してください。

観察の視点:
- 容器・パッケージの主要色／質感（マット・グロス・透明・メタリック等）／余白の色
- カテゴリと世界観（清潔感・高級感・ナチュラル・クリニカル 等、商品から読み取れる方向性）
- ターゲット像から逆算した「刺さる」色調（例：エイジングケア＝上質、敏感肌＝低刺激・淡色）

設計ルール:
- 下記6役割のhexを必ず確定し、テーブルで一度出力してから画像生成に進む
- ベースは背景として広く使うため、彩度を抑えた明るい色を基調にする
- テキストは背景に対しコントラスト比4.5:1以上を確保する
- CTAはコンバージョン最優先。ベースと高コントラストの色にし、ベースと同系で埋もれる場合は反対色相に振る
- 商品パッケージの世界観を核にしつつ、6枚のLP全体で調和する配色にする（商品色をそのまま全面採用せず、面積配分を設計する）
- 一度確定したhexは6枚の画像とLPのCSSで一字一句そのまま使用し、勝手に変更しない

確定する6役割:
- ベース背景 (--base): 設計する
- 見出し／本文テキスト (--text): 設計する
- アクセント (--accent): 設計する
- CTAボタン (--cta): 設計する
- 価格強調 (--price): 設計する
- 区切り線・図解ライン (--line): 設計する

# 実行フロー(この順序で必ず実行する)
1. 画像生成
/tool:gpt-image-2:画像生成(GPT Image 2) を6回呼び出し、セクション1〜6の画像を1枚ずつ生成する。GPT Image 1.5は絶対に使わない。（後述「セクション別画像生成プロンプト」を使用）
- 各セクションの画像生成プロンプトを組み立てる直前に、上記「■ カラーパレット設計」で確定したhex値を必ず再掲してからツールを呼び出すこと。6枚のトンマナを揃えるため、目測での色変更・独自解釈は禁止する

2. ファイルアップロード
/tool:ec_force_upload_file:ファイルアップロード を6回呼び出し、生成済み6枚を順次アップロードする
- 各アップロード完了時、レスポンスの liquid_path フィールド(例: {{ file_root_path }}/wine-lp/section-1-hero.png)を変数として保存する
- 6枚すべてのアップロード完了を確認してから次の手順へ進む

3. LPテンプレート作成
/tool:ec_force_create_lp_template:LPテンプレート作成 を1回呼び出す
- 各セクションの <img src="..."> には、手順2で保存した liquid_path を使用する
- 一時的な画像生成パス(/files/private/.../image_xxxxx.png)を直接使用してはならない
- 例: <img src="{{ file_root_path }}/wine-lp/section-1-hero.png">
- CSSの :root には上記「■ カラーパレット設計」で確定したhex値をそのまま定義し、全セクションのスタイルはそのCSS変数を参照すること

# 差し込み変数
- 商品ジャンル: ◯◯
- 商品名: ◯◯
- SKUコード: ◯◯
- 商品名英字: ○○
- ターゲット像:○○
- 通常価格:○○円 / 特別価格:○○円 / 割引率:○○%
- CTA文言:○○
（未指定の変数は、テーマに沿った内容を推論して使用してください）

商品は添付の商品画像を使用してください。
価格・割引率の数字は指定値どおり正確に描画してください。
不明点がある場合も、デモのためのシステムプロンプトのため、ユーザーに追加質問はせずに推論で判断して画像生成やLPテンプレート作成、ファイルアップロードを実行して下さい。

依頼例

（指示内容＋画像(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まで出力すること。設計案の提示や中間承認は不要。

依頼例

（指示内容＋CTAボタン押下後に遷移させたい商品の画像＋訴求別ファイルを添付）

あなたは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両方の表示

依頼例

（指示内容＋商品画像＋訴求別ファイルを添付）

添付の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テンプレート作成、ファイルアップロードを実行して下さい。

依頼例

以下LPのFVのABテストを実施するために、訴求内容を変更したFVを作成してください。まずはLPテンプレートをコピー作成した後、変更を反映させてください。
https://○○○○