ユースケース

LPO・既存LP改善業務での活用事例

2026年09月24日 08:54 更新

ecforce AI × LPO・既存LP改善業務での活用

ecforce AIは、既存LPの改善（LPO）において、課題整理・訴求／コピーの見直し・画像生成・コーディング・ecforceへの実装までを一気通貫で支援します。

できること一覧

既存LPの構成・訴求・コピーの見直し
既存デザインに合わせたセクション画像の生成・差し替え
CTA・カウントダウンタイマー・動画など、既存LPの部分的な改善
ベンチマークLPを参考にした訴求セクションの追加
ABテスト用の別パターンLPの作成
既存LPテンプレートの更新と画像・動画ファイルのアップロード

対象ユーザー

対象：既存LPの運用・改善を行う方（LPO、CVR改善、ABテスト、キャンペーン施策など）

事前準備

事前に用意するとスムーズな情報：

改善の目的（例：CVR改善、離脱改善、CTA最適化、ABテストなど）
対象LPのURL
現状の課題・改善したい箇所
商品情報（商品名・SKUコード・価格・特徴など）
使用したい画像・動画・参考デザイン
ターゲットと訴求軸
CTA文言と遷移先URL
変更してよい範囲／変更しない範囲
ブランドガイドラインや使用できない表現
LPの仕様書・テンプレート（指定がある場合）

基本的な使い方

最初に以下の情報をまとめて渡すと、既存LPの意図を保ちながら改善を進めやすくなります。

改善の目的・解消したい課題：
対象LPのURL：
変更したい箇所・変更内容：
商品名・SKUコード：
ターゲット・訴求軸：
使用する画像・動画・参考デザイン：
価格・割引率・CTA文言・遷移先URL：
変更してよい範囲／変更しない範囲：
その他の制約・禁止表現：

既存LPを改善する場合は、「変更する箇所」と「変更しない箇所」を明確に指定してください。価格・割引率・商品情報などの数値は、実際の設定値を入力してください。

有償版ではカスタムエージェントを作成できます。制作フロー・ブランドガイドライン・使用ツールなどの前提情報をエージェントにあらかじめ設定しておくと、毎回入力する手間を省けます。

活用事例（有償版）

サイトページ制作支援AIエージェント

ecforce AIの有償版では、LPの作成・改善に特化したサイトページ制作支援AIエージェントを利用できます。商品情報や制作仕様書をもとに、クリエイティブ設計から画像生成、ファイルアップロード、LPテンプレートの作成・更新まで一気通貫で支援します。

AIモデル：Claude Sonnet 5
インターフェース：AIモデル選択・ファイル添付
アプリ連携：ecforce

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

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

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

LPO・既存LP改善

追従型動画の実装

スクロールに合わせて表示される縦長動画のミニポップアップと、クリックで拡大するモーダルを既存LPへ実装できます。

依頼例

（指示内容＋動画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() を付与し、カードクリック（モーダル開閉）に伝播させない