agent-browserの使い方｜ブラウザ操作スキルを試した結果
「毎月、競合の料金ページを開いて、画面を撮って、数字を表に写している。この作業をAIに任せられないか」——Webの確認作業が多い人ほど、一度はこう考えます。
結論から言うと、agent-browser（エージェント・ブラウザ）は、Claude Codeにブラウザの操作を任せるためのスキルです。ページを開く、クリックする、入力する、画面を撮る、文字を取り出す、といった作業を、画面に出ない別のブラウザで進めてくれます。私が試した料金ページ3つの比較は、1回の依頼で約24秒で終わりました。
株式会社Fyveは、Claude Codeのスキルを実際に入れ、架空の会社の仕事で試した結果だけを書いています。この記事も、agent-browserの使い方の説明に加えて、スキルなしで同じ依頼を出した場合との違い、Claude in Chromeとの違い、試せなかったことまで正直に書きます。
agent-browserとは｜Claude Codeにブラウザ操作を任せるスキル
agent-browserは、Vercel Labsが公開している、AIエージェント向けのブラウザ操作の道具です。GitHubのvercel-labs/agent-browserで公開されていて、ライセンスはApache-2.0です。2026年10月21日時点の最新版はv0.39.1、GitHubのスター数は44,351でした。
仕組みは2つに分かれています。1つは「agent-browser」というコマンド本体（Chromeを動かす道具）で、もう1つが、Claude Codeにその使い方を教える「スキル」です。スキルの中身（SKILL.md）は短い案内役で、実際の使い方はClaude Codeが agent-browser skills get core というコマンドで本体から取り寄せる作りです。READMEによると、こうしておくと、本体のバージョンと使い方がずれないそうです。
ページの内容は、画面の絵ではなく「ボタンや入力欄の一覧」に要約してAIに渡されます。READMEは、1ページあたり約200〜400トークンで済むと説明しています（この数字は説明書の記載で、私は測っていません）。
どんな仕事に使えるか
- 競合の料金ページ・商品ページを開いて、価格や条件を表にまとめる
- 自社サイトをスマホ幅で開き、見づらい箇所を見つける
- フォームの入力と送信を試して、動くかを確かめる
- ページ全体の画面を撮って、記録として残す
agent-browserの入れ方｜READMEにある手順
READMEの手順は次の2段階です。Node.jsが入っていることが前提で、パッケージのpackage.jsonには Node.js 24以上と書かれています。APIキーは要らず、無料です。
npm install -g agent-browser
agent-browser install1行目でコマンド本体を入れ、2行目でChrome for Testing（検証用のChrome）をダウンロードします。私の環境では約186MBで、15秒ほどでした。macOSでは brew install agent-browser でも入ります。
そのうえで、Claude Codeにスキルを入れます。READMEには次のコマンドが書かれています。
npx skills add vercel-labs/agent-browserこれで、作業フォルダの .claude/skills/agent-browser/SKILL.md に案内役のファイルが置かれます。
なお、今回の試験では普段の環境を汚さないため、npm install -g ではなく作業フォルダの中にだけ入れ、スキルのフォルダも手でコピーしました。動きは同じです。
Claude Codeにこう頼む
スキル名を言わなくても、ブラウザを使う依頼なら自動で起動しました。頼み方の例です。
- 「競合2社の料金ページを開いて、スクリーンショットを保存し、価格と送料と保証の違いを表にまとめて」
- 「自社サイトのトップと料金ページをスマホの画面幅で開いて、横にはみ出しているページがないか教えて」
- 「このフォームに必須項目を空のまま送信して、何が起きるか確かめて」（※この3つ目は今回試していません）
起動しない場合は「agent-browserを使って」と名前を添えてください。今回は名前なしで起動したので、名前を添えた頼み方は試していません。
試した結果｜架空の会社の料金ページ3つを比べた
試したのは、架空の会社（手作り家具を売る従業員12名の会社）の仕事です。会社のサイトと、競合2社（これも架空）の料金ページをパソコン上に用意して、次の依頼を出しました。
結果は次のとおりです。
- 発動：スキル名を言わずに自動で起動した
- 時間・使用量：23.8秒、7ターン、費用の概算は0.087ドル
- できたもの：3ページの全画面スクリーンショットと、比較表（comparison.md）
- 正確さ：表の数字は、ページに書かれた文字と全て一致した（競合Aはテーブル120,000円・送料5,500円（5万円以上で無料）・保証5年・返品7日、競合Bはテーブル82,000円・送料無料・保証1年・返品30日）
良かったのは、足りない情報を推測で埋めなかった点です。自社の料金ページは「メンテナンス便」の月額プランだけが載っているページで、商品の価格や送料はありません。agent-browserは、その欄を「記載なし」と書き、「別ページにあるなら教えてください」と返してきました。
気になった点もあります。撮った画像を、AI自身は開いて確かめていませんでした（返答にもそう書かれていました）。文字は取り出して確認していたので数字は合っていましたが、「画像の見た目」を確かめたい場合は、そう頼む必要があります。また、最初の1コマンドが区切り線の書き方でエラーになり、やり直しています。
スマホ幅の確認も頼んでみた
2回目は「トップと料金ページをスマホ幅で開いて、横にはみ出すページを教えて」と頼みました。結果は21.2秒、12ターン、0.100ドルです。
agent-browserは、iPhone 12相当（幅390px）で開き、料金ページだけが横にはみ出していることを見つけました。ページの幅が924pxになっていて、原因は表に書かれた white-space:nowrap という指定です。直し方も2つ挙げてきました（この指定を外す、表だけ横スクロールにする）。これは、私がサイトに仕込んでおいた不具合と一致しています。
12ターンかかったのは、スマホ幅の設定方法を説明書の中から探したためです。慣れないうちは、1回目より少し遠回りします。
スキルなしとの違い｜同じ依頼を、スキルを入れない状態で出した
読者がいちばん知りたいのは「入れると何が変わるか」だと思い、スキルを入れていない別のフォルダで、同じ2つの依頼を出して比べました。
1回目 料金ページ3つ | 2回目 スマホ幅 | |
|---|---|---|
スキルあり | 23.8秒・7ターン・0.087ドル | 21.2秒・12ターン・0.100ドル |
スキルなし | 26.0秒・5ターン・0.097ドル | 18.4秒・6ターン・0.069ドル |
出来は、どちらも同じでした。数字は全て合い、スマホ幅のはみ出しも、原因まで同じ内容を見つけています。時間と費用も、ほぼ同じで、2回目はスキルなしのほうが安く済みました。
ここで注意してほしいのは、スキルなしで動いたのは、私のMacに、ブラウザ操作の道具（PlaywrightというPython用のライブラリ）とChromeがすでに入っていたからです。スキルなしのClaude Codeは、その道具を探して自分でプログラムを書き、画面を撮っていました。何も入っていない環境で同じことができるかは、確かめていません。
つまり、静的な3ページを撮って表にするくらいの軽い仕事では、スキルを入れても差は小さい、というのが私の試した範囲の結論です。差が出るのは、READMEが挙げている、ログインの引き継ぎ、複数のブラウザの同時利用、前後の画像の比較といった、もう少し込み入った使い方のほうだと考えられます（これは推測で、今回は確かめていません）。
agent-browserとClaude in Chromeの違い
ブラウザ操作には、Anthropic公式のChrome拡張機能「Claude in Chrome」もあります。こちらは今回試していないので、両方とも各公式の説明書に書かれている内容で比べます。
- 見え方：Claude in Chromeは、いつものChromeの窓で動きが見えます。agent-browserは、既定では画面に出ない別のブラウザで動き、見たいときだけ
--headedを付けます - ログイン：Claude in Chromeは普段のログイン状態をそのまま使い、ログイン画面やCAPTCHAでは人に操作を戻します。agent-browserは、既定では普段のログイン状態と切り離されています。ログイン済みの画面を触らせたいときは、保管庫（
auth save）やChromeのプロファイルの引き継ぎ（--profile）を使います - 同時に動かす：agent-browserには
--sessionで切り離したブラウザを並べる機能があります。Claude in Chrome側の説明書には、同様の記載が見つかりませんでした - 見比べ・スマホ表示：agent-browserには、2つのページや前回との違いを出す
diff screenshot、機種を指定するset deviceがあります - 契約：agent-browserは無料でAPIキーも不要です。Claude in Chromeは、Claudeの有料プラン（Pro・Max・Team・Enterprise）への直接契約が必要です
私の見立ては次のとおりです。ログイン済みの画面を1回だけ触らせたいなら、Claude in Chromeのほうが手軽だと考えられます。agent-browserが向くのは、裏で動かしたい仕事、毎回同じ手順の繰り返し、知らないサイトを大量に見て回る仕事です。ただし、これは説明書の記載からの見立てで、同じ仕事を両方で測ったものではありません。
なお、diff screenshot は私も手で試しました。競合Aと競合Bのページの画像を比べると、「1.81%のピクセルが違う」と出ました。一方、3つのブラウザを同時に立ち上げる試しでは、4.3秒かかり、1つを使い回して順番に開いた場合の2.2秒より遅くなりました。少なくとも軽い仕事では、同時に動かす目的は「速さ」ではなく「切り離し」だと考えるのが妥当です。
中身の安全確認｜何を外に送り、何を実行するか
入れる前に、リポジトリの中身を読んで確かめました。
- スキルの権限：SKILL.mdの
allowed-toolsはBash(agent-browser:*)とBash(npx agent-browser:*)だけです。許可されるのはagent-browserのコマンドに限られます - 外への通信：インストール時にChrome for Testingを、GoogleのサーバーからDLします。ほかに、データを外に送る部分は、コード検索で（telemetry、posthog、sentryなどの語で）見つかりませんでした。ただし、全てのコードを1行ずつ読んだわけではありません
- ログイン情報の扱い：
state saveで保存するログイン状態のファイルは、暗号鍵を設定しない限り、セッションのトークンが平文で入ります（READMEが自分で警告しています）。auth saveの保管庫は、常に暗号化されます。ログイン済みの画面を触らせるなら、保管庫のほうを選び、状態ファイルは使い終わったら消すのが無難です - 普段のブラウザにつなぐ設定：
--auto-connectは、起動中のChrome全体を操作できる状態にします。READMEも、同じPCのほかのプロセスから操作できる点に注意を促しています。初めての人は避けたほうがよい設定です
私の試験では、もう1つ気づいた点があります。スキルは「名前をつけたセッションを使うように」と説明していますが、試した2回とも名前なしの既定のセッションで動き、終わったあともブラウザの常駐プロセスと実行用のファイルが残りました。作業が終わったら、agent-browser close --all で閉じてください。
agent-browserが向かない場面
- ログインが必要なサイトで、普段のログイン状態をそのまま使いたいとき（Claude in Chromeのほうが手軽だと考えられます。今回、ログイン済みのサイトは試していません）
- ページが1つか2つで、一度きりの確認のとき（スキルなしでも同じ品質で終わりました）
- 画像の見た目まで確かめてほしいとき（頼まないと、文字の取り出しだけで済ませることがあります）
- Webサイトの利用規約でロボットによる取得を禁じているとき（道具の問題ではなく、使う側の責任です）
まとめ｜入れる前のチェックリスト
- □ Node.jsが入っている（package.jsonでは24以上）
- □
npm install -g agent-browserとagent-browser installを実行した - □
npx skills add vercel-labs/agent-browserでスキルを入れた（公開元はvercel-labsと確認した） - □ 最初は、ログインが不要な公開ページで試した
- □
--auto-connectと状態ファイルは、意味が分かるまで使わない - □ 作業が終わったら
agent-browser close --allを実行した - □ 画像の見た目を確かめたいときは、そう頼んだ
agent-browserは、Webの確認作業を言葉で頼める無料の道具です。ただ、軽い仕事ではスキルなしと差が出ませんでした。まずは競合のページ確認のような、ログイン不要の定例作業で試し、手間が減るかを見るのがよいと思います。
ブラウザ操作の道具どうしの違いは、次の記事でも扱っています。
「ブラウザ作業を任せる」のスキルは、ほかに2本を同じ架空の会社の材料で試しています。
仕事でAIを使う人が「絶対に」知っておくべき Claude Codeスキル TOP10
31本を実際に入れて、スキルなしと比べた結果つき（全28ページ）
スキルを入れても、Claude が急に賢くなるわけではありませんでした。31本を架空の会社の仕事で試し、同じ依頼をスキルなしでも検証して比べたうえで、導入する価値があった10本を仕事別にまとめています。
- 文章・スライド・図・数字・調べもの・契約書など、仕事別の10本
- 1本ごとに、スキルなしと比べた時間・費用・出来
- 実物の画面と、Claude Code にそのまま貼れる頼み方
- 外した5本の理由と、入れる前に確かめる4つのこと
メールアドレス登録で他にも様々な資料を閲覧できます
＋9PDF 18点・合計468ページ ＋ すぐ使えるzip素材 3点
どれも登録後の受け取りページから、まとめてダウンロードできます。
毎週配信の無料ニュースレター「AIネイティブ超研究」の購読特典です。メール登録後すぐ、受け取りページのご案内が届きます。そこにはこの資料に加えて、過去の特典もすべてまとめて置いてあります。あわせて、AI活用に関するお知らせやお役に立てそうなご案内をお送りすることがあります。解除はいつでも1クリック。
御社の業務に合わせたClaude Code導入支援
「AIツールを導入したが、現場で使われない」を終わらせる。
業務課題のヒアリングから設計、ハンズオン実践、運用定着まで一貫して支援します。