FixLane — AIによるサイト保守の自動化開発
クリックから確認用 URL まで自動、人がやるのは最後の判断だけ
サイトの修正依頼を、受け取りから確認用 URL の発行まで自動で回す仕組みです。依頼者が画面をクリックして「ここ直して」と書くと、AI がコードを直し、確認用の URL が出ます。1件あたり 22円・2分40秒。外注先との修正のやり取りが多い事業者向けに、自分のポートフォリオサイトを題材として1人で設計・実装しました（自社開発）。
人がやるのは、最後に「出していい」と判断するところだけです。
なぜ作ったか
受託の保守で時間を取られるのは、作業そのものより依頼のやり取りでした。「トップの下のほうの文言」のような曖昧な指示を受け取り、場所の特定から始めて確認し直す。修正そのものは数分で終わるのに、往復のほうが長くなります。
一方で、AI にコードを書かせること自体はすでに現場で回せていました。足りないのは「依頼者がブラウザ上で場所を指し、そのまま AI に渡る経路」と「AI に本番を触らせない仕組み」の2つだと考え、そこを作りました。
設計で迷ったところと、選んだ理由
迷ったところ | 選んだ案 | 捨てた案と理由 |
|---|---|---|
AI にどこまで権限を渡すか | コードの変更提案までに限定。本番への反映は人の操作 | 自動マージ。見た目が依頼どおりでも、共通部品を壊す修正が実際に出たため（10件中2件） |
依頼文をどう AI に渡すか | 依頼文を囲って「データ」として渡し、指示と混ぜない | そのまま指示文に差し込む案。「これまでの指示を無視して」と書かれた依頼が通ってしまう |
触ってよい場所をどこに書くか | 対象サイト側のリポジトリに置き、無ければ AI は何もせず終了 | ツール側に書く案。対象ごとに構成が違い、ツール側が肥大化する |
配布スクリプトの更新 | 版を URL に含め、設置済みの版は中身を固定 | 同じ URL を上書きする案。他人のサイトで動くものを黙って差し替えることになる |
作ったもの（依頼から反映までの流れ）
- 依頼: サイトに1行読み込むウィジェット。合鍵つきの URL で開いたときだけ修正モードが出て、クリックした要素の位置・表示テキスト・HTML を自動で添えます
- 送る前の確認: 送信前に AI が依頼を言い換えて示し、打ち間違い（例: microCMS の綴り）を候補として挙げます。直すかどうかは依頼者が1つずつ選びます
- 受け口: 専用の API（連携用の窓口）が、送信元サイト・合鍵・入力内容・送信回数を順に検査し、通ったものだけを GitHub の Issue にします
- AI の修正: Issue にラベルが付くと GitHub Actions が起動し、AI がリポジトリの規約に従ってコードを直し、専用ブランチに反映します
- 確認: Vercel が確認用 URL を自動生成。修正前後のページを撮り比べ、依頼した箇所以外が変わっていないかを検査して、結果を Issue にコメントします
- 反映: 取り込むかどうかは人が判断します
技術構成と、担当した範囲
Next.js（App Router）/ TypeScript / Vercel / GitHub Actions / Claude API / Playwright
要件の整理、ウィジェットと受け口の実装、AI への指示文の設計、自動検査の作り込み、テスト、運用の記録づくりまで、すべて1人で担当しました。テストはユニット 400 件超と、実ブラウザでの通し検査（E2E / 画面操作を通した一気通貫テスト）を自動実行しています。
測った数字
指標 | 値 |
|---|---|
依頼1件あたりの AI 費用 | 22円（10件の実測平均） |
依頼から確認用 URL まで | 2分40秒 |
送信前の確認 | 1回あたり約1.8円・5秒以内 |
見た目が依頼どおりだった件数 | 10件中10件 |
コードの作りまで見て問題なかった件数 | 10件中8件 |
※ 上から5行目までは、送信前の確認を入れる前に通した10件（2026年9月）の実測です。送信前の確認の数字は、その機能を足したあとに測りました。
残り2件は、共通部品を使うのをやめて値を直接書き込むなど、画面では分からない壊し方をしていました。この結果から、機械の検査は「取り込んでよいかの材料」に留め、最終判断は人が行う設計にしています。
まだできていないこと
- 対応できるのは文言・色・余白・表示の出し分け・並び順まで。レイアウトの作り替えや新機能は対象外
- 画面の撮り比べは、コードの作りの良し悪しまでは見抜けない（上記の2件）
- WordPress はオリジナルテーマのサイトが対象。配布テーマは、依頼の多くが管理画面側の設定であり、コードを直しても変わらないため対象外
- 対象はテーマが Git で管理されているサイト。管理されていない場合は、その整備から必要
WordPress サイトにも導入済み
Next.js のサイトだけでなく、WordPress（オリジナルテーマ）のサイトにも導入し、文言の修正で依頼から確認までの通しが成立しています（2026年9月）。WordPress では記事や設定がデータベース側にあるため、本番と同じ見た目の確認用サイトを別に用意し、テーマのファイルだけを反映する経路を組みました。
次は、本番サイトへの反映までを含めた通しと、導入にかかる工程ごとの実時間の記録です。そのうえで、継続保守のサービスとして提供できる形に整えます。
ご相談を承っています
AI を使った開発・サイト運用の自動化についてのご相談を承っています。「この作業も AI に任せられるか」「自社サイトの保守を楽にしたい」といった段階のご相談でも構いません。お問い合わせはこちら