Skip to content
espar form espar form espar form DOCS

AIによる自動実装とは

2025年以降、Claude Code をはじめとするエージェントAIの台頭により、Web制作もAIに任せることが当たり前になりました。

espar form では、AIを活用した制作体験にいち早く対応し、制作者が一行もコードを書くことなく、メールが実際に届くフォームの実装と動作確認までをAIが行う という制作体験を提供しています。制作担当者がフォームのコーディングをする必要はなくなります。

本ページでは、Claude Code の使用を前提にAIによるフォーム自動実装の概要を紹介します。

フォームの自動実装とは

以下は、フォーム部分のみ実装できていないLPのHTMLに、フォームを実装するよう Claude Code に指示する様子です。どんなフォームを作りたいかを伝えるのみという点が自動実装の特徴です。

esparformの使用例

この後 Claude Code は、与えられた LP のソースコード HTML に、実際にメールが飛ぶ「動く問い合わせフォーム」を自動で実装していきます。制作担当者は、フォームに関するコードを書く必要も、サーバを用意する必要も、設定する必要もありません。

Claude Code はHTML中にフォームの実装を行い、その後、

  1. espar form の管理画面でメールテンプレートの設定
  2. ローカルWebサーバを起動して表示確認
  3. ダミー値を使った入力と送信のテスト
  4. テンプレート通りにメールが届いているかの受信確認
  5. 途中で問題があれば実装に戻り再テスト

までを全て自動で行います。制作担当者の作業は、Claude Code から聞かれる質問に答えること、そして完成したフォームの表示・動作確認をするのみとなります。

これが espar form が提供する、AIによるフォームの自動実装の体験です。

以降、フォームの自動実装を実現する仕組みについて解説します。既に Claude Code に慣れていて、スキルやCLI等についてご理解がある方は AIによる自動実装の準備 に進んでください。

espar form 専用スキル

Claude Code には、仕様や作業手順やノウハウをパッケージ化できる スキル と呼ばれる機能拡張の仕組みがあります。スキルをインストールすると、固有の知識やノウハウが Claude Code に注入されます。

弊社では、espar form の仕組み・実装手順・API仕様等の情報をまとめた ccskill-esparform という Claude Code 用のスキルを 無償公開しています。

ccskill-esparform の GitHub リポジトリ

ccskill-esparform スキルを導入すると、本マニュアルや公式サイトの情報、その他の実装に関するノウハウを Claude Code が必要な時に参照できるようになります。

制作者は「espar form でフォーム実装して」とお願いするだけでよくなります。フォーム部分が未実装でも <form> タグすら記述する必要がありません。

未来のWebサイト制作プロジェクトでは、このように、フォーム実装すら自然言語で依頼するだけでよくなります。espar form はいち早くこの取り組みを進めています。

espar form 専用CLI

espar form では、以下の設定を管理画面から行う必要があります。

  • メールの宛先(TO/CC/BCC)
  • メールのタイトルや内容

こうした管理画面上の設定を、ブラウザを開かずに行えるCLI(コマンドラインインターフェース)が esparformctl です。人間ではなく Claude Code が使用する前提のCLI として無償提供しています。

espar-esparformctl のGitHub リポジトリ

Claude Code にとって esparformctl は「espar form の管理画面を安全に操作できる道具」となります。また、前述のスキル ccskill-esparform には esparformctl の使い方やノウハウ、手順等の情報も含まれています。

スキルとCLIを組み合わせることによって、

  1. 自然言語で指示されたフォームを espar form を使って HTML 内に実装し
  2. フォームにあった形でメールの宛先やタイトル・本文を設定する

という両方の作業を Claude Code が自律的に行えるようになります。問い合わせフォームのために制作者が行う作業は、

  • 魅力的なLPをデザインしHTML化すること
  • フォームを自分で実装するのではなく、どんなフォームにするのかをAIに指示すること
  • 完成したものを確認し、サーバにアップロードすること

だけになります。最もリソースを割くべきクリエイティブな作業に集中できるというわけです。

AI自動実装に必要な知識とサポートについて

スキルの ccskill-esparform とCLIの esparformctl には、最低限以下の知識が必要です。

  • Claude Code
  • スキル
  • ターミナルとCLI
  • Visual Studio Code 等のIDE

AIによるフォーム自動実装に関するサポートは、Claude Code を普段から使用していることを前提としていますので、これら基礎知識に関するご質問はお答えできません。あらかじめご了承ください。