AI総合研究所

SHARE

X(twiiter)にポストFacebookに投稿はてなブックマークに登録URLをコピー

Claude Code on the webとは?主な特徴や使い方、料金体系を解説!

この記事のポイント

  • Claude Code on the webは、ブラウザから直接利用できるAIコーディングツール「Claude Code」のWeb版
  • ローカル環境の構築が不要で、Anthropic管理の安全なクラウド環境(サンドボックス)でコードを実行
  • クリック操作で複数のコーディングタスクを独立した環境で簡単に並列実行できるのが最大の特徴
  • Proプラン以上のユーザーが追加料金なしで利用可能だが、アカウント全体のレート制限は共有される
  • ファイルシステムとネットワークを分離するサンドボックス技術により、安全な自律開発を実現
坂本 将磨

監修者プロフィール

坂本 将磨

XでフォローフォローするMicrosoftMVP

Microsoft MVP・AIパートナー。LinkX Japan株式会社 代表取締役。東京工業大学大学院にて自然言語処理・金融工学を研究。NHK放送技術研究所でAI・ブロックチェーンの研究開発に従事し、国際学会・ジャーナルでの発表多数。経営情報学会 優秀賞受賞。シンガポールでWeb3企業を創業後、現在は企業向けAI導入・DX推進を支援。


「AIでコーディングしたいけど、ローカル環境のセットアップが面倒…」「複数の修正タスクを同時にAIに任せたい」
そんな開発者の声に応える、ターミナル不要のAIコーディングツール「Claude Code on the web」がAnthropic社から登場しました。これは、ブラウザやスマホから直接、クラウド上の安全な環境でAIに開発作業を依頼できる革新的な機能です。
本記事では、この「Claude Code on the web」について、その全貌を徹底的に解説します。
CLI版との違い、サンドボックス技術による安全性、始め方と使い方、そして料金体系まで、詳しくご紹介します。

Claude Code on the webとは?

Claude Code on the webは、ターミナルで動作するAIコーディングツール「Claude Code」のWeb版です。2025年10月にリリースされました。

従来のCLI版はローカルのターミナルで動作しましたが、Web版はブラウザから直接利用でき、Anthropic管理のクラウド環境でコードが実行されます。ローカルに開発環境を構築したり、リポジトリをクローンしたりする必要がありません。

ブラウザやiOSアプリから指示を出すだけで、Claudeがクラウド環境でコードを書き、テストを実行し、GitHubにプルリクエストを作成してくれます。

https://youtu.be/s-avRazvmLg?si=Nknk-4Yvk0CbpuAH

CLI版との違い

Web版の最大の特徴は、並列実行の手軽さです。CLI版でも複数ターミナルを開けば並列実行できますが、その場合は「git worktree」でリポジトリを分離したり、依存関係を各環境で再インストールしたりする必要があります。

Web版では、クリックするだけで複数のタスクを独立したクラウド環境で同時実行できます。

項目 CLI版(ターミナル) Web版(ブラウザ)
実行環境 ローカルマシン Anthropic管理のクラウド
環境構築 必要 不要
並列実行 可能(git worktreeなど工夫が必要) クリックで簡単に複数実行可能
利用場所 PC(ターミナル必須) ブラウザ、iOSアプリ
セットアップ 各環境で依存関係インストール必要 自動でセットアップ


つまり、CLI版では技術的に並列実行は可能ですが、かなり手間がかかります。一方でWeb版は、ブラウザで新しいタブを開くような感覚で、複数のコーディングタスクを同時に進められるのが大きな利点です。外出先からiOSアプリでタスクを開始し、デスクに戻ってからブラウザで進捗を確認する、といった使い方も可能になります。


中核技術「サンドボックス」とは?安全性を支える2つの分離

「サンドボックス」とは、プログラムを外部から隔離された安全な領域で実行させる仕組みのことです。Claude Codeでは、この技術を用いてAIが自由に作業できる境界を定義し、安全性と自律性の両立を実現しています。このサンドボックスは、主に2つの分離によって成り立っています。

Claude Codeのサンドボックスアーキテクチャ
Claude Codeのサンドボックスアーキテクチャ。ファイルシステムとネットワークの両方が厳密に制御されている(出典:Anthropic公式ブログ)

1. ファイルシステム分離

AIがアクセスできるディレクトリを、現在の作業ディレクトリ内に厳密に制限します。これにより、万が一プロンプトインジェクションのような攻撃が発生しても、プロジェクト外の重要なシステムファイル(SSHキーなど)にアクセスされることを防ぎます。

2. ネットワーク分離

AIが接続できるサーバーを、あらかじめ承認されたドメインリストに限定します。これにより、悪意のあるサーバーに機密情報を送信したり、マルウェアをダウンロードしたりするリスクを排除します。この2つの分離を組み合わせることで、堅牢なセキュリティが確保されます。


Claude Code on the webの始め方と使い方

リサーチプレビュー中の本機能は、簡単なステップで利用を開始できます。ここでは、最初のタスクを実行し、プルリクエストを作成するまでの流れを解説します。

  1. まずは公式サイト(claude.ai/code)にアクセスします。

  2. 次のような画面が表示されるので、「GitHubに接続」をクリックします。
    GitHubに接続

  3. 作業対象としたいリポジトリを選択し、ClaudeのGitHubアプリをインストールしてアクセス許可を与えます。
    ClaudeのGithubアプリをインストール

  4. タスクを実行するためのクラウド環境を選択します。最初はデフォルトのままで問題ありません。

  5. Claudeのチャット画面で、実行したいタスクを具体的にプロンプトとして入力します。例えば、以下のような指示が考えられます。

  • README.mdのタイポを修正して」
  • utils.pyに、数値をフォーマットする関数を追加して、テストも書いてください」

  1. タスクが完了すると、GitHub上に新しいブランチとプルリクエストが自動的に生成されます。
    ブランチとプルリクエスト


Webで開始したタスクを後からローカルのターミナルに引き継いで作業を続けることも可能です。


Web版Claude Codeの料金体系と利用可能プラン

Claude Code on the webは、以下のプランで利用可能です。

  • Proプラン: 月額$20
  • Maxプラン: 月額$100 / $200(Max 5 / Max 20)
  • 今後対応予定: TeamプランおよびEnterpriseプランのプレミアムシート


【関連記事】
▶︎Claude Codeの料金体系ガイド!利用制限や確認・可視化方法を開設

追加料金について

Claude Code on the webの利用に追加料金は発生しません。ただし、以下の点に注意が必要です。

レート制限の共有消費

  • タスクの実行は、アカウント全体のレート制限(利用上限)を消費します
  • この制限は、通常のClaude利用やCLI版Claude Codeと共有されます
  • 複数のタスクを並列実行すると、その分レート制限の消費が早くなります

プラン別のレート制限目安

  • Proプラン: 約44,000トークン/5時間
  • Max 5プラン: 約88,000トークン/5時間
  • Max 20プラン: 約220,000トークン/5時間


複雑なコーディングタスクや大規模なコードベースを扱う場合は、より上位のプランを検討することをおすすめします。


Web版 Cluade Codeの3つの主要なユースケース

Web版は、特に以下のような場面でその真価を発揮します。

1. 複数のタスクの並列実行

複数のバグ修正やルーチンタスクを、それぞれ独立したクラウド環境で同時に実行させることができます。これにより、一つのタスクの完了を待つことなく次の作業に着手でき、開発のスループットを大幅に向上させます。

2. ローカル環境を汚さないコード分析

ローカルに環境構築をしていないリポジトリでも、コードの構造や機能の実装方法についてAIに質問し、理解を深めることができます。一時的な調査やコードレビューのために、自分の開発環境を汚す必要がありません。

3. モバイルアプリからのタスク開始と監視

iOSアプリからもClaude Code on the webを利用可能です。外出先や移動中にコーディングタスクを開始し、その進捗をスマートフォンで確認するといった、時間と場所にとらわれない柔軟な働き方ができます。


【重要】クラウド実行環境のカスタマイズ方法

クラウド上で提供される環境を、自分のプロジェクトに合わせてカスタマイズする方法を解説します。

デフォルト環境とインストール済みツールの確認方法

クラウド環境には主要なプログラミング言語のランタイムやビルドツールがプリインストールされています。環境にインストール済みのツールを確認するには、特定のコマンドではなく、以下のように自然言語でClaudeに直接依頼するのが確実です。

  • 「インストールされているツールやランタイムのバージョンをリストアップして」
  • 「bash -c 'which python node go' を実行して、主要な言語のパスを確認して」


このように依頼することで、現在の環境に何が含まれているかを把握できます。

依存関係のインストールを自動化する(SessionStartフック)

プロジェクト固有のライブラリは、フック機能を使って自動でインストールさせることができます。リポジトリのルートに.claude/settings.jsonファイルを作成し、セッション開始時に実行したいコマンドを記述したシェルスクリプトを指定します。

1. .claude/settings.json の設定例

{
  "hooks": {
    "SessionStart": [
      {
        "matcher": "startup",
        "hooks": [
          {
            "type": "command",
            "command": "\"$CLAUDE_PROJECT_DIR\"/scripts/install_deps.sh"
          }
        ]
      }
    ]
  }
}

2. scripts/install_deps.sh の作成例

#!/bin/bash
npm install
pip install -r requirements.txt
exit 0

この設定により、セッション開始時に自動でnpm installとpip installが実行されます。

環境変数の設定方法

APIキーなどの秘匿情報が必要な場合、環境設定画面から.env形式で環境変数を安全に設定することが可能です。ここで設定した値は、サンドボックス内の実行環境に安全に渡されます。


C+aude Codeのセキュリティとネットワークアクセスの詳細

自分のコードをクラウド環境で実行する際のセキュリティについて、さらに詳しく解説します。

ネットワークアクセスの3つのレベル

実行環境のインターネットアクセスは、用途に応じて3段階で設定可能です。

  • アクセスなし: 最も安全なオフライン環境。
  • 制限付きアクセス(デフォルト): (推奨) npmやpypiなど、主要なパッケージマネージャーや信頼できるドメインのみにアクセスを許可します。ほとんどのプロジェクトではこの設定で十分です。
  • フルアクセス: 外部APIへのアクセスなど、完全なインターネット接続が必要な場合に選択します。

GitHubプロキシによる安全な認証

GitHubとの通信は、すべてAnthropicが管理する専用のプロキシを経由します。これにより、ソースコードが存在するサンドボックス内に、ユーザーのGitHub認証情報(トークンなど)が直接渡ることはありません。

プロキシが認証を仲介するため、安全にリポジトリの操作が行えます。

ChatGPT活用でお困りの方へ

AI総合研究所

AI総合研究所が導入から活用までサポート

ChatGPTの使い方から、業務に最適なAIツールの選定まで、専門家が無料でご相談承ります。


まとめ

「Claude Code on the web」は、開発者がコーディング作業をより柔軟かつ効率的に行うための強力な新機能です。サンドボックス技術によって「承認疲れ」の問題を解決し、AIの自律性をより信頼して活用できるようになります。

ローカル環境の制約から解放され、複数のタスクを並行処理できるため、特に複雑なプロジェクトやチーム開発において生産性を大きく向上させる可能性を秘めています。Proプラン以上のユーザーは、リサーチプレビュー中のこの新しい開発体験をぜひ試してみてください。

監修者
坂本 将磨

坂本 将磨

Microsoft MVP・AIパートナー。LinkX Japan株式会社 代表取締役。東京工業大学大学院にて自然言語処理・金融工学を研究。NHK放送技術研究所でAI・ブロックチェーンの研究開発に従事し、国際学会・ジャーナルでの発表多数。経営情報学会 優秀賞受賞。シンガポールでWeb3企業を創業後、現在は企業向けAI導入・DX推進を支援。

関連記事

AI導入の最初の窓口

お悩み・課題に合わせて活用方法をご案内いたします
お気軽にお問合せください

AI総合研究所 Bottom banner

ご相談
お問い合わせは
こちら!