Claude Code on the webとは、GitHubと連携してコーディングタスクの実行をAIに任せられる機能です。
これまでのClaude Codeはターミナルなどのローカル環境で動作しましたが、こちらはブラウザ上で動かすことができるため、環境構築不要で使い始められます。
この記事では、Claude Code on the webの使い方や料金、そしてローカル版との違いについても解説します。
Claude Code on the webとは？
Claude Code on the webは、コーディングに関連するタスクをブラウザ上で直接Claudeに任せられる機能です。
現在研究プレビュー版として提供されており、ターミナル上で利用していたClaude CodeをWeb上で利用できます。
ブラウザからのコーディングタスク委任と並列実行
Claude Code on the webでは、ユーザーはローカル環境をセットアップすることなく、コードの生成、編集、デバッグ、実行をClaudeに任せられます。
特筆すべきは、これらのタスクをクラウド上で並列実行できる点です。
例えば、大規模なデータ分析、複数のユニットテストの実行、APIの疎通確認などを同時にバックグラウンドで処理させることが可能です。
これにより、開発者は重い処理の完了を待つ必要がなくなり、他の作業を中断することなく効率的に開発を進められます。
クラウドサンドボックスとセキュリティ
この機能の核となるのが、安全なクラウドサンドボックス環境です。
Claudeがコードを実行する環境は、ユーザーのローカルマシンや組織の内部ネットワークから完全に隔離されています。
これにより、実行されるコードがローカルファイルや機密データに意図せずアクセスするリスクを排除します。
セキュリティをさらに強固にするため、GitHubプロキシ機能が提供され、GitHubリポジトリへのアクセスを安全に仲介・管理します。
また、許可ドメイン設定により、Claudeが通信できる外部ドメインを制限し、信頼できるAPIやリソースへのアクセスのみを許可することも可能です。
提供範囲
Claude Code on the webの提供範囲は、利用するプランによって段階的に導入されています。
まず、個人のProおよびMaxプランユーザー向けにベータ版として提供が開始されました。
これにより、個人開発者や学習者が最新のAIコーディング支援機能をいち早く体験できます。
法人向けのTeamおよびEnterpriseプランにおいても順次展開が進められています。
特にEnterpriseプランでは、前述の許可ドメイン設定やGitHubプロキシの管理など、組織のセキュリティポリシーに準拠するための高度な管理機能の提供が開始される予定です。
利用開始時期や全機能の詳細は、プランごとに異なる場合があるため、公式のアナウンスを確認する必要があります。
Claude Code on the webの使い方
ここでは、Claude Code on the webの使い方を解説します。
初期設定からPR作成までの手順
Claude Code on the webの使い方について、初期設定からプルリクエストを作成するまでの流れをご紹介します。
Claude.aiにアクセスし、画面左のタブから「コード」をクリックします。
「GitHubに接続」をクリックし、GitHubアカウントに接続します。
「Authorize Claude」をクリックして接続を許可しましょう。
GitHubとの連携ができたら、Claude Codeを使いたいリポジトリを選択します。
また、動かす環境も選べます。
デフォルト環境のほか、ネットワークアクセスや環境変数をカスタマイズした環境も選ぶことが可能です。
設定が完了したら、実際にタスクをプロンプトとして送信しましょう。
今回は、「スケジュール管理アプリを作成してください」というプロンプトを送信しました。
初めてプロンプトを送信すると、Anthropicが管理するクラウド環境にリポジトリがクローンされます。
その後、自動的にTodoリストが作成され、順に実行されていきます。
実行が完了すると、結果がリポジトリの新しいブランチにプッシュされます。
プッシュされた内容を見て、問題がないか確認しましょう。
変更は新規ブランチにプッシュされます。
内容を確認し、問題なければ「PRを作成」をクリックすると自動でプルリクエストが作成されます。
説明の内容に問題がなければ「Create pull request」をクリックしてGitHub上でプルリクエストを作成しましょう。
以上がClaude Code on the webでコーディングタスクを実行する一連の手順です。
進捗管理と並列タスクの扱い
Claude Code on the webでは、実行中のタスクの進捗がインターフェース上にリアルタイムで表示されます。
ユーザーは、どのタスクが「実行中」「待機中」「完了」または「失敗」したかを一覧で確認可能です。
また、この機能の強みである並列タスクは、それぞれ独立したセッションとして同時に処理が進みます。
バックグラウンドで処理を実行させ、終了した際に通知を受け取ることも可能です。
もし特定のタスクが失敗した場合、詳細なエラーログを確認して原因を特定できます。
ユーザーは失敗したタスクのみを個別に再実行させたり、不要になったタスクを途中でキャンセルしたりすることも可能です。
これにより、重い処理をバックグラウンドで実行させながら、他の作業を効率的に進められます。
iOS・モバイルからの利用シーン
Claude Code on the webはiOSアプリでも利用可能です（プレビュー）。
Claude Code は Claude iOS アプリでも利用可能です。
出典：Claude Code on the web
これにより、PCが手元にない外出先でもコーディングタスクを開始したり、作業内容を監視したりすることができます。
具体的な利用シーンとしては、GitHubリポジトリのプルリクエストをモバイル上でレビューし、簡単な修正をClaudeに指示することが挙げられます。
レビュー、タスクの委任、進捗確認といった管理業務を場所を選ばずに行える点が強みと言えるでしょう。
タスクをローカルへ引き継ぐ
Claude Code on the webで実行したタスクは、ローカルのClaude Codeに引き継ぐことができます。
ローカルへの引き継ぎ方は以下の通りです。
タスクを実行後、「CLIで開く」をクリックしてコマンドをコピーします。
次にローカルリポジトリに新たなブランチを作成し、ターミナル上で先ほどコピーしたコマンドを貼り付けて実行します。
フォルダーを信頼するかどうか聞かれるため、Yesを選択します。
ここでClaudeアカウントへのログインが必要となります。
「Login with Claude account」をクリックするとブラウザに遷移するので、そこでアカウントにログインすることで作業をローカル上に引き継げます。
Claude Code on the webの料金体系
続いて、Claude Code on the webを利用する際にかかる料金についてご紹介します。
個人向けプランの料金
Claude Code on the webは、個人向けプランのProとMaxで利用可能です。
それぞれのプランの概要は以下の通りです。
| プラン | 料金 | 使用量 | 主な特徴 |
|---|---|---|---|
| Pro | $20/月 $200/年 | 無料プランの5倍以上 | より多くのモデルにアクセス可能 Claude Codeが利用可能 Google Workspaceとの連携 拡張思考の利用 |
| Max 5x | $100/月 | Proプランの5倍 | 高い出力制限 高度な機能への先行アクセス 混雑時の優先アクセス |
| Max 20x | $200/月 | Proプランの20倍 | 大量使用 |
ProプランにはClaudeで利用できる機能やモデルのほとんどが含まれているため、基本的にはこちらのプランで十分でしょう。
一方で頻繁にClaudeでさまざまなタスクを実行する場合は、より使用量の多いMaxプランがおすすめです。
Pro・Maxどちらのプランにもローカル版のClaude Codeも含まれており、開発に活かすことができます。
組織向けプランの料金
Claude Code on the webは今後、組織向けプランであるTeamやEnterpriseにも提供される予定です。
なお、どちらのプランでもプレミアムシートユーザーに対して提供予定です。
Team および Enterprise プレミアムシートユーザーへの提供予定。
出典：Claude Code on the web
TeamとEnterpriseのプレミアムシートの料金体系は以下の通りです。
| プラン | 料金 | 使用量 | 主な特徴 |
|---|---|---|---|
| Team | $150/ユーザー/月 | ユーザーあたりProプラン以上 | Proプランの機能 アクセスと課金を一元管理可能 エンタープライズ検索機能 |
| Enterprise | 要問い合わせ | 要問い合わせ | Teamプランの機能 SSOや監査ログなどのセキュリティ機能 強化されたコンテキストウィンドウ |
どちらのプランも組織で利用するための機能が搭載されていますが、Enterpriseプランではさらに高度なセキュリティ機能が搭載されています。
なお、プレミアムシートは標準シートの機能に加え、利用量が増加し、Claude Codeが利用可能となります。
レート制限とクラウドセッションの共有リソース注意点
Claude Code on the webでは、通常のClaude.aiチャットと同じレート制限が適用されます。
つまり、Claude Codeとチャットセッションは同じメッセージ枠を共有しているため、どちらかで多くのメッセージを送信すると、もう一方で利用可能なメッセージ数が減少します。
特にClaude Codeは複雑なコーディングタスクで多数のメッセージを消費する可能性があるため、頻繁に利用する場合は注意が必要です。
また、複数のタスクを並列実行した場合、それに応じてレート制限が多く消費されます。
効率的に作業を進めるには、明確な指示を出し、不要なやり取りを減らすことが重要です。
Claude Code on the webとローカル版の違い
Claude Codeには、CLIやIDEの拡張機能のようにローカルで使用できるものもあります。
最後に、Claude Code on the webとローカル版の違いについてまとめます。
実行環境とネットワーク・権限の差
Claude Code on the webはクラウドサンドボックス環境で実行されるため、ローカル環境の構築が一切不要で、ブラウザさえあればすぐに利用できます。
一方、CLIやIDE拡張機能などのローカル版は開発者の端末上で直接実行されるため、社内ネットワークやVPN経由のプライベートリポジトリ、ローカルファイルシステムへのアクセスが可能です。
クラウド版はGitHubプロキシを経由した許可ドメインのみにアクセスできるよう制限されており、セキュリティ面で隔離されている反面、ローカル環境の情報には直接アクセスできません。
権限設定においても、クラウド版は対象リポジトリを限定して最小権限で運用できるのに対し、ローカル版は端末の権限範囲内で柔軟に操作できます。
向いているタスクと使い分け指針
Claude Code on the webは、環境構築不要でPR作成やコードレビュー対応、依存関係の更新といった定型的なタスクを素早く実行したい場合に最適です。
特に複数のタスクを並列実行したり、モバイル端末から緊急対応したりするシーンでは、クラウド版の利便性が際立ちます。
一方、ローカル版は社内ネットワーク上のプライベートリソースへのアクセスが必要な場合や、IDE統合による高度なデバッグが利点です。
実務的には、素早い機能追加やバグ修正はWeb版で処理し、アーキテクチャレベルの変更や機密性の高いコードベースへの対応はローカル版を選ぶという使い分けが効果的です。
Web上で開始したタスクもローカルへ引き継げるため、状況に応じて柔軟に切り替えることが可能です。
まとめ
Claude Code on the webは、ブラウザ上でコーディングタスクをAIに任せることができる機能です。
GitHubと連携するだけで環境構築せずに利用でき、簡単に使い始めることができます。
また、タスクをローカル版のClaude Codeに引き継ぐこともできるため、状況に応じて使い分けることもできます。
ProプランやMaxプランのユーザーであれば利用できるため、気になる方はぜひ試してみてください。