Claude Code on the Web の使い方

要約
Claude Code をブラウザ上から実行できる環境です。GitHub アカウントが必要で PRO/MAX ユーザーが使えます。Claude がコード修正・テスト・PR 作成まで自動で進めてくれます
意見はこのエリアに表示されます

Claude Code の期間限定プロモーションが始まりましたね

プロモーション期間は、2025年11月4日 9:00 AM PT 〜 2025年11月18日 11:59 PM PTで、この日時が来ると、未使用分のクレジットは失効します。

対象は Claude Pro または Claude Max の個人ユーザーで、期間中に加入した新規ユーザーも含まれます(Team / Enterprise プランは対象外)

Pro ユーザーには 250 ドル相当、Max ユーザーには 1000 ドル相当の追加クレジットが付与されます。これは API 料金換算のクレジットで、Claude Code(Web / モバイル版)のみで利用可能です。通常の使用量とは別枠で管理され、先にこちらのクレジットから消費されます。

MAX プランは 1000ドル分。普通に使ってたら絶対使い切れませんよ

ならどうするか?──記事を書かせて消費することにしました。

おそらく使い切れないので、記事を書いてもらうことにしました。2000文字の記事で 1ドルしか消費してなくて草です

画像の説明を入れてください
2000文字の記事2つ書いて1クレジット消費

そうだ!こうなったら、iOS アプリを作らせよう!

利用方法

  • ブラウザで claude.ai/code にアクセス
  • GitHub アプリ連携が必要
  • クレジットは自動で適用され、UI 上で残高を確認できる

クレジットを使い切ると、自動的に通常の Pro / Max の利用枠に切り替わります。追加請求は発生しません。

Claude Code on the web の概要

Claude Code をブラウザ上から実行できる環境です。GitHub アカウントが必要です

Claude Code on the web は、PRO/MAX ユーザーが使えます。GitHub 以外のリポジトリ(GitLab など)は現時点では非対応みたいですね

Claude Pro / Max の使用量に従ってトークン消費するだけ(追加料金なし)で、並列タスクを多く走らせるほどレートリミットも増加消費

GitHub リポジトリをクラウド上の専用 VM にクローンし、Claude がコード修正・テスト・PR 作成まで自動で進めてくれます

ローカル環境がなくても作業でき、あとから CLI に引き継ぐことも可能なんですね

使う流れとしてはこんな感じ

  1. GitHub アカウントを接続
  2. リポジトリに Claude GitHub アプリをインストール(使うリポジトリのみ推奨)
  3. Claude Code on the web でリポジトリを選択
  4. コードを書かせる(Claude Code を消費する)
  5. コミット / PR を自動生成させる

(ここからはローカル側の作業)

  1. ローカルに git pull して npm run dev で動作確認
  2. 必要に応じて Claude に修正指示を出し、またコミットさせる
  3. 終わったらマージ

ローカル版とどう違うか

用途Claude Code(Web版)ローカル環境
コード生成・リファクタ・修正指示◎ 得意△ 自分でやる必要あり
GitHub へのコミット / PR 作成◎ 自動対応△ 手動
動作確認(npm run dev / rails s)✕ 不可◎ できる
ブラウザ表示 / UIプレビュー✕ 不可◎ 必須
依存関係インストール(npm i など)VM 内で自動実行可手元で自由に実行
セッションを並列に動かす◎(複数同時OK)
フロントの調整(CSS・UI微調整)不向き向いている
バックエンドの修正やテスト修正相性良い最終確認は必要

どんな用途に向いているか

  • 既存コードの調査やリファクタ
  • 記事、ドキュメント作成
  • バグ修正や小規模タスクの自動化
  • 複数タスクを並列で走らせたいとき
  • ローカルに clone していないリポジトリを編集したいとき
  • バックエンド修正など、テストを書いてからコードを直す流れに向いている

それでは公式ドキュメントから、ポイントを要約しましょう

裏側で起きていること

  • リポジトリを Anthropic 管理 VM にクローン
  • 必要な言語ツールやパッケージは「標準イメージ」に事前インストール済
  • ネットワークはデフォルトで制限付き(指定ドメインのみアクセス可)
  • Claude はコードを書き、テストを実行し、結果を評価して修正を繰り返す
  • 完了後、ブランチ push → GitHub 上で PR を作成できる

環境の仕様

  • Python / Node / Java / Go / Rust / C++ など主要言語に対応
  • npm, pip, cargo など一般的なパッケージマネージャが使える
  • 独自セットアップしたい場合は “SessionStart Hook” でスクリプト実行可能
  • .claude/settings.json で依存インストールや環境変数を自動設定できる
  • ネットワークは「Limited / None / Full」から選択可
    (Limited の場合、GitHub・npm など特定ドメインのみ許可)

セキュリティ

  • 毎回 isolated VM 上で実行、ホスト側と完全分離
  • GitHub 認証は専用プロキシ経由、アクセストークンは VM 内に直接渡されない
  • 外部通信はプロキシ制御され、悪用防止・レート制限つき
  • コードは VM 内で処理され、Claude が直接 GitHub に push する

ベストプラクティス

  • セッション開始時に環境構築が必要なら Hook を使う
  • 依存ライブラリやセットアップステップは CLAUDE.md に明記しておく
  • PR が自動生成されるので、レビュー前提で運用すると効率的

終わりに

使い心地は、快適です。フロントの確認が不要だったり、ある程度放置した状態で実装してよければありですね

Explore More
関連記事はありません。