(投稿は人間である筆者が執筆/推敲しています)

静的サイトで問い合わせフォームを実装できる espar form を提供して7年になります。静的HTMLに埋め込みコードを貼り付けて、ちょっと手を加えればメール送信できるようになるのが特徴です。

espar form のサイトのトップページ
(espar form のサイト。静的サイト時代のフォーム実装ツール)

SPF/DKIM/DMARCにも対応し、外部システムとも連携可能で、昨今多いフォーム営業のブロック機能も搭載…と色んな機能を充実させてきました。そんな espar form ですが、本日2026年10月9日、新たな機能というか周辺ツールを2つリリースしました。

espar form でフォームを実装する制作担当者様向けのツール。同時に使うことで、Claude Code が espar form をよく知る専門家となり、自動で問い合わせフォームの実装と動作確認までしてくれる、というものです。

Claude Code がブラウザを操作し、フォームにテスト用の値を入力した状態
(Claude Code がLPにフォームを実装。メールのテストも自動的に行っているところ)

Claude Code 前提なのでかなり前衛的(?)なのですが、AIを使った全く手書きしないLP制作は、フォーム実装を含めて当たり前になるとみていて、そんな時代での一役を担えればと思ってのリリースです。

今回の投稿では、なぜ作ったのか、静的ページでのフォーム実装がどう変わるのか、思うところをツラツラと書きました。LPにAIで動くフォームを自動実装させる、という世界観に興味おありの方はぜひご一読ください。

プレスリリースも出していますので、良ければ合わせてご覧ください。

 

AIで制作する時代でもLPやサイトのフォームは面倒臭い

Claude Code のようなエージェントAIが出てきてから、Web制作でもAIに任せる場面が当たり前になってきました。LPとか簡単に作れますしね。実装させたLPのクオリティは、別にプロンプトを頑張らなくても、モデルの進化とともにクオリティはドンドン上がってきています。

デザインの異なる6つの espar form のLPを3列2行に並べた一覧
(espar form のデモ用LPを6パターン同時に作らせたもの。制作時間は、フォーム実装込みで計2,3時間程度)

ところが、問い合わせフォームは、フォームの体裁こそ整いはすれど、動きはしないんですよね。送信ボタンクリック→入力条件チェック→確認画面→メール送信って動きを期待しますが、さすがにそうはなりません。ボタン押しても動かない。なんせ静的ですから。

動かそう(メールを飛ぶようにしよう)と思えば急に面倒になります。

PHPでの組み直し、CMSのテーマに組み込み、プラグイン導入やカスタマイズ、メールサーバ、PHPやCMS環境のサーバ構築や設定も必要、最近は SPF/DKIM/DMARC 等のドメイン認証まで必要です。公開後も、PHPやCMSのアップデート、メールが届かない場合には原因調査の責任まで…

それか、見た目や機能・自由度を犠牲にして Google Form の iframe 埋め込みや、ハックして直接POSTに逃げるかですね。

AIでの制作時代になっても、フォームの課題は変わらないのです。サーバ構築や設定までAIにさせれば良いのですが、どこまで ssh させるのか、DNS の設定はどうするか、PHP/CMS のアップデートは…等々、難易度は格段に上がります。正直、まだまだ現実的とは言えません。

 

HTMLを「ルールに沿って修正するだけ」で動く espar form

espar form は、PHPを使わず JavaScript で動くフォーム実装ツールとして開発されました。HTMLに埋め込みコードを貼り、ルールに沿ったCSSクラスを書き足すと、そのフォームからメールが飛ぶようになります。

例えば以下のように、独自のクラスを追記します。

<form method="POST" class="espf">
    <input type="text" name="name" class="espf-required">
    <div class="espf-e-name-required" style="display:none;">名前は必須項目です</div>

...(略)...

    <input type="button" class="espf-b-confirm" value="確認">
    <input type="button" class="espf-b-back" value="戻る">
    <input type="button" class="espf-b-submit" value="送信">
</form>

espf- で始まるCSSクラスで挙動やエラー文言を追記していくんですね。それだけでメールが飛ぶと。言い換えると espar form は、ルールに沿ったテキストを挿入するとメールが届く仕組みです。こうしたテキスト生成って、エージェントAIが最も得意とすることですね。

ルールに従うだけの作業なら、AIにルールを教えてAIにやらせたら良い。

そこで、espar form のルールや知識を Claude Code のスキルとして定義してみたのです。これが試作段階から思いのほかうまくワークしまして、Claude Code が勝手にフォームを実装してくれて相当楽になることが分かりました。これを作り込んで公開したものが今回の ccskill-esparform です。

ccskill シリーズのサイトにある ccskill-esparform の紹介
(OSSでスキルを無償公開する ccskill シリーズ第4弾になる)

あわせて、管理画面での設定を行うCLI(コマンドライン) esparformctl を、Claude Code が使うツールとして開発。この使い方もスキルに記述し、Claude Code は espar form の管理画面操作まで行えるようになりました。

espar form の管理画面。フォームの基本情報のほか、通知メール・返信メール・外部連携・セキュリティなどのタブが並ぶ
(espar form の管理画面。これまでブラウザで行っていた設定を Claude Code が行う)

さらに、ブラウザ自動操作の方法もスキルに記載しているので、フォーム未実装のHTMLさえ与えれば、

  1. フォームの実装
  2. メールのタイトル・本文・宛先等を設定
  3. ブラウザで入力・送信の動作確認
  4. メール受信し内容確認

までの全てを Claude Code が全自動で勝手にやってくれるようになりました。

 

実装を一行も書かずにフォームが動くまで

一例をお示しします。まず、フォームが存在しないLPを用意します。

フォームをまだ実装していないLPの冒頭。方眼紙に送信の仕組みを図面で描いたデザイン
(デザインとコーディングは済んでいて、フォームだけがまだないLP)

Claude Code に、HTMLはできたけどフォームだけがまだなんだ…という状況と、どんなフォームが欲しいのかを伝えます。

Claude Code の入力欄に入力した、フォーム実装の依頼文

Claude Code はHTMLを読んで、進め方を計画し、必要な情報を聞いてきます。espar form 固有のフォームIDと呼ばれる文字列や、実装の方針とかですね。選択するだけなので楽ちんです。

Claude Code から届いた進め方の確認と選択肢

Claude Code がフォーム部分のHTMLを書き、espar form 固有の埋め込みコードや、ルールに沿ったクラスを挿入し、文脈を考えてエラー文言も実装します。この間、自分は別の作業をしていてもいい。

既存のデザインの変数を使って追加されたCSSと、Claude Code の進行報告

続いて、Claude Code はメール内容や、FROMアドレスなどを記述した設定ファイルを生成します。最低限の記入を求めてきますので、指示通りに入力。

Claude Code が作成した通知メールの設定ファイル

設定ファイルの準備が終われば、Claude Code は espar form の管理画面に設定を反映します。続けて自動テストへ進もうとするので、許可を出します。

サーバ側の設定変更の許可と、実際のメール送信への同意を求める Claude Code

許可を得たら、ローカルでサーバを起動しブラウザを起動してURLを入力。Claude Code は自分が実装したLPを見てフォーム部分までスクロールし、ダミーの値を勝手に入力します。

Claude Code がテスト用の値を入力したフォーム。メールアドレスの欄だけが空いている
(オレンジ色のカーソルが Claude によるブラウザ自動操作。メールの欄だけは人間に入力を求めてくる)

確認→完了の画面を経て実際に送信完了。espar form の管理画面情報から成否を確認して、人間に結果を報告してきます。

送信の成功を報告し、確認画面の表示の崩れを直す Claude Code

そのまま異常系や特殊環境での動作確認が続きます。スマホ表示に問題ないか、間違った入力をしたらエラーがでるか…等々。問題があれば Claude Code が自分で勝手に修正します。

狭い幅の画面で、未入力とメールアドレスの形式の誤りにエラーが表示されている様子

最後にメール受信側の確認。Claude Code が Gmail の受信箱を照会して、通知メールと自動返信メールが届いているか、入力した値が文面に入っているかを確かめます。

送信記録を確かめたうえで、Gmail の受信箱を照会してメールの受信を確認する Claude Code
(Gmail や Google Workspace を使っている前提で、Gmail と接続して確認まで任せられる)

仕上げに公開前のチェックを依頼します。デバッグ用の設定が残っていないか等々ですね。

受信確認と公開前チェックの完了を報告し、確かめられていない点を分けて伝える Claude Code

これで実装から確認まで完了。「アップロード後に確認してね」「管理画面も一応確認してね」とアドバイスも残してくれました。あとはサーバにアップロードしたら公開できます。

ここまで、ほぼ放置です分程度です。一行もコードを書いていない というのが新しい制作体験かなと考えてます。

さらにこれを、複数サブエージェントで同時並行させ、10分で6パターン作って不要なものを捨てる…。こんなスタイルがこれからの制作になると思うんですよね。

デザインの異なるLPそれぞれに、Claude Code が実装した問い合わせフォームを並べた一覧

フォーム実装部分までAIに丸投げできると、完成品までを全パターンで作れることになります。試行錯誤できる数が増えてクリエイティブのクオリティも向上するに違いありません。

 

今後の Web や SaaS の在り方

クラウドで提供される各種のサービスは、今後、Claude Code 等のエージェントAIむけの仕組みを用意できるかが重要になってくると思います。

  • API
  • CLI(コマンドライン)
  • スキル
  • MCP

こうしたツールが一つも提供されていないサービスは、エージェントAI時代には取り残されていくかも知れません。

Web サイトもしかり。エージェントAIに優しい形式で発信しているかどうか。人間が使う前提だった検索機能や問い合わせフォームも、エージェントAI向けが主、人間向けは副、という位置付けに変わっていくことでしょう。

クラウドサービスの建物の正面に API・CLI・SKILL・MCP の4つの入口が並び、AIエージェントたちが入っていく。人間は脇の小さな扉へ向かうイラスト

なぜなら、エージェントAIを使うのが当たり前になっていくからです。

Claude Code や Codex を使うのは一部の人だけ…という見解もありますが、実はそうも言ってられません。Grok Bot や ChatGPT の dots、Meta の Muse などの盛り上がりが示すように、我々はブラウザを使うよりパーソナルアシスタントやエージェントAIを使うようになるからです。WebサイトやSaaSは直接見るのではなく、AIが窓口になる未来はそう遠くないでしょう。

 

長々と書いてきてしまいましたが、お読みいただきありがとうございました。エージェントAI時代を捉えるべく、espar form の周辺ツールを公開しました〜というご紹介でした。

昨今のセキュリティ事故の多発をうけて、Webサイトやシステムの静的化はますます重要になっていくと思います。静的化したページで問い合わせフォームに困った時に、espar form を思い出して頂けたら幸いです。