Claude Code Web完全ガイド【2026年最新】：ブラウザでAIコーディングを始める方法

室谷

今回はClaude Code Webの話をしたいんですよね。「claude code web」って検索する人がかなり増えてきていて、.AI（ドットエーアイ）のコミュニティでも「ブラウザだけで使えるの？」って聞かれることが多くて・・・

テキトー教師

受講生さんからも毎週聞かれますね。「PCがなくてもClaude Codeって使えますか？」っていう質問。

答えはYesなんですが、正確には「Claude Code on the Web」っていう専用の機能があるんですよ。

室谷

そうです。ローカルのターミナルで動かすClaude Codeとは別に、ブラウザ上で非同期にコーディングタスクを実行できるクラウド版があるんですよね。

僕も3連休に外出先からスマホ経由で使ってみて、正直「MVPフェーズのプロダクトならこれで十分だな」って感じましたよ。

テキトー教師

一言で言うと何ができるんですか？という整理からしましょうか。Claude Code on the Webは「GitHubリポジトリと連携して、ブラウザ上でコーディングタスクをAnthropicのクラウドインフラで実行する機能」ですね。

自分のマシンにインストール不要、ターミナルも不要です。

室谷

今回の記事では、Claude Code Webとは何かという基本から、使い方、料金、Web Searchとの関係まで全部カバーしていきます。

Claude Code on the Webとは？

Claude Code on the Webのアーキテクチャ図：ユーザー、claude.ai/code、Anthropicクラウド、GitHubリポジトリの連携図（公式サイトより）

室谷

まず基本から整理しましょう。Claude Code on the Webはから使えるサービスで、現在「リサーチプレビュー」段階です。

Claudeのクラウドインフラ上でコーディングタスクを非同期実行できます。

テキトー教師

「非同期実行」っていうのがポイントですね。ターミナル版のClaude Codeは、自分のPCでリアルタイムにClaude Codeが動く。

でもWeb版は、Anthropic側のサーバーで動いていて、自分はブラウザで結果を確認するだけです。

室谷

具体的に言うと、GitHubのリポジトリを指定して「このバグ直して」ってタスクを送ると、Anthropicが管理する仮想マシン上でリポジトリがクローンされて、Claude Codeが動いて、結果をプルリクエストとして出してくれる、という流れです。

テキトー教師

なのでPCがなくても、スマホのブラウザでも使えるんですよね。外出先から開発指示を出して、帰宅したら「PRができてました」っていう体験ができる。

室谷

使い方としては大きく4つのシナリオがあって、公式ドキュメントに明記されています。

質問への回答: コードのアーキテクチャや実装方法を聞く
バグ修正とルーティンタスク: 頻繁な操作が不要な明確なタスク
並列作業: 複数のバグ修正を同時に処理する
ローカルにないリポジトリ: チェックアウトしていないコードで作業する

テキトー教師

この「並列作業」が個人的には一番インパクト大きいと思っています。ターミナル版だと1つのセッションで1タスクですけど、Web版は複数セッションを同時に走らせられる。

「認証バグの修正」「APIドキュメント更新」「ロガーのリファクタリング」を同時に走らせて、全部終わったらPRを確認する、というのが現実的にできるんですよね。

室谷

MYUUUでも似たことをやっていて、複数タスクを並行でClaude Code Webに投げておいて、その間に自分はミーティングや別の作業をする、というパターンが増えてきてますね。

誰が使える？プランと料金

テキトー教師

ここは受講生さんから必ず聞かれるポイントですね。「Web版は無料で使えるんですか？」って。

室谷

残念ながらFreeプランでは使えないんですよね。公式ドキュメントによると、Claude Code on the Webが使えるのは次のプランのユーザーです。

プラン	対応
Free	非対応
Pro（月額$20）	対応
Max（月額$100〜）	対応
Team	対応
Enterprise（プレミアムシートまたはChat + Claude Codeシート）	対応

テキトー教師

Proプランから使えるのは大きいですよね。月額$20でブラウザから非同期コーディングができるなら、個人開発者にとっては十分すぎるくらいです。

室谷

ただし「リサーチプレビュー」段階なので、使い勝手や機能はまだ変わる可能性があります。料金体系も今後変更される可能性はある。

2026年4月時点では上記のとおりですが、最新情報はを確認してください。

テキトー教師

Web版とターミナル版で料金が別になるわけじゃないですよね？プランの中に含まれている、という認識で合っていますか？

室谷

そうです。Claude Codeのサブスクリプション（Pro、Max等）に含まれていて、追加料金は発生しない。

ただしAPI経由で使う場合はまた別で、API課金が発生します。Claude Code on the Webはクラウドインフラ込みで使えるというのがポイントです。

ブラウザからの始め方

テキトー教師

実際の使い方に進みましょう。始め方は2つありますね。

ブラウザから始める方法と、ターミナルから始める方法。

室谷

まずブラウザからの場合のフローはシンプルです。

claude.ai/code にアクセスする
GitHubアカウントを接続する
対象リポジトリにClaude GitHub Appをインストールする
デフォルト環境を選択する
コーディングタスクを送信する
diffビューで変更を確認し、コメントで反復してからプルリクエストを作成する

テキトー教師

GitHubアプリのインストールが必要なのが最初のハードルですね。初めて使う受講生さんが「GitHubと連携できない」とつまずくことがあります。

室谷

GitHub Appをリポジトリにインストールしないと、Claudeがリポジトリをクローンしてプッシュできないので、ここは避けられないステップです。ただ一度やってしまえばあとはスムーズです。

テキトー教師

ターミナルからの始め方も説明しておきましょうか。こちらのほうが楽なこともあります。

室谷

ターミナルから始める場合は、Claude Codeのセッション内で /web-setup コマンドを実行するだけです。ローカルの gh コマンドの認証情報を使ってGitHubと接続してくれて、デフォルトクラウド環境を作成して、完了したらブラウザで claude.ai/code を自動で開きます。

# Claude Codeのセッション内で実行
/web-setup

テキトー教師

前提として gh コマンド（GitHub CLI）がインストールされていて、gh auth login で認証済みである必要がありますね。普段からGitHub CLIを使っている人なら追加の作業はほぼ不要です。

室谷

/web-setup の便利なところは、ローカルの gh 認証情報をそのままCloud版に同期してくれることです。GitHub Appのインストールをスキップして基本的なセッションを使いたい場合はこれが早いですね。

ただし Auto-fix 機能（後述します）を使いたい場合はGitHub Appのインストールも必要になります。

Web版の仕組み：タスク実行からPR作成まで

Claude Code on the Webの公式ドキュメント（Anthropicより）

テキトー教師

タスクを送信してからPRができるまでの流れを整理しておきましょう。これを知っておくと、何かトラブルがあったときに原因を特定しやすくなります。

室谷

公式ドキュメントに詳しく書かれていて、タスク実行のフローはこうです。

リポジトリのクローン: GitHubリポジトリがAnthropicの管理する仮想マシンにクローンされる
環境セットアップ: セキュアなクラウド環境が準備される。設定済みの場合はセットアップスクリプトも実行
ネットワーク設定: インターネットアクセスが設定に基づいて構成される（デフォルトは制限あり）
タスク実行: コードの分析、変更、テスト実行、動作確認が行われる
完了通知: 終わったら通知が届き、PRを作成できる
結果: 変更内容がブランチにプッシュされ、プルリクエスト作成の準備が完了する

テキトー教師

「Anthropicの管理する仮想マシン」というのが重要で、自分のPCじゃないんですよね。だから自分が寝ている間にも動き続けるし、PCを閉じても関係ない。

室谷

そうです。これがWeb版の一番のメリットだと思っていて・・・セッションがクラウドで動いている間、自分は完全に別の作業ができる。

外出してもいい、スマホのClaudeアプリから進捗だけ確認して、追加の指示も送れる。

テキトー教師

クラウド環境はデフォルトでUbuntu 24.04で、Python、Node.js、Ruby、PHP、Java、Go、Rust、C++など主要な言語のランタイムが最初から入っています。PostgreSQL 16やRedis 7.0のデータベースも含まれています。

室谷

何が入っているか確認したい場合は、Claude Code on the Webのセッション内で check-tools を実行すると、インストール済みの言語とバージョン一覧が出ます。

# セッション内で実行
check-tools

テキトー教師

公式の環境に含まれていないツールが必要な場合はセットアップスクリプトで追加できますね。例えば gh コマンドはデフォルトイメージに含まれていないので、必要な場合はこうです。

#!/bin/bash
apt update && apt install -y gh

室谷

セットアップスクリプトは新しいセッション開始時にだけ実行される。既存セッションを再開するときはスキップされます。

ここが落とし穴で、スクリプトに問題があると「セッションが起動しない」ということが起きるので注意が必要です。

diffビューとAuto-fix：Web版ならではの機能

室谷

Web版ならではの機能として、diffビューとAuto-fixがあります。この組み合わせが開発体験をかなり変えると思っています。

テキトー教師

diffビューから説明しましょうか。Claudeがコードに変更を加えると、画面に変更統計インジケーターが表示されます。

「+12 -1」みたいな感じで、追加行数と削除行数が出る。

室谷

そのインジケーターをクリックすると、diffビューアが開きます。左側にファイルリスト、右側に各ファイルの変更内容が表示されて、GitHubやIDEに切り替えなくてもコード差分を確認できます。

テキトー教師

変更を見て「ここは違う」と思ったら、インラインでコメントを入れてClaude Code Webとやり取りしながら修正を重ねられる。PRを作成する前に全部ブラウザ上で完結するんですよね。

室谷

以前は差分を確認するにはGitHubやIDEに切り替える必要があったんですが、それが不要になった。

テキトー教師

Auto-fix機能も面白いですよね。PRを作成した後、CIが失敗したりレビュアーからコメントが来たりすると、Claudeが自動的に調査して修正をプッシュしてくれる機能です。

室谷

これを使うにはClaude GitHub AppをリポジトリにインストールしてGitHub webhookを受け取れるようにする必要があります。設定の手順はこうです。

Claude Code on the WebでPRを作成した場合 → CIステータスバーを開いて「Auto-fix」を選択
モバイルアプリから → 「watch this PR and fix any CI failures or review comments」と伝える
既存のPR → PR URLをセッションに貼り付けてAuto-fixを指示する

テキトー教師

Claudeがどう判断して動くか、という挙動も整理しておくと安心ですね。3パターンあります。

明確な修正: Claudeが確信を持てる修正なら自動で変更をプッシュして説明する
曖昧なリクエスト: 解釈が複数ある場合や重要な設計判断が必要な場合は先に聞いてくる
重複・無アクション: 同じイベントが重複した場合や変更不要の場合はセッションに記録して終了

室谷

注意点として、Auto-fixを使うとClaude（あなたのGitHubアカウントで）がレビューコメントに返信することがあります。ユーザー名の下に表示されるけど「Claude Codeから」というラベルがつくので、レビュアーには分かるようになっています。

テキトー教師

Atlantis、Terraform Cloud、カスタムGitHub Actionsなどのコメントトリガー自動化を使っているリポジトリでは特に注意が必要ですね。Claudeのコメントがそれらのワークフローを誤トリガーする可能性があります。

インフラのデプロイが走るリポジトリにはAuto-fixを使わない方が安全です。

ターミナルとの連携：--remoteとテレポート

室谷

Web版とターミナル版をシームレスに行き来できるのも、使い込むとわかる便利な点なんですよね。

テキトー教師

2方向ありますよね。ターミナルからWeb版を起動する「--remote」と、Web版のセッションをターミナルで続ける「テレポート」。

室谷

まず「--remote」から。ターミナルでClaude Codeを使いながら、特定のタスクだけWeb（クラウド）で非同期実行したい場合に使います。

claude --remote "src/auth/login.ts の認証バグを修正して"

テキトー教師

このコマンドを実行すると、claude.aiに新しいWebセッションが作られて、タスクがクラウドで動き始めます。自分はターミナルで他の作業を続けられる。

室谷

進捗確認は /tasks コマンドでできます。複数のタスクを並列実行している場合もここで一覧が見られる。

# ターミナルのClaude Code内で
/tasks

テキトー教師

面白いのが「plan → remote」というパターンですね。複雑なタスクの場合、まずPlanモードで一緒に方針を決めてから、実行はWebに投げるというアプローチです。

室谷

具体的に言うと、まずPlanモードで起動して・・・

claude --permission-mode plan

Planモードでは読み取りとコードの探索だけできて、変更は加えられない。ここで一緒に設計を詰めて、方針が決まったら改めてWebセッションで実行します。

claude --remote "docs/migration-plan.md の移行計画を実行して"

テキトー教師

戦略は人間が決めて、実行はClaudeにやらせる、という役割分担ですね。これは講座でも「AIエージェントとの協働」として教えているパターンに近いです。

室谷

逆方向の「テレポート」も便利です。Web版で作業していたセッションをターミナルに引き継ぐ機能で、方法は4つあります。

/teleport（または /tp）: Claude Code内で実行するとWebセッションの一覧が出て選べる
claude --teleport: コマンドラインから対話的に選択できる
claude --teleport <session-id>: 特定のセッションを直接再開する
Web UIから: 「Open in CLI」をクリックするとターミナルで貼り付けるコマンドがコピーされる

テキトー教師

テレポートするには条件があって、ローカルで未コミットの変更がないこと、同じリポジトリのチェックアウトであること、Webセッションと同じアカウントで認証されていること、の3点が必要です。

室谷

未コミットの変更がある場合はスタッシュを促されます。テレポートが完了すると、Webセッションで作業していたブランチが自動的にfetchされてチェックアウトされ、会話履歴もターミナルに引き継がれます。

Claude Code Web SearchとWeb版の関係

テキトー教師

よく混同される点として「Claude Code Web」と「Claude Code Web Search」の違いがあります。これは別の機能ですね。

室谷

全然違う話なんですよね。「Claude Code on the Web」はブラウザでコーディングタスクを実行するサービス。

「Web Search」はClaude Codeがコーディング作業中にウェブを検索する機能、という感じで、レイヤーが違います。

テキトー教師

Claude Codeのセッション内でウェブ検索を使いたい場合、MCPサーバー経由でWeb Search機能を追加する方法があります。設定は .claude/settings.json のMCPセクションに追加します。

室谷

ただしClaude Code Webのセッション内でウェブ検索を使うと、レートリミットにすぐ当たることがあるんですよね。別の方法として、CodexをリサーチャーとしてClaude CodeからMCP経由で呼び出すと、トークンをかなり節約できます。

テキトー教師

Claude Code Web版の環境設定で「ネットワークアクセス」が制限されているのも関係していて・・・デフォルトは「制限あり」で、パッケージレジストリなど必要なドメインはアクセス可能ですが、任意のウェブ検索は制限されています。

室谷

ネットワークアクセスの設定は環境設定で変更できて、「制限なし」「制限あり（デフォルト）」「ネットワーク無効」の3段階から選べます。ただし制限を外すと外部サービスへのアクセスが増えるのでセキュリティには注意してください。

セッション管理とチーム活用

テキトー教師

セッションをどう管理するか、チームで使う場合の設定も説明しておきましょう。

室谷

まずセッション管理から。Web版ではセッションが積み重なっていくので、定期的に整理するといいですね。

アーカイブすると一覧から非表示になりますが、削除ではないので後から「アーカイブ済み」フィルターで見られます。削除は元に戻せないので注意です。

テキトー教師

チームやEnterpriseアカウントではセッションの共有機能があります。「Private」と「Team」の2つの公開範囲が選べて、Teamにすると組織内のメンバーが見られる状態になります。

室谷

Pro・MaxアカウントはPrivateとPublicの2択で、Publicにするとclaude.aiにログインしているユーザーなら誰でも見られます。GitHubのプライベートリポジトリのコードが含まれる場合もあるので、Publicにする前に内容を確認しておくことを強くおすすめします。

テキトー教師

もう一つ便利なのが「スケジュール実行」です。定期的なPRレビュー、依存関係の監査、CI失敗の分析などを繰り返し実行するスケジュールを設定できます。

室谷

毎日朝に「新しい依存関係の脆弱性がないかチェック」とか「昨日のPRをレビューしておく」みたいなことを自動化できる。CI/CDパイプラインに近いことがプログラミングなしで設定できるようになってきていますよね。

セキュリティとアイソレーション

室谷

Web版はAnthropicのクラウドで動くということで、セキュリティが気になる人も多いと思うんですよね。コードが外部に出るわけですから。

テキトー教師

基本的なアーキテクチャとして、タスクごとに独立した仮想マシン上で動作します。他のユーザーのタスクと同じ環境を共有することはありません。

室谷

ネットワークアクセスはデフォルトで制限されていて、一般的なパッケージレジストリ（npm、PyPI、RubyGemsなど）へのアクセスは許可されますが、任意のウェブサイトへのアクセスは制限されています。

テキトー教師

カスタムで許可するドメインを追加することもできますが、その場合はセキュリティのリスクを理解した上で設定する必要があります。インフラ系のリポジトリで使う場合は特に慎重に。

室谷

EnterpriseアカウントでPrivateリポジトリを扱う場合、リポジトリアクセス検証がデフォルトで有効になっています。受信者のGitHubアカウントと紐づいたアクセス権を確認するので、権限のない人がコードを見るリスクが下がります。

スマホとの組み合わせで開発の幅が広がる

テキトー教師

「スマホから開発できる」というのが、Claude Code on the Webの意外と大きなメリットですよね。

室谷

iOSとAndroidのClaudeアプリからもClaude Code on the Webの機能が使えます。外出先でタスクを新しく開始したり、進行中のセッションを監視したり、コメントで指示を追加したりができます。

テキトー教師

「会議中にiPhoneからバグ修正を指示して、会議が終わったらPRができていた」という体験をするとその可能性を感じますよね。

室谷

音声入力と組み合わせると楽なんですよね。スマホの音声入力で指示を話すとそのままタスクになる。

テキトー教師

Vercelとの組み合わせも便利ですね。Vercelはブランチを作成すると自動的にプレビューURLが発行されるので、Claude Code WebがブランチにプッシュするとVercelがプレビュー環境を作ってくれる。

スマホのブラウザでそのプレビューURLにアクセスして確認してマージ、という流れが完結します。

室谷

MVPフェーズのプロダクト開発なら、PCなしでも実用的な開発ができてしまう。この体験は、開発のやり方そのものを変えつつあると感じています。

よくある質問

Q: Claude Code WebとRemote Controlは何が違うの？

室谷

混同しやすいんですが、別の機能です。Claude Code on the Webはタスクをクラウドで実行します。

Remote Controlは自分のPCでClaude Codeを動かしながら、別のデバイスのブラウザからそのセッションにアクセスする機能です。

テキトー教師

簡単に言うと「どこでClaude Codeが動いているか」の違いですね。Web版はAnthropicのサーバー、Remote Controlは自分のPC。

どちらもブラウザから操作できますが、実行環境が違います。

Q: Freeプランでは本当に使えない？

テキトー教師

現時点でFreeプランは対象外です。Proプラン（月額$20）から利用可能です。

ただしリサーチプレビュー段階なので、今後変わる可能性はゼロではありません。

Q: Web版でMCPは使える？

室谷

使えますが、注意点があります。ローカルの ~/.claude/settings.json で設定したユーザーレベルの設定はクラウドセッションには引き継がれません。

クラウドで使うMCP設定は、リポジトリにコミットされた .claude/settings.json に書く必要があります。

テキトー教師

セットアップスクリプトやSessionStartフックも同じで、クラウド環境で使いたい設定はリポジトリにコミットしておくのが基本です。

Q: ウェブ検索（Web Search）はWeb版でも使える？

室谷

Web検索はClaude Code on the Webの機能とは別で、MCP経由で追加できます。ただし前述の通り、クラウド環境のネットワーク設定によっては制限される場合があります。

ネットワーク設定を「制限なし」にすれば使いやすくなりますが、セキュリティとのトレードオフになります。

まとめ：Claude Code Webをどう使うか

室谷

まとめると、Claude Code on the Webが特に力を発揮するのはこういう場面だと思います。

PC前にいない時間を有効活用したい: 移動中や会議中にタスクを投げておく
複数タスクを並列で進めたい: ターミナル版より並列実行しやすい
ローカルにないリポジトリの作業: チェックアウトせずに作業できる
バグ修正やルーティン作業の自動化: CI失敗の自動修正（Auto-fix）が便利

テキトー教師

逆に「頻繁にステアリングが必要な作業」「デバッグしながら試行錯誤したい場合」はターミナル版の方が向いています。ウォーターフォール的に「指示して待つ」のがWeb版で、アジャイルに「対話しながら作る」のがターミナル版、というイメージです。

室谷

最初に試すなら「今やってるバグ修正をWeb版に投げてみる」だけで十分です。Proプランなら追加費用なしで試せるので、まずにアクセスしてGitHubと連携するところから始めてみてください。

テキトー教師

使ってみると「これ、もっと早く使えばよかった」ってなる人が多いです。コーディング体験の幅が広がるので、ぜひ試してみてください。

Claude Code Web完全ガイド【2026年最新】：ブラウザでAIコーディングを始める方法