目次
Claude Codeで、こんなことができたら
Claude Codeを使えば、製造業の現場でもこんなことができます。
- 工程管理画面のkintoneカスタマイズを、仕様を伝えるだけで一気に実装
- 検査データの入力フォームを、バリデーション込みで自動生成
- 生産実績ダッシュボードのグラフ表示を、データ連携からUI実装まで通しで構築
前回の記事で、Claude Codeを長時間自走させる「許可設計」を解説しました。
これにより、Claude Codeはコードを書き続けることができるようになります。
しかし、自走できてもこんな問題が残ります。
「コードは書けたけど、ブラウザで見たら崩れてた」
開発→テスト→ブラウザ確認→修正。
このサイクルの「ブラウザ確認」だけは、結局人がやるしかなかった。
コードが正しく動いているかを確かめるには、ブラウザを開いて、画面を見て、操作して、目で確認する必要があったのです。
ところが今、browser-useを組み合わせることで、Claude Code自身がブラウザを開いて画面を確認し、問題があれば自分で修正するところまで自動化できます。
この記事では、その「自動開発ループ」の仕組みと構築方法を解説します。
結論：Claude Code × browser-useで「開発→確認→修正」の全サイクルが自動化できる
まず、従来の開発フローと自動開発ループの違いを見てください。
graph LR
subgraph traditional["従来の開発フロー"]
T1["コードを書く"] --> T2["ビルド"]
T2 --> T3["人がブラウザで確認"]
T3 --> T4["問題を見つける"]
T4 --> T1
end
style traditional fill:#fff3e0,stroke:#e65100,color:#333333
graph LR
subgraph automated["自動開発ループ"]
A1["コードを書く"] --> A2["ビルド"]
A2 --> A3["Claude Codeが
ブラウザで確認"]
A3 --> A4{"問題あり？"}
A4 -- Yes --> A5["自動修正"]
A5 --> A2
A4 -- No --> A6["完了"]
end
style automated fill:#e8f5e9,stroke:#2e7d32,color:#333333
style A6 fill:#c8e6c9,stroke:#2e7d32,color:#1b5e20
従来は「ブラウザ確認」のたびに人が介入していました。
自動開発ループでは、この確認もClaude Codeが自律的に行います。
これを実現する3つの要素があります。
| # | 要素 | 役割 |
|---|---|---|
| 1 | browser-use | Claude Codeにブラウザ操作能力を与えるCLIツール |
| 2 | planモード | まず設計させてから実装に入る戦略（前回記事で解説済み） |
| 3 | Claude Teams | チーム全体でこの仕組みを安全に運用するための管理基盤 |
この記事では、この3つを組み合わせて自動開発ループを構築する方法を解説します。
browser-useとは — Claude Codeにブラウザの「目」を与える
browser-useの概要
browser-useは、Claude Codeからブラウザを操作できるようにするCLIツールです。
ページを開く、要素をクリックする、フォームに入力する、スクリーンショットを撮る——
人がブラウザでやる操作を、Claude Codeがコマンドで実行できます。
graph LR
CC["Claude Code"] -->|"コマンド実行"| BU["browser-use CLI"]
BU -->|"操作"| BR["ブラウザ"]
BR -->|"状態・スクリーンショット"| BU
BU -->|"結果を返す"| CC
style CC fill:#e3f2fd,stroke:#1565c0,color:#0d47a1
style BU fill:#fff3e0,stroke:#e65100,color:#bf360c
style BR fill:#e8f5e9,stroke:#2e7d32,color:#1b5e20
ブラウザはバックグラウンドで常駐するため、コマンドごとに起動し直す必要がありません。
基本的な操作コマンド
browser-useの主要コマンドは以下の通りです。
| コマンド | 機能 |
|---|---|
browser-use open <url> |
ページを開く |
browser-use state |
ページURL・タイトル・クリック可能な要素一覧を取得 |
browser-use click <index> |
インデックス指定で要素をクリック |
browser-use input <index> "text" |
フォームに入力 |
browser-use screenshot [path] |
スクリーンショットを撮る |
browser-use eval "js" |
JavaScriptを実行 |
browser-use scroll down/up |
ページをスクロール（--amount でピクセル指定可） |
browser-use keys "Enter" |
キーボード操作 |
browser-use select <index> "value" |
ドロップダウン選択 |
操作の基本パターンはこうです。
graph LR
O["open
ページを開く"] --> S["state
要素を確認"]
S --> I["click / input
操作する"]
I --> V["state / screenshot
結果を確認"]
V -->|"問題あり"| I
V -->|"OK"| D["次の操作へ"]
style O fill:#e3f2fd,stroke:#1565c0,color:#0d47a1
style S fill:#e3f2fd,stroke:#1565c0,color:#0d47a1
style I fill:#fff3e0,stroke:#e65100,color:#bf360c
style V fill:#e8f5e9,stroke:#2e7d32,color:#1b5e20
style D fill:#c8e6c9,stroke:#2e7d32,color:#1b5e20
また、以下のオプションが便利です。
| オプション | 機能 |
|---|---|
--headed |
ブラウザウィンドウを表示する（デバッグ時に便利） |
--profile [NAME] |
Chrome実ブラウザを使用（既存のログイン・Cookieが利用可能） |
--session NAME |
名前付きセッション（複数タブの管理に使う） |
--json |
JSON形式で出力 |
セットアップ方法
インストールは1コマンドです。
macOS / Linux：
curl -fsSL https://browser-use.com/cli/install.sh | bashWindows（PowerShell）：
& "C:\Program Files\Git\bin\bash.exe" -c 'curl -fsSL https://browser-use.com/cli/install.sh | bash'インストール後、以下のコマンドで正しくセットアップされているか確認できます。
browser-use doctor # 依存関係の自動チェック
browser-use setup # セットアップウィザードbrowser-use doctor を実行すると、依存関係に問題がないか自動でチェックしてくれます。
ここでエラーが出なければ準備完了です。
自動開発ループの設計 — planモードで「考えてから動かす」
自動開発ループの全体フロー
browser-useをClaude Codeに組み込むことで、以下の自動開発ループが実現します。
graph LR
P["1. plan
分析・設計"] --> C["2. code
実装"]
C --> B["3. build
ビルド・テスト"]
B --> V["4. verify
ブラウザ確認"]
V --> Q{"問題あり？"}
Q -- Yes --> F["5. fix
修正"]
F --> B
Q -- No --> D["6. done"]
style P fill:#e3f2fd,stroke:#1565c0,color:#0d47a1
style C fill:#e3f2fd,stroke:#1565c0,color:#0d47a1
style B fill:#fff3e0,stroke:#e65100,color:#bf360c
style V fill:#fff3e0,stroke:#e65100,color:#bf360c
style F fill:#ffebee,stroke:#c62828,color:#b71c1c
style D fill:#c8e6c9,stroke:#2e7d32,color:#1b5e20
| ステップ | モード | やること |
|---|---|---|
| 1. plan | planモード | タスクの全体像を分析し、実装計画を立てる（ファイル編集不可、コマンドは承認制） |
| 2. code | acceptEditsモード | 計画に沿ってコードを書く |
| 3. build | — | ビルド・lint・テストを実行 |
| 4. verify | — | browser-useでブラウザを開き、画面を確認 |
| 5. fix | acceptEditsモード | 問題があればコードを修正し、3に戻る |
| 6. done | — | 問題がなければ完了 |
このループをClaude Codeが自律的に回します。
planモードで「何を確認するか」を設計させる
自動開発ループで最も重要なのは、「何をもって正しいとするか」の基準です。
browser-useでブラウザを開いても、「何を見ればいいか」がわからなければ意味がありません。
ここでplanモードが効きます。
planモードで以下を事前に設計させます。
- 実装する機能の仕様 — 何を作るのか
- ブラウザで確認すべきポイント — 表示内容、レイアウト、動作
- 確認手順 — どのURLを開き、何をクリックし、何が表示されるべきか
この「確認仕様」があることで、verifyフェーズの精度が大幅に上がります。
Claude Codeは「スクリーンショットを撮って、なんとなく確認する」のではなく、
「この要素がこの状態であるべき」という明確な基準に照らして確認するようになります。
Shift + Tab でplanモードと実行モードを即座に切り替えられます。
実践例 — kintoneカスタマイズの自動開発
具体的な例を見てみましょう。
シナリオ：kintoneの工程管理アプリに、ステータス変更時の自動計算機能を追加する
sequenceDiagram
participant 開発者
participant Claude Code
participant browser-use
participant kintone
Note over 開発者,Claude Code: Step 1: plan
開発者->>Claude Code: ステータス変更時に工数を自動計算する機能を追加して
Claude Code->>Claude Code: 既存カスタマイズコードを分析
Claude Code->>開発者: 実装計画と確認手順を提示
Note over 開発者,Claude Code: Step 2: code
開発者->>Claude Code: OK、実装して
Claude Code->>Claude Code: JavaScriptカスタマイズを実装
Note over Claude Code,kintone: Step 3: build
Claude Code->>Claude Code: 構文チェック・lint実行
Note over Claude Code,kintone: Step 4: verify
Claude Code->>browser-use: kintoneアプリを開く
browser-use->>kintone: open URL
Claude Code->>browser-use: ステータスを変更
browser-use->>kintone: click / select
Claude Code->>browser-use: 計算結果を確認
browser-use->>Claude Code: スクリーンショット + state
Note over Claude Code,kintone: Step 5: fix（必要な場合）
Claude Code->>Claude Code: 表示のずれを検出、コード修正
Claude Code->>browser-use: 再度確認
browser-use->>Claude Code: OK
Claude Code->>開発者: 完了しました
この一連の流れを、Claude Codeが自走で実行します。
開発者が介入するのは最初の指示と最終確認だけです。
CLAUDE.mdで自動開発ループの精度を上げる
ブラウザ確認ルールをCLAUDE.mdに書く
自動開発ループを安定して回すために、CLAUDE.mdに「ブラウザ確認のルール」を追加しましょう。
# ブラウザ確認ルール
- UI変更後は必ずbrowser-useでスクリーンショットを撮って確認する
- 確認対象URL: http://localhost:3000
- 確認ポイント: レイアウト崩れ、文字切れ、ボタンの動作
- モバイル表示の確認も行う（viewport: 375px）前回の記事で解説した通り、CLAUDE.mdは /compact でコンテキストが圧縮されてもディスクから再読み込みされます。つまり、長時間の自動開発ループでも確認ルールが消えません。
これが重要な理由は、自動開発ループは長時間動き続けるからです。
10ファイル、20ファイルと修正が続くうちに、コンテキストは何度も圧縮されます。
しかしCLAUDE.mdに書いた確認ルールは毎回復元されるため、最初のファイルも最後のファイルも同じ基準で確認されます。
`.claude/rules/` でUI確認ルールをモジュール化
CLAUDE.mdに全部書くと長くなります。
フロントエンドのコードを触るときだけ、ブラウザ確認ルールを適用する設定ができます。
---
paths:
- "src/components/**/*.tsx"
- "src/pages/**/*.tsx"
- "public/**/*.css"
---
# フロントエンド確認ルール
- コード変更後はbrowser-useで画面確認を実行すること
- スクリーンショットを撮ってレイアウトを確認
- コンソールエラーが出ていないか browser-use eval で確認このファイルを .claude/rules/ に置いておけば、フロントエンドのコードを触ったときだけブラウザ確認ルールが読み込まれます。
バックエンドのロジックだけを変更しているときは、不要なブラウザ確認を省略できます。
Claude Teams — 自動開発ループをチームに展開する
チームで安全に運用するためのマネージド設定
自動開発ループをチームで使う場合、以下の懸念があります。
- メンバーが本番環境のURLをbrowser-useで操作してしまうリスク
- 許可設定がバラバラで、人によって自走範囲が違う
Claude Teams / Enterprise のマネージド設定で、これらを統一できます。
{
"permissions": {
"allow": [
"Bash(browser-use *)",
"Bash(npm run *)",
"Bash(npx *)"
],
"deny": [
"Bash(browser-use open https://production.*)",
"Bash(browser-use open https://*.kintone.com/*)"
]
}
}graph LR
A["管理者が
マネージド設定を配信"] --> B["browser-use操作を許可
（allowルール）"]
A --> C["本番URLをブロック
（denyルール）"]
B --> D["メンバーは安全な範囲で
自動開発ループを実行"]
C --> D
style A fill:#e3f2fd,stroke:#1565c0,color:#0d47a1
style B fill:#e8f5e9,stroke:#2e7d32,color:#1b5e20
style C fill:#ffebee,stroke:#c62828,color:#b71c1c
style D fill:#fff3e0,stroke:#e65100,color:#bf360c
allowでbrowser-useの基本操作を許可しつつ、denyで本番URLへのアクセスをブロックします。
denyはマネージドが最優先なので、個人がallowで上書きすることはできません。
マネージドCLAUDE.mdでチーム共通の確認ルールを配信
許可設定だけでなく、CLAUDE.mdもマネージドで配信できます。
| OS | 配信先 |
|---|---|
| macOS | /Library/Application Support/ClaudeCode/CLAUDE.md |
| Linux | /etc/claude-code/CLAUDE.md |
| Windows | C:\Program Files\ClaudeCode\CLAUDE.md |
チーム全員に「本番環境にはbrowser-useでアクセスしない」「テスト環境のURLはこれ」といったルールを強制適用できます。
マネージドCLAUDE.mdは個人が除外できないため、事故を確実に防げます。
まとめ：自動開発ループを始める3ステップ
まずやるべき3つのこと
Step 1：browser-useをインストールする
curl -fsSL https://browser-use.com/cli/install.sh | bash
browser-use doctor # インストール検証これだけで、Claude Codeがブラウザを操作できるようになります。
Step 2：CLAUDE.mdにブラウザ確認ルールを追加する
確認対象URL、確認ポイント、確認手順を書いてください。長時間の自動開発ループでも確認基準がブレなくなります。
Step 3：planモードで確認仕様を設計してから実装に入る
「何をもって正しいとするか」を先に決める。これが自動開発ループの精度を決めます。
「開発者は設計と判断に集中する」未来
自動開発ループが回るようになると、開発者の役割が変わります。
コードを書く作業、ブラウザで確認する作業、細かい修正作業——これらをClaude Codeに任せられます。
開発者は**「何を作るか」「なぜ作るか」「これで良いか」**の設計と判断に集中できるようになります。
前回の記事の「許可設計」で、Claude Codeの自走範囲がコーディングまで広がりました。
今回の「browser-useによるブラウザ確認」で、その範囲がUI検証まで広がります。
次は何を自動化できるか——私たちも引き続き実験していきます。
参照元
最後に
株式会社アディエムでは、kintone × 生成AIで日々の業務改善に取り組んでいます。
今回ご紹介したような例の他にも、お客様の業務に合った改善をご提案させて頂きます。
無料相談も実施しておりますので、お気軽にお問い合わせ頂ければ幸いです。
関連記事
2026-04-05
AIと一緒にブログを書いてGitHubで自動公開——製造業のブログ量産の仕組みを作った
製造業の会社がブログを書く理由は、意外と多い。 現場の改善事例やDX取り組みを発信して取引先・顧客に実績をアピールする。 技術者・現場スタッフの採用に向けて「うちの現場はこんな仕事をしています」を伝える。 展示会出展後のフォローとして、製品の詳細情報や活用事例…
2026-03-26
Claude Codeを長時間自走させる方法——許可設計で「止まらないAI開発」を実現する
Claude Codeで、こんなことができたら Claude Codeを使えば、製造業の現場でもこんなことができます。 受注・在庫・工程能力データから、週次の生産計画草案を自動生成するスクリプトを、仕様を伝えるだけで一気に実装 Excelで手作業していた負荷山…
2026-03-22
n8nを使って自社のサイトに特化したSEOレポートを自動生成しよう
毎月のSEOレポート、まだ手作業で作っていませんか？ GA4を開いて、Search Consoleを開いて、数字をスプレッドシートにコピペして、グラフを整えて—— 毎月この繰り返しをしていないでしょうか。 「数字を並べるだけなら何とかなる。でも、分析コメントを…
