Claude Code Web完全ガイド【2026年最新】：ブラウザでAIコーディングを始める方法
室谷代表取締役今回はClaude Code Webの話をしたいんですよね。「claude code web」って検索する人がかなり増えてきていて、.AI（ドットエーアイ）のコミュニティでも「ブラウザだけで使えるの？」って聞かれることが多くて・・・
テキトー教師DotAI 認定講師受講生さんからも毎週聞かれますね。「PCがなくてもClaude Codeって使えますか？」っていう質問。
答えはYesなんですが、正確には「Claude Code on the Web」っていう専用の機能があるんですよ。
答えはYesなんですが、正確には「Claude Code on the Web」っていう専用の機能があるんですよ。
室谷代表取締役そうです。ローカルのターミナルで動かすClaude Codeとは別に、ブラウザ上で非同期にコーディングタスクを実行できるクラウド版があるんですよね。
僕も3連休に外出先からスマホ経由で使ってみて、正直「MVPフェーズのプロダクトならこれで十分だな」って感じましたよ。
僕も3連休に外出先からスマホ経由で使ってみて、正直「MVPフェーズのプロダクトならこれで十分だな」って感じましたよ。
テキトー教師DotAI 認定講師一言で言うと何ができるんですか？という整理からしましょうか。Claude Code on the Webは「GitHubリポジトリと連携して、ブラウザ上でコーディングタスクをAnthropicのクラウドインフラで実行する機能」ですね。
自分のマシンにインストール不要、ターミナルも不要です。
自分のマシンにインストール不要、ターミナルも不要です。
室谷代表取締役今回の記事では、Claude Code Webとは何かという基本から、使い方、料金、Web Searchとの関係まで全部カバーしていきます。
Claude Code on the Webとは？
室谷代表取締役まず基本から整理しましょう。Claude Code on the WebはAnthropicの公式サイト（claude.ai/code）から使えるサービスで、現在「リサーチプレビュー」段階です。
Claudeのクラウドインフラ上でコーディングタスクを非同期実行できます。
Claudeのクラウドインフラ上でコーディングタスクを非同期実行できます。
テキトー教師DotAI 認定講師「非同期実行」っていうのがポイントですね。ターミナル版のClaude Codeは、自分のPCでリアルタイムにClaude Codeが動く。
でもWeb版は、Anthropic側のサーバーで動いていて、自分はブラウザで結果を確認するだけです。
でもWeb版は、Anthropic側のサーバーで動いていて、自分はブラウザで結果を確認するだけです。
室谷代表取締役具体的に言うと、GitHubのリポジトリを指定して「このバグ直して」ってタスクを送ると、Anthropicが管理する仮想マシン上でリポジトリがクローンされて、Claude Codeが動いて、結果をプルリクエストとして出してくれる、という流れです。
テキトー教師DotAI 認定講師なのでPCがなくても、スマホのブラウザでも使えるんですよね。外出先から開発指示を出して、帰宅したら「PRができてました」っていう体験ができる。
室谷代表取締役使い方としては大きく4つのシナリオがあって、公式ドキュメントに明記されています。
- 質問への回答: コードのアーキテクチャや実装方法を聞く
- バグ修正とルーティンタスク: 頻繁な操作が不要な明確なタスク
- 並列作業: 複数のバグ修正を同時に処理する
- ローカルにないリポジトリ: チェックアウトしていないコードで作業する
テキトー教師DotAI 認定講師この「並列作業」が個人的には一番インパクト大きいと思っています。ターミナル版だと1つのセッションで1タスクですけど、Web版は複数セッションを同時に走らせられる。
「認証バグの修正」「APIドキュメント更新」「ロガーのリファクタリング」を同時に走らせて、全部終わったらPRを確認する、というのが現実的にできるんですよね。
「認証バグの修正」「APIドキュメント更新」「ロガーのリファクタリング」を同時に走らせて、全部終わったらPRを確認する、というのが現実的にできるんですよね。
室谷代表取締役MYUUUでも似たことをやっていて、複数タスクを並行でClaude Code Webに投げておいて、その間に自分はミーティングや別の作業をする、というパターンが増えてきてますね。
誰が使える？プランと料金
テキトー教師DotAI 認定講師ここは受講生さんから必ず聞かれるポイントですね。「Web版は無料で使えるんですか？」って。
室谷代表取締役残念ながらFreeプランでは使えないんですよね。公式ドキュメントによると、Claude Code on the Webが使えるのは次のプランのユーザーです。
| プラン | 対応 |
|---|---|
| Free | 非対応 |
| Pro（月額$20） | 対応 |
| Max（月額$100〜） | 対応 |
| Team | 対応 |
| Enterprise（プレミアムシートまたはChat + Claude Codeシート） | 対応 |
テキトー教師DotAI 認定講師Proプランから使えるのは大きいですよね。月額$20でブラウザから非同期コーディングができるなら、個人開発者にとっては十分すぎるくらいです。
室谷代表取締役ただし「リサーチプレビュー」段階なので、使い勝手や機能はまだ変わる可能性があります。料金体系も今後変更される可能性はある。
2026年4月時点では上記のとおりですが、最新情報はAnthropic公式の料金ページを確認してください。
2026年4月時点では上記のとおりですが、最新情報はAnthropic公式の料金ページを確認してください。
テキトー教師DotAI 認定講師Web版とターミナル版で料金が別になるわけじゃないですよね？プランの中に含まれている、という認識で合っていますか？
室谷代表取締役そうです。Claude Codeのサブスクリプション（Pro、Max等）に含まれていて、追加料金は発生しない。
ただしAPI経由で使う場合はまた別で、API課金が発生します。Claude Code on the Webはクラウドインフラ込みで使えるというのがポイントです。
ただしAPI経由で使う場合はまた別で、API課金が発生します。Claude Code on the Webはクラウドインフラ込みで使えるというのがポイントです。
ブラウザからの始め方
テキトー教師DotAI 認定講師実際の使い方に進みましょう。始め方は2つありますね。
ブラウザから始める方法と、ターミナルから始める方法。
ブラウザから始める方法と、ターミナルから始める方法。
室谷代表取締役まずブラウザからの場合のフローはシンプルです。
- claude.ai/code にアクセスする
- GitHubアカウントを接続する
- 対象リポジトリにClaude GitHub Appをインストールする
- デフォルト環境を選択する
- コーディングタスクを送信する
- diffビューで変更を確認し、コメントで反復してからプルリクエストを作成する
テキトー教師DotAI 認定講師GitHubアプリのインストールが必要なのが最初のハードルですね。初めて使う受講生さんが「GitHubと連携できない」とつまずくことがあります。
室谷代表取締役GitHub Appをリポジトリにインストールしないと、Claudeがリポジトリをクローンしてプッシュできないので、ここは避けられないステップです。ただ一度やってしまえばあとはスムーズです。
テキトー教師DotAI 認定講師ターミナルからの始め方も説明しておきましょうか。こちらのほうが楽なこともあります。
室谷代表取締役ターミナルから始める場合は、Claude Codeのセッション内で
/web-setup コマンドを実行するだけです。ローカルの gh コマンドの認証情報を使ってGitHubと接続してくれて、デフォルトクラウド環境を作成して、完了したらブラウザで claude.ai/code を自動で開きます。bash
# Claude Codeのセッション内で実行
/web-setup前提として
gh コマンド（GitHub CLI）がインストールされていて、gh auth login で認証済みである必要がありますね。普段からGitHub CLIを使っている人なら追加の作業はほぼ不要です。室谷代表取締役/web-setup の便利なところは、ローカルの gh 認証情報をそのままCloud版に同期してくれることです。GitHub Appのインストールをスキップして基本的なセッションを使いたい場合はこれが早いですね。ただし Auto-fix 機能（後述します）を使いたい場合はGitHub Appのインストールも必要になります。
Web版の仕組み：タスク実行からPR作成まで
テキトー教師DotAI 認定講師タスクを送信してからPRができるまでの流れを整理しておきましょう。これを知っておくと、何かトラブルがあったときに原因を特定しやすくなります。
室谷代表取締役公式ドキュメントに詳しく書かれていて、タスク実行のフローはこうです。
- リポジトリのクローン: GitHubリポジトリがAnthropicの管理する仮想マシンにクローンされる
- 環境セットアップ: セキュアなクラウド環境が準備される。設定済みの場合はセットアップスクリプトも実行
- ネットワーク設定: インターネットアクセスが設定に基づいて構成される（デフォルトは制限あり）
- タスク実行: コードの分析、変更、テスト実行、動作確認が行われる
- 完了通知: 終わったら通知が届き、PRを作成できる
- 結果: 変更内容がブランチにプッシュされ、プルリクエスト作成の準備が完了する
テキトー教師DotAI 認定講師「Anthropicの管理する仮想マシン」というのが重要で、自分のPCじゃないんですよね。だから自分が寝ている間にも動き続けるし、PCを閉じても関係ない。
室谷代表取締役そうです。これがWeb版の一番のメリットだと思っていて・・・セッションがクラウドで動いている間、自分は完全に別の作業ができる。
外出してもいい、スマホのClaudeアプリから進捗だけ確認して、追加の指示も送れる。
外出してもいい、スマホのClaudeアプリから進捗だけ確認して、追加の指示も送れる。
テキトー教師DotAI 認定講師クラウド環境はデフォルトでUbuntu 24.04で、Python、Node.js、Ruby、PHP、Java、Go、Rust、C++など主要な言語のランタイムが最初から入っています。PostgreSQL 16やRedis 7.0のデータベースも含まれています。
室谷代表取締役何が入っているか確認したい場合は、Claude Code on the Webのセッション内で
check-tools を実行すると、インストール済みの言語とバージョン一覧が出ます。bash
# セッション内で実行
check-tools公式の環境に含まれていないツールが必要な場合はセットアップスクリプトで追加できますね。例えば
gh コマンドはデフォルトイメージに含まれていないので、必要な場合はこうです。bash
#!/bin/bash
apt update && apt install -y ghセットアップスクリプトは新しいセッション開始時にだけ実行される。既存セッションを再開するときはスキップされます。
ここが落とし穴で、スクリプトに問題があると「セッションが起動しない」ということが起きるので注意が必要です。
ここが落とし穴で、スクリプトに問題があると「セッションが起動しない」ということが起きるので注意が必要です。
diffビューとAuto-fix：Web版ならではの機能
室谷代表取締役Web版ならではの機能として、diffビューとAuto-fixがあります。この組み合わせが開発体験をかなり変えると思っています。
テキトー教師DotAI 認定講師diffビューから説明しましょうか。Claudeがコードに変更を加えると、画面に変更統計インジケーターが表示されます。
「+12 -1」みたいな感じで、追加行数と削除行数が出る。
「+12 -1」みたいな感じで、追加行数と削除行数が出る。
室谷代表取締役そのインジケーターをクリックすると、diffビューアが開きます。左側にファイルリスト、右側に各ファイルの変更内容が表示されて、GitHubやIDEに切り替えなくてもコード差分を確認できます。
テキトー教師DotAI 認定講師変更を見て「ここは違う」と思ったら、インラインでコメントを入れてClaude Code Webとやり取りしながら修正を重ねられる。PRを作成する前に全部ブラウザ上で完結するんですよね。
室谷代表取締役以前は差分を確認するにはGitHubやIDEに切り替える必要があったんですが、それが不要になった。
テキトー教師DotAI 認定講師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を指示する
テキトー教師DotAI 認定講師Claudeがどう判断して動くか、という挙動も整理しておくと安心ですね。3パターンあります。
- 明確な修正: Claudeが確信を持てる修正なら自動で変更をプッシュして説明する
- 曖昧なリクエスト: 解釈が複数ある場合や重要な設計判断が必要な場合は先に聞いてくる
- 重複・無アクション: 同じイベントが重複した場合や変更不要の場合はセッションに記録して終了
室谷代表取締役注意点として、Auto-fixを使うとClaude（あなたのGitHubアカウントで）がレビューコメントに返信することがあります。ユーザー名の下に表示されるけど「Claude Codeから」というラベルがつくので、レビュアーには分かるようになっています。
テキトー教師DotAI 認定講師Atlantis、Terraform Cloud、カスタムGitHub Actionsなどのコメントトリガー自動化を使っているリポジトリでは特に注意が必要ですね。Claudeのコメントがそれらのワークフローを誤トリガーする可能性があります。
インフラのデプロイが走るリポジトリにはAuto-fixを使わない方が安全です。
インフラのデプロイが走るリポジトリにはAuto-fixを使わない方が安全です。
ターミナルとの連携：--remoteとテレポート
室谷代表取締役Web版とターミナル版をシームレスに行き来できるのも、使い込むとわかる便利な点なんですよね。
テキトー教師DotAI 認定講師2方向ありますよね。ターミナルからWeb版を起動する「--remote」と、Web版のセッションをターミナルで続ける「テレポート」。
室谷代表取締役まず「--remote」から。ターミナルでClaude Codeを使いながら、特定のタスクだけWeb（クラウド）で非同期実行したい場合に使います。
bash
claude --remote "src/auth/login.ts の認証バグを修正して"このコマンドを実行すると、claude.aiに新しいWebセッションが作られて、タスクがクラウドで動き始めます。自分はターミナルで他の作業を続けられる。
室谷代表取締役進捗確認は
/tasks コマンドでできます。複数のタスクを並列実行している場合もここで一覧が見られる。bash
# ターミナルのClaude Code内で
/tasks面白いのが「plan → remote」というパターンですね。複雑なタスクの場合、まずPlanモードで一緒に方針を決めてから、実行はWebに投げるというアプローチです。
室谷代表取締役具体的に言うと、まずPlanモードで起動して・・・
bash
claude --permission-mode planPlanモードでは読み取りとコードの探索だけできて、変更は加えられない。ここで一緒に設計を詰めて、方針が決まったら改めてWebセッションで実行します。
bash
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」をクリックするとターミナルで貼り付けるコマンドがコピーされる
テキトー教師DotAI 認定講師テレポートするには条件があって、ローカルで未コミットの変更がないこと、同じリポジトリのチェックアウトであること、Webセッションと同じアカウントで認証されていること、の3点が必要です。
室谷代表取締役未コミットの変更がある場合はスタッシュを促されます。テレポートが完了すると、Webセッションで作業していたブランチが自動的にfetchされてチェックアウトされ、会話履歴もターミナルに引き継がれます。
Claude Code Web SearchとWeb版の関係
テキトー教師DotAI 認定講師よく混同される点として「Claude Code Web」と「Claude Code Web Search」の違いがあります。これは別の機能ですね。
室谷代表取締役全然違う話なんですよね。「Claude Code on the Web」はブラウザでコーディングタスクを実行するサービス。
「Web Search」はClaude Codeがコーディング作業中にウェブを検索する機能、という感じで、レイヤーが違います。
「Web Search」はClaude Codeがコーディング作業中にウェブを検索する機能、という感じで、レイヤーが違います。
テキトー教師DotAI 認定講師Claude Codeのセッション内でウェブ検索を使いたい場合、MCPサーバー経由でWeb Search機能を追加する方法があります。設定は
.claude/settings.json のMCPセクションに追加します。室谷代表取締役ただしClaude Code Webのセッション内でウェブ検索を使うと、レートリミットにすぐ当たることがあるんですよね。別の方法として、CodexをリサーチャーとしてClaude CodeからMCP経由で呼び出すと、トークンをかなり節約できます。
テキトー教師DotAI 認定講師Claude Code Web版の環境設定で「ネットワークアクセス」が制限されているのも関係していて・・・デフォルトは「制限あり」で、パッケージレジストリなど必要なドメインはアクセス可能ですが、任意のウェブ検索は制限されています。
室谷代表取締役ネットワークアクセスの設定は環境設定で変更できて、「制限なし」「制限あり（デフォルト）」「ネットワーク無効」の3段階から選べます。ただし制限を外すと外部サービスへのアクセスが増えるのでセキュリティには注意してください。
セッション管理とチーム活用
テキトー教師DotAI 認定講師セッションをどう管理するか、チームで使う場合の設定も説明しておきましょう。
室谷代表取締役まずセッション管理から。Web版ではセッションが積み重なっていくので、定期的に整理するといいですね。
アーカイブすると一覧から非表示になりますが、削除ではないので後から「アーカイブ済み」フィルターで見られます。削除は元に戻せないので注意です。
アーカイブすると一覧から非表示になりますが、削除ではないので後から「アーカイブ済み」フィルターで見られます。削除は元に戻せないので注意です。
テキトー教師DotAI 認定講師チームやEnterpriseアカウントではセッションの共有機能があります。「Private」と「Team」の2つの公開範囲が選べて、Teamにすると組織内のメンバーが見られる状態になります。
室谷代表取締役Pro・MaxアカウントはPrivateとPublicの2択で、Publicにするとclaude.aiにログインしているユーザーなら誰でも見られます。GitHubのプライベートリポジトリのコードが含まれる場合もあるので、Publicにする前に内容を確認しておくことを強くおすすめします。
テキトー教師DotAI 認定講師もう一つ便利なのが「スケジュール実行」です。定期的なPRレビュー、依存関係の監査、CI失敗の分析などを繰り返し実行するスケジュールを設定できます。
室谷代表取締役毎日朝に「新しい依存関係の脆弱性がないかチェック」とか「昨日のPRをレビューしておく」みたいなことを自動化できる。CI/CDパイプラインに近いことがプログラミングなしで設定できるようになってきていますよね。
セキュリティとアイソレーション
室谷代表取締役Web版はAnthropicのクラウドで動くということで、セキュリティが気になる人も多いと思うんですよね。コードが外部に出るわけですから。
テキトー教師DotAI 認定講師基本的なアーキテクチャとして、タスクごとに独立した仮想マシン上で動作します。他のユーザーのタスクと同じ環境を共有することはありません。
室谷代表取締役ネットワークアクセスはデフォルトで制限されていて、一般的なパッケージレジストリ（npm、PyPI、RubyGemsなど）へのアクセスは許可されますが、任意のウェブサイトへのアクセスは制限されています。
テキトー教師DotAI 認定講師カスタムで許可するドメインを追加することもできますが、その場合はセキュリティのリスクを理解した上で設定する必要があります。インフラ系のリポジトリで使う場合は特に慎重に。
室谷代表取締役EnterpriseアカウントでPrivateリポジトリを扱う場合、リポジトリアクセス検証がデフォルトで有効になっています。受信者のGitHubアカウントと紐づいたアクセス権を確認するので、権限のない人がコードを見るリスクが下がります。
スマホとの組み合わせで開発の幅が広がる
テキトー教師DotAI 認定講師「スマホから開発できる」というのが、Claude Code on the Webの意外と大きなメリットですよね。
室谷代表取締役iOSとAndroidのClaudeアプリからもClaude Code on the Webの機能が使えます。外出先でタスクを新しく開始したり、進行中のセッションを監視したり、コメントで指示を追加したりができます。
テキトー教師DotAI 認定講師「会議中にiPhoneからバグ修正を指示して、会議が終わったらPRができていた」という体験をするとその可能性を感じますよね。
室谷代表取締役音声入力と組み合わせると楽なんですよね。スマホの音声入力で指示を話すとそのままタスクになる。
テキトー教師DotAI 認定講師Vercelとの組み合わせも便利ですね。Vercelはブランチを作成すると自動的にプレビューURLが発行されるので、Claude Code WebがブランチにプッシュするとVercelがプレビュー環境を作ってくれる。
スマホのブラウザでそのプレビューURLにアクセスして確認してマージ、という流れが完結します。
スマホのブラウザでそのプレビューURLにアクセスして確認してマージ、という流れが完結します。
室谷代表取締役MVPフェーズのプロダクト開発なら、PCなしでも実用的な開発ができてしまう。この体験は、開発のやり方そのものを変えつつあると感じています。
よくある質問
Q: Claude Code WebとRemote Controlは何が違うの？
室谷代表取締役混同しやすいんですが、別の機能です。Claude Code on the Webはタスクをクラウドで実行します。
Remote Controlは自分のPCでClaude Codeを動かしながら、別のデバイスのブラウザからそのセッションにアクセスする機能です。
Remote Controlは自分のPCでClaude Codeを動かしながら、別のデバイスのブラウザからそのセッションにアクセスする機能です。
テキトー教師DotAI 認定講師簡単に言うと「どこでClaude Codeが動いているか」の違いですね。Web版はAnthropicのサーバー、Remote Controlは自分のPC。
どちらもブラウザから操作できますが、実行環境が違います。
どちらもブラウザから操作できますが、実行環境が違います。
Q: Freeプランでは本当に使えない？
テキトー教師DotAI 認定講師現時点でFreeプランは対象外です。Proプラン（月額$20）から利用可能です。
ただしリサーチプレビュー段階なので、今後変わる可能性はゼロではありません。
ただしリサーチプレビュー段階なので、今後変わる可能性はゼロではありません。
Q: Web版でMCPは使える？
室谷代表取締役使えますが、注意点があります。ローカルの
クラウドで使うMCP設定は、リポジトリにコミットされた
~/.claude/settings.json で設定したユーザーレベルの設定はクラウドセッションには引き継がれません。クラウドで使うMCP設定は、リポジトリにコミットされた
.claude/settings.json に書く必要があります。テキトー教師DotAI 認定講師セットアップスクリプトやSessionStartフックも同じで、クラウド環境で使いたい設定はリポジトリにコミットしておくのが基本です。
Q: ウェブ検索（Web Search）はWeb版でも使える？
室谷代表取締役Web検索はClaude Code on the Webの機能とは別で、MCP経由で追加できます。ただし前述の通り、クラウド環境のネットワーク設定によっては制限される場合があります。
ネットワーク設定を「制限なし」にすれば使いやすくなりますが、セキュリティとのトレードオフになります。
ネットワーク設定を「制限なし」にすれば使いやすくなりますが、セキュリティとのトレードオフになります。
まとめ：Claude Code Webをどう使うか
室谷代表取締役まとめると、Claude Code on the Webが特に力を発揮するのはこういう場面だと思います。
- PC前にいない時間を有効活用したい: 移動中や会議中にタスクを投げておく
- 複数タスクを並列で進めたい: ターミナル版より並列実行しやすい
- ローカルにないリポジトリの作業: チェックアウトせずに作業できる
- バグ修正やルーティン作業の自動化: CI失敗の自動修正（Auto-fix）が便利
テキトー教師DotAI 認定講師逆に「頻繁にステアリングが必要な作業」「デバッグしながら試行錯誤したい場合」はターミナル版の方が向いています。ウォーターフォール的に「指示して待つ」のがWeb版で、アジャイルに「対話しながら作る」のがターミナル版、というイメージです。
室谷代表取締役最初に試すなら「今やってるバグ修正をWeb版に投げてみる」だけで十分です。Proプランなら追加費用なしで試せるので、まずclaude.ai/codeにアクセスしてGitHubと連携するところから始めてみてください。
テキトー教師DotAI 認定講師使ってみると「これ、もっと早く使えばよかった」ってなる人が多いです。コーディング体験の幅が広がるので、ぜひ試してみてください。
