AIによる自動実装

自動実装の手順や例を、パターンごとに例示します。

• (A) LPやサイトが既に制作済みだがフォーム部分はこれから
• (B) LPやサイトも何も制作していない場合
• (C) LPやサイトをフォームを含めてコーディング済みだが動作はまだ
• (D) CMSのテーマファイルに自動実装する場合

(A) LPやサイトが制作済み

既に制作済みのページはあり、LP中の問い合わせフォームのセクションや、サイト内の問い合わせ用ページが未実装の場合、フォームの作成から指示することができます。

1. フォーム作成を依頼します。人間に依頼するように文章を書いてください。

   Tip

   入力項目が決まっていなくても構いません。「採用応募フォーム」「資料請求フォーム」のように用途を伝えるだけでも Claude Code が一般的な項目構成を提案します。あとから「電話番号も追加して」のように伝えて調整もできます。

2. ccskill-esparform スキルが発動し、Claude Code がフォームを埋め込む準備や、既存HTMLの中身を確認します。
3. 実装前に必要な情報や、方針確認などが質問されます。必要に応じて回答します。
4. Claude Code が既存デザインに合わせた問い合わせフォームを実装し、管理画面での設定まで自動で完了させます。
5. 実装が完了すると、Claude Code は自らブラウザを自動起動して表示の確認をします。(Claude Code が自動操作中のタブは画面枠がオレンジ色に囲われます)
6. 問題を見つけたら Claude Code が自律的にコードを修正します。問題がなければ、ダミー値を入力して送信操作の確認を行います。(Claude Code からメールアドレスを聞かれたり、直接入力するよう依頼を受けたりします)
7. 通知メールの宛先(TO)に指定したメールアドレスや、フォームの動作確認に使ったメールアドレスの受信箱を確認できる場合は、メールが届いたかどうかの確認まで自動的に行います。

   メールの受信確認

   espar form のスキル ccskill-esparform は、メールアドレスが Gmail の場合に限って受信確認が可能です。以下の両方を満たしている必要があります。

   • 通知メールのTOや、送信確認時に Claude Code に入力させるメールアドレスが、個人用Gmailのアドレスまたは Gmail が有効化された Google Workspace のアカウントメールアドレスであること
   • Claude Code がGmail受信箱の内容を閲覧できること (弊社開発のOSSスキル ccskill-gmail または Claude Code 標準の Gmail コネクタ 等を有効化して設定が完了していること)
8. 送受信の確認まで終えたら、完成したHTMLファイルをサーバにアップロードして下さい。

   アップロード先

   アップロードする先のサーバは、あらかじめ登録された許可ホストと一致している必要があります。管理画面の [詳細設定]→[許可する送信元ホスト] を確認して下さい。 HTMLをアップロードした先のホスト名(ドメイン名)が許可ホスト一覧に含まれない場合、espar form は動作しません。追加する必要がある場合は Q. 許可する送信元ホストを追加できますか？ を参照してください。

 

(B) LPが未制作

LPそのものが未制作の場合、Claude Code にLPを制作させるのと同時に espar form を組み込んだフォームの実装も依頼することができます。

1. 制作したいものを伝え、フォームの実装も一緒に依頼します。以下は Claude Code に与えるプロンプトの例です。

   > 新製品情報の企画書やロゴ、コンセプトの文章等を @docs フォルダに入れています。これらを読み、最適なLPを作成して下さい。LPの最下部には espar form で作ったフォームを置いて下さい。入力要素はLPの内容に応じて提案して下さい。メールの送信と受信のテストもお願いします。

2. ccskill-esparform スキルが発動し、制作の準備を行います。途中 Claude Code から質問される場合は回答して下さい。
3. ページの制作が完了すると、Claude Code は自らブラウザを自動起動して確認します。(Claude Code が自動操作中のタブは画面枠がオレンジ色に囲われます)
4. 問題を見つけたら Claude Code がコードを修正します。問題がなければ、ダミー値を入力して送信操作の確認を行います。その後、メール受信確認ができる環境であれば、Claude Code が受信の確認も行います。

 

(C) フォームをコーディング済みのLP

<form> や <input> タグを使ってフォームのパーツはコーディング済みだが、まだ動くわけではない(送信ボタンを押してもメール送信はできない)という場合、既存のデザインや構造を保持したまま espar form を実装させて、メール送信機能だけをアドオンすることができます。

1. espar form でメール送信機能を追加したい旨を伝えます。

   @index.html はフォームを含むLPをコーディングしたHTMLファイルです。espar form を導入してメールが飛ぶようにして欲しいです。必須項目やメールアドレス形式のチェックなどの入力チェックも実装して下さい。デザインやレイアウトはいじらないでください。実装後はブラウザを使って実際に動くかどうか、送信・受信を確認してください。

2. ccskill-esparform スキルが発動し、espar form の埋め込み準備を行います。途中 Claude Code から質問される場合は回答して下さい。
3. ページの制作が完了すると、Claude Code は自らブラウザを自動起動して確認します。(Claude Code が自動操作中のタブは画面枠がオレンジ色に囲われます)
4. 問題を見つけたら Claude Code がコードを修正します。問題がなければ、ダミー値を入力して送信操作の確認を行います。その後、メール受信確認ができる環境であれば、Claude Code が受信の確認も行います。

 

(D) テーマファイルに自動実装

espar form は WordPress 等の CMS でも使用することができます。Claude Code に参照させる対象に違いがあるのみで、作業の進め方は同じです。

構築手法	Claude Code に参照/編集させるもの
LP等の静的制作	HTMLファイル
WordPress等のCMS構築	テーマファイル・テンプレートファイル・固定ページ等の原稿HTML

CMS の制作/構築作業に Claude Code を使用していることが前提となります。

1. CMS構築作業を行っているローカルのフォルダでターミナルを開きフォーム作成を依頼します。この時、使用しているCMSの情報、espar form を埋め込む対象を指定します。必要に応じてCMSの設計情報や仕様を一緒に教えます。
2. ccskill-esparform スキルが発動し、Claude Code がフォームを埋め込む準備や、既存HTMLの中身を確認します。
3. 実装前に必要な情報や、方針確認などが質問されます。必要に応じて回答します。
4. Claude Code が CMS の流儀や CMS 上に実装済みのデザイン・レイアウトに合わせて問い合わせフォームを実装します。
5. 手元のCMS構築方法に合わせて確認を行います。(下図は Docker を使ってローカル環境に再現し動作確認している例)
6. Claude Code にURLを伝えて、動作確認を依頼します。
7. 受信確認が可能な設定になっていれば、意図した通りのメール受信が行えるかを Claude Code が確認します。
8. 送受信の確認まで終えたら、作業は完了です。ステージングサーバでの作業なら本番CMSサーバにコピーする等の作業を行います。