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

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

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

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

• Claude Code 用スキルの ccskill-esparform
• CLI の esparformctl

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

(Claude Code がLPにフォームを実装。メールのテストも自動的に行っているところ)

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

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

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

 

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

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

(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 です。

(OSSでスキルを無償公開する ccskill シリーズ第4弾になる)

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

(espar form の管理画面。これまでブラウザで行っていた設定を Claude Code が行う)

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

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

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

 

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

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

(デザインとコーディングは済んでいて、フォームだけがまだないLP)

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

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

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

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

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

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

(オレンジ色のカーソルが Claude によるブラウザ自動操作。メールの欄だけは人間に入力を求めてくる)

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

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

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

(Gmail や Google Workspace を使っている前提で、Gmail と接続して確認まで任せられる)

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

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

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

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

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

 

今後の Web や SaaS の在り方

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

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

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

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

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

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

 

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

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

WWDC2025でiOS26が発表され、OS全体のデザインが Liquid Glass という新たなコンセプトで刷新されることが明らかになりました。

オッと思ったのが、Safari のUIが紹介された時。以下が新しいSafariです。ステータスバーはほぼ透過して主張が弱くなり、画面最下部には表示中サイトのドメインが表示されています。

(Apple公式iOS26のページから)

広々としてますね。Apple は Liquid Glass というデザインを「コンテンツに一段と集中できるように」することを目的として開発したようでした。

 

コンテンツに没入できるブラウザUIが抱えるジレンマ

開発中のブラウザアプリでは「コンテンツへの集中」を重視しています。過去にも幾つか投稿しました。

• 10年ぶりの新アプリに向けたブラウザ考察 -スクリーンは誰のものか-
• 10年ぶりの新アプリに向けたブラウザ考察 -Adネットワークに占拠されたユーザのスクリーンを取り戻す-

ブラウザUIは極力排除し、フルスクリーンでコンテンツが見れるべきであると。

それはまぁそうなのですが、実はUIを無くすと「他のサイトに移動できないよね？」「戻ったり進んだりは？」など、ブラウザが備えるべきUIをどうするか問題にぶち当たることになります。

戻るなどの操作はジェスチャーで回避できますが、全部が全部ジェスチャーというわけにはいきません。ブラウジングの基本操作とかぶってしまう可能性を考えれば、ジェスチャーの操作もそれほど多用できるものではないのです。

(と言いつつ多数のジェスチャーを定義できるようになってはいるのですがw)

ブラウザ開発でコンテンツを重視しようとすると、「便利にする→UIがいる→コンテンツを阻害する」というループというかジレンマは不可避ですね。ブラウザアプリの宿命なのかも…と、作っては壊しを繰り返して行き着いた先で、開発中のブラウザでは一つの解を見出していました。

それが以下の画面。

(画面最下部にツールバー。iPhoneミラーツールのBezelでキャプチャ)

iOS26のSafariと少し似てませんか？😁

元より既存のタブ型UIでは限界があると感じていました。なので、フローティング＆ブラーで存在感を無くしつつ、ブラウジング中には極力表示されず、それでいて使いたい時には表示されるようなブラウザUI実装に舵を切っていたんですね。

これがいみじくも、今回発表された新しい Safari に似ていなくもない形だっだと…。Appleはもう何年も前から Liquid Glass のデザインに着地していた筈ですが、Apple と近しいことを考えていたのかも知れないと思うと普通に嬉しいですよね😊

で、このUI、ちゃんと動きます。現状こんな感じ。

(ブラー効果の程度も設定できる。存在感は極少に。積極的に消えてくれて、使いたい時にまた現れる)

発案は昨年。実装を始めたのが年始頃。形になって TestFlight で先月から配信して、意外に使い易いかもねー良いですねー、なんて話をしていたのでした。ユーザは現在4人だけなのですけどね😅 (サーバ担当の@t0shiya、iOSアプリは@hitonomichiさん, ロゴ関係でメタ・グラマーの@kasydmkさん、そしてPdMである僕の4人)

メンバー全員が、今回の WWDC2025 動画を見て思わず笑ってしまったのでした。

そんな新しいブラウザUIを僕らは バーデッキ と呼んです。

 

バーデッキのご紹介

バー(Bar)が並ぶところ、という意味でバーデッキ(BarDeck)です。

現Safariを含め多くのブラウザアプリで邪魔に感じてたのは、ツールバーだけではありません。ステータスバーもアドレスバーも同様。コンテンツをめいいっぱい楽しもうとすると不要に思える「バー」が多いのです。必要なものではあるけど画面に居座って欲しくないのですよね。

(以前の投稿で言及した、ブラウザUIの画面占有率の考察画像。画面全体の20%を占めている)

それらのバーを一箇所に集約し、必要なタイミングで切り替えられるようにしてみたというわけです。こんな感じで動きます。

(見易さのためにDark系ブラーに変更した(これも設定から変更できる)。左右スワイプでバーを切り替える)

常にツールボタンが見えて欲しいわけじゃないし、時間やバッテリーのステータスもいつも見えてなくて別に良い。URLだってそうです。なので、手元でスッスッと左右スワイプして、見たいもの使いたいものを切り替えられたら便利かなと。表示領域を共有するので画面も無駄に占有しなくなります。

実際にUI検証した評価は、画面占有率を最小化しつつ必要十分なブラウザUIも提供するという二律背反な要件を両立させるちょうど良い着地点かなぁ…という感じ。なので、これを基本路線としました。

面白いのは、このバーデッキというUIをブラウザUI(バー)の入れ物だと捉えると、色んなアイディアが湧いてきたこと。元はと言えばタブがフローティングになっただけですのにね。

• 「ツールバーを何個も並べれても良いのでは？」
• 「ならばツールバーに色んな便利ボタンがあっても良いのでは？」
• 「ステータスバー・ツールバー・アドレスバー以外のバーも考えられるのでは？」

などなど。そうして生まれたのはこんな設定画面です。

(ツールバーが2つあっても良い。ツールバーが複数置けるなら色んなブラウズ支援ボタンがあっても良い)

実際に動き出すと、発想がさらに広がるもんですね。発散するとも言いますが。

まぁこんな感じで、作っては壊し、ハマれば、そこに新たなアイディアが生まれてまたやることが増えていく…を繰り返すのでいつまで経っても完成しないというわけです(笑)

iOS26 の Liquid Glass というデザインとそれに伴う基本UIの刷新をうけ、ご紹介したこのUIもまた調整余地が生まれる可能性もあります。本アプリが iOS26 以前にリリースされる筈もありませんし。やはり永遠のベータなのかも知れません😅

 

ということで、今回は開発中ブラウザアプリの個性的なUIバーデッキについてのご紹介でした。まだまだ気になることもありながら常用できるかも？🤔な状態になってきた気もしてまして、TestFlight の配信範囲を徐々に広げていけると良いなーなんてこともボチボチ考えています。

気がつけば2025年も半分が過ぎようとしています。ここ最近は「静的Web」事業の強化を掲げて、さまざまな新しい取り組みを進めてきました。

• 静的化サービスのesparをリブランディングしました
• 6月開催の「この街のクリエイター博覧会2025」に出展します
• オンラインマニュアルの全面刷新
  • espar vault オンラインマニュアル
  • espar form オンラインマニュアル

これに加えて、各サービスの専用サイトの立ち上げも進めていました。この度、PHPレスな静的ページ向けフォーム実装ツールである espar form の公式サイトがオープンしましたのでご紹介いたします。

(問い合わせフォームにはもちろん espar form を採用。全ページでCMSやPHPは使っていません)

これまでは、弊社サイト内の一部で簡単にサービスをご紹介する程度でした。

が、espa form をなぜ作ったのか、どんな機能があるのか、今後の開発計画やJavaScriptで実現する仕組みや技術情報など、広く深く発信していくためには専用サイトが必要だと感じていたのです。

そこでパートナーの@koronpoさんにゼロベースで LP+α って感じの構成でデザイン面を含めて制作して頂きました。

2025年らしく、実装に際しては

• 独自ビルドシステム開発
• サーバ転送プログラム開発
• 既存コンテンツからの変換や文章作成

などで Agent AI を使ってます。画像には Midjourney。

AI にすべてを丸投げするのではなく、手間のかかるタスクをAIが解釈しやすい粒度に分解して依頼する形で活用しました。サイト制作分野におけるAI活用のポイントも掴むことができたと感じています。

(カテゴライズして特徴や機能を網羅的に紹介。開発ロードマップも掲載)

今回、サイト作りを通じて自社製品を見つめる機会にもなり、思った以上に「機能豊富なツールに仕上がってるなぁ」とか「名だたる企業様に使って頂いているなぁ」等々の気づきが得られました。

(導入事例ページを作り込んで、改めて社内でビックリするという…😅)

espar form は、Webサイト制作に関わる事業者の皆さまに、制作スピードの向上やフォーム品質の向上、メール運用の手間からの解放など、他のツールにはない多くのメリットをご提供できるものと自負しています。

(PHPやサーバ周りのエンジニアが不在でも高機能なメールフォームを作れるのが大きな特徴)

短時間ではご紹介しきれない特徴や機能がありますので、ご興味をお持ち頂けましたらサイトをご覧下さい。オンラインマニュアルには、実装イメージ等の細かい記載もありますので併せてどうぞ。

 

ということで espar form サイトのご紹介でした。今後とも「静的Web」ブランドの espar と、フォーム実装ツールの espar form をどうぞよろしくお願いいたします。

タイミング良く(?)、来たる2025年6月6,7日に開催される「この街のクリエイター博覧会2025」で espar form を展示させて頂く予定です。詳しく聞いてみたいという方がいらっしゃればよろしければお越し下さい。

来たる6月6,7日の2日にわたって開催される**この街のクリエイター博覧会2025**に出展いたします。

(メビックさん主催。毎年開催だが、今年は関西万博に合わせてスペシャルバージョンとのこと)

Web業界を含むいわゆる大阪のクリエイター達、法人/個人で合計約200組が、自社の事業やサービスを発信します。会場は堺筋本町のマイドーム大阪で、2フロアを借り切るそうなので結構な規模ですね。

その中で幅1.5m程度の小ブースを出させて貰うことになりました。ブースは、会場3階のC-55です。最近の展示会は出展者ごとに専用PRページも作らせて貰えるそうです。便利な時代になりましたね😳

(ブースはよくあるコの字ではなく背面パネルだけのシンプルなもの。連結せず1区画だけなので、かなりコンパクト)

会期中は、先日リブランディグしたての「静的Web」ブランドの espar から、問い合わせフォームの実装ツール espar form をご紹介予定です。Web関係者の方に向けて、問い合わせフォームにPHP使って苦労するのやめませんか？もっと楽しませんか？ というメッセージをお伝えしたいと思います。

また、せっかくですので同じ espar ブランドのCMS静的化サービス espar vault も軽くご紹介しようかなと。ただ、後述の通り、製品を売り込むようなビジネスビジネスしたブースにはしない予定です。

ブースは決して大きくないし、いかにも展示会っぽい普通のブースは余り面白くありません。ちなみに2017年にインテックス大阪で出展した時は、以下の写真のような感じでした。

(とりあえず置けるものを手当たり次第に置いている感じだった)

まぁ、ベーシックにやるとこうなりますよね😅

同じことをしても面白くなく、極小ブースでいかに目立つかを工夫しようかと考えを練りまして。おおよそIT企業らしくない、余り過去に例をみない(当社比)ことをやってみることにしました。

ブースをキャンバスに見立て、サービスの世界観で彩ってみようと。

(generated by Midjourney v7)

弊社 espar ブランドは、Web制作や運用の苦労からの「解放」を目指してます。サイト構築や運用でそんなに苦しまなくても良いですよ、静的Webの技術で楽になれるんですよと。コンテンツの制作だけに専念できたほうが幸せですよね、と。

その世界観を表現してみることにしました。さて、どうなるでしょうか☺️

 

ってなわけで、出展のお知らせでした。6/6,7 の2日間の開催で、場所はマイドーム大阪。僕は espar ブランドのプロダクトマネージャーとして終日ブースにいる予定ですので、よろしければ3階C-55まで遊びに来てやって下さい🙇‍♂️

CMSを静的化する事業 espar を始めて7年が経ちました。

派生サービスの espar form や espar archive も生まれ、静的Webのフィードテイラーさん という見方をして頂くようにもなりました。お世話になっているお客様や関係者の皆様に御礼申し上げます🙇‍♂️

さて、気がつけば弊社の事業は「業務用iOS」と「静的Web」の二本立てとなりまして、特にここ数年は前者の業務用iOS分野にリソースを割いてきました。本年、2025年は後者の「静的Web」をもっと広める活動やサービスの機能拡充など、「静的Web」事業にリソースを割く予定にしています。

そこでこれを機に「静的Web」事業のサービスをリブランディングすることにしました。今これだけの静的Web関連サービスがあるのですが、

(esparブランドの既存製品)

ロゴを刷新し、一部のサービスの呼称を変更します。

(メタ・グラマーさんにご協力頂いた。「すぐに導入できる」という特徴をスピード感ある雰囲気で表現)

espar という名称を「静的Web技術のブランド」として格上げし、静的Webに関するいろんなサービスをぶら下げる格好にします。

これに伴い、元々「espar」と呼んでいた大元のCMS静的化サービスを、今後は espar vault (エスパーボルト) と呼ぶこととさせて頂きます。関係者の皆様におかれましては、機能や価格等に変化はありませんのでご安心下さい。espar form や espar archive の呼称はそのままでロゴが変わるのみです。

今後、徐々に営業資料、紹介画面、契約書面、マニュアル、公式サイト上の表記…等々を変えていく予定です。

 

リブランディングの理由

espar を、静的Webの技術ブランドとして位置付ける理由は2つありました。

1. 派生で生まれたサービス「espar form」を単独で採用頂くことが増えた
2. 他にも「静的Web」の切り口で作りたいサービスがある

サービス構造を少し整理したかったのですね。加えて、「静的Web」のメリットをもっと啓蒙したいという思いも強くなり、事業開始時に作った造語 espar をそのまま中心に据えることにしました。

 

espar から espar vault へ

「静的Web」事業の基点だったCMS静的化サービスは、「espar」ブランドの「espar vault」というサービスに位置付けられることになります。

vault とは英語で「金庫」や「貯蔵庫」を意味する言葉。大事なものを中に入れて守る役割を担うものを vault と呼び、セキュリティ関連の機能やサービスに用語として使われることが結構あります。

(パスワード管理ソフト1Passwordでは暗号化されたパスワード保存箇所を vault と呼ぶ)

弊社サービスを導入頂くと、CMSを静的化して、弊社公開サーバにホスティングして、全アクセスの矢面に立つ…という構図になるので、中に入って頂いて守る、まさに vault という役回りなんですよね。

(DNSを変えるのでCMSサーバには原則アクセスが届かなくなり、インターネットの世界から隠蔽される)

また日本語圏的発想ですが、 vault の発音はカタカナ英語的には「ボルト」と表記され、bolt という英単語を連想させます。bolt は「雷」を意味する言葉で、スピードや速さをイメージさせますね。静的化はサイト応答速度にも寄与するので、この意味も込められると解釈した次第です。

 

ということで、リブランディングについてのお知らせでした。

今後は、CMS静的化サービスの「espar vault」、フォーム実装ツールの「espar form」、サイトアーカイブサービスの「espar archive」、この3つで静的Web事業を展開してまいります。

静的Webに関してやりたいことは沢山あって、また何か他の espar なんとか…が生まれるかも知れません。ご期待ください。今後とも弊社の静的Web事業をよろしくお願い申し上げます🙇‍♂️