ガイド

Claude Codeはブラウザでも使える?「Claude in Chrome」とWeb版を完全解説【2026年最新】

室谷東吾
監修者室谷東吾(@0x__tom

株式会社MYUUU 代表取締役 / 日本最大級AIコミュニティ「.AI」創設者(累計2,000名超)/ セプテーニ・ホールディングス(電通グループ)と資本業務提携 / 著書「お金を使わず、AIを働かせる『Dify』活用」(ぱる出版、3刷)/ Xフォロワー約2万人

テキトー教師
監修者テキトー教師(@tekitoo_T_cher

.AI 認定講師 / 教育×AIの専門家 / 累計300名以上にAI活用を指導 / 「テキトーに学ぶ」がモットーの実践派講師 / Xアカウント

Claude Codeはブラウザでも使える?「Claude in Chrome」とWeb版を完全解説【2026年最新】

Claude Codeはブラウザでも使える?「Claude in Chrome」と「Web版」を完全解説【2026年最新】

室谷室谷
Claude Codeって「ターミナルで使うもの」というイメージが強いんですよね。でも実は今、ブラウザとの連携が一気に進んでいて・・・ここが本質的に面白いポイントなんです。
テキトー教師テキトー教師
.AI(ドットエーアイ)コミュニティのメンバーさんからも「Claude Codeってブラウザでも使えるの?」って質問が増えてますね。環境構築が苦手な方にとっては、ブラウザで完結するなら試してみたい、という声が多いです。
室谷室谷
そうなんですよね。今のClaude Codeって、大きく3つのブラウザ関連機能があって。

「claude.ai/codeで動くWeb版」「Chrome拡張のClaude in Chrome」「Claude CodeからChrome拡張を制御するClaude Code + Chrome連携」、この3つです。
テキトー教師テキトー教師
整理すると、「ブラウザ上でClaude Codeを動かす」のがWeb版で、「ブラウザ自体をAIに操作させる」のがClaude in Chromeですね。混同している人が多いので、この記事ではそこをきちんと分けて解説していきます。
室谷室谷
この記事を読むと、Claude Codeのブラウザ対応の全体像と、自分にとってどの使い方が最適かがわかります。2026年4月時点の最新情報でお届けします。

Claude Codeのブラウザ対応、3つの使い方を整理する

テキトー教師テキトー教師
まずは全体像から整理しましょう。Claude Codeのブラウザ関連機能は、目的によって使い方が全然違います。
室谷室谷
そうですね。MYUUUでも3つの使い方を場面によって使い分けています。

それぞれ用途が違うんですよ。
機能場所できること必要プラン
Claude Code Web版claude.ai/codeブラウザ上でClaude Codeを実行、GitHubと連携Pro/Max/Team/Enterprise
Claude in Chrome(拡張機能)Chrome拡張ブラウザ自体をAIが自動操作Pro/Max/Team/Enterprise
Claude Code + Chrome連携ターミナル + 拡張開発しながらブラウザで動作確認Max/Team/Enterprise

Claude Codeのブラウザ対応3機能(全体像)

テキトー教師テキトー教師
「Web版」と「Claude in Chrome」は全く別物なんですよ、これ。Web版はClaude Codeのターミナル機能をブラウザ上に持ってきたもの。

Claude in Chromeはブラウザそのものを操作するエージェント機能です。
室谷室谷
ここが最初の混乱ポイントなんですよね。「ブラウザで使える」という点は同じでも、やっていることが根本的に違う。

まず一つずつ解説していきましょう。

Claude Code Web版:ローカル環境不要でコーディングができる

室谷室谷
Claude Code Web版は、claude.ai/codeにアクセスするだけで使えます。ローカルへのインストール不要、Anthropicが管理するクラウド環境でClaude Codeが動くんですよね。
テキトー教師テキトー教師
これ、環境構築で詰まっていた受講生さんには革命的な機能だと思いますよ。「まずブラウザで試してみて、慣れたらローカルに移行する」という使い方ができますから。
室谷室谷
Pro・Max・Team・Enterpriseのユーザーが使えます。Freeプランは非対応。

それとEnterprise の場合はpremium seatsかChat + Claude Code seatsが必要です。
テキトー教師テキトー教師
実際、Web版でできることを整理するとこうなりますね。

Web版でできること

室谷室谷
Web版の大きなメリットは「ブラウザを閉じてもセッションが継続する」点です。長時間かかるタスクを走らせておいて、後でブラウザを開いて確認、みたいな使い方ができる。
テキトー教師テキトー教師
それが便利なんですよ。講座でも紹介しているのが「夜中にClaude Codeで大きなタスクを走らせておいて、朝起きたら確認する」というワークフロー。

ローカルで走らせると画面スリープの問題が出ることもあるんですが、Web版はAnthropicのクラウドで動いているので関係ない。
室谷室谷
MYUUUでも使っているのが、ルーティン(Routines)機能ですね。定期的に実行するタスク(PR review自動化、テスト実行など)をWeb版からスケジュールしておける。
テキトー教師テキトー教師
Claude Mobile App(iOS)との連携も便利です。Web版で走らせたタスクをスマホから確認できる。
できること詳細
ブラウザ上でのコーディングGitHub連携でリポジトリをクローン、コード編集・コミット
セッション継続ブラウザを閉じてもタスクが継続。後からチェック可能
ルーティン実行PR自動レビュー、定期テストなどをスケジュール
モバイルアプリ連携Claude iOS Appでタスク状況をチェック
diff viewコード差分をブラウザ上で確認、インラインコメントで修正
室谷室谷
diff viewが実装されたのがめちゃくちゃ嬉しかったですね。前はGitHubに切り替えないと差分確認ができなかったんですが、今は全部Web版の中で完結する。
テキトー教師テキトー教師
ターミナル派の方でも、「diff確認はWeb版でやる」という使い分けをしている人が増えてますよね。

GitHubとの連携方法

室谷室谷
Web版を使うには、GitHubと連携させる必要があります。方法が2つあって。
テキトー教師テキトー教師
一つはGitHub Appをインストールする方法。Anthropicの公式GitHub Appを特定のリポジトリにインストールして、アクセス権を付与します。

リポジトリ単位で細かく制御できるので、チームやEnterpriseに向いています。
室谷室谷
もう一つが/web-setupコマンドを使う方法。ターミナルで claude --web-setup を実行して、ローカルのgh CLIのトークンをClaudeアカウントに同期する。

個人開発者でgh CLIを既に使っている人はこっちの方が楽ですね。
テキトー教師テキトー教師
セキュリティを重視するチームの場合は、GitHub Appの方がコントロールしやすいです。どのリポジトリにアクセスできるかを明示的に指定できますから。

Web版のクラウド環境で使えるツール

室谷室谷
Web版のクラウド環境には、最初からいろんなツールが入っています。ローカルにインストールしなくていいんですよね。
テキトー教師テキトー教師
これが実際のプロジェクトで使ってみると思ったより充実していて驚きます。
カテゴリ含まれるもの
PythonPython 3.x、pip、poetry、uv、pytest、ruff
Node.jsNode 20/21/22(nvm経由)、npm、yarn、pnpm、bun
Ruby3.1/3.2/3.3(rbenv)、gem、bundler
JavaOpenJDK 21、Maven、Gradle
Go最新安定版
Rustrustc、cargo
データベースPostgreSQL 16、Redis 7.0
ユーティリティgit、jq、yq、ripgrep、tmux、vim
室谷室谷
GitHubのissue処理やPRマージはビルトインのGitHubツールで認証不要でできます。ただしgh CLIは入っていないので、gh release等の操作が必要な場合はセットアップスクリプトで別途インストールが必要です。
テキトー教師テキトー教師
CLAUDE.mdや.claude/settings.json、MCPサーバー設定(.mcp.json)はリポジトリにコミットされていれば引き継がれます。ただしローカルのユーザー設定(~/.claude/配下)はクラウド環境に引き継がれないので注意が必要です。

Claude in Chrome:ブラウザ操作をAIに任せる拡張機能

室谷室谷
次が「Claude in Chrome」です。これはブラウザ自体をAIが操作するサービスで、Web版とは全く別物です。

Chrome Web Storeからインストールする拡張機能ですね。
テキトー教師テキトー教師
教える立場から言うと、「RPAのAI版」という表現が伝わりやすいです。ただ、従来のRPAと違って事前にスクリプトを書く必要がない。

自然言語で「Yahoo!路線情報で横浜から虎ノ門の運賃を調べて」と指示するだけで動いてくれます。
室谷室谷
2025年8月にMaxプラン限定のリサーチプレビューとして始まって、11月にMax全員、12月にPro/Team/Enterpriseへ拡大。2026年4月現在はベータ版として全有料プランで使えます。
テキトー教師テキトー教師
Freeプランは対象外です。ChromeのみでEdge等他のChromiumベースブラウザは非対応、モバイルも非対応です。

Claude in Chromeでできること

室谷室谷
Chrome拡張をインストールすると、ブラウザのサイドパネルにClaudeが表示されます。そこから自然言語で指示を出すと、Claudeがブラウザを操作してくれる。
テキトー教師テキトー教師
内部的にはAnthropicのComputer Use機能がベースになっています。スクリーンショットを撮って画面を認識し、マウスやキーボードを操作する仕組みです。
室谷室谷
使えるシーンをざっとあげると・・・
  • 複数サイトの情報収集・比較(料金比較、スペック比較など)
  • 定期業務の自動化(毎週のレポート作成など)
  • フォーム入力の自動化(データが変わらない繰り返し作業)
  • 開発者向けのブラウザデバッグ(後述)
テキトー教師テキトー教師
ワークフロー録画機能が地味に便利で、自分が操作する手順をClaude に覚えさせることができます。「毎月初の経費精算」みたいな定型業務は、一度録画しておけばあとはショートカット一つで実行できる。
室谷室谷
スケジュール実行機能もあって、「毎日この時間にこのタスクを実行」というような自動化ができます。RPAツールをわざわざ使わなくてもいいシーンが増えてきましたね。

Claude in Chrome - Chrome Web Storeページ(公式サイトより)

プランによるモデルの違い

テキトー教師テキトー教師
ここ注意が必要で、使えるモデルがプランによって違います。
室谷室谷
Proプランの場合、Claude in Chromeで使えるモデルはHaiku 4.5固定です。MaxやTeam、Enterpriseはモデルを選べて、Opus 4.6、Sonnet 4.6、Haiku 4.5から選択できます。
テキトー教師テキトー教師
複雑な多ステップのブラウザ作業ならSonnet 4.6以上が安定しますね。Haiku 4.5は速いけど、複雑な判断が必要な場面では精度が下がることがある。
プラン使えるモデル
ProHaiku 4.5のみ
MaxOpus 4.6、Sonnet 4.6、Haiku 4.5から選択
TeamOpus 4.6、Sonnet 4.6、Haiku 4.5から選択
EnterpriseOpus 4.6、Sonnet 4.6、Haiku 4.5から選択
室谷室谷
ブラウザ操作はトークン消費が早いんですよ。操作のたびにスクリーンショットを撮って解析するので。

通常のチャットより何倍もトークンを使います。Proプランで使う場合は制限に注意が必要ですね。

Claude Code + Chrome連携:開発しながらブラウザで動作確認

テキトー教師テキトー教師
三つ目が、Claude Codeのターミナル版とChrome拡張を組み合わせた連携ですね。これが開発者にとっては一番ゲームチェンジャーな機能だと思います。
室谷室谷
「ターミナルで開発 → ブラウザで動作確認」のサイクルをClaude Codeが全部やってくれる、ということです。今まで人間がやっていた「コードを書く → ブラウザで確認 → エラーを見てコードを修正」というループを自動化できる。
テキトー教師テキトー教師
具体的には、Claude Codeがターミナルでコードを書き、Chrome拡張を通じてブラウザを開いて動作確認し、コンソールエラーを読んで自動修正する、ということができます。
室谷室谷
コンソールログ機能が地味に強くて、ClaudeがブラウザのDOMの状態やネットワークリクエスト、エラーを直接読めるんですよ。「このエラーを直して」と言わなくても、Claudeが勝手にコンソールを見て問題を特定してくれる。

起動方法

テキトー教師テキトー教師
Claude Code + Chrome連携を使うには、まずChrome拡張のインストールが必要です。claude.ai/chromeにアクセスして拡張を追加してください。
室谷室谷
ターミナルからは2通りの起動方法があります。
# 方法1: claude --chromeフラグで起動
claude --chrome

# 方法2: 既存セッション中に/chromeコマンドを実行
/chrome
テキトー教師テキトー教師
/chromeコマンドを実行すると3つの選択肢が出てきます。
  • Manage permissions: サイトごとにブラウザ操作の権限設定を管理
  • Reconnect extension: Chrome拡張の再接続
  • Enable by default: Claude Code起動時にデフォルトでChrome連携を有効にするか
室谷室谷
MYUUUのエンジニアは「Enable by default: Yes」にしているメンバーが多いですね。フロントエンド開発をしているときはほぼ常にブラウザ確認が必要なので。

ただしベータ版なのでトークン消費に注意が必要です。
テキトー教師テキトー教師
Chrome MCPを活用したスキルやエージェントも増えてきましたね。Claude CodeのエコシステムでChrome MCPと他のツールを組み合わせる設計ができる人の価値が上がっています。

Claude in Chromeのセキュリティと安全な使い方

室谷室谷
これ、セキュリティの話を避けて通れないんですよね。ブラウザ操作をAIに任せるということは、AIが自分の代わりにブラウザを操作するということで。
テキトー教師テキトー教師
AIにブラウザを任せることに不安を感じる方も多いです。正直、慎重になって当然だと思いますよ。

ただ、Anthropicも対策を進めてきているので、正しく使えばリスクをかなり下げられます。

気をつけるべきリスク

室谷室谷
主なリスクは3つです。
テキトー教師テキトー教師
まず「プロンプトインジェクション」。これが一番注意が必要で、悪意あるWebページやメールに埋め込まれた指示文がClaudeを誤動作させる可能性があります。

Anthropicの検証ではメール内の指示でClaudeがユーザーの確認なしにメールを削除した事例も確認されています。
室谷室谷
現在はサイト別の権限設定、高リスク操作前の確認要求、金融系サイトのブロックなど対策が入っていますが、完璧ではない。
テキトー教師テキトー教師
次が「機密情報の流出リスク」。Claudeはスクリーンショットで画面内容を把握するので、表示中の個人情報やパスワードが意図せず送信される可能性があります。
室谷室谷
3つ目が「トークン消費の速さ」。ブラウザ操作は操作のたびにスクリーンショットを撮るので、通常のチャットより圧倒的にトークンを消費します。

使いすぎに注意ですね。

安全に使うための実践ガイド

テキトー教師テキトー教師
Anthropic公式も推奨している使い方のポイントをまとめると・・・
推奨事項理由
信頼済みサイトから始める権限は慣れたWebサイトから先に付与する
機密情報を含む操作は手動でネットバンキング、決済、証券口座は自分で操作する
不意な動作はフィードバック報告改善につながる
個人情報フォームの送信は自分で判断と送信は人間がやる
室谷室谷
MYUUUでの使い方は「情報収集はClaude、判断と送信は自分」というラインを引いています。リサーチや比較調査はClaude in Chromeに任せて、実際の入力・送信は自分がやる。
テキトー教師テキトー教師
これが現時点での安全な使い方ですよね。100%任せるのはまだ早い。

AIとのコラボレーションとして使う感覚が大事です。

Remote Control:スマホからClaude Codeを操作する

室谷室谷
ブラウザ関連で話すともう一つ便利な機能が「Remote Control」ですね。スマホやタブレットから、ローカルで動いているClaude Codeのセッションを操作できる機能です。
テキトー教師テキトー教師
これも「ブラウザで使う」の一形態ですよね。別のデバイスのブラウザからアクセスして操作する。
室谷室谷
ユースケースが面白くて。「外出先のスマホからタスクを指示して、デスクトップで実行させる」とか「会議中にスマホでタスクをDispatchして、戻ったら完了している」とか。
テキトー教師テキトー教師
受講生さんで実際にやっているのが「電車の中でスマホからClaude Codeにタスクを投げて、オフィスに着いたらPRができている」という使い方です。これはかなり理想的な開発ワークフローだと思いますよ。
室谷室谷
--teleportフラグも地味に便利で、Web版で走らせているセッションをターミナルに引き込むことができます。逆も然りで、ターミナルのセッションをWeb版に移せる。

料金プランと実際のコスト感

室谷室谷
ブラウザ関連機能の使用は、基本的に既存のClaudeサブスクリプションの範囲内です。ただし、Claude Code Web版はあくまでトークンを消費するので、プラン選びは重要ですね。
テキトー教師テキトー教師
2026年4月時点のプランを整理すると・・・
プラン月額Claude Code Web版Claude in Chrome
Free無料不可不可
Pro$20可(Pro)可(Haiku 4.5のみ)
Max 5x$100可(モデル選択可)
Max 20x$200可(モデル選択可)
Team$25/人可(モデル選択可)
Enterprise要相談可(premium seats等)可(モデル選択可)
室谷室谷
ブラウザ機能を本格的に使うならMaxプラン以上がおすすめですね。Proだと制限に当たりやすいし、Claude in ChromeのモデルがHaiku 4.5固定になるので。
テキトー教師テキトー教師
コミュニティのメンバーさんがよく言うのが「ブラウザ自動化で業務時間が削減できたら、プラン代はすぐ回収できる」ということです。たとえば週に2時間かかっていたリサーチ作業が30分に減れば、月額$100のMaxプランは余裕で元が取れます。
室谷室谷
MYUUUでのエンジニアの感覚では、Claude Code + Chrome連携を使ってフロントエンド開発のデバッグ時間が体感で40〜50%くらい短縮されていますね。

よくある質問

テキトー教師テキトー教師
受講生さんからよく来る質問をまとめておきます。
室谷室谷
まず「Claude Codeはブラウザだけで完結できますか?」という質問。答えはYesです。

Web版(claude.ai/code)を使えば、ローカルへのインストールなしにClaude Codeの主要機能が使えます。GitHubリポジトリさえあれば始められます。
テキトー教師テキトー教師
「Claude in ChromeはClaude Code Web版と何が違うの?」という質問もよく来ますね。Claude Code Web版はコードを書くためのツール。

Claude in Chromeはブラウザ操作を自動化するツール。まったく別のサービスです。
室谷室谷
「EdgeやFirefoxでは使えませんか?」という質問も多いですね。Claude in Chromeは名前の通りChromeのみ対応です。

他のChromiumベースのブラウザ(Edge、Brave等)も非対応。これはAnthropicが意図的にChrome限定にしている仕様です。
テキトー教師テキトー教師
「ブラウザで機密情報を扱っても大丈夫ですか?」という質問。これは前述の通り、注意が必要です。

スクリーンショットベースで動作するので、表示中の情報がすべてClaudeに送信されます。機密情報が画面に表示される場面でのブラウザ自動化は避けた方がいいですね。
室谷室谷
「スマホでClaude Codeは使えますか?」という質問も来ます。Claude iOS Appでのブラウジングと簡単なタスク指示はできます。

ただし本格的なコーディングはデスクトップブラウザやターミナルがおすすめです。Remote Control機能でスマホからデスクトップセッションを操作する、という使い方が現実的ですね。

まとめ:Claude Codeブラウザ機能の使い分け

室谷室谷
改めて整理しましょう。Claude Codeのブラウザ関連機能は、目的によって使い分けるのが大事です。
テキトー教師テキトー教師
ローカル環境なしにClaude Codeを試したいならWeb版一択ですね。GitHubと連携するだけで始められます。
室谷室谷
業務の自動化やリサーチの効率化が目的なら、Claude in Chromeが強力です。ただし機密情報を扱う作業への適用は慎重に。
テキトー教師テキトー教師
フロントエンド開発を効率化したいなら、ターミナルのClaude Code + Chrome拡張の連携が一番効果的です。「コード書く → ブラウザ確認 → エラー修正」のサイクルが自動化されます。
室谷室谷
MYUUUでの実感では、この3つを場面によって使い分けることで、開発生産性が大幅に上がりました。「ブラウザを使う」という行為自体をClaude Codeのエコシステムに統合していくのが、これからのAI活用の方向性だと思いますね。
テキトー教師テキトー教師
2026年はこのブラウザ連携がさらに進化していくと思います。ベータ版という位置づけですが、既に実用レベルに達している機能も多いので、積極的に試してみることをおすすめします。

出典


Claude Code Web版の実践的な使い方:Auto-fix PRとRoutines

室谷室谷
Web版の中でも特に実務で使いこなすと差が出るのがAuto-fix PRとRoutinesです。これ、使いこなしている人がまだ少ないんですよね。
テキトー教師テキトー教師
Auto-fix PRは「PRを作ったら、あとはClaude Codeが自動で面倒を見る」機能ですね。CIが落ちたらClaudeが原因を調査して修正をプッシュしてくれる。

レビュアーのコメントにも自動対応します。

Auto-fix PRの仕組み

室谷室谷
Auto-fix PRの前提として、リポジトリにClaude GitHub Appのインストールが必要です。インストールすると、PRのCI失敗やレビューコメントのタイミングでClaudeが動き始めます。
テキトー教師テキトー教師
有効にする方法は3つあります。
  • Web版でPRを作った場合:CIステータスバーから「Auto-fix」を選択
  • ターミナルからPRブランチで:/autofix-prコマンドを実行
  • スマホのモバイルアプリから:「このPRをauto-fixして」とClaudeに伝える
室谷室谷
注意点として、Auto-fix PRはClaudeがあなたのGitHubアカウントでコメントを投稿します。「Claude Codeが書いた」というラベルは付くんですが、コメントはあなたの名前で投稿される。
テキトー教師テキトー教師
Atlantis、Terraform Cloud、GitHub Actionsなどのコメントトリガー型自動化ツールを使っているリポジトリでは注意が必要です。ClaudeのコメントがそれらのWorkflowを意図せず発火させる可能性があります。

インフラのデプロイを自動化しているリポジトリでのAuto-fix有効化は特に慎重に。

Routines:定期タスクの自動化

室谷室谷
RoutinesはClaude Code Web版からスケジュール実行できる機能です。「毎朝9時にこのリポジトリのテストを実行してスラックに結果を投稿する」みたいな定期タスクを組める。
テキトー教師テキトー教師
Web版からの設定だけでなく、CLIから/scheduleコマンドでも設定できます。Anthropicのクラウドで実行されるので、ローカルマシンがオフでも動きます。
室谷室谷
MYUUUで実際に使っているRoutinesをいくつか挙げると・・・
  • 毎週月曜朝、先週のPRをレビューしてアーキテクチャ上の懸念をレポート
  • 毎日深夜、ステージング環境でE2Eテストを実行してエラーがあれば通知
  • GitHubのissueが作られたら自動で一次トリアージしてラベル付け
テキトー教師テキトー教師
これ、以前はエンジニアが手動でやっていた作業を全部自動化できるんですよね。「レビューが追いつかない」という問題を根本から解決できる可能性があります。

Web版とローカル版の使い分け:どちらを選ぶべきか

テキトー教師テキトー教師
受講生さんからよく聞かれるのが「Web版とターミナル版、どちらを使えばいいですか?」という質問です。整理すると、用途によって使い分けるのが正解です。
室谷室谷
ポイントをまとめると・・・
シーンおすすめ
環境構築せずに試したいWeb版
ローカルファイルを直接扱いたいターミナル版
長時間タスクをバックグラウンドで実行Web版
MCPサーバーをフル活用したいターミナル版(設定はrepoに入れればWeb版でも可)
フロントエンド開発でブラウザデバッグもターミナル版 + Chrome拡張
スマホから指示したいWeb版 or Remote Control
PRレビューの自動化Web版(Auto-fix PR)
室谷室谷
「どちらか一方を選ぶ」というよりは、場面によって使い分けるのが実際の使い方ですね。MYUUUのエンジニアも、普段はターミナルで開発しながら、長時間タスクはWeb版に投げる、という使い分けをしています。
テキトー教師テキトー教師
「--teleport」機能がまさにそれを実現していて、Web版で走らせているセッションをターミナルに引き込んだり、逆にターミナルのセッションをWeb版に移したりできます。途中でシームレスに切り替えられるのは便利ですよね。
室谷室谷
Web版の制約として「ローカルファイルへのアクセスができない」というのがあります。GitHubにpushされていないコードや、ローカルの環境変数、ローカルのDBなどはWeb版からアクセスできません。

ここはターミナル版の方が圧倒的に強い。

Claude Code Web版の制限と注意点

室谷室谷
Web版を使う上で知っておくべき制限がいくつかあります。知らずに使うと「なんで動かないんだろう?」となる部分です。
テキトー教師テキトー教師
代表的なものをまとめるとこうなります。
制限詳細
GitHubリポジトリ必須GitHub連携が前提。GitHub以外(GitLab等)は現時点で非対応
ローカルファイルアクセス不可GitHubにpushされたコードのみ対象
静的APIトークン・シークレットは慎重に専用のシークレットストアは未実装。環境変数として保存すると見える人には見える
AWS SSOなどのブラウザ認証は非対応インタラクティブな認証が必要な場合はターミナル版を使う
Zero Data Retention組織はWeb版不可ZDR有効な組織はcloudセッション機能全体が使えない
室谷室谷
シークレット管理の部分は本当に気をつけてほしいんですよね。現在、Web版の専用シークレットストアは未実装で、環境変数として保存することになります。

環境設定にアクセスできる人には見えてしまう。本番環境のAPIキーをそのまま入れるのは危険です。
テキトー教師テキトー教師
セッションの共有機能もあって、Proプランは「Public(claude.aiにログインしているユーザーなら誰でも見られる)」か「Private」の2択になっています。セッションにプライベートリポジトリのコードや認証情報が含まれている場合、Publicには絶対しないように注意です。
室谷室谷
TeamやEnterpriseプランは「Team可視性(同じOrganizationのメンバーのみ)」と「Private」の選択肢があるので、ビジネス利用はTeam以上を選ぶのが安全ですね。

Claude in Chrome の権限設定とコントロール

テキトー教師テキトー教師
Claude in Chromeを使いこなすには、権限の仕組みを理解しておく必要があります。ここが分かっていないと、使いたいときに使えなかったり、逆に不必要なアクセスを許可してしまったりします。
室谷室谷
権限はWebサイトごとに設定できます。/chromeコマンドの「Manage permissions」から確認・編集できる。

「このサイトではアクションを常に許可する」「このサイトでは毎回確認する」という粒度でコントロールできます。
テキトー教師テキトー教師
「Ask before acting」モードを使うと、Claudeが作業計画を提示して承認を求めてから実行します。複雑なブラウザワークフローを初めて実行するときはこのモードで確認するのがおすすめです。
室谷室谷
TeamやEnterpriseの場合、管理者が組織全体でClaude in Chromeの有効/無効を制御できます。アクセス許可するサイトのホワイトリスト・ブラックリストも管理者が設定できるので、業務で使う場合はIT管理者に確認するといいですね。

Chrome拡張が要求する権限の意味

テキトー教師テキトー教師
Claude in Chromeをインストールすると、いくつかの権限を要求されます。これが何のために必要かを理解しておくと安心して使えます。
室谷室谷
代表的なものを見てみましょう。
権限目的
readingListウェブページのテキストを読んでタスクを支援
debuggerブラウザを実際に制御(クリック・文字入力・スクショ)
tabsタブを開く・閉じる・切り替え
alarmsスケジュールタスクを指定時刻に実行
system.display画面サイズを把握して正確な位置をクリック
nativeMessagingClaude DesktopやClaude Codeとのシームレスな連携
downloadsファイルのダウンロードと保存
テキトー教師テキトー教師
debugger権限が一番パワフルで、これがあるからClaude がブラウザを自由に操作できるんですよね。裏を返せば、この権限がある分だけリスクもあるということは理解しておく必要があります。

ブラウザからClaude Codeを使い始めるためのステップ

室谷室谷
最後に、「どこから始めればいいか」を整理しておきましょう。
テキトー教師テキトー教師
目的別にスタートパスを示すとこうなります。

パターン1:Claude Code Web版から始めたい

室谷室谷
インストール不要でとりあえず試したい方向けです。
1. claude.ai にアクセス、有料プランに登録(Pro以上)
2. https://claude.ai/code にアクセス
3. GitHubアカウントを連携(初回セットアップ画面の指示に従う)
4. リポジトリを選択してタスクを投げる
テキトー教師テキトー教師
これだけです。本当にシンプルになりました。

以前はターミナルのセットアップで詰まる人が多かったですが、Web版を入口にすることでそのハードルがなくなりましたね。

パターン2:Claude in Chrome を試したい

室谷室谷
ブラウザ自動化に興味がある方向けです。
1. Proプラン以上に登録
2. Google Chromeで https://claude.ai/chrome にアクセス
3. 「Chromeに追加」をクリックして拡張をインストール
4. Claudeアカウントでサインイン
5. サイドパネルを開いて自然言語でタスクを指示
テキトー教師テキトー教師
まずは「このページの情報をまとめて」みたいな軽いタスクから始めるのがおすすめです。いきなり重要なサイトの操作を任せるのではなく、リスクの低いタスクで動作確認してから本番に移行する。

パターン3:Claude Code + Chrome連携を使いたい(開発者向け)

室谷室谷
フロントエンド開発の効率化が目的の方向けです。
1. Claude Codeをターミナルにインストール(npm install -g @anthropic-ai/claude-code)
2. Maxプラン以上に登録(Chrome連携の安定利用にはMaxを推奨)
3. Claude in Chrome拡張をインストール(上記パターン2の2-4と同じ)
4. ターミナルから claude --chrome で起動、または /chrome コマンド
5. 「ブラウザでhttp://localhost:3000を開いて、ヘッダーのデザインを確認してください」等と指示
テキトー教師テキトー教師
開発中のローカルサーバーをブラウザで開いて確認させる、というのがすぐ使える活用法ですね。localhostへのアクセス権を付与しておけば、あとは自然言語で「このコンポーネントの見た目を確認して、CSSの問題があれば直して」と指示するだけです。

2026年のClaude Codeブラウザ機能:今後の展望

室谷室谷
ここまで現状を解説してきましたが、Claude Codeのブラウザ連携はまだ進化の途中です。現時点でベータ版という位置づけの機能が多い。
テキトー教師テキトー教師
Claude in Chromeが「全有料プランへの拡大」を完了したのが2025年末。Routinesの一般提供、Auto-fix PRの安定化など、2026年前半でかなり機能が充実してきました。
室谷室谷
個人的に注目しているのが、MCP(Model Context Protocol)との統合がさらに深まる点です。Chrome MCPを使うと、Claude Code のターミナルセッションからブラウザ操作を自由にプログラムできる。

今後はより高度な自動化が標準化されていくと思います。
テキトー教師テキトー教師
教育の観点から言うと、ブラウザ版の充実によって「プログラミング経験ゼロでもClaude Codeを使い始めやすくなった」のが大きな変化です。以前はnpmのインストールで詰まっていた方が、今はブラウザで試せる。
室谷室谷
Claude Code on the Web(claude.ai/code)は、ある意味「Replit」や「GitHub Codespaces」に近いポジションにもなってきましたね。ブラウザだけでフルスタックの開発ができる、という世界を目指している感じがします。
テキトー教師テキトー教師
AIエージェントがブラウザを介して外部サービスと連携する、というのはこれからの開発の標準的な姿になっていくと思います。今のうちにClaude Code + ブラウザの連携に慣れておくと、2026年後半以降にも強みになりますよ。
室谷室谷
Claude in Chrome、Claude Code Web版、Remote Controlと、ブラウザ経由でClaude Codeを操作する手段が3つそろったのが今の状況。この組み合わせを自分のワークフローに取り込んでいくのが、AI活用の次のステップだと思いますね。
.AI TIMES一覧に戻る