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.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 |

テキトー教師「Web版」と「Claude in Chrome」は全く別物なんですよ、これ。Web版はClaude Codeのターミナル機能をブラウザ上に持ってきたもの。
Claude in Chromeはブラウザそのものを操作するエージェント機能です。
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が必要です。
それとEnterprise の場合はpremium seatsかChat + Claude Code seatsが必要です。
テキトー教師実際、Web版でできることを整理するとこうなりますね。
Web版でできること
室谷Web版の大きなメリットは「ブラウザを閉じてもセッションが継続する」点です。長時間かかるタスクを走らせておいて、後でブラウザを開いて確認、みたいな使い方ができる。
テキトー教師それが便利なんですよ。講座でも紹介しているのが「夜中にClaude Codeで大きなタスクを走らせておいて、朝起きたら確認する」というワークフロー。
ローカルで走らせると画面スリープの問題が出ることもあるんですが、Web版はAnthropicのクラウドで動いているので関係ない。
ローカルで走らせると画面スリープの問題が出ることもあるんですが、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に向いています。
リポジトリ単位で細かく制御できるので、チームやEnterpriseに向いています。
室谷もう一つが
個人開発者でgh CLIを既に使っている人はこっちの方が楽ですね。
/web-setupコマンドを使う方法。ターミナルで claude --web-setup を実行して、ローカルのgh CLIのトークンをClaudeアカウントに同期する。個人開発者でgh CLIを既に使っている人はこっちの方が楽ですね。
テキトー教師セキュリティを重視するチームの場合は、GitHub Appの方がコントロールしやすいです。どのリポジトリにアクセスできるかを明示的に指定できますから。
Web版のクラウド環境で使えるツール
室谷Web版のクラウド環境には、最初からいろんなツールが入っています。ローカルにインストールしなくていいんですよね。
テキトー教師これが実際のプロジェクトで使ってみると思ったより充実していて驚きます。
| カテゴリ | 含まれるもの |
|---|---|
| Python | Python 3.x、pip、poetry、uv、pytest、ruff |
| Node.js | Node 20/21/22(nvm経由)、npm、yarn、pnpm、bun |
| Ruby | 3.1/3.2/3.3(rbenv)、gem、bundler |
| Java | OpenJDK 21、Maven、Gradle |
| Go | 最新安定版 |
| Rust | rustc、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からインストールする拡張機能ですね。
Chrome Web Storeからインストールする拡張機能ですね。
テキトー教師教える立場から言うと、「RPAのAI版」という表現が伝わりやすいです。ただ、従来のRPAと違って事前にスクリプトを書く必要がない。
自然言語で「Yahoo!路線情報で横浜から虎ノ門の運賃を調べて」と指示するだけで動いてくれます。
自然言語で「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ツールをわざわざ使わなくてもいいシーンが増えてきましたね。

プランによるモデルの違い
テキトー教師ここ注意が必要で、使えるモデルがプランによって違います。
室谷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は速いけど、複雑な判断が必要な場面では精度が下がることがある。
| プラン | 使えるモデル |
|---|---|
| Pro | Haiku 4.5のみ |
| Max | Opus 4.6、Sonnet 4.6、Haiku 4.5から選択 |
| Team | Opus 4.6、Sonnet 4.6、Haiku 4.5から選択 |
| Enterprise | Opus 4.6、Sonnet 4.6、Haiku 4.5から選択 |
室谷ブラウザ操作はトークン消費が早いんですよ。操作のたびにスクリーンショットを撮って解析するので。
通常のチャットより何倍もトークンを使います。Proプランで使う場合は制限に注意が必要ですね。
通常のチャットより何倍もトークンを使います。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も対策を進めてきているので、正しく使えばリスクをかなり下げられます。
ただ、Anthropicも対策を進めてきているので、正しく使えばリスクをかなり下げられます。
気をつけるべきリスク
室谷主なリスクは3つです。
テキトー教師まず「プロンプトインジェクション」。これが一番注意が必要で、悪意あるWebページやメールに埋め込まれた指示文がClaudeを誤動作させる可能性があります。
Anthropicの検証ではメール内の指示でClaudeがユーザーの確認なしにメールを削除した事例も確認されています。
Anthropicの検証ではメール内の指示でClaudeがユーザーの確認なしにメールを削除した事例も確認されています。
室谷現在はサイト別の権限設定、高リスク操作前の確認要求、金融系サイトのブロックなど対策が入っていますが、完璧ではない。
テキトー教師次が「機密情報の流出リスク」。Claudeはスクリーンショットで画面内容を把握するので、表示中の個人情報やパスワードが意図せず送信される可能性があります。
室谷3つ目が「トークン消費の速さ」。ブラウザ操作は操作のたびにスクリーンショットを撮るので、通常のチャットより圧倒的にトークンを消費します。
使いすぎに注意ですね。
使いすぎに注意ですね。
安全に使うための実践ガイド
テキトー教師Anthropic公式も推奨している使い方のポイントをまとめると・・・
| 推奨事項 | 理由 |
|---|---|
| 信頼済みサイトから始める | 権限は慣れたWebサイトから先に付与する |
| 機密情報を含む操作は手動で | ネットバンキング、決済、証券口座は自分で操作する |
| 不意な動作はフィードバック報告 | 改善につながる |
| 個人情報フォームの送信は自分で | 判断と送信は人間がやる |
室谷MYUUUでの使い方は「情報収集はClaude、判断と送信は自分」というラインを引いています。リサーチや比較調査はClaude in Chromeに任せて、実際の入力・送信は自分がやる。
テキトー教師これが現時点での安全な使い方ですよね。100%任せるのはまだ早い。
AIとのコラボレーションとして使う感覚が大事です。
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リポジトリさえあれば始められます。
Web版(claude.ai/code)を使えば、ローカルへのインストールなしにClaude Codeの主要機能が使えます。GitHubリポジトリさえあれば始められます。
テキトー教師「Claude in ChromeはClaude Code Web版と何が違うの?」という質問もよく来ますね。Claude Code Web版はコードを書くためのツール。
Claude in Chromeはブラウザ操作を自動化するツール。まったく別のサービスです。
Claude in Chromeはブラウザ操作を自動化するツール。まったく別のサービスです。
室谷「EdgeやFirefoxでは使えませんか?」という質問も多いですね。Claude in Chromeは名前の通りChromeのみ対応です。
他のChromiumベースのブラウザ(Edge、Brave等)も非対応。これはAnthropicが意図的にChrome限定にしている仕様です。
他のChromiumベースのブラウザ(Edge、Brave等)も非対応。これはAnthropicが意図的にChrome限定にしている仕様です。
テキトー教師「ブラウザで機密情報を扱っても大丈夫ですか?」という質問。これは前述の通り、注意が必要です。
スクリーンショットベースで動作するので、表示中の情報がすべてClaudeに送信されます。機密情報が画面に表示される場面でのブラウザ自動化は避けた方がいいですね。
スクリーンショットベースで動作するので、表示中の情報がすべてClaudeに送信されます。機密情報が画面に表示される場面でのブラウザ自動化は避けた方がいいですね。
室谷「スマホでClaude Codeは使えますか?」という質問も来ます。Claude iOS Appでのブラウジングと簡単なタスク指示はできます。
ただし本格的なコーディングはデスクトップブラウザやターミナルがおすすめです。Remote Control機能でスマホからデスクトップセッションを操作する、という使い方が現実的ですね。
ただし本格的なコーディングはデスクトップブラウザやターミナルがおすすめです。Remote Control機能でスマホからデスクトップセッションを操作する、という使い方が現実的ですね。
まとめ:Claude Codeブラウザ機能の使い分け
室谷改めて整理しましょう。Claude Codeのブラウザ関連機能は、目的によって使い分けるのが大事です。
テキトー教師ローカル環境なしにClaude Codeを試したいならWeb版一択ですね。GitHubと連携するだけで始められます。
室谷業務の自動化やリサーチの効率化が目的なら、Claude in Chromeが強力です。ただし機密情報を扱う作業への適用は慎重に。
テキトー教師フロントエンド開発を効率化したいなら、ターミナルのClaude Code + Chrome拡張の連携が一番効果的です。「コード書く → ブラウザ確認 → エラー修正」のサイクルが自動化されます。
室谷MYUUUでの実感では、この3つを場面によって使い分けることで、開発生産性が大幅に上がりました。「ブラウザを使う」という行為自体をClaude Codeのエコシステムに統合していくのが、これからのAI活用の方向性だと思いますね。
テキトー教師2026年はこのブラウザ連携がさらに進化していくと思います。ベータ版という位置づけですが、既に実用レベルに達している機能も多いので、積極的に試してみることをおすすめします。
出典
- Claude Code Overview - Anthropic公式ドキュメント
- Claude Code on the Web - Anthropic公式ドキュメント
- Get started with Claude in Chrome - Anthropic公式サポート
- Claude in Chrome - Chrome Web Store
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有効化は特に慎重に。
インフラのデプロイを自動化しているリポジトリでの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キーをそのまま入れるのは危険です。
環境設定にアクセスできる人には見えてしまう。本番環境の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 | 画面サイズを把握して正確な位置をクリック |
| nativeMessaging | Claude 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版を入口にすることでそのハードルがなくなりましたね。
以前はターミナルのセットアップで詰まる人が多かったですが、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活用の次のステップだと思いますね。
