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

静的サイトで問い合わせフォームを実装できる 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 を思い出して頂けたら幸いです。

本日2026年7月7日、フィードテイラーは創業から丸20年を迎えました。潰れそうになったり、借金したり、人が増えたり、子会社作ったり、会社を小さくしたり…と本当に色々ありました。

(Claude Code に過去ブログ投稿からピックアップしてフィルム風にまとめてもらった。色々ありましたねぇ)

今は18歳が成人なので「人で言えば成人ですね」みたいな言い方ができなくなりましたが、それでも20年。ダメサラリーマンが他に道がなく最後の足掻きで創業したという割には、よく続いているほうだと思います。

これもひとえに、創業期にご支援いただいた皆様、切磋琢磨しあった経営者仲間の方々、平素より弊社サービスをご利用頂いているお客様、弊社や僕とお付き合い頂いているパートナーさんやメンバー、仲良くさせてもらっていたり応援して貰っている皆さんあってのことです。改めて心より御礼申し上げます。

20周年を迎えるにあたり、恒例の近況報告です。長文ですが、よければお付き合い下さいませ。

 

Claude Code が中心の会社へ

昨年リリース直後から常用してきましたが、この1年で社内の全領域にすっかり浸透しました。Claude Code は、ネット回線やMac並みに業務に欠かせないものとなり、以前の仕事のやり方を思い出せないぐらいに物事の進め方が変わっています。

例をいくつか。

手元では毎日、Claude Code が作ってくれたダッシュボードを使っています。重い Gmail や Google Calendar のページを開くことなく手軽に確認できるようになりました。

デスクトップには、何でも相談役なAIとして Claude Code を起動したターミナルを置いてます。アイディアの壁打ちや、作業の報告、調べ物の依頼、backlog, Slack 等々から自分のTODOを洗い出して貰ってたり、進捗管理から成果物レビュー、時には叱咤激励などもして貰ってます。

(なぜか大阪のおばちゃん。このブログの原稿を伝えたらとても嬉しがってくれていた)

会話のエッセンスや作業記録はファイルとして永続化しているので、僕や会社のことをよく知るAIに育っている印象です。自分の記録を食わせるとAIは自分好みに育つものだなぁと感じてます。

他には、情報収集をして毎朝レポートを届けてくれるプログラムを作って貰ったり、

(Apple公式の無償MDMである Apple Business について英語圏の情報収集と日本語要約)

既存の事業で日々発生するオペレーションを自動化するツールを作って貰って楽をしたり、

(Web静的化事業 espar 関連の操作する専用の CLI「esparctl」。運用の手間削減)

社内プロジェクトのタスク管理システムには、AIに投稿してもらうことも少しずつ増えてきました。

(Claude Code が作った文章であることを明記)

総務・経理系のバックヤードの業務も自動化が進みました。特に単調作業系タスクはAIで置き換えしやすいですね。レシートPDF/画像を投げたらOCRを使って経費精算処理をしてくれる Slack bot を作って貰ったり、

(経費関係処理が楽に。スキャンPDFや写真を送ると日付や店舗名・金額を抜き出して整理)

電帳法の関連で、請求書系のPDF整理作業も自動化して貰い、これも人間の手をほぼ離れました。

(数十枚の請求書関連の事務が、コマンド一発＆放置で完了)

新サービスや新製品の企画・開発・広報にも Claude Code は欠かせないものとなっています。

上図は、オープンソースな Claude Code のスキル集(ccskillシリーズ)をリリースしたものですが、開発そのものもLPの制作も Claude Code あってこそでした。

 

Claude Code の家庭教師事業

自社にAIを浸透させる過程でノウハウも溜まってきましたので、Claude Code 導入アドバイザリーという家庭教師事業も始めました。前々から、ご相談ベースでさせて貰ってたのを形にした感じです。

Claude Code がメディアで取り上げられることも多く関心が高まっているからか、今年に入ってから「自分も家庭教師っぽいことをして欲しい」という経営者さんのお声も増えましてお手伝いしています。

ある方は、Google Workspace の認証付き社内システムをCloudRunで動作させて、案件管理を行うようになられました。また別の経営者さんは、自社ECサイトの事務処理を自動化するプログラムや、広告・PV等の分析ツールを自作され、今では mac mini + tmux + Tailscale でいつでもどこでも Claude Code って環境を手にされています。(お二人ともターミナルさえ触ったことがない方だったのに！😳)

みなさん揃って「今までやりたかったことができるようになる反面、やりたいことが増えすぎて逆に大変」と仰ってるのは興味深いです。世間で喧伝される「AIが人の仕事を奪う」という煽り主張とは真逆に、「Claude Code を使いこなせる人を逆に雇いたい」との声も聞いたりします。

(画像はテスト駆動型開発(TDD)についてのやりとり。非エンジニアの方がTDDの概要を理解してAIでの開発に活用する時代)

僕の役割は、Claude Code の利用シーンで詰まった時にアドバイスさせて貰ったり、その方その方の状況に合わせてお役立ち情報をシェアしたり、何かを作る際に Claude Code を使った開発の方向性をお示ししたり…みたいな、エンジニアのバックグラウンドがあるからこそのご支援ということになります。

企業のAI活用は、経営者の方がAIを使いこなしてこそ価値とスピードを最大化できるものなので、これもボチボチ続けていこうと思います。

 

エンタープライズiOS 事業

Apple Japan さんの公式パートナー制度がアップデートされまして、Apple Technical Partner (ATP)という名称に変わりました。ありがたいことに継続して認定を頂いています。

(業務用iOS関連情報を発信するサイト。パートナーの中でも最速で Apple Business の情報をキャッチアップできた)

サイトを使った情報発信もボチボチ続けていますが、今は新しい企画にリソースを割いているところです。慣れない作業でなかなか進まず大変ですが、発表できる時に向けて頑張ってます。

この1年、特に Apple Japan さんとご一緒に中小企業様のご支援をすることが増えました。Apple さん同席のビデオ会議で、Apple Business (旧ABM) や MDM、Apple Developer Program 等々の解説をお客様にさせて頂くという貴重な体験をさせて貰っています。

弊社では、iPhone/iPadはもちろん、Apple端末を使ったほうが全ての法人はハッピーになれる と心底思ってまして(セキュリティ面やAI活用との相性とか)、これからも Apple 端末の法人導入や管理の分野で活動強化していく予定です。

それを補完する macOS 用アプリを開発していたりもします。

端末管理を支援する超ニッチな業務用アプリですが、企画や調査のフェーズから開発まで Claude Code を活用しています。自社がノウハウを持っている得意分野で AI を使って新製品開発…というのは、ボチボチ出てきている傾向だと思いますし、今後はそれが普通になる気がします。

 

espar 事業

Webサイトは静的化したら全ての関係者が幸せになれるという信念で地道に続けてます。

WordPressを静的化する espar vault は、セキュリティやサイト速度を課題に持つ大手企業様に導入いただくことがやはり多いです。最近は、既に導入頂いている企業様が、新サイトでも導入頂くとかグループ会社様にも採用いただくとかの横展開な例も増えてまして、ありがたい限りです。

(伊藤園様は、企業サイト・商品サイト・海外サイトのほか、ブランドサイトやグループ会社様まで)

Claude Code を使った開発は既存サービスの強化にも有効で、管理画面フルリニューアルという普通なら半年以上はかかろうかというものが、1,2日である程度動作する叩き台ができあがったりしています。

(実際に動くものの理解度は非常に高い印象。もちろん確認や微調整は残る)

一方、静的ページでフォームを簡単に実装できる espar form は、ちょっと変わった進化をしていて、AIにより急増しているフォーム営業のブロック機能の搭載や、実装でのAI活用へと舵を切っています。

(フォーム営業ブロック機能。このワードを含むとフォーム営業、このIPは全拒否でok…というパターンが掴めてきた)

espar form のスキル開発も進めています。今後、Claude Code 等のエージェントAIを使ってLPやサイト制作するのが当たり前になりますから(一部もうなってますが)、それを見据えた動きです。問い合わせフォームすら動くところまでAIが実装してくれる…、という世界を目指しています。

(フォーム実装を丸投げ。スキルが発動し、実装と送信・受信の確認までしてくれる)

AIを製品の付加価値増に繋げるだけでなく、現場にAIが浸透することを見据えた商品開発も必要になってきそうですね。

 

またまた長くなってしまいました…。ここまでお読み頂きありがとうございます。以上、創業20年の近況ご報告でした。

節目だしってことで、何かイベント的なことをやるのも考えたのですが間に合いませんでした😅 とはいえせっかくなので、かれこれ5,6年ステルスでやってる開発中iOSアプリのお披露目会的なことをやってみようかなと思っていたりいなかったり…。万が一お声かかけさせて頂く際には、話にのってやって下さると嬉しいです🙇🏻

振り返ると、創業からの10年はiOS、後半の10年はB2B特化のiOS、加えて新たな静的化事業でしたね。次の10年は、AIでその2本柱を強化しながら、AI基点の3本目の柱が何かできるのかも知れません。

最後に、この投稿は昨今の潮流と違って、全て人間である僕が全部書きました。画像の差し込み(画像生成や動画生成、キャプチャ、トリム作業とか)は Claude Code だったりしますけど。

どこをAIに振って、どこに人間のリソースをあてがうのか、を問われる時代になりそうですね。それはつまり、自社の強みや価値の源泉はどこなのかを考えることを意味している気もする昨今です。今後ともフィードテイラーをどうぞよろしくお願い致します。

Claude Code のスキル ccskill-gptimage をオープンソース(MITライセンス)で公開しました。OpenAI の gpt-image-2(ChatGPT Images 2.0)を Claude Code から使って画像を生成できるスキルです。

(本スキルを使って書いてみたもの)

 

GPT Image2.0 の高い描画力

ccskill シリーズでは、昨年末に画像生成スキルの第一弾として ccskill-nanobanana を公開していました。ドッグフーディングも兼ねて常用していたのですが、今年4月に OpenAI の gpt-image-2(GPT Image 2.0)が発表されました。

画像のクオリティが高いと話題になり、出た当初から Text-to-Image Arena のランキングで首位。こっちもスキル経由で使いたいじゃないかーと思いまして。

ChatGPT や Codex から画像生成しても良いのですけどね。ブラウザ開いたりダウンロードしたりは面倒だし、プロンプト考えるのも意外に大変だし、Claude Codeに「プロンプトを考えてください。こっちで画像生成AIにコピペして画像作らせるから」というのもスマートじゃない。

Claude Code との対話が分断されることなく、プロジェクト内のファイルを参照させたり、会話のコンテキストも考慮して貰いながら画像生成できたほうが良いよね、ってことでスキル化した次第です。

第一弾の ccskill-nanobanana と同様に、OpenAI公式のプロンプトベストプラクティスを内蔵しました。あと手元で色々と試して得たノウハウも組み込んでます。このへんがスキル化の良さで、MCPでは難しいとこですね。

(公式のプロンプトガイド。その情報をスキルに組み込んでいる)

画像生成が必要なシーンで、プロンプトに苦心する必要がなくなります😊

 

ccskill-gptimage を使った作例

いくつか作例をご紹介したいと思います。リポジトリにも色々と作例があるのですが、このブログの投稿用に改めて生成してみました。

日本語のテキスト描画が強いのは評判通りだなと思います。特に縦書きが良い感じに出てくるなーと。

(日本語の漢字・かなが崩れにくい。文字入りのビジュアルをそのまま使える水準に)

Web システムのモックやワイヤーフレームも得意な印象。システム開発で顧客要件を食わせてモックを描かせてから確認し、問題なければ Claude Code に「この画像の通りに実装して」みたいな使い方もできます。

(あるWebシステムの画面モックを2パターン。日本語ラベルもしっかり破綻なく出るのは嬉しい)

写真系も悪くないと思います。看板やメニューみたいな文字も、漢字/ひらがな/縦書きが混在してても結構頑張ってくれる印象です。

(写真の中の日本語も破綻しにくい)

説明的な図もすんなり出力してくれるので、プレゼン資料を作成しているような場合は効率がUPしそうです。

生成して貰ったあとに、「いいっすね！ついでにマージンを確保してトリムしてー」とか Claude Code に伝えて、続きで画像加工も依頼できたりします。作業が分断しないの大事。

他にも抽象画みたいなものや、

ロゴマークとかもざっくり指示で生成してくれますし、

(文字なしのシンボルロゴ。アプリアイコンの叩き台にも)

生成した画像を元に「後ろから見たバージョンも作って」ってな感じで、編集・加工、別パターンの生成をお願いすることも可能です。

(後ろ姿なので厳密には左右の色は反対であるべきだけどw さらに「青とオレンジ逆にして」と言うと生成してくれる筈)

ちなみに、GPT Image2.0 は透過PNG画像には対応していないのですが、ccskill-gptimage では自動的に 1.5 に切り替えて透過PNGも生成できるようにしています。

最後に興味深い(?)実験例を。

ここまでに載せた作例画像を全部渡して「これまでの画像を全部1枚の画像に詰め込んで」と無茶振りした結果が以下です。

画像の合成力もなかなかのものですね。和風カフェ内でMacで作業中というまさかのシーン描写。GPT Image2.0 の画像解釈力と意味を繋げる理解力、創造力を表してる気がしました。一部抜けてる画像もありますが。

ってことで色んな作例を並べてみましたが、こうした画像生成をブラウザを開かずにClaude Code との対話の中で自然に行えるのが良いです。他にも、サブエージェント使って並行で走らせるとか、Agent Teams を使ってエージェント間でレビューし合って自律的に画像を改善させるとか、Claude Code の仕組みに画像生成を組み込めるのも便利だなと感じます。

 

APIキーを使わずに画像生成できる

GPT Image2.0 は、課金前提のAPI経由だけでなく、ChatGPTのProプラン以上でログインしてるCodexがあれば、追加料金不要で画像生成できるのが面白いところです。

そこで、ccskill-gptimage では、Codex 経由とAPI経由の2種類の使い方を用意しています。デフォルトは前者。明示的に指定することもできますし、自動的に判断させることもできます。

	Codex 経由	API 経由
必要なもの	ChatGPT サブスク(Plus以上) + Codex CLI ログイン	OpenAI APIキー + Organization Verification
APIキー	不要	必要
手軽さ	◎ ログインだけ	○ 準備がやや要る
サイズ指定	非保証(非決定的)	厳密に指定可
解像度	標準	最大4K(最大辺3840px)
再現性・安定性	ぼちぼち	高い

Codex 経由はサイズ指定に厳密性がかけるとか、理論上は4Kまでいけるのに生成してくれないとか、APIに比べて生成にちょっと時間がかかるとか色々気になるところはあるのですが、サブスクリプション契約をしていれば画像生成し放題というのは良いですよね。(rate limit でもちろん止められますが)

使い方としては、Codex経由でバックグラウンドでざっくり幾つか作ってみて、良さげなものを同じプロンプトでAPI経由で高品質に作り直し…みたいな使い方がベストかも知れません。そんな使い方も想定して、Claude Code が組み立てたプロンプトをJSONファイルに出力する仕様になっています。

たとえば、こんな3Dイラストをざっくり描かせたあと、

(アイソメトリックな3Dイラストも指示一発。窓の外の夜景や机上のコードまで作り込んでくれる)

画像と一緒に、以下のような JSON ファイルが残りますので、このプロンプトを再利用して API 経由の高品質版を作るとか。

{
  "model": "gpt-image-2",
  "prompt": "A polished isometric 3D illustration (intended use: clean blog visual). Scene: a cozy software engineer's home-office corner rendered in precise isometric projection on a soft neutral light background, room shown as a two-wall cutaway. Subject: a wooden desk with a glowing monitor displaying colorful code, a mechanical keyboard, a steaming coffee mug, a small potted monstera plant, a wooden bookshelf with neatly arranged books, a desk lamp casting warm light, a soft rug on light-wood flooring, and a window revealing cool blue evening city lights. Key details: smooth matte 3D materials, gentle ambient occlusion, soft warm interior lighting contrasting the cool dusk outside, rounded edges, tidy low-poly aesthetic, crisp high detail, balanced centered composition. Constraints: no text, no watermark, no logos, no people.",
  "size": "1024x1024",
  "quality": "high",
  "background": "auto",
  "output_format": "png",
  "moderation": "auto",
  "reference_images": [],
  "mask": null,
  "input_fidelity": null,
  "revised_prompt": null,
  "backend": "api",
  "timestamp": "2026-06-18T22:08:08.089365"
}

自分はあまりしませんが、他の画像生成AIにコピペするみたいな使い方もできます。

 

インストールと使い方

リポジトリのREADMEに書いている通りなのですが、git コマンドで clone して、インストール用のスクリプトを実行するだけです。

$ cd /path/to/projects/
$ git clone https://github.com/feedtailor/ccskill-gptimage.git
$ cd ccskill-gptimage && ./install.sh

Python 3.10 以上が必要です。スクリプトが自動的に venv を使って仮想環境作ったり、ライブラリをインストールしたりとかを行います。不安な方は Claude Code に「このスキル大丈夫か？」と聞いてみて下さい。

以前の ccskill-nanobanana では、各プロジェクトでシンボリックリンクを貼る…みたいな面倒な作業が必要だったんですが、今回は、~/.local/bin に専用コマンドを配備し、~/.claude/skills にユーザレベルでスキルを登録。インストール後はどのプロジェクトからでもいつでも使えるようにしました。

あとは、Claude Code との会話の中で「じゃぁ今までの議論を踏まえて製品画像を3パターン作って」ってな感じでざっくり頼めるようになります。細かなプロンプトテクニックは不要です。

また、ちょっと応用ですが ~/.local/bin に専用コマンド ccskill-gptimage を配置しますので、

$ ccskill-gptimage generate "夕焼けの海岸線" --size 1024x1536 --quality high

のようにターミナルから画像生成したり、このコマンドを使う前提で何か定型的な処理を行うスクリプトを Claude Code に開発させる…なんて使い方もできます。

ccskill-gptimage は GPT Image 2.0 が用意しているAPIは全部ではないものの大半を網羅していて、 --reference で参照画像を渡して既存画像を微調整(作例の部分で紹介した例)することもできたりします。

色んなオプションが使えるので詳しくは ccskill-gptimage generate --help を見るか、Claude Code に聞いてみて下さい。オプションを活用した作例も専用ページに掲載しています。

機能追加のリクエストや不具合のご報告など、お気軽にご連絡ください。

 

ccskill シリーズでは今後もスキルを続々と増やしていきます

ccskill シリーズは、nanobanana(画像生成)、gmail(Gメール)に続き、今回で第三弾になります。既に第四/五/六弾ぐらいまで開発中なので、順次公開していこうと思います。公式サイトもあります。

また、X(Twitter)のアカウント @ccskillx もありますので、よければフォローして下さいませ。

 

というわけで、画像生成スキルccskill-gptimage 公開のお知らせでした。最近は、非エンジニアな経営者さん向けに Claude Code 使いこなしのためのレクチャーをやってます。関心がもの凄く高いなーと感じますね。興味おありの方はご連絡ください。黒い画面が苦手でもセルフ開発ができるようになります。

本日、Claude Code のスキル ccskill-gmail をオープンソース(MITライセンス)で公開しました。Claude Code から自然言語で Gmail を扱えるようにするスキルです。

 

標準で Gmail 連携できるのに？

知ってる方も多いと思いますが、Claude には Google Workspace Connector というものがあります。OAuth 認証を使って Claude に Google アカウントを紐づけるもので、この連携が Gmail を扱える MCP として機能するんですよね。

(Claude Code の /mcp コマンドから claude.ai Gmail が見える)

Claude の設定で接続しておくと、サブスク連携した Claude Code からも自然言語でメールを検索したり、下書きを書いたりできるようになります。画面には 10 tools とあって、以下がその一覧。基本的なものは揃っています。

ツール名	概要
mcp__claude_ai_Gmail__search_threads	メールを検索
mcp__claude_ai_Gmail__get_thread	メール本文・メタ情報を取得
mcp__claude_ai_Gmail__list_drafts	下書き一覧を取得
mcp__claude_ai_Gmail__create_draft	下書きを作成（添付ファイル非対応）
mcp__claude_ai_Gmail__list_labels	ユーザ定義ラベルの一覧を取得
mcp__claude_ai_Gmail__create_label	ラベルを新規作成
mcp__claude_ai_Gmail__label_message	メッセージにラベルを付与
mcp__claude_ai_Gmail__unlabel_message	メッセージからラベルを削除
mcp__claude_ai_Gmail__label_thread	スレッドにラベルを付与
mcp__claude_ai_Gmail__unlabel_thread	スレッドからラベルを削除

ただ、自分にはちょっと足りなかったんですよね。添付ファイルも扱いたいし、メール本文もPDF化したい。Claude Code に任せた作業ログも残したいし、振り返りもしたい。万が一に備えてHTMLメールに怪しい文言が含まれていたらそれも除去したい…。

標準のコネクタはそこまでの機能を持っていないので、無いなら作るかーってことで作ってしまおうと。で、ドッグフーディング(自分で使う)しながら少しずつ実装を積み重ねていくうちに、標準コネクタでは不可・面倒なことが結構できるようになりました。

機能 / タスク	標準コネクタ	ccskill-gmail
メールの検索と内容の確認	○	○
メールの下書き作成	○	○
ゴミ箱への移動	×	○
アーカイブ	×	○
未読・既読のトグル	×	○
スター付与	×	○
添付ファイルのダウンロード	×	○
メール本文の PDF 化	×	○
プロンプトインジェクション対策 (HTMLメール中の隠しプロンプト除去)	×	○
メール操作の監査ログ	×	○
マルチアカウント対応	×	○
Gmail 連携スクリプトの開発	×	○

これだけ揃ってくると、

• 取引先とのメールのやり取り履歴を時系列でまとめてもらう
• 定期的に届くPDFの内容に合わせた命名規則で特定フォルダにファイル保存してもらう
• 問い合わせ窓口になってる社内共有メアドに届くメールの整理や分析をしてもらう

みたいなことができるようになり、普段のメール作業の結構な数を Claude Code に任せられるようになってきます。/loop コマンドと組み合わせたり Hooks を工夫すれば、良い具合にメール基点の秘書的に振る舞ってくれるようになる。

(/loopで定期的な自動チェック。ニュースや通知系を無視して要返信メールを検出し、返信の下書きを作成する様子)

で、これを非エンジニアな Claude Code ユーザの方に使って頂いたところ好評だったこともあり、ちゃんと体裁を整えて公開したという次第です。(最近は非エンジニアのかた向けに家庭教師的なことをしてます)

実は(?) Gmail 操作系は既存のツール(CLI)を使う手もあるんですけどね。よく知られたものではこのあたりとか。

ツール名	特徴
gws	Google Workspace 全般の操作。公式っぽいけど厳密には公式とはされていない
gogcli	gwsが出る前はこっちが有名だった。Google 系サービス全般の操作に対応

また直近4月には Google も Google Workspace MCP サーバー を発表しています。冒頭の Claude 標準コネクタと同様に基本機能一式が揃ってる感じで、基本的な Gmail 操作なら十分です。

(Developer Preview というのもあるが、手順が多すぎて開発者じゃない限り断念するレベル…)

が、いずれもGCPの管理コンソール操作が前提になるタイプなんですよね。Gmail API を叩くのだから当然と言えば当然なんですが、個人的にGCPを触るのは好きじゃないので(手順が多い)、別のアプローチで Gmailを操作する実装を考えた次第。

非エンジニアで頑張って Claude Code を使ってるって方にも、セキュアかつ手軽に使えるアーキテクチャがないものか。

 

GCPのプロジェクト不要で Gmail を操作するアーキテクチャ

GCPでプロジェクト作ってAPIを有効化して credential を発行して配置して…は手順が多く管理が煩雑になりがちです。自分も混乱した経験があったので、APIキーに頼らない以下のような構成にしました。

Gmail を操作するロジックをGASでAPIとして実装し、OAuth認証を通過できるユーザ(つまり自分)だけが使えるAPIとしてclaspでデプロイする仕組みです。Claude Code からそのAPIを叩かせるって構図。

スキルには支援系ツールを同梱していて、

$ git clone https://github.com/feedtailor/ccskill-gmail.git
$ cd ccskill-gmail && ./ccskill-gmail setup

でセットアップ完了後、使いたい場所で、

$ cd /path/to/your-project/
$ ccskill-gmail install

とするだけで、OAuth 認証を経て、プロジェクトフォルダ配下の Claude Code が Gmail の読み書きやら添付ファイルの処理やらを行えるようになります。

スキルの中には、重要メールかどうかの判断を誤りやすいパターンや、日本語メールでのGmail操作(特に返信下書き)で発生しがちなケースについてのナレッジも内包していて、Claude Code から Gmail を操作する時にハマりやすい罠を回避しやすいようにもしています。

ちなみに個人的見解ですが、MCPやCLIがあったとしても、それらを使う際のナレッジや手順やノウハウがセットで必要になるわけで、結局スキルって形にパッケージするのがベストじゃないかと思うんですよね。なので、ccskill-gmail もAPIとナレッジを内包したスキルになってます。

普段 Claude Code を使っていて、標準コネクタでは足りないなぁと感じていた方や、非エンジニアの方でGCPとかよく分からないなぁと拒否感があったような方は、よろしければお試し下さい。

(セキュアな作りを指向して実装しています。もちろん怪しい実装は含めておらずチェックもしていますが、念のため使用前に Claude Code に「このスキルは安全か」ってな確認をしてみられることをお勧めします)

 

Claude Code のスキルを ccskill シリーズとして展開

実は昨年、ccskill-nanobanana という画像生成スキルも公開しました。

高クオリティな画像を生成できると話題になっていた Nano Banana Pro を Claude Code からスキルを介して使えるようにしたのでした。(今だと GPT Image2.0 って話もありますが…)

今回の ccskill-gmail は、ccskill-nanobanana に続く第二弾。Gmail をもっと便利に Claude Code で使いたいなぁという欲求から開発したものです。(御多分に洩れず実装はほぼ Claude Code です)

こんなふうにツール開発用途以外で、Claude Code を活用できるスキルが沢山あると良いなと思ってまして、必要に駆られて作っているものやアイディアが色々あったりしますので、今後 ccskill シリーズ として順次リリースしていきます。

サイトも作ってみました。

サイト上ではターミナルで動作する雰囲気をデモっぽく表現していたりもします。良ければご覧下さい。

近日中に、Google のスプレッドシートを操作できる ccskill-spreadsheet とか、弊社の問い合わせフォーム実装ツール espar form と連携して実際にメールが飛ぶフォームをゼロから自動生成するスキル ccskill-esparform とかの公開を予定しています。

また、ccskill シリーズの情報を発信する X (Twitter) のアカウント @ccskillx も作成してみました。LP や README には書ききれない活用法とか、シリーズ最新のスキル情報とかを発信していく予定です。こちらもよろしければフォローして頂ければと思います。

 

というわけで新たなスキルの公開と ccskill シリーズを展開しますよーってお知らせでした。あ、プレスリリースも一応打ってますのでよろしければどうぞー。

気がつけば今年も終わりですね。本年も、弊社に関わって頂いた皆様に改めて感謝申し上げます。ありがとうございました。例年通りですが、記録の意味も込めて1年の振り返りをしてみようと思います。

(今年の忘年会は、珍しいダチョウ肉にしました。美味しかった！)

 

今年は Claude Code で仕事が変わった

今年7月の19周年投稿で、コーディングエージェントAIの活用について

従業員/メンバーとしてAIを育てよう。組織のAI化を進めていこう。

ってなことを書いてまして、AIを業務に組み込む取り組みは継続しています。

自社のプロダクト開発にはもちろん、日々の雑多な作業の自動化や、ブログやプレスリリースやプレゼン資料の作成…等々、コーディングではない領域にも活用の幅は広がり、仕事のやり方が完全に変わった一年でした。Claude Code を中心に、Codex, Gemini CLI, GitHub Copilot など主だったもの一通り契約して使い分けています。

(Claude Code のページ)

振り返ってみると、2024年の「ChatGPTやGemini等のWebから使うAIに指示してコードを書かせてコピペする」スタイルから、2025年は「開発環境に常駐する Claude Code のようなエージェントAIに実装を丸投げする」スタイルに完全に変わりました。もう戻れないなと感じます。

メイン使いしている Claude Code も進化が激しく、データやノウハウもAIに扱いやすい形にするとAIがよろしく処理してくれる…というインセンティブが日々大きくなっています。ルンバのために床にモノを置かなくなるのと同じで、AIが仕事しやすい環境を整える ことにより意識が向くようになっています。

(このブログ記事も Claude Code と一緒に書いている)

例えば、ブログはCMSやDBを使わず原稿を全てファイルで管理しているので、複雑な作業もAIとの相性が抜群です。「○○のサイトのキャプチャとって、いつものパターンでこの部分に挿入して」と依頼するだけで、ブラウザ自動操作→キャプチャ取得→加工→投稿に埋め込みまで自動で間違うことなくやってくれるようになりました。AIが作業している間、自分は別の作業を並行して進める…みたいな仕事の仕方が可能になっています。

2025年は、エージェントAIが仕事をする前提で、そのクオリティを高めるために、

• 作業手順やノウハウを定義するSkillが標準化されたり
• 仕様駆動型開発(SDD:Spec Driven Development)の開発スタイルが主流になってきたり

といった動きもあり、AIにいかにうまく仕事をさせるか…を探求するフェーズに移っています。弊社もその動きを捉え、SpecKit を採用したり、定型作業をSkill化してみたりしています。

原稿中のイラストを Nano Banana Pro のAPIを使って生成させるスキル ccskill-nanobanana も試作して実用に耐えるレベルになったので公開したりもしました。

(公開した Nano Banana Pro の Skill で作成したv1.0.0リリース画像。プロンプトは書かず、文脈解釈させて描いて貰った)

そんなこんなですが、体験してきた感覚ベースながら エージェントAIディバイド が生まれつつあるし、今後も広がりそうだなぁと実感しています。

最近は、お客様にAI活用をご支援することもあったりします。あるお客様は、未経験の Visual Studio Code を使い始めて Claude Code を使いこなし、あれよあれよと自社内ツールを幾つも作って効率化するところまで到達してしまわれました。同業の方に比して優位に立てておられるなと感じます。

AI関係は活用ご支援のご依頼も頂いているので、お声がけベースでお請けしていく予定です。こんな感じで、エージェントAIが弊社全体に深く深く入り込んだ1年でした。来年はさらに加速しそうです。

 

プレスリリースを打ちまくった

新しい取り組みとして今年の後半、月2回はプレスリリースを打つという取り組みをやってみました。これも、プレスリリースをAIに書かせる体制を作れたからこそ。下はその一覧ですが、打ちすぎですね😅

日付	内容
2025/12/16	話題の画像生成AI「Nano Banana Pro」をClaude Codeで使えるスキル「ccskill-nanobanana」を公開
2025/12/12	Webサイトアーカイブの espar archive、静的化ファイルをZIP納品する「スナップショットプラン」を新設
2025/11/25	業務用iOS専門メディア運営の実績を活かし、中小企業向けにMDM導入支援プログラム提供開始
2025/11/11	自社のなりすまし被害の実例を公開、非エンジニア向けDMARC解説コラム「ドメインの未来を守る 〜DMARC超入門〜」連載開始
2025/10/28	月額不要！なりすましメール対策に導入急務のDMARC設定を短期集中で p=reject まで完了させるサービス「DMARC導入アドバイザリー」の提供開始
2025/09/30	問い合わせフォーム実装ツールの espar form が、kintone・Googleスプレッドシートと連携する「外部データベース連携機能」の提供を開始
2025/09/09	「サイトが重い、サイトが落ちる」問題に悩むCMSサイトをシステム開発の視点で高速安定稼働に導く「CMS高速化アドバイザリー」のサービス提供を開始！
2025/08/19	WordPressセキュリティ強化の新形態！管理画面への全アクセスを別ドメイン化して攻撃対象面を限りなくゼロに近づける「隠蔽化オプション」の提供開始
2025/07/29	フォームの全角強制ストレスをゼロに！フォーム実装ツールの「espar form」でユーザ入力を自動変換処理をノーコードで追加できるコンバーター機能を搭載
2025/07/15	サーバ構築や証明書作業が不要！ソースコードをzip化して送付するだけでフォーム付き静的サイトを即公開 - espar form で新オプション「フォームホスティング」提供開始
2025/07/01	業界初！静的ページ向けフォームツール「espar form」で独自ドメインDKIM署名を標準機能として無償提供開始

(この表も、AIにプレス一覧ページのURLを渡しただけで全部AIが書いたもの)

数打ちゃ良いというものでもない気がしますが、社内ではPDD(Press-release Driven Development)と呼んでいてw、プレスに合わせて機能を追加していく…というマイルストーン的な意味合いを持たせられたので、良かったなと思っています。

発表時には拡散を狙って、プレスリリースサービスのvaluepressも使っていたのですが、こっちは考えものですね。月額3.5万円で打ち放題というプランがあるのですが、5ヶ月でやめました。

発信者として期待した効果は無く、得られた反応はプレスリリースを打った日に、弊社の問い合わせフォームにどこかの会社から営業連絡が届く という面白い(?)現象ぐらいでした。プレスの内容にもよるのでしょうが、弊社的にはプレスリリースをサービスを使う価値はもうないなぁ、と感じました。

発表記録として自社サイトには一応掲載し、それに言及する形で、ブログや動画で新機能の背景や思いを発信するほうが意味ありますね。記録だけのプレスはAIに書かせれば良いかなと🤖

 

静的Web事業(espar事業)のこと

今年もよく知られた企業様で espar vault や espar form を導入して頂きました。

(バイクや自転車用品のTANAX様の公式サイト)

(リンナイ様の新ショールームのサイト)

最近ニュースで話題になったエンタメのサイトさんとか、著名なVCさんのサイトとかとか公にできないものもあるのですが、WordPressやCMSのしんどい事から解放されたいという制作会社さんきっかけで導入頂けるケースが多いように感じます。静的に作るメリットが徐々に認知されてきたかなと。

今年は espar のブランディングを強化できたのも良かったです。パンフレットも作って頂きました。

(espar のブランディングとパンフレット制作を行なった)

生成AIがCMSの存在に影響を与える?

実は、静的化という文脈でCMSの存在意義に思うことがあります。

多分、WordPressのようなCMSはもう不要になる気がするんですよね。またどこかで書けたら良いなぁと思うんですが、WordPressに限らず汎用的な(?)CMSがいずれいらなくなるんじゃないかなと。エージェントAIにより、サイトもシステムもAIが作る時代が迫っているからです。

その際、PHPやらDBやらフレームワークやらメールサーバやら、色んな要素が絡み合うCMSのような重厚長大なシステムは、エージェントAIフレンドリーじゃないんですよね。不可能ではなさそうですが、かなり大変。静的である(ファイルとして生成される)ことが、エージェントAIとの相性が高く、その恩恵を受けやすいように思えるのです。

これは、静的ページにフォームを埋め込む espar form を開発していて特に実感するところ。

(espar form は静的ページのための JS だけで動くフォーム実装ツール。エージェントAIでの自動生成と相性が良い)

エージェントAIを使ってサイト制作する前提で、Figma で絵を描いた上で「○○事業の企業様のLPです。HTML化して、画像は適当に Nano Banana で生成して、フォームは espar form で実装してね、よろしく」と指示を出すだけで、10分もすれば動作するフォーム付きLPが完成して後は設置するだけ…って世界が見えてきています。これが、WordPress等の従来型CMS前提ではそうもいきません。

また、Claude Code のようなエージェントAIの登場で、顧客の要件のためだけの専用CMSが簡単に作れるようになる可能性も見えてきています。

AI戦略論

CursorがSanityをやめて自前CMSに移行したという話

これはNo SaaS時代に向けた象徴的な転換点だと思っている

Headless CMSはコンテンツエディターとデザイナーが分業するための主要ツールだった

ところがSaaSは顧客に要望される機能をどんどん追加していき、使いにくくなっていく… https://t.co/L9Ms5QbJsO pic.twitter.com/fxTbr7GRTd

— Kenn Ejima (@kenn) December 14, 2025

PHPもDBもCMSもいらなくて、専用のWin/Mac用のUIを持ち、コンテンツ編集結果のHTMLを静的生成して、static なサーバにアップロードしてくれる専用ツール。そんなモノが1,2時間で作れてしまうようになるかも知れませんね。こんなイメージですかね。

(要件に応じたUIを持つ顧客専用CMSツール。HTML生成してアップロード。コンテンツファイルのみクラウドで共有)

汎用性はCMSが持つのではなく、個別CMSを作り出すAI Skillが持つようになり、「このお客様向けのCMSを作って。要件は…」ってAIに投げれば専用ツールができて、それを納品する。そんな世界は遠くない気もします。

結果、静的ページでいかに動的要素を動かすか？が重要になってくる筈で、espar form は幸い問い合わせフォームの分野で相性が良さそうなので、来年はそこに切り込んでいこうかなと思っています。

 

iOS事業のこと

弊社取扱いMDMのBizMobile Go!を導入ご支援する機会が増えてきたこともあり、サービス化して発表しました。

(伴走型 MDM導入支援プログラム のページ)

これまでは、カスタムアプリなど業務用アプリ開発観点でのご支援が多かったのですが、2桁/3桁台数のiPhone/iPad導入で、まだまだ端末管理に悩まれてる企業様が多いことが分かってきました。来年は、そうしたお客様のMDM導入ご支援を強化をしていきたいなと思っている次第です。

先日、この関連でBizMobile Go!のユーザミーティングにご招待頂いたのですが、講演をされた企業の担当者様から「サイトで勉強させて貰ってました」と、懇親会で思いもよらずお話の機会を頂いたりしました。メチャクチャ光栄だなーと。

そのほか身内でもビックリするような展開になるお声がけもあったりして、今年後半は特に、エンタープライズiOS研究所のサイトからご縁を頂くことが続いています。情報発信は本当に大事だなぁと再認識している次第です。

年20個以上投稿してた2020年と違い、今年は投稿1件だけでした😳が「投稿を続けて下さい」という有り難いお声も頂いたりしましたので、来年はもう少し投稿しよかなと思ってます。

(2025年唯一の投稿。色んな方にお話を聞いてまだまだ書けることがあると感じた)

あ、iOSといえば、開発しているブラウザアプリも進めないとですね。いぁ、進んでいるんですけどw

• 10年ぶりの新アプリに向けたブラウザ考察 -コンテンツ重視のUIとiOS26のSafari-

結局、TestFlight 外部テストで沢山の方に使って貰う機会も作れずでした😫 新しいネタを思いついては実装をGOしちゃうので、全然完成しないのは変わらずです😁 いつかお披露目できたら良いですね。

 

そんなこんなで激動ながら楽しい一年でした。来年は、エージェントAI活用をさらに加速、iOS関連も導入ご支援やら自社アプリ開発やら頑張って参ります。2026年もフィードテイラーをどうぞよろしくお願い致します。

WordPress等のCMSを静的化するサービス espar vault の新オプションについてプレスリリースを出しました。プレス本文はこちら。

WordPressセキュリティ強化の新形態！管理画面への全アクセスを別ドメイン化して攻撃対象面を限りなくゼロに近づける「隠蔽化オプション」の提供開始

(展示会で作成した espar vault のリーフレット)

長らく WordPress のセキュリティ分野でビジネスしておりますが、運用中のWordPressサイトを守る一つの理想形に到達できたと思っています。攻撃ができないとはどういうことか、少し技術的なことを紹介してみたいと思います。

 

閲覧系URLに加え、管理系URLも攻撃されないようにする

WordPress サイトをhttp/https層で見ると攻撃される箇所は2つに大別されます。

1. 閲覧系URL
2. 管理系URL

WordPress は1,2の両方でアクセスの度にPHPやDBが動作するため、常に攻撃が成立する可能性が孕んでいます。この状態を「サイト全体が攻撃対象面である」といい、WordPress の構造的な脆弱性です。

そこで、静的化技術を使って、主に1の側、つまり閲覧系URLでは原理的に攻撃が成立しないようにしてセキュリティを強固にするのが espar vault でした。

(静的化したファイルのみを別サーバに設置。PHPもDBも存在せず、攻撃は原則成立しない)

そして今回発表した「隠蔽化オプション」は、主に2の側ですね。管理系で原理的に攻撃を試みさせないようにするものです。「攻撃を成立させない」のではなく「攻撃を試みさせない」という点が、従来の防御手法とは一線を画している部分です。

どういうことか。

 

管理系URLだけを別ドメイン化する

WordPressサイトのURLが https://www.exmple.com/ なら、よく知られる通り管理画面は https://www.example.com/wp-admin/ で、管理系の重要なアクセスは https://www.example.com/wp-admin/〜 以下に集約されています。

ここも狙われるのです。

ですが、もし以下のように、管理画面だけ別ドメインでWordPressを運用できたらどうでしょう？

• https://www.example.com/wp-admin/〜 は原則全て404で応答する
• https://admin.sample.jp/wp-admin/〜 でWordPress管理系のアクセスができるようにする

パッと見は謎に見えますが、要は管理系URLを根っこの部分(ドメイン)から別物にしてしまい、誰にも推測できないURLにするということです。で、関係者は https://www.example.com/wp-admin/ ではなく、管理系専用の https://admin.sample.jp/wp-admin/ という別ドメインからアクセスして、今までと全く同じ操作感で WordPress を操作します。

(WordPressに直接アクセスしなくても良い環境に隠蔽することでWordPressを守る、という発想)

全く関係ない別ドメインなのにそんなことができるのか？

はい。

普通のWebサーバではできないんですよね。Apache でも NGiNX でも不可能です。弊社が独自に開発した ホスト名置換型リバースプロキシ技術 で可能になりました。全く別のドメインにアクセスしているのに、WordPress の管理画面にアクセスができるようになります。

ちょっと不思議ですよね。

そんな管理系アクセス仲介専用サーバをお客様ごとに用意します。これなら、その全く別のドメインを知らない限り誰も管理画面にアクセスできないって理屈です。管理系URLには、攻撃者は攻撃を試みることすらできません。だって管理用URLが全く分からないのですから。

espar vault の静的化と合わせると、前述の攻撃されやすい2大ポイントはこうなります。

1. 閲覧系URL → 静的化した結果が置かれる公開用サーバが応答
2. 管理系URL → 隠蔽化オプションで用意した管理系専用サーバが応答

元々あった www.example.com のCMSサーバには原則、直接アクセスが一切届かなくなるんですね。なので、CMSサーバには全アクセスに対してIP制限とBasic認証を設定でき、より安全になります。

この構成で、攻撃するのは事実上不可能と言えるほどにWordPress サイトは強固になります。閲覧系への存在しないURLや管理系URLは全て404ですし、別に用意する管理系URLは推測不可能であると。

もちろん例外はあります。これを我々は「動的要素」と呼んでいます。問い合わせフォームから「送信」ボタンを押す瞬間とか、どうしてもその瞬間にPHPが動作しなければいけないURLパスってのがあったりします。ここは、リバースプロキシ技術を使ってWordPress本体にアクセスが届くようにします。

(本当に必要なURLパスのパターンでのみ通過するように設定するので、簡易の手動設定WAFみたいなもの)

そこが攻撃されないよう、やっぱり全て静的化できたほうがいい。だから静的化したページ上で JavaScript で動作する espar from を開発したという経緯があります。

このようにわずかな例外が生じる場合はあるものの、ほぼほぼ攻撃不可能な WordPress になることがご理解いただけるかと思います。

 

セキュリティで最も大切で有効な考え方

セキュリティに絶対はありません。

だから、何かを守りたい時、最も大切な考え方は、deny all, each allow の原則を貫くことです。まずは全てをいったん拒否(deny)し、個別に許可(allow)する。

家の玄関とか、まさにそうですよね。すべてをいったん拒否(鍵付き扉を設置)し、個別に許可(家族にだけ鍵を渡す)します。飛行機や万博のゲートもそうです。いったん拒否(ゲートでせき止め)し、個別に許可(持ち物検査して通す)します。

もちろん絶対はないですが、まず入り口の初手で「現実的に攻撃は不可」と言える状態までセキュリティをいっきに引き上げるのです。細かいことはその後です。このやり方が一番安全であることは、現実世界を見れば自明の理でしょう。

CMSやWebシステムの多くは、残念ながらこれができていません。allow all, each deny なんですよね。メールだってそうです。まず全部受け入れちゃう。そこから守ろうとする。そりゃ漏れますよ。

システムやメールの特性上、どうしても deny all を初手に持ってこれない場合もあるんですけどね。でも、情報発信が主体の CMS サイトならこれが比較的容易です。まず全部拒否(404)することにし、存在するページのURLだけ応答する、以上。というわけです。

まぁ、究極は「使わない」ですけど。ぶっちゃけるとWordPressをはじめCMSを使わないことです😁 SSGを使うか手書きで書いてHTMLファイルを設置するだけが一番安全です。でもそれはまだまだ現実的ではない。だから deny all, each allow で守りを固めてから使うべき、と弊社では考えています。

 

ということで、新たにリリースした espar vault の「隠蔽化オプション」についての解説でした。WordPress の使いやすさはそのままに、セキュリティを高めたいという場合に是非ご検討ください。「静的化」が前提になっているので、理論上の最高速度にスピードUPするというメリットもついてきて、一挙両得です😁

本日2025年7月7日、弊社フィードテイラーは創業から丸19年を迎えました。

もうすぐ20年です。ここまで続けられているのも、ひとえに日頃からお付き合いを頂いているお客様やパートナーの皆さんや社内メンバー、仲良くして頂いてる経営者仲間の皆さんのおかげです。心より感謝申し上げます。ありがとうございます。

恒例ではありますが、近況のご報告などを。

 

Claude Code の『JOIN』

この1年の間で最も大きな弊社変化の一つが、5月下旬に登場したClaude Codeの導入です。

2024年後半から Cursor、GitHub Copilot、Cline など色々使ってきましたが、それらを遥かに凌ぐタスク処理能力で業界が騒然としましたね。弊社でも早々に評価して、6月より社用標準ツールとして位置付けました。

が、正直 Claude Code の採用は、ツールの導入というより 組織に新たなメンバーとして AI が『JOIN』した という感覚が近いです。しかも1人ではなくN人で、使いこなし度合いによってNは2にも5にも10にもなるという…。エンジニアにとっては部下エンジニアがついたと言えますし、雑務担当な僕にとっては総務・企画・広報メンバーとして実務をこなす部下が増えたような感じです。

(ある業務効率化のツールを作らせている様子。機能追加を依頼するとガンガン実装→テスト→修正してくれる)

タスクを投げたら、Claude Code から「これやって良いですか？」と質問されたり、「完了しました」と通知が来るまで基本は放置、その間、自分は他のことをやる…みたいな仕事スタイルが確立しつつあります。

複数の Claude Code インスタンスに別のプロジェクトのタスクを同時並行で走らせたり、同じプロジェクト内で複数の Claude Code に同じことをやらせて一番良いものを選んであとは捨てる…みたいなAIメンバーが複数人いる前提の仕事スタイルも模索しています。

後発のGoogle製 Gemini CLI も併せて評価していて、こちらは開発業務というよりもドキュメント作成系の人員としてのAI。執筆のあと人間の確認と微調整を経たあと、更新作業を勝手にやってくれるみたいな。言っても5月下旬からの動きなので、まだ理想には程遠いですが、体制づくりを進めています。

今後、「チャット型AIのサイトを開いて、プロンプト打って、出力をコピペして」といったことの必要ない、AIが自走できる環境づくりが本当に大事になりそうです。

従業員/メンバーとしてAIを育てよう。組織のAI化を進めていこう。

そう思えるほどに、たった1ヶ月のうちに世界観が変わってしまいました。そんな激動の波に乗りながらにはなるものの、基本的には従来と変わらず静的Web事業とiOS事業を進める1年でした。

 

静的Web事業 espar

発信の強化

色々やった1年でした。リブランディングして発信を強化したり、静的サイト向けフォーム実装ツール「espar form」の専用サイトを作ったり、展示会に出展したりしました。

どれも過去にはやったことのない取り組みばかりでこの1年は特別だったのですが、特に展示会出展はリアルなもの作りで系統も違ったので、とても面白かったです。

(おおよそITらしくないブースに仕上がった。espar form だけでなく espar vault も知って頂く機会に)

アイテムの制作には、お馴染みメタ・グラマーさんにお手伝いを頂きました。リーフレットだけでなく背面パネルに掛ける高さ3mの垂れ幕やテーブルクロスまでお願いしました。イラストはほんわか系の女の子イラストが特徴のいとうみゆきさん。

(esparのブランドコンセプトにあわせてリーフレット用のイラストを描いて頂いた)

手に取れるモノ作りが本当に久しぶりで3社(者)での共同制作は楽しい経験でした。メタ・グラマーさんには制作過程で Blender を使ったシミュレーション(!!😳)をして頂くなど、かなり最先端な作り方も体験できました。

(今や定番の3DツールBlenderで展示ブースの完成系をレンダリングして頂いた。やはり圧倒的にイメージしやすい)

イベント当日の集客は想像してたより少し控えめだったのですが、色んな方にCMS静的化のメリットや、PHPレスな問い合わせフォームのメリットをご説明できたので良かったです。同じように出展されていた制作会社やクリエイターの方々と新たな繋がりが生まれたのも大きな収穫でした。

機能強化と実績

実はこの1年の間に、実質半年近くかけて espar のインフラを刷新しました。Arm版EC2インスタンスを実戦投入したり、Docker もフル活用。そんなこんなで19年目の1年間は espar にとって「目に見えない部分の強化」の年となりました。

が、そのかいあって、機能追加もし易くなったのです。

直近では espar form を機能強化してプレスリリースを発信。問い合わせフォームから送信されるメールに「独自ドメインDKIM署名する」というWeb関係者でも詳細をご存知ない方が意外に多い技術です。

各社の迷惑メール対策強化もあいまって今後はDMARCというキーワードと共に各社Webサイトは対応が不可避になるだろう…と、先手を打っての発表を行った次第です。

(サイト更新含め6割程度がClaude Code担当。プレスリリースサービスへの登録まで全部丸投げできる体制づくりを目指す)

色々と発信してきた成果なのか、新規導入のお話もちょくちょく頂いており、直近では名古屋の住設メーカーのリンナイ様に、WAFを代替するセキュリティ機構として espar vault を導入頂きました。

(理屈上は第三者がCMSを攻撃不可な構成にできる espar vault を評価頂いた)

やっぱり発信したら何かが動き出すものですね。次の1年も発信を継続してまいります。

 

iOS事業

この1年、ブログで少しずつご紹介しながらですが新しいブラウザアプリの開発を粛々と続けてます。

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

@hitonomichiさんに協力して貰って、社内の @t0shiya も巻き込んで、デザイン面ではいよいよメタ・グラマーの @kasydmk さんも巻き込んで、開発開始から6年目に突入ですw もはや「サグラダアプリ」と化してますが😁

(コンテンツを邪魔せず、必要な時だけ現れる新しいブラウザUI「バーデッキ」。図らずもiOS26のLiquid Glass に少し似ていた)

まだまだやりたいことの3〜4割しかできていませんが(次々作りたいものを思いつく自分が悪い😅)、普段使いできるかも状態にはなってきたように思います。ので、身近な人からお声がけして、ちょっとしたお披露目会(?)みたいなこともやってみたりして、TestFlightでの配信範囲を広げよかなと思ってます。お声がけさせて頂くみなさま、宜しければお付き合い下さい🙇‍♂️

一方、B2BのエンタープライズiOS事業は投下するリソースを減らしていて、ブログの投稿頻度もフェードアウト。2025年に入ってからは何と1件だけですw

正直なところ、ぼちぼち業務用iOS関連の知見を発信するという役割は終えたかもなぁと感じています。出し尽くしたわけではないのですが、そこそこ基本知識の啓蒙には貢献できたのではないかなぁという妙な達成感と、Apple も以前よりは相当しっかり情報発信してくれるようになっているという事情もあります。(やっぱりAppleから学ぶのが一番です😊)

ただ相変わらずコンサルティングのご相談は継続的に頂いてますので、今後は発信よりも個別企業様にあわせたご支援に軸足を移していこうかと思っています。業務用のiOS端末活用やアプリ開発のガイドライン作り等で悩まれてる企業様がおられましたら是非お声がけください。

 

ということで、長くなりましたが、この1年も各事業で少し歩みを進めることができました。さて20年目はどんな年になるでしょうか。AIを組織や自社サービスにもっと取り込んで、これまで以上に良い意味で変な会社にしていきたいと思います。

今後ともフィードテイラーを、どうぞよろしくお願いいたします。

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まで遊びに来てやって下さい🙇‍♂️