HOME/ブログ/Claude Code がブラウザとデスクトップアプリで使えるようになりました🚀
thumbnail-claude-code-web-desktop
技術解説・Tips

Claude Code がブラウザとデスクトップアプリで使えるようになりました🚀

avatar
Wataru Katsuki

Claude Code を、ブラウザ(Claude Code on the Web)とデスクトップアプリ(Claude Code on the Desktop)から使えるようになりました。クラウド上のサンドボックスで動くので、環境構築なしでタスクを投げられ、外出先のスマホからでも開発を進められます。本記事では、その仕組みと、CLI・Web・Desktop の使い分け、PR 対応を自動化する使い方を紹介します。


クラウドのサンドボックスで動く

Claude Code on the Web は、Anthropic 側のクラウド上に用意されたサンドボックス(仮想マシン)の中で動きます。手元のマシンで直接コードを動かすのではなく、隔離された環境にリポジトリを clone して作業する形です。

この構成にはセキュリティ上のメリットがあります。隔離されたVMの中では自由に作業でき、本物の認証情報はVMの外に置かれるため、侵害されても被害が及びません。認証情報を分離したうえで動くため、プロンプトインジェクションのような攻撃を受けても被害を抑えやすくなっています。

Git の認証情報はサンドボックスの外に置く

Web 版では、Git の操作もプロキシが仲介します。サンドボックス内の git クライアントが push しようとすると、Git プロキシが「専用の認証情報を検証 → push 先ブランチを検証 → 本物のトークンを付与」という順で処理してから GitHub へ渡します。

本物のトークンや署名鍵はサンドボックスの中に置きません。そのため、仮にサンドボックス内のコードが侵害されても、認証情報が流出したり、設定外のブランチへ勝手に push されたりすることを防げます。

実行環境の仕様

Web 版のサンドボックスには、一般的な開発言語のランタイムがあらかじめ入っています。依存パッケージのインストールも自動で行われるため、環境構築の手間なく作業を始められます。

項目内容
OSUbuntu 24.04(root 権限で環境構築が可能)
CPU / メモリ4 vCPU / 16 GB RAM(概算上限)
ディスク30 GB
ネットワークプロキシ経由のみ(None / Trusted / Full / Custom の4段階)
認証情報Git 認証はプロキシが仲介。鍵は VM 内に置かない

プリインストール済みのランタイム・ミドルウェアは次のとおりです。

  • Python / Node 20〜22 / Ruby / PHP / Java 21 / Go / Rust / C・C++
  • Docker・compose、PostgreSQL 16、Redis 7、git / ripgrep / tmux

利用条件

項目内容
対応プランPro / Max / Team / Enterprise(Free プランは不可)
リソース制限レート枠は CLI・チャットと共有(5時間ローリング+週次)
前提GitHub にあるリポジトリをクラウドに clone して動かす
DesktopMac / Windows 対応(Git が必須)

レート枠が CLI やチャットと共有である点は、並列でタスクを走らせるときに意識しておくとよいところです。サンドボックスのリソースにも上限があるので、重い処理を一度に何本も投げるより、実行する内容を見ながら配分するほうが安定します。

CLI・Web・Desktop で読み込まれる設定が違う

同じ Claude Code でも、動く場所によって読み込まれる設定ファイルが変わります。Web 版はクラウドの VM で動くため、手元のグローバル設定やローカルに追加した MCP サーバーは使えません。リポジトリにコミットされた設定だけが適用されます。

ファイル / 設定CLIWebDesktop
CLAUDE.md(リポジトリ)
.claude/(agents・commands・設定)
.mcp.json(リポジトリにコミット)
~/.claude/(グローバル設定)◎ CLI と共有
ローカル追加の MCP サーバー

グローバル設定やローカル MCP に依存した使い方をしている場合は、Web 版で同じ挙動を期待しないよう注意してください。リポジトリにコミットしておけば、どの環境でも同じルールで動かせます。

--cloud / --teleport でセッションを行き来する

Web のセッションは --teleport で手元に引き込めます。逆方向は --cloud で新規セッションを作る形になります。

claude --cloud は、手元のターミナルからクラウドセッションを開始するコマンドです。投げたあとはブラウザを閉じてもセッションは保持され、進捗は claude.ai やモバイルアプリから監視できます。

Bash
# 手元のターミナルからクラウド上でセッションを開始する
claude --cloud

逆に、Web で動かしているセッションを手元に引き込みたいときは claude --teleport を使います。会話の続きも作業ブランチも引き継がれるので、クラウド側で詰まったらローカルの全機能で続きを進められます。

Bash
# Web のセッションを手元のターミナルへ引き込む
claude --teleport

セッションの実体はクラウド上に保持されます。そのため、claude --cloud を実行した元の環境(Dev Container や GitHub Codespaces など)が終了しても、セッションは生き続け、あとから別のローカル環境に --teleport で接続し直せます。GUI では、セッションの一覧から「次で開く → ターミナル」を選ぶことでも同じくローカルへ引き込めます。

Desktop 版:実行場所を選べる

Claude Code on the Desktop は Mac / Windows に対応したアプリです。CLI や Web にはない、GUI ならではの特徴があります。

  • 実行場所を選べる: Local(自分のマシン)/ Remote(クラウド)/ SSH を切り替えられます。ローカル実行ならファイル・MCP・ツールにフルアクセスできます。
  • セッションを自動で分離: Git worktree でセッションごとに作業ツリーを分けるため、並列で走らせても衝突しません(権限モードは4段階)。
  • レビューが GUI で完結: diff の気になる行にコメントを付けて一括送信すると、Claude が修正します。埋め込みブラウザで動作検証まで行えます。
  • Cowork と同居: 同じアプリに Chat / Cowork / Code の3タブがあり、コード以外の作業とワンアプリで往復できます。

Web 版でできること・できないこと

Web 版は「クラウドで環境構築ゼロ・並列・自動化」が得意な一方で、ローカル前提の作業は苦手です。使い分けの判断材料として整理します。

できること

  • 複数タスクをタブ感覚で並列実行
  • 複数リポジトリを横断して一括処理
  • ブランチ作成 → push → PR 作成まで自動
  • CI 失敗・レビュー対応を自動化(Auto-fix)
  • 外出先のスマホ / ブラウザからタスク開始
  • 環境構築ゼロ(依存インストールも自動)

できないこと・苦手なこと

  • ローカルファイルへの直接アクセス
  • ~/.claude/ のグローバル設定・ローカル MCP
  • 対話しながらの長時間デバッグ・試行錯誤
  • 非GitHubリポジトリからの push・PR作成
  • AWS SSO などのブラウザ認証
  • Free プランでの利用(Pro 以上が必要)

対話しながら試行錯誤したい場面や、ローカルの設定・ツールをフルに使いたい場面は、CLI や Desktop のローカル実行が向いています。逆に、定型的な PR 対応や並列処理はクラウドに任せる、という切り分けが基本になります。

効率化①:Auto-fix で PR 対応を自動化

Auto-fix は、PR に対する CI 失敗やレビューコメントへの対応を自動で進めてくれる仕組みです。

  1. PR を作成して Auto-fix を ON にする
  2. CI が失敗したら、自動で調査・修正・push する
  3. レビューコメントが付いたら、自動で対応する
  4. 人は最終確認してマージするだけ

Web はステータスバーから、Mobile は Claude に指示して有効化(※GitHub App のインストールが必須)、CLI では /autofix-pr で行います。落ちやすい CI(lint・型・テスト)からまず任せ、レビュー指摘は一次対応させて人は方針判断に集中する、といった使い方が効きます。定型的な PR は Auto-merge に回し、重要な変更だけ最終確認を挟むと、レビュー対応にかかる手間をまとめて減らせます。

効率化②:Agent View でセッションを一元管理

複数のセッションを並列で動かすと、どれが完了してどれが入力待ちなのかを追うのが大変になります。Agent View は、その状態を一画面で管理するためのビューです。

  • Ready for review(PR 作成済み): PR まで作成され、レビューを待っているセッション
  • Needs input: 要判断のセッション
  • Working: 実行中。閉じても走り続けます
  • Completed: 完了。レビュー待ち

CLI では claude agents、または キーで一覧を開けます。重くて時間のかかるタスクを Working に投げて放置し、手を止めるのは Needs input に来たものだけ、完了したものは Completed でまとめてレビュー、という流れにすると画面の切り替えを減らせます。並列で走らせても worktree に自動分離されるので、作業ディレクトリは衝突しません。Remote Control と併用すれば、席を外しても継続できます。

スマホからタスクを投げる

モバイルアプリからも Claude Code を使えます。連携には2つの方式があります。

  • Remote Control(継続): PC で動くローカルセッションをスマホから操作します。QR コードを読むだけで接続でき、コードはクラウドに出ません。
  • Web / claude.ai/code(クラウド実行): PC を使わず、クラウドで実行して PR まで作成します。PC を開く前でも着手できます。

対象リポジトリを選んでタスクを投げ、完了したらそのまま PR を確認・レビューへ進む、という流れがスマホだけで完結します。PC が使えない環境や外出先でも、コードレビューや軽い修正を進められるのが便利なところです。

なお、チームプランが会社管理の場合でも、モバイルアプリに対象の Claude アカウントを設定すれば連携を利用できます。

まとめ

Claude Code on the Web / Desktop で押さえておきたいポイントは次の5つです。

ポイント内容
並列化複数タスク・複数リポジトリをタブ感覚で同時に進められる
PR 対応の自動化Auto-fix で CI 失敗・レビュー対応を自動処理
スキマ時間の活用スマホ / ブラウザから、環境構築ゼロでタスクを開始できる
レビュー中心の働き方完了したセッションをまとめてレビューする流れに寄せられる
開発の土台は CLI / Desktop対話・試行錯誤やローカル依存の作業は手元で行う

クラウドに任せられる作業はクラウドへ、対話しながら詰めたい作業は手元へ。この使い分けができると、開発の進め方の幅が広がりそうです。みなさんも是非、claude --cloud から試してみてください!