Claude Code（クラウドコード／読み方はクロードコード）は、AnthropicのAI「Claude」にコーディングを任せられる開発ツールです。もともとは端末（ターミナル）で使うCLIツールでしたが、Web版が加わり、ブラウザだけでインストール不要のままAIにコードを書かせられるようになりました。この記事では、Web版Claude Code（claude.ai/code）の使い方を、GitHub接続からタスク指示、PR作成、ターミナルとの行き来、クラウド環境の設定まで手順で解説します。料金とCLI版との違い、向かない場面もあわせて、2026年10月時点の公式ドキュメントをもとに整理しました。
まとめ：Claude Code Web版の使い方と料金・CLI版との使い分けの要点
先に結論です。Claude Code Web版は、ブラウザからGitHubリポジトリをつなぎ、自然言語で指示するだけでAIがコードを書き、テストし、プルリクエスト（PR）まで作るクラウド型の開発ツールです。公式ドキュメントでは「クラウドセッション」と呼ばれます。
- 始め方：claude.ai/codeでGitHubを接続し、リポジトリを選んで依頼文を送るだけで、インストールは不要です。
- できること：並行タスク、差分へのコメント、PR作成、CI失敗に対応するAuto-fix、スマホからの操作。
claude --cloudとclaude --teleportでターミナルとも行き来できます。 - 料金：Freeでは使えず、Pro（月20ドル）、Max（月100ドル／200ドル）、Teamでプランの使用枠を消費します。
- 向かない場面：社外に出せないコードや、社内ネットワークに依存する開発はCLI版を選びます。
CLI版の導入や権限設定を含むClaude Code全体の使い方はClaude Codeの使い方｜導入から権限とCLAUDE.md設定まで実務手順で解説しており、本記事はWeb版に絞ります。
Claude Code（クラウドコード）とは｜読み方とWeb版が加わって変わった点
Claude CodeはAnthropicが提供するAIコーディングエージェントで、正式な読み方は「クロードコード」です。「クラウドコード」「クロウドコード」と検索されることも多いものの、綴りはClaude Codeで、指すツールは変わりません。Claudeにリポジトリの文脈ごと開発作業を任せられる点が、チャットでコードの断片を相談する使い方との根本的な違いです。できることの全体像はClaude Codeとは？できること・使い方・料金にまとめています。
登場当初のClaude Codeは、自分のPCのターミナルにインストールして使うCLI（コマンドライン）ツールだけでした。2025年10月20日、Anthropicがブラウザで動く「Claude Code on the web」をリサーチプレビューとして発表し、環境構築なしでAIにタスクを渡せるWeb版が加わりました。同じ発表記事には2026年9月付の更新注記があり、Pro・Max・Teamのユーザー向けに一般提供（GA）になったと案内されています。
Web版はブラウザのGUIから操作し、実際のコード実行はAnthropicが管理するクラウド上で行われます。手元にNode.jsや開発環境をそろえなくても、リポジトリを指定して指示文を書くだけで開発が始められる点が、CLI版から変わった最大の違いといえます。
Web版Claude Codeでできること｜GitHub連携・並行タスク・Auto-fix
Web版は単なるコード生成器ではなく、既存のコードベースに変更を加えて開発を前に進める点が特長です。主にできることは次の4つです。
GitHubリポジトリ連携とPR作成：専用ブランチと差分レビューの流れ
Web版はGitHubのリポジトリを接続して使います。「このバグを直して」と日本語で指示するだけで、AIがリポジトリをVMへクローンし、コードを書き換え、テストを走らせ、区切りがつくと作業ブランチをプッシュします。作業ブランチは claude/ から始まる専用ブランチで、mainブランチを直接壊しません。
画面の+42 -18のような行数表示を選ぶと差分ビューが開き、任意の行に付けたコメントは次のメッセージと一緒にClaudeへ渡ります。納得したらCreate PRでPR（下書きも可）を作成する流れです。PR作成後もセッションは続くため、CIの失敗ログを貼って追加修正を頼めます。
複数タスクの並行実行：セッションごとに独立したVMとブランチで動く
Web版はタスク単位で動きます。公式のクイックスタートによると、各タスクは独自のセッションとブランチを持つため、1つが終わるのを待たずに「機能Aの実装」「バグBの修正」を並行で投げられます。
手元で並列に動かすには作業ツリーを分ける必要があります（Claude Codeのgit worktreeで並列エージェント開発を行う方法）。Web版はその管理が要らないぶん、細かい依頼を数多くさばく用途に向きますが、並行実行した分だけ使用量の上限を早く消費します。業務そのものを自律実行させたい場合はClaude Coworkの領分です。
スマホとデスクトップアプリから同じクラウドセッションを操作する
WebだけでなくClaudeの公式アプリ（iOS／Android）のCodeタブからも同じクラウドセッションを開けます。セッションは端末をまたいで続き、ブラウザのタブを閉じても処理は止まりません。デスクトップアプリでは、開始時にCloudを選ぶとクラウドで動きます（Claude Codeデスクトップアプリの使い方）。
スマホは画面が小さく、大量のコードを読む作業には向きません。開発はPCのブラウザで行い、スマホは進捗確認や簡単な指示出しに使うのが現実的です。スマホで使う方法の比較はClaude Codeをスマホで使う4つの方法を参照してください。
Auto-fixでCIの失敗とレビューコメントへの修正をPR上で任せる
Auto-fixは、PRを監視してCIの失敗やレビューコメントに自動で対応する機能です。クラウドセッションの公式ドキュメントによると、修正内容が明確なら変更をプッシュし、解釈が分かれる指摘や設計に関わる指摘は実行前に利用者へ確認します。利用には対象リポジトリへClaude GitHub Appをインストールしておく必要があります。
有効化は、セッション画面のCIステータスバーでAuto-fixを選ぶか、PRのブランチで/autofix-prを実行します。Claudeはレビューの返信を利用者のGitHubアカウント名義で投稿するため、PRコメントを契機にデプロイが走る自動化があるリポジトリでは有効化を避けてください。GitHub Actions上でClaudeを動かす別方式はClaude Code GitHub Actionsの導入と料金で解説しています。
Web版・CLI版・チャット版（claude.ai）の違い｜比較表と作業別の使い分け
「Claude Code Web版」「Claude Code CLI版」「Claudeのチャット」は名前が似ていますが役割が違います。混同しやすいので、動作環境・インストール・主な用途で整理します。
| 項目 | Claude Code Web版 | Claude Code CLI版 | Claude（チャット） |
|---|---|---|---|
| 操作画面 | ブラウザ／スマホ／デスクトップ | ターミナル | ブラウザ／アプリのチャット |
| インストール | 不要 | 必要（PCに導入） | 不要 |
| 実行場所 | Anthropicのクラウド | 自分のPC（ローカル） | —（会話のみ） |
| コードへの変更 | ブランチをプッシュしPR作成 | ローカルのファイルを直接編集 | しない（回答を提示） |
| 手元の設定 | 使わない（リポジトリのみ） | 使う | — |
| 接続を切った後 | 動き続ける | 止まる | — |
| 並行タスク | 得意 | worktreeで分ける | — |
| 向く用途 | 手軽に開始・並行処理 | ローカル環境の細かい制御 | 相談・下調べ |
権限モードにも差があります。クラウドセッションで選べるのはAccept edits・Plan・Autoの3つで、1操作ずつ承認するManualや確認を全部飛ばすBypassは使えません。
使い分けの目安はこうです。環境構築なしですぐ始めたい、複数タスクを同時に回したいならWeb版。ローカルの開発環境と密に連携させたいならCLI版。設計相談やエラーの原因調べなど会話で済む用途はチャット版が向きます。手元のPCで動かしたままブラウザから操作したい場合は、Web版ではなくClaude Code Remote Controlが該当します。
Web版Claude Codeの使い方｜GitHub接続からタスク指示・PR作成までの手順
Web版はインストール不要なので、始め方はシンプルです。公式クイックスタートに沿うと、次の流れで開始できます。
- 有料プランを用意する：Pro・Max・Team、またはClaude Codeを含む席のEnterpriseアカウントが必要です。
- claude.ai/codeを開く：ブラウザで
claude.ai/codeにアクセスし、サインインします。 - GitHubを接続する：GitHubの認可ページで承認します。新規開発なら先に空のリポジトリを作っておきます。
- Default環境を確認する：Pro・MaxではDefault環境がネットワークTrustedで自動作成され、最初はそのままで構いません。
- リポジトリとブランチを選ぶ：入力欄の下で対象を選び、必要なら開始ブランチを変えます。
- 権限モードを選び、依頼文を送る：Accept edits・Plan・Autoから選び、依頼内容を書いてEnterで送信します。
- 差分を確認してPRを作る：差分ビューでインラインコメントを付けて修正を重ね、納得したらCreate PRで取り込みます。
GitHub接続の2方式：Claude GitHub Appと/web-setupの違い
GitHubの接続方法は2つあります。ブラウザで接続した場合、公開リポジトリはすべて扱えますが、非公開リポジトリはClaude GitHub Appをインストールしたものだけが選択肢に出ます（組織配下ではオーナーの承認が必要な場合あり）。「接続したのにリポジトリが出てこない」ときは、まずここを疑ってください。
普段からGitHub CLI（gh）を使っているなら、ターミナルから接続する方法もあります。ghのトークンをClaudeのアカウントへ送り、そのトークンで読み書きできるリポジトリをすべて扱えるようにする方式です。
# GitHub CLIにログイン（済んでいれば不要）
gh auth login
# Claude Codeを起動し、claude.aiアカウントでログインしてから実行
claude
/login
/web-setup
# Actionsのワークフローファイルを変更するプッシュが拒否される場合はスコープを追加
gh auth refresh -s workflow/web-setupはシェルではなくClaude Codeの中で打つコマンドです。APIキーで認証している状態では表示されないため、/statusでログイン方法がclaude.aiアカウントになっているか確認します。Auto-fixはGitHub Appが前提なので、チームではGitHub Appで対象リポジトリを絞る方式が扱いやすくなります。
依頼文の書き方：ファイル名・エラー出力・期待動作を入れた指示の例
使いこなすコツは、指示を具体的にすることです。公式クイックスタートも「テストを直して」より「tests/test_auth.pyの失敗している認証テストを直して」のように、ファイルや関数の名前を挙げる書き方を勧めています。エラー出力があれば貼り、症状だけでなく期待する動作も書きます。
src/auth/login.ts のログイン処理で、パスワードの前後に空白があると
認証に失敗するバグを直してください。
- 期待する動作: 前後の空白を除いてから照合する
- 再現手順: npm test -- tests/auth.spec.ts の "trims password" が失敗する
- 変更範囲: login.ts とテストのみ。API の引数は変えない
- 完了条件: npm test がすべて通ること「いい感じにして」のような曖昧な指示は意図とズレやすく、レビューの負荷も上がるため避けたいところです。大きな改修は権限モードをPlanにして方針を承認してから編集させると手戻りが減ります。課題管理ツールからはclaude.ai/code?prompt=...&repositories=owner/repoの形式のURLで依頼文を事前入力できます。まずは影響範囲の小さいタスクから任せ、PRの差分は必ず人がレビューしてください。
TeamとEnterpriseで管理者が先に済ませる2つの組織設定
TeamとEnterpriseでは、メンバーが使い始める前に組織のオーナーの設定が要ります。1つ目は組織設定の「Connectors」でGitHubコネクタを有効にすることです。これが無効のままだと、メンバーの画面にはGitHubのサインインボタンが出ず、「GitHub access is required for Claude Code cloud sessions」と表示されます。
2つ目は任意のQuick setupで、有効にするとメンバーが/web-setupを使え、初回の環境作成も自動になります（既定は無効）。ヘルプセンターの案内のとおり、Claude Codeを含む席の割り当ても必要です。ゼロデータ保持（ZDR）やIP許可リストを有効にした組織では、クラウドセッションが使えないか認証エラーになります。
ターミナルとWeb版の行き来｜claude –cloudと–teleportの実行例
CLI版を入れている場合は、ターミナルとクラウドセッションの間で仕事を受け渡せます。どちらもCLIが同じclaude.aiアカウントでログインしていることが前提で、APIキー認証やAmazon Bedrock経由の設定では使えません。
claude –cloudでターミナルからクラウドセッションを起動する手順
--cloudフラグに依頼文を付けると、現在のリポジトリを対象にした新しいクラウドセッションが作られます。注意したいのは、VMがクローンするのはGitHub上の現在のブランチであり、手元の作業ツリーではない点です。ローカルにだけあるコミットは先にプッシュしておきます。
# 計画はローカルのPlanモードで固め、docs/migration-plan.md にコミットしてプッシュ
claude --permission-mode plan
# 実行はクラウドへ。コマンドごとに独立したセッションが並行で動く
claude --cloud "Execute the migration plan in docs/migration-plan.md"
claude --cloud "Fix the flaky test in auth.spec.ts"
# 走っているセッションへ追加の指示だけを送って終了する
claude -p "テストが通ったらREADMEの手順も更新して" --cloud <session-id>旧来の--remoteも非推奨の別名として動きます。GitHubにリモートが無い場合はローカルのリポジトリをアップロードしますが、Windowsでは.envなどの未コミット変更も除外されずに送られるため、先に退避してください。
claude –teleportでクラウドの作業をローカルへ引き取る条件
逆方向は--teleportです。claude --teleportでセッションの選択画面が開き、IDを付ければそのセッションを直接再開します。Claude Codeの中では/teleport（短縮形/tp）でも同じ操作ができます。
# セッション一覧から選んで引き取る
claude --teleport
# IDを指定して引き取る（IDは claude.ai/code のセッション一覧で確認）
claude --teleport <session-id>引き取りには4つの条件があります。作業ツリーに未コミットの変更が無いこと、同じリポジトリ（フォークは不可）のチェックアウトで実行すること、クラウド側のブランチがプッシュ済みであること、同じclaude.aiアカウントで認証していることです。引き取った後の作業はクラウドのセッションに反映されず、逆にローカルの既存セッションをCLIからクラウドへ送ることもできません。
クラウド環境の設定方法｜ネットワーク4段階とセットアップスクリプトの例
クラウドセッションは「クラウド環境」という保存済みの設定の上で動きます。クラウド環境の公式ドキュメントによると、環境ごとにネットワークアクセス、環境変数、セットアップスクリプトを設定できます。VMはUbuntu 24.04で、Python 3系とNode.js 20〜22（既定は22）などが最初から入った状態です。
ネットワークアクセスはNone・Trusted・Full・Customの4段階から選ぶ
| アクセスレベル | 外部へ接続できる範囲 | 向く場面 |
|---|---|---|
| None | 接続なし | 機密度の高い調査・リファクタ |
| Trusted（既定） | パッケージ配布元やGitHubなど許可済みドメイン | 通常の開発 |
| Full | すべてのドメイン | 外部APIの検証 |
| Custom | 自分で列挙したドメイン | 社内向けの決まった接続先 |
Noneでも、Claude Code自身のAnthropic APIへの通信は残ります。また環境変数はその環境を使う全員が読めるため、APIキーは環境変数に書かず、Pro・Maxなら「ネットワークシークレット」に登録します。
セットアップスクリプトとSessionStartフックで依存パッケージを入れる設定例
最初から入っていないツールは、セットアップスクリプトで入れます。スクリプトはrootで実行され、約5分以内に終われば結果がキャッシュされて次のセッションから再利用されます。
#!/bin/bash
# 環境設定の「Setup script」欄に書く（Ubuntu 24.04・rootで実行）
apt update && apt install -y shellcheckリポジトリごとのnpm installのように、ローカルでもクラウドでも必要な準備はSessionStartフックに書きます。クラウドだけで動かしたいときは、VM上でtrueになる環境変数CLAUDE_CODE_REMOTEで分岐させます。リポジトリの.claude/settings.jsonに置く設定は次のとおりです。
{
"hooks": {
"SessionStart": [
{
"matcher": "startup|resume",
"hooks": [
{
"type": "command",
"command": "bash \"$CLAUDE_PROJECT_DIR\"/scripts/install_pkgs.sh"
}
]
}
]
}
}#!/bin/bash
# scripts/install_pkgs.sh：クラウドセッションのときだけ依存を入れる
if [ "$CLAUDE_CODE_REMOTE" != "true" ]; then
exit 0
fi
npm install
pip install -r requirements.txt
exit 0フックは開始と再開のたびに走るため、重いインストールはキャッシュの効くセットアップスクリプトへ寄せます。リポジトリ側に手順を持たせる仕組みには、独自の手順書を足すClaude Skillsもあります。
Web版はクラウド上で動く｜実行環境の仕組みと選ぶべきでない場面
CLI版が自分のPC上で完結するのに対し、Web版のタスクはAnthropicが管理するクラウド上の隔離されたVMで実行されます。GitHubとの通信は専用プロキシを介し、GitHubの認証情報は暗号化されてサーバー側に保管され、VMの中には入りません。VM内のコードが侵害されても、資格情報は切り離して守られる設計です。
一方で、社外に出せない機密性の高いソースコードを扱う場合は、Web版を選ぶべきではありません。社内規程で外部サービスへのコード送信が制限されているなら、ローカルで完結するCLI版を選びます。手元で動かす場合の権限ルールやサンドボックスの設定はClaude Codeのセキュリティ設定で解説しています。
また、ローカルDBや社内ネットワーク内のリソースに強く依存する開発も、クラウドのVMでは再現しづらく不向きです。リポジトリのクローンとPR作成はGitHubが前提で、GitLabやBitbucketのリポジトリはアップロードして作業はできても、結果をそのリモートへプッシュできません。
Web版Claude Codeの料金｜Pro・Max・Teamの違いと使用量の上限
Web版・CLI版を問わず、Claude Codeの利用には有料プランが必要です。2026年10月13日時点の公式の料金ページとMaxプランのヘルプで確認した月額は次のとおりです（Webから契約した場合の米ドル建て。スマホアプリ経由では異なることがあります）。
| プラン | 月額 | Claude Code | 主な位置づけ |
|---|---|---|---|
| Free | 0ドル | 使えない | チャットのお試し |
| Pro | 20ドル（年払いは月17ドル） | 利用可 | 個人・軽めの利用 |
| Max 5x | 100ドル | 利用可 | 使用量の多い個人 |
| Max 20x | 200ドル | 利用可 | ヘビーユーザー |
| Team（スタンダード席） | 1席25ドル（年払いは20ドル） | 利用可 | チームでの導入 |
「Max 5x／20x」の数字は、Proのセッションあたりの使用枠に対する倍率です。使用量には約5時間ごとにリセットされるセッション単位の上限と、週次の上限があり、上位プランほど枠が大きくなります。クラウドのVMに別料金はかかりませんが、チャットやCLI版と同じ使用枠を共有するため、タスクを並行で走らせるほど枠は早く減ります。
2026年4月にProからClaude Codeを外す変更が一時表示された（約1日で撤回・復帰）経緯もあり、対象プランや上限は変わりやすいので、申し込み前に公式の料金ページで最新条件を確認してください。APIキーでの従量課金との損益分岐や、Teamの席の選び方はClaude Codeの料金プラン比較で詳しく比べています。
導入判断：Web版から始めるチームとCLI版を先に入れるチームの条件
判断は「コードを外へ出せるか」と「ローカル環境への依存度」の2軸で決まります。
Web版から始めてよいのは、次の3条件がそろうチームです。リポジトリがGitHubにあること、社内規程上クラウドへのコード送信が認められていること、テストがパッケージのインストールだけで動くこと。メンバーのPCに環境を作らずに試せるため、小さな不具合修正を数本並行で投げ、PRの質を見てから範囲を広げられます。
逆に、CLI版を先に入れるべきなのは、社内のDBや認証基盤に接続しないとテストが通らない場合、GitHub以外が主のリポジトリ管理の場合、ゼロデータ保持やIP許可リストを組織で有効にしている場合です。ここでWeb版を先行させると、環境の再現に時間を取られて評価が進みません。OpenAIのCodexとの比較も含めて選びたい場合はCodexとClaude Codeの違いが参考になります。
定期的な依存更新まで任せたいなら、クラウドセッションを予定実行するClaude Codeルーチンが次の段階です。社内規程の整理やAIに任せる作業の線引き、PRレビューの運用設計まで含めて相談したい場合は、一創の生成AI導入支援で導入計画から伴走しています。
Claude Code（クラウドコード）に関するよくある質問
Web版Claude Codeの使い方や料金について、よく検索される質問にまとめて答えます。
Claude Code（クラウドコード）の読み方は？何ができますか？
読み方は「クロードコード」です（クラウドコード／クロウドコードと表記されることもありますが同じツールを指します）。GitHubのリポジトリをつなぎ、自然言語で指示するとAIがコードを書き、テストを実行し、プルリクエストまで作成します。単にコードを生成するだけでなく、実際のコードベースに変更を反映できるのが特長です。
Claude CodeとClaude（チャット）の違いは何ですか？
Claude（claude.aiのチャット）は会話で質問に答えたり文章やコードの相談に乗ったりする汎用アシスタントです。Claude Codeは実際のGitHubリポジトリに接続し、コードの作成・修正・テスト・PR作成まで開発作業そのものを代行します。チャットの回答を自分で貼り付ける必要がなく、AIがコードベースに直接変更を加える点が決定的な違いです。
Web版Claude Codeは無料で使えますか？
使えません。無料（Free）プランではClaude Code自体が利用対象外で、Pro（月20ドル）以上、Max（月100ドル／200ドル）、またはTeamの契約が必要です。クラウドのVMに追加料金はかかりませんが、プランの使用枠を消費します。プランの対象範囲は変動があるため、契約前に公式の料金ページで最新を確認してください。
スマホ（iPhone）だけでClaude Codeは使えますか？
Claudeの公式アプリ（iOS／Android）のCodeタブからクラウドセッションを開け、タスクの依頼や進捗確認はスマホで可能です。ただし画面が小さく大量のコードの確認・編集には向かないため、本格的な開発はPCのブラウザ、スマホは進捗確認や簡単な指示出しという補助用途がおすすめです。
Web版Claude Codeで画像生成はできますか？
Claude Codeはコードの作成・修正を担うコーディングエージェントで、画像そのものを生成するツールではありません。画像を扱うWebアプリの実装コードを書かせることはできますが、イラストや写真を出力する用途には画像生成AIを別途使うのが適切です。
関連記事
- Claude Codeの使い方｜導入から権限とCLAUDE.md設定まで実務手順：CLI版を含むClaude Code全体の使い方
- Claude Codeをスマホで使う4つの方法｜公式Remote Control・Web版・Claude Code UIの手順：スマホから操作する方法の比較
- Claude Codeの料金プラン比較｜Pro・Max・Team・APIの損益分岐と支出上限の設定：プラン選びの詳細
- Claude Skillsとは？SKILL.mdの書き方とclaude.ai・Claude Code・APIでの使い方：独自スキルでエージェントを拡張する方法
- Claude Coworkとは｜料金プラン・使い方・制限とCopilot Coworkとの違い：業務を自律実行させるエージェント
