【制作体制について】
本案件は試験的な取り組みとして、デザインから実装まで、整形・変換の作業にAIを優先して使用しました。構成設計・文言・Figmaでのデザインに加え、実装段階でもReact形式から静的HTMLへの変換、パスの一括置き換え、スクリプトの不具合修正をAIに任せています。WordPressへの組み込みと最終的な表示確認、各種の判断は人が行いました。
このLPで特に工夫した点
1. 構成を先に決めてから、デザインを作った
先に画面を作るのではなく、「訪れた人がどんな気持ちで来て、何を知れば問い合わせに進めるか」を整理してから、ブロックの順序と文言の口調を決めました。
2. 誇張しない、数字は実数と時点をセットで表示
- 実績の数字は件数と時点をセットで掲載（例：ココナラ評価5.0／10件、リピート7社中5社、いずれも2026年10月時点）
- お客様の声は、ココナラの公開評価を一部抜粋・短縮して掲載し、その旨を明記
3. Figma MCPによるデザインとパーツ設計
- 色・余白・角丸を変数化し、ボタンや声カードなどをコンポーネント化
- スマホ（390px）を先に作り、PC（1440px）へ展開（SNS流入が中心のため）
- 画面の崩れ（高さの潰れ、幅の崩れ、カード高さの不揃い）は、確認しながら修正
4. 専用テンプレートで、本体のCSS・JSを読み込まない構成に
LP専用のテンプレート lp.html を用意し、このテンプレートを使っている間は、サイト本体のデフォルトのCSS・JSを読み込まない設定にしました。
- 本体のスタイルやスクリプトがLPに当たって見た目が崩れるのを防ぐため
- 本体側の既存デザインには手を入れず、LPのときだけ切り離す方針
5. React形式の書き出しを、静的HTMLへ変換
Figma Makeの書き出しは、index.htmlの中身が空で、ページの本文をJavaScriptが描画する形式（React）でした。そのままではWordPressの投稿に貼れないため、AIにブラウザ描画後のDOMを書き出させ、**1枚の静的HTML（style・本文・scriptの順）**へ整形しました。
6. HTMLブロック特有のパス処理
LP専用テンプレートを指定した固定ページに、カスタムHTMLブロックで本文を貼る運用です。ここではPHPが使えず、get_template_directory_uri()なども使えないため、画像パスの扱いに注意が必要でした。
まとめ
本プロジェクトは、構成設計・デザイン・実装時の整形作業までAIを積極的に取り入れた、試験的な取り組みとしてのコーディング代行LPです。
技術的な特徴：
- 訪問者の気持ちの流れに沿った13ブロック構成
- Figma MCPによる変数・コンポーネント設計
- スマホ優先（390px → 1440px）の制作
- LP専用テンプレートで、本体のCSS・JSを読み込まない構成
- React形式の書き出しを、WordPressのHTMLブロックに載せられる静的HTMLへ変換
- HTMLブロック運用に合わせた、
/wp-content/始まりのパス一括置き換え
ビジネス的な価値：
- 問い合わせという1つのゴールに絞った、迷わせない導線
- 数字と時点を明示した、誠実な訴求
- 既存サイトのデザインを崩さず、LPだけを独立して運用できる