Claude Code Web版の完全ガイド：ブラウザだけで始めるAI自動コーディング

最終更新日:2026/06/29

「AIにコーディングを任せたいけれど、ターミナルを開いて環境構築するのはハードルが高い」と感じている人もいるのではないでしょうか。

2025年10月にAnthropic（アンソロピック）社が発表したClaude Code on the web（以下、Claude Code Web版）は、このような声に応え、ターミナルで使うことが多かったAIコーディングエージェント「Claude Code」をブラウザから使えるようにした機能です。

本記事では、Claude Code Web版の概要から具体的な使い方、向いているタスク・向いていないタスクの判断基準、安全性の仕組みまで、エンジニアの方にもそれ以外の方にも役立つよう解説しています。

なお、2026年6月時点での情報をもとに作成しました。最新情報については公式ページをご参照ください。

先に押さえておきたい基本用語

繰り返し登場する基本用語をまとめました。最初にイメージをつかんでおくと、今後の解説が読みやすくなります。

用語	意味
GitHub	コードをオンラインで保管・共有・履歴管理できる世界標準のサービス
リポジトリ	GitHubでプロジェクトごとに作成する、コード一式の保管単位
ブランチ	本番のコードに直接手を入れずに作業するための「分岐路」
コミット	セーブポイントのように、変更内容を1つの単位で記録する操作
プルリクエスト（PR）	変更内容を本番に取り込んでよいか、レビュー依頼を出す仕組み
マージ	別ブランチの変更を本番のブランチに取り込む操作
CLI（コマンドラインインターフェース）	ターミナルにコマンドを入力して操作する方式
VM（仮想マシン）	あるコンピュータ上に仮想的に立ち上げる、もう1つの作業用コンピュータ

Claude Code Web版とは何か？CLI版との違いを解説

Claude Code Web版とは何か

Claude Code Web版とは何か、またCLI版とはどのように違うのかを解説します。

Claude Code Web版とは？

出典：Claude

Claude Code Web版は、ブラウザまたはClaudeのモバイルアプリから https://claude.ai/code にアクセスして使えるAIコーディング環境です。

Anthropicが管理するクラウド上でClaudeが動き、GitHubに保存しているコードに対して、追加・修正・テストの実行までを自動で進めてくれます。完成した変更内容はブラウザ上で確認でき、問題がなければ画面上の操作だけで自分のコードへ反映できます。

Web版とCLI版との違い

これまでのClaude Codeは「CLI版」と呼ばれ、自分のPCのターミナルにインストールして使用する形式でした。

PCに詳しくない人にとってハードルが高く、Node.jsという実行環境の用意からターミナルでのコマンド入力、ローカルでの環境構築、プロジェクトの動作に必要な外部ライブラリのインストールまで、さまざまな準備や前提知識が必要でした。

今回リリースされたWeb版ならクラウド上で完結するので、煩雑な工程を大幅に削減できます。

「VM（仮想マシン）」と呼ばれる一時的な環境がセッションごとに用意され、作業が終わると消えます。そこにGitHubで管理しているコード一式（GitHubリポジトリ）がコピーされ、Claudeが作業を始めるという仕組みです。

ユーザーが主に触るのはブラウザ上の入力欄とレビュー画面です。

主な違いは以下の表の通りです。

項目	CLI版	Web版
実行場所	自分のPC	Anthropic管理のクラウド
必要な準備	ターミナル、Node.js、ローカル環境	対象プランのClaudeアカウント、GitHubリポジトリ、初回のGitHub連携
並列タスク	git worktreeなどの工夫が必要	複数の独立したセッション・ブランチで進めやすい
スマホ対応	基本はPCのターミナル	ブラウザ／Claudeモバイルアプリから利用・確認できる
カスタマイズ性	高い	用意された作業マシン内で使える範囲に限られる

Claude Code Web版を利用できるプラン

2026年5月時点で、Claude Code Web版はPro、Max、Teamユーザー、および条件を満たすEnterpriseユーザー向けのResearch Previewとして提供されています。利用できるプランの目安は以下のとおりです。

プラン	月額（USD）	Web版利用
Free	無料	×
Pro	$20（月次）／$17相当（年次）	○
Max 5x	$100	○
Max 20x	$200	○
Team Standard	$25／シート（月次）／$20／シート相当（年次）	○
Team Premium	$125／シート（月次）／$100／シート相当（年次）	○
Enterprise	個別見積	○（契約形態・シート種別により異なる）

無料プラン（Free）ではClaude Code Web版を利用できません。個人利用の場合は、最低でもProプランへの加入が必要です。法人利用では、Team Standard／Team Premium、または条件を満たすEnterpriseプランで利用できます。

Web版でクラウド上の作業マシンを使用しても、プラン料金以外の追加課金はありません。ただし、Web版とCLI版でClaude Code全体の利用枠（レートリミット）を共有する点には注意が必要です。

並列で複数タスクを同時に走らせれば、それぞれが利用枠を消費するため、上限到達は早まりやすくなります。最初はProプランで小さなタスクから試し、上限に頻繁にひっかかるようになってからMax 5x、Max 20x、Team Premiumなどを検討するとよいでしょう。

Claude Code Web版を始めるための4STEP

Claude Code Web版の利用を始めるための手順を解説します。

Step 1：GitHubアカウントを用意する

GitHubはコードの変更履歴を管理する世界標準のサービスです。Claude Code Web版は、Anthropic側のクラウドにリポジトリをまるごとコピー（クローン）して動くため、GitHubリポジトリが起点になります。

まだGitHubアカウントを持っていない方は、GitHubの公式サイト（github.com）から無料でアカウントを作りましょう。自分以外には見えない非公開のプライベートリポジトリも無料プランで作成可能なので、まずは練習用に空のリポジトリを1つ作っておくとよいでしょう。

Step 2：claude.ai/code にアクセス

Step 2

ブラウザでClaudeにログインし、URLを claude.ai/code に変えるか、サイドバーの「Code」タブからアクセスします。Claudeのモバイルアプリからも、セッションの開始や進捗確認ができます。

Step 3：Claude GitHub Appをインストールする

Step 3

初回アクセス時に、GitHubとの接続を求められます。画面の指示に従って、Claudeにリポジトリ操作を許可するための公式アプリである「Claude GitHub App」をインストールします。

この際、まずは必要なリポジトリに絞って許可するのが無難です。ただし、公式ドキュメントでは、クラウドセッションは接続したGitHubアカウントが参照できるリポジトリにアクセスできる場合があり、GitHub Appのインストール対象だけがセッション単位のアクセス制御になるわけではないと説明されています。

チームで厳密に制限したい場合は、GitHub側のチーム権限やリポジトリ権限も見直しましょう。

Step 4：クラウド環境（Environment）を作成する

GitHub接続が終わると、Environmentと呼ばれるクラウド環境の設定画面が開きます。設定する主な項目は以下の4つです。

Name：環境の表示名（例：my-website）
Network access：このセッションで外部通信をどこまで許可するか
Environment variables：環境変数。APIキーなどを設定できますが、環境を編集できる人には見える前提で扱う必要があります
Setup script：Claude Codeの起動前に実行するBashスクリプト。例として、最初から環境に含まれていないツールを入れる場合は apt update && apt install -y gh のように設定できます

プロジェクト依存関係のインストールは、Setup scriptで行う方法もありますが、リポジトリ側のSessionStart hookで実行する方法もあります。Setup scriptは環境側の準備、SessionStart hookはプロジェクト側の準備、と分けて考えると理解しやすいでしょう。

ネットワーク設定は、主に次の4つから選べます。

モード	できること	おすすめの場面
None	一般的な外部通信をブロック	外部通信をできるだけ制限したいとき
Trusted	パッケージレジストリ、GitHub、クラウドSDKなど許可済みドメインのみ通信可能	通常用途。最初はここを推奨
Full	任意のドメインへ通信可能	外部APIや独自サービスとの通信が必要なとき
Custom	許可するドメインを個別に指定可能	必要な通信先だけを明示したいとき

どのモードを選択するか迷ったら 「Trusted」 を選んでおけば、npmやPyPIなどの一般的なパッケージインストールが進めやすくなります。ただし、GitHub操作は通常のネットワーク設定とは別の専用プロキシで扱われます。

また、Noneを選んでもClaude CodeはAnthropic APIと通信するため、「すべての通信が完全に遮断される」という意味ではありません。

参考：Claude Code をウェブで始める

基本的な使い方の流れ

準備が終われば、あとは指示を書くだけです。実際の流れを順に見ていきましょう。

1. タスクを文章で指示する

タスクを文章で指示する

入力欄に、やってほしいことを日本語または英語で指示します。

難しい構文は不要で、通常の生成AIチャットと同様の感覚で指示できます。

例えば、「READMEのインストール手順を最新のnpmコマンドに合わせて更新してください。古い記述があれば現行のものに置き換えてください」「/api/users というAPIエンドポイントに入力値のチェック処理を追加してください。空文字や255文字を超えるリクエストは400エラーで返してください」などです。

成功するプロンプトのコツと具体例

Claudeに指示を与える際は、「何を・どのファイルで・どのように変えたいか」を具体的にすると、期待通りの返答を得やすくなります。同じREADME修正の依頼でも、書き方によって結果は変わります。

観点	曖昧（NG）なプロンプト例	成功しやすいプロンプト例
プロンプト例	READMEを直して	README.md の「インストール手順」セクションを、最新のnpm 10系のコマンドに更新してください。古い npm install –save の表記が残っている箇所も、npm install に置き換えること
Claudeの動き	どの箇所を直すべきか判断できず、READMEの全体構造の見直しや誤字探しなど、見当違いの修正に手をつけることがある	該当セクションを特定し、指定どおりのコマンドに置き換える単純な差分でプルリクエストまで進める
結果	想定外の箇所まで書き換わり、レビューや手戻りが発生しやすい	必要な箇所だけが意図どおりに修正された差分が、1往復で出てくる

的確に書くためのコツは、主に次の3つです。

対象を具体的に指定する：ファイル名・セクション名・行番号など、修正してほしい場所を明示する
期待する動作を書く：どうなればOKか・どのような表記に揃えたいかを具体的に示す
守ってほしい制約を伝える：書き換えてほしくない箇所・使ってほしくない表記などがあれば書き添える

2. Claudeがクラウドで作業を始める

Claudeがクラウドで作業を始める

送信すると、Anthropic側のクラウドにリポジトリがコピーされ、Claudeがファイルを読み込み、変更を加え、必要に応じてテストを走らせます。進捗はリアルタイムで画面に表示されます。

「いまどのファイルを開いているか」「どんなコマンドを実行したか」がそのまま流れていくので、観察しているだけでも何が起きているかを追えます。

途中で「やっぱりこういう方針にして」と追加のメッセージを送れば、軌道修正もその場で可能です。

3. 変更内容をブラウザでレビューする

変更内容をブラウザでレビューする

Claudeが作業を終えると、変更前と変更後の差分である「diff」が表示されます。気になる箇所には、その行に直接書き込めるインラインコメントを残せるので、指摘して再修正も可能です。

コードを読まなくても、Claudeがまとめた変更の要約で全体像をつかめるのがWeb版の便利な点です。

4. プルリクエスト（PR）を作成する

プルリクエスト（PR）を作成する

レビューに問題がなければ「PR」ボタンを押します。

【補足】用語

ブランチ：本番のコードを汚さずに作業するための「分岐路」のこと
コミット：変更を保存するアクション。セーブポイントのようなもの
プルリクエスト（PR）：「この変更を本番のコードに取り込んでいいですか？」とレビュー依頼を出す仕組み

GitHubでは、いきなり本番のコードを書き換えるのではなく、いったん別ブランチに変更を保存します。PRを通してレビューしてから本番にマージ（別ブランチの変更を本番のブランチに取り込むこと）するのが一般的です。

Claude Code Web版では、Claudeが新しいブランチに変更をまとめ、GitHubへプッシュします。内容をレビューしたうえで、Web画面からPRを作成できます。あとはGitHubで内容を確認し、必要なレビューやCIを通過したうえでマージすれば、対象ブランチに変更を取り込めます。

Claude Code Web版の主な機能・特徴4つ

ここまでが基本フローです。次に、Web版の強みを4つ紹介します。

1. 並列タスクを進めやすい

Web版の大きな魅力は、複数タスクの並列実行です。「バグA修正」「README修正」「APIドキュメント更新」を同時に投げると、それぞれが独立した作業マシン、独立したセッション、独立したブランチで動き始めます。

CLI版でも複数ターミナルを開けば並列はできますが、複数の作業を並行させるための設定や、依存関係を重複してインストールする手間など、それなりに準備が要ります。

Web版なら、複数の独立したタスクを同時に進めやすいので、「同じリポジトリの細かい作業をまとめて片付ける」用途で特に役立ちます。ただし、並列実行した分だけ利用枠を消費する点には注意が必要です。

2. スマホ・アプリ対応

ClaudeのモバイルアプリはiOS・Androidの両方に対応しており、外出先からでもタスクの投入や進捗確認ができます。通勤電車の中でスマホからタスクを送り、オフィスに着いたらPCでPRを確認する、といった運用も現実的です。

3. CLI版との連携（テレポート／リモート）

「途中までWebで進めたタスクを、PCで仕上げたい」場面で活躍するのがテレポート機能です。Web版の画面から「Open in CLI」を選ぶと、claude –teleport というコマンドがコピーできます。これをローカルのターミナルで実行すると、会話履歴や編集中のブランチをローカルに引き継げます。

CLIからWebへは、既存のCLIセッションをそのまま移すのではなく、claude –remote “タスク内容” で新しいクラウドセッションを作成できます。進捗はブラウザやClaudeモバイルアプリから確認できます。ローカル環境を占有したくない作業をクラウドに任せ、確認をブラウザで行う、という使い方ができます。

4. PR作成までブラウザで進められる

CLI版だと、コミットやプッシュ、ブランチ作成といったgit操作が裏で動いていても、慣れないうちは「いま何が起きているのか」がつかみにくい場面があります。Web版はGitHub操作の最終ゴールであるPR作成までの流れがブラウザ上にまとまっており、Gitの仕組みをすべて理解していなくても作業結果をレビューしやすくなっています。

Claude Code Web版に向いているタスク

すべての作業がWeb版に向いているわけではありません。Anthropic公式の見解と、現場での運用知見を合わせて見ていきます。

明確な指示ができるバグ修正

「この関数の例外処理が抜けているので追加して」「auth.spec.ts の不安定なテストを直して」といった、ゴールがはっきりしている修正タスクは使いやすい用途です。Anthropic自身も、明確に定義されたタスクや、たまった対応待ちタスク（バックログ）の処理を公式の推奨ユースケースとして挙げています。

定型的なメンテナンス

依存ライブラリのバージョン更新、READMEの整備、コメント追加、コードの体裁の統一など、判断要素が少ない作業はWeb版に向いています。「やった方がいいけれど、つい後回しにする作業」をまとめて進める用途に合っています。

リポジトリ全体の理解

「このプロジェクトの構造を要約して」「主要な処理の入口とデータの流れを教えて」といった読解系のタスクも、Web版が得意とする領域です。Claudeはクローンしたリポジトリを見渡せるので、コードを書き換えずにプロジェクトの全体像をつかむ用途としても使えます。

複数リポジトリにまたがる似たような修正

「複数のサービスでログ出力フォーマットを揃えたい」「全リポジトリのライセンス表記を統一したい」といった横断的な修正はCLI版だと手間がかかりますが、Web版なら各リポジトリに対して個別にタスクを投げやすくなります。サービス分割が進んだ環境ほど恩恵が大きい使い方です。

READMEや設定ファイルなどの修正

スマホからでも気軽に依頼できる軽量タスクの代表例です。READMEの誤字修正、不要なファイルを管理対象から外す .gitignore の整備、依存関係の見直しなど、コードの中身を大きく変えない作業はWeb版で十分こなせます。「通勤中にスマホで指示を出して、オフィスに着いたら確認してマージする」というワークフローも取り入れやすいでしょう。

Claude Code Web版に向いていないタスク

逆に、Web版にあえて投げない方がいいタスクもあります。

ローカル環境でしか動かない検証

ハードウェア連携、自分のPC内にある開発用データベースの特定状態を前提とした処理、社内ネットワーク内のサービスとの通信などは、Anthropic側のクラウドでは再現できません。こうした作業はCLI版か、ローカルの開発環境で行うのが基本です。

フロントエンドの細かなUI/UX調整

フロントエンド（ユーザーが直接触れる画面側）の見た目をピクセル単位で調整したり、ブラウザでの表示確認を繰り返しながら詰めていく作業は、Web版だと変更してから結果を確認するまでの間隔が長くなりがちです。自分のPCで確認用のサーバーを立て、リアルタイムで見え方を確認できるCLI版の方が進めやすい領域です。

要件定義が終わっていない新規開発

「ECサイトを作って」のような大粒で要件が固まっていないタスクは、現状のWeb版では扱いにくい場合があります。要件を詰める段階は対話型のClaudeチャットなどで行い、内容が固まってから個別のタスクに分割してWeb版に渡す、という二段構えが現実的です。

機密性が高いリポジトリ

Anthropic側のクラウドにコードがコピーされる以上、社内ポリシーで「ソースコードの外部持ち出し禁止」が定められているリポジトリには使えません。Zero Data Retention（ゼロデータ保持）が有効なOrganizationでは、/web-setup やその他のクラウドセッション機能を利用できません。情報システム部門への事前確認は必須です。

大規模なビルドや重いテスト

Claude Code Web版のクラウドセッションには、CPU、メモリ、ディスクに上限があります。公式ドキュメントでは、目安として4 vCPU、16GB RAM、30GB disk程度のリソース上限が示されています。大きなビルドやメモリを多く使うテストは失敗または停止する可能性があるため、その場合はローカル環境や自社の実行環境でCLI版を使う方が安全です。

Claude Code Web版を安全に使うサンドボックスの仕組み

業務でWeb版を使えるかを判断する上で、避けて通れないのがセキュリティです。Anthropicは、クラウドセッションを分離された環境で実行することでこの問題に対応しています。

分離された作業環境とネットワーク制御

Claude Code Web版では、各セッションがAnthropic管理の分離された作業マシン（VM）で実行されます。リポジトリはそのなかにコピーされ、Claudeは隔離された環境でコードを分析・修正します。

また、Environmentごとにネットワークアクセスの範囲を設定できます。None、Trusted、Full、Customのように外部通信の許可範囲を選べるため、タスクに応じて通信先を制限できます。ただし、GitHub操作は専用プロキシで扱われ、Claude Code自体はAnthropic APIと通信します。ネットワークを制限したとしても、クラウドで処理している以上、社内ルールや契約条件の確認は欠かせません。

GitHub操作と認証情報の保護

Claude Code Web版では、GitHub操作に専用のプロキシが使われます。gitクライアントが直接実際の認証情報を持つのではなく、スコープを絞った認証情報を通じて、クローン、フェッチ、PR操作などを行う仕組みです。push操作も現在作業しているブランチに制限されるため、安全性を高める設計になっています。

ただし、過信は禁物です。クラウドにコードが渡る以上、企業のセキュリティポリシー上の許可は別途必要です。機密情報、顧客情報、APIキー、秘密鍵などを含むリポジトリで使う場合は、社内ルールを必ず確認した上で導入するようにしてください。

まとめ

Claude Code Web版について解説しました。ターミナル操作の苦手意識からCLI版に手を出せなかった人や、CLI版で環境構築につまずいた経験のある人にとって、ブラウザだけで始められる手軽さは大きな魅力です。

GitHubアカウントを作成し、対象プランに加入していれば、claude.ai/code から試せます。まずは捨てても構わない練習用リポジトリを用意し、READMEの修正や .gitignore の整備のような小さなタスクから試してみるのがおすすめです。プルリクエストを作成する感覚をつかめば、「AIに任せて自分はレビューに回る」という使い方が見えてきます。

一方で、コードエディタとの密な連携やリアルタイムの動作確認、ハードウェアに依存する検証など、ローカル環境ならではの機能を使いたい場合は、CLI版の方が進めやすい場面もあります。両方の長所を取りに行くなら、テレポート機能で「外で仕掛けて、必要に応じてPCで仕上げる」という使い分けが現実的です。

Web版・CLI版それぞれの強みを理解した上で、ご自身のタスクや働き方に合わせて使い分けてみてください。

アイスマイリーでは、AIエージェントのサービス比較と企業一覧を無料配布しています。課題や目的に応じたサービスを比較検討できますので、ぜひこの機会にお問い合わせください。

AIエージェントのサービス比較と企業一覧

よくある質問

Claude Code Web版は無料で利用できますか？

いいえ、無料プラン（Free）ではClaude Code Web版を利用できません。個人利用の場合は、最低でもProプラン（月額20ドル）への加入が必要です。Pro・Max 5x・Max 20xのほか、法人向けではTeam Standard／Team Premium、または条件を満たすEnterpriseプランで利用できます。なお、クラウド上の作業マシンを動かす分について、プラン料金以外の追加課金は発生しません。ただし、CLI版と利用枠（レートリミット）を共有している点は覚えておきましょう。

プログラミングの知識がなくても使えますか？

「自然な日本語で指示を出して、Claudeが返してきた変更を眺める」という流れまでは、コードが読めなくても使えます。READMEの修正、誤字脱字の修正、.gitignore の整備といった軽量タスクは非エンジニアでも扱いやすいでしょう。ただし、Claudeが提案した変更が本当に正しいかを判断するには、ある程度コードを読む力があった方が安全です。最初は捨てても構わない練習用リポジトリで試すのがおすすめです。

プライベートリポジトリ（非公開のコード）でも使えますか？

使えます。Claude GitHub Appや /web-setup でGitHubと接続すれば、公開／非公開を問わず、権限のあるリポジトリを扱えます。ただし、コードはAnthropic側のクラウドにコピーされて処理されます。また、クラウドセッションは接続したGitHubアカウントが参照できるリポジトリにアクセスできる場合があるため、GitHub側の権限管理も重要です。社内ポリシーで「ソースコードの外部持ち出し禁止」が定められている場合は、情報システム部門への事前確認が必須です。Zero Data Retentionが有効なOrganizationでは、クラウドセッション機能を利用できません。

CLI版とWeb版はどう使い分けるのがよいですか？

両方使えるなら、タスクに応じて使い分けるのが現実的です。テレポート機能を使えば、Webで途中まで進めたセッションをCLIに引き継いで仕上げることもできます。ざっくりした目安は次のとおりです。【Web版が向く】複数の細かいタスクを並列で投げたい／外出先からスマホで仕掛けたい／ローカル環境を汚したくない【CLI版が向く】フロントエンドの見た目を細かく追い込みたい／ローカルのDBやハードウェアと連携する／IDEと密に統合したい

Claudeが間違った変更をしたら元に戻せますか？

戻せます。Claude Code Web版は、変更内容を新しいブランチにまとめ、レビュー後にプルリクエスト（PR）を作成する流れです。本番ブランチに直接書き込むわけではないため、PRをマージしなければ本番には反映されません。万が一マージ後に問題が見つかっても、GitHubには変更履歴が残っているので、元に戻すPRを作るなり、特定のコミットをリバート（取り消し）するなりで復元できます。