Claude CodeをGUIで使う｜デスクトップ・VS Code・Web版の選び方

「Claude Codeはターミナル（黒い画面に文字を打ち込む道具）で使うものらしい。自分には難しそうで、手を出せずにいる」と感じている方は多いのではないでしょうか。

実は、Claude Codeはターミナルを開かなくても、ふつうのアプリやブラウザの画面から使えます。公式のドキュメントでは、Claude Codeは「ターミナル・IDE拡張・デスクトップアプリ・Web」の複数の場所で動き、どの場所も同じ仕組み（エンジン）につながっていると説明されています。ターミナルを使いたくない人向けの入口も、公式に用意されています。

ただし、画面から使える方法は1つではありません。デスクトップアプリの「Codeタブ」、VS Code（コードを書くためのエディタ）の拡張機能、ブラウザで開くWeb版の3つがあり、どれを選ぶかで、使えるファイルの場所や、パソコンを閉じたあとの動きが変わります。この記事では、3つの違いを比べたうえで、それぞれの入れ方と使い方、料金、場面別の選び方、画面を行き来する方法までを順に解説します。内容は2026年10月時点の公式ドキュメントをもとにしています。画面の文言や提供状況は変わることがあるので、使う前に公式ページもあわせて確認してください。

GUIで使える3つの方法

GUI（ジーユーアイ）は、ボタンやメニュー、色つきの表示などで操作する「画面で使う形」のことです。反対に、文字だけで操作する形をCUIやCLI（コマンドライン）と呼びます。Claude Codeを画面で使うときは、次の3つが選べます。

公式の比較ページでは、デスクトップ版は「視覚的な確認、並行作業、導入しやすさ」、VS Code拡張は「ターミナルに切り替えずにVS Codeの中で作業する」、Web版は「あまり手を入れなくてよい長い作業や、オフラインでも続けたい作業」に向いていると整理されています。

どれも中身は同じClaude Code

公式ドキュメントでは、Claude Codeはどの場所でも同じ仕組みで動き、場所ごとに得意な使い方が違うと説明されています。画面が違うだけで、Claudeがファイルを読み、必要な変更をして、結果を返すという動きは共通です。

パソコン上で動く画面（デスクトップ版・VS Code拡張・ターミナル版）の間では、設定、プロジェクトごとの指示書（CLAUDE.md）、外部ツールとの接続（MCP）が共有されます。たとえば、デスクトップ版で整えたCLAUDE.mdは、あとからVS Code拡張で開いても同じように読み込まれます。

ターミナルが要らないわけではない場面

画面で使う方法は便利ですが、ターミナル版にしかない機能もあります。公式の比較では、次のようなものはターミナル版（CLI）だけです。

• プログラムから呼び出して自動で動かす使い方（--printやAgent SDK）
• 権限モードのdontAsk

このほか、Amazon BedrockやMicrosoft Foundryなど、ほかの会社のAI基盤につなぐ使い方は、公式の比較ページでターミナル版かIDE拡張を使うよう案内されています。

夜間に自動でスクリプトを動かすような使い方を考えていなければ、ふだんの業務で困ることは多くありません。まずは画面で始め、必要になったらターミナル版を足す、という順番で問題ありません。

JetBrainsのIDEは少し事情が違う

IntelliJ IDEAやPyCharmなどのJetBrains製エディタ向けにも、Claude Codeのプラグインがあります。ただし公式ドキュメントによると、このプラグインはIDEの中のターミナルでclaudeコマンドを動かし、それに接続する仕組みです。Claude Code本体のCLIを別に入れる必要があり、チャット画面そのものが用意されるVS Code拡張とは性質が異なります。この記事の「ターミナルを使わずに」という趣旨からは外れるため、詳しくは扱いません。

使うには有料プランが必要

3つの方法のどれも、Claudeの有料プラン（Pro・Max・Team・Enterprise）が前提です。デスクトップ版の公式クイックスタートには「Claude CodeにはPro、Max、Team、Enterpriseのサブスクリプションが必要」と書かれています。料金の詳細は、あとの「料金と使えるプラン」で説明します。

3つの違いを比べる

3つの方法を選ぶときに、一番大きな分かれ目になるのは「Claudeに触らせたいファイルが、どこにあるか」です。自分のパソコンの中にあるのか、GitHub（ソースコードを預けておくWebサービス）の中にあるのかで、選べる方法が変わります。

公式の比較表でも、クラウドのセッションは「自分のローカルの設定を使うか」が「いいえ、リポジトリの分だけ」、ローカルのセッションは「はい」とされています。Web版は、手元のパソコンの環境に依存しない代わりに、手元の設定やツールは持ち込めません。

変更の確認のしかた

Claudeが直した内容を、どこでどう確かめるかも違います。

どれも「Claudeに任せっぱなしにせず、人が変更を確かめる」ための仕組みです。画面で使うメリットの1つは、この確認が文字の羅列ではなく、色つきの差分として見られる点にあります。

画面ごとの権限モード

権限モードは、Claudeがファイルの変更やコマンドの実行を、どこまで確認なしに進めるかを決める設定です。選べるモードは画面によって違います。

Web版では、ManualとBypass permissionsは選べず、公式のクイックスタートでは「Accept edits」「Plan」「Auto」の3つが案内されています。Autoは、組織の設定や使うモデルが条件を満たしたときにだけ表示されます。

デスクトップ版の使い方

デスクトップ版は、Claudeのデスクトップアプリ（Mac・Windows）に入っている「Codeタブ」を使う方法です。公式ドキュメントでは、アプリにClaude Codeが含まれているため、Node.jsやターミナル版を別に入れる必要はないとされています。3つの中では、最も「ふつうのアプリ」に近い使い心地です。

できること

• パソコンの中のフォルダを選び、そのファイルを直接読み書きする
• 変更した箇所を、ファイルごとの色つきの差分で確認し、行ごとにコメントして直してもらう
• 作っているWebサイトやアプリを、アプリ内のブラウザ（Browserペイン）で開き、表示を確かめながら進める
• 複数の作業を、別々のセッションで同時に進める
• 決まった時間に、決まった作業を自動で始める（スケジュール実行）
• 長い作業を、パソコンを閉じても続くクラウドで動かす

公式の説明では、Codeタブは「パソコンの中のファイルに直接触れられる、対話型のコーディングアシスタント」です。権限モードの設定によって、Claudeが変更を提案するたびに承認する使い方も、変更後にまとめて確認する使い方も選べます。

入れ方と最初の1回

アプリを入れてから、最初の依頼を送って結果を確認するまでの流れです。

1. アプリをダウンロードする公式サイト（claude.com/download）から、お使いのOS用のインストーラーを入手します。Macは、IntelとApple Siliconの両方に対応した1つのインストーラーです。Windowsは通常のパソコン用（x64）のほかに、ARM64向けのインストーラーも用意されています。
2. インストールしてサインインするインストーラーを実行し、Claudeを起動して、Anthropicのアカウントでサインインします。
3. 「Code」タブを開く画面上部の中央にある「Code」をクリックします。有料プランへの切り替えを求められたら、契約を済ませます。ブラウザでのサインインを求められたら、完了してからアプリを再起動します。
4. 環境とフォルダを選ぶ「Local」（このパソコンで動かす）を選び、「Select folder」から作業するフォルダを指定します。
5. モデルを選ぶ送信ボタンの隣のプルダウンから、使うモデルを選びます。あとから変更できます。
6. 依頼を書いて送る日本語で、やってほしいことを書いて送信します。
7. 変更を確認する権限モードによって、承認を求められたり、変更後に「+12 -1」のような表示が出たりします。内容を見て、受け入れるか、直してもらいます。

環境の選択肢

手順4で選ぶ「環境」には、次のような種類があります。公式ドキュメントの内容を整理しました。

最初は「Local」だけ覚えておけば十分です。SSHやWSLは、サーバーの中のファイルや、WSLの中に置いたプロジェクトを扱いたくなったときに検討します。

最初に頼んでみること

公式のクイックスタートでは、最初の依頼として「TODOコメントを見つけて直して」「メイン関数のテストを追加して」「このコードベース用のCLAUDE.mdを作って」といった例が挙げられています。プログラムを書かない方は、次のような「読むだけ」の依頼から始めると、ファイルが変わる心配がありません。

• 「このフォルダに何が入っているか、初めて見る人向けに説明して」
• 「このWebサイトのトップページの構成を、見出しの一覧で教えて」
• 「このフォルダの使い方を、README.mdにまとめて」（新しいファイルを作る依頼）

慣れてきたら、「会社の住所の表記を、全ページで新しいものに差し替えて」のように、複数のファイルにまたがる修正を頼めます。変更後に出る差分の表示で、どのファイルのどこが変わったかを確かめながら進めます。

向いている場面

使うときの注意

• Windowsでは、作業用コピー（worktree）を使うセッションにGitが必要です。公式ドキュメントによると、古い版のアプリは、使わない場合でもGitを求めることがあるため、更新してください
• Cloudを選んだセッションは、パソコンの中のファイルを使えません。手元のファイルを直したいときは「Local」を選びます
• 会社のパソコンでは、IT担当者がClaude Codeの機能を管理している場合があります。「Codeタブが出ない」ときは、まず社内の担当者に確認してください

デスクトップ版の入れ方や便利な機能は、「Claude Code Desktopとは」の記事で詳しく解説しています。

VS Code拡張の使い方

VS Codeは、Microsoftが提供している、文章やコードを編集するためのエディタです。このエディタにClaude Codeの拡張機能を入れると、エディタの右側などにチャットのパネルが現れ、開いているファイルを見ながらClaudeに頼めます。公式ドキュメントでは、この拡張機能が「VS Code内でClaude Codeを使うための推奨の方法」と案内されています。

すでにHTMLや設定ファイルをVS Codeで編集している方、これからエディタを使い始める方に向いています。エディタとClaudeの画面が1つにまとまるので、ファイルを見る・直してもらう・自分でも手直しする、という流れが切り替えなしで進みます。

必要なもの

公式ドキュメントには、拡張機能は自分専用のClaude Codeを同梱しているが、claudeコマンドをターミナルから使えるようにはしない、と書かれています。パネルで使うだけなら、ターミナル版の導入は要りません。

入れ方と最初の1回

1. 拡張機能を入れるVS Codeで拡張機能の画面（WindowsはCtrl+Shift+X、MacはCmd+Shift+X）を開き、「Claude Code」で検索して「Install」を押します。入らない場合は、VS Codeを再起動するか、コマンドパレットから「Developer: Reload Window」を実行します。
2. パネルを開くエディタ右上のツールバーにあるスパーク（火花）のアイコンを押します。ファイルを開いていないときは、画面右下の「✻ Claude Code」でも開けます。コマンドパレットで「Claude Code」と入力し、「Open in New Tab」を選ぶ方法もあります。
3. サインインする初回は「Sign in」を押し、ブラウザで認証を完了します。
4. 依頼を送るパネルの入力欄に、日本語でやってほしいことを書きます。ファイルの一部を選択すると、Claudeがその範囲を自動で見ます。
5. 変更を確認するManualモードでは、Claudeがファイルを編集する前に、元と変更後を並べた画面が出て、受け入れるか、断るかを選べます。

サインインのあとには「Learn Claude Code」というチェックリストが表示されます。「Show me」を押しながら進めると、基本的な操作を一通り試せます。

プロンプト欄でできること

入力欄の周りには、次のような機能があります。公式ドキュメントに載っているものを、仕事で使いやすい順に紹介します。

Planモードでは、Claudeが変更の計画をMarkdownの文書として開き、そこに直接コメントを書いて、実行前に方向を直せます。/planと入力しても、このモードに切り替わります。

変更を戻す（チェックポイント）

VS Code拡張には、Claudeが行ったファイルの編集を記録し、前の状態に戻せる「チェックポイント」があります。メッセージの上にカーソルを合わせると巻き戻しのボタンが出て、次の3つから選べます。

「試しにやってもらったが、やはり元に戻したい」という場面で役立ちます。ただし、チェックポイントで戻せる範囲には制限があるため、大事なファイルは、Gitや別のフォルダにコピーを取ってから作業するのが安心です。

複数の会話と履歴

コマンドパレットの「Open in New Tab」または「Open in New Window」で、会話を増やせます。会話ごとに履歴と文脈が独立しているため、別々の作業を並行して進められます。タブのスパークのアイコンに小さな点が付き、青は「許可の確認待ち」、オレンジは「タブを閉じている間に作業が終わった」ことを示します。

過去の会話は、パネル上部の「Session history」から、キーワードや時期で探して再開できます。Claude.aiのアカウントでサインインしている場合、Web版で始めた作業を、ここから手元で続けることもできます（手元には会話のコピーが取得され、変更はWeb版には戻りません）。

ターミナル版との違い

拡張機能とターミナル版は、会話の履歴を共有します。拡張機能で始めた会話を、ターミナルでclaude --resumeを実行して続けることもできます。

使うときの注意

• 選択した文字と、開いているファイルの名前は、Claudeに渡ります。公式ドキュメントによると、開いているファイルは、選択がなくても名前が渡されます。.envのような機密ファイルは、Readの拒否ルールで渡さない設定ができます
• 自動で編集する設定では、VS Codeの設定ファイルも書き換えられます。公式ドキュメントは、settings.jsonやtasks.jsonのように、VS Codeが自動で実行することがあるファイルを、Claudeが変更できると注意しています。信頼できないフォルダでは、VS Codeの制限モード（Restricted Mode）とManualモードを使います
• パネルが表示されないときは、VS Codeの再起動か、「Developer: Reload Window」を試します
• Cursorなど、VS Codeをもとにしたほかのエディタにも入れられます。入れられない場合は、ターミナル版を入れて、そのエディタのターミナルでclaudeを実行する方法があります

VS Code拡張のくわしい使い方は、「Claude CodeをVS Codeで使う方法」の記事でまとめています。

Web版の使い方

Web版は、ブラウザでclaude.ai/codeを開いて使う方法です。公式ドキュメントでは「クラウドセッション」と呼ばれています。Claudeの作業は、パソコンではなく、Anthropicが管理するクラウド上の仮想マシンで進み、ブラウザやパソコンを閉じても、作業は続きます。

パソコンに何も入れずに始められる反面、パソコンの中のファイルは使えません。Claudeは毎回、GitHubのリポジトリ（ソースコードを預けた場所）を新しく取得して作業し、結果を「ブランチ」（元のファイルとは別の作業用の枝）に反映します。

始める前に必要なもの

TeamとEnterpriseでは、組織の「Owner」が、先に管理画面でGitHubのコネクタを有効にしておく必要があります。有効になっていないと、画面に「GitHub access is required for Claude Code cloud sessions」と表示されます。

最初の1回の流れ

1. claude.ai/codeを開くclaude.aiのアカウントでサインインします。
2. GitHubと連携する「Sign in with GitHub」の案内に従い、GitHubの認可画面で許可します。非公開のリポジトリを使う場合は、Claude GitHub Appを、そのリポジトリのあるアカウントや組織にインストールします。
3. 環境を確認するProとMaxでは、「Default」という環境が自動で作られます。Teamなどでは「Create your first cloud environment」の画面が出るので、初期値のまま「Create & finish」を押します。
4. リポジトリとブランチを選ぶ入力欄の下で、作業するリポジトリを選びます。複数のリポジトリを追加することもできます。
5. 権限モードを選ぶAuto・Accept edits・Planの中から選びます。
6. 依頼を書いて送るファイル名や、期待する動きを具体的に書きます。エラーの文面があれば貼り付けます。
7. 結果を確認する作業が終わると、差分の表示が出ます。内容を確かめて、必要なら修正を頼み、「Create PR」でプルリクエスト（変更を取り込んでもらう依頼）を作ります。

1つの依頼ごとに、独立したセッションとブランチが作られます。1つが終わるのを待たずに、次の依頼を出せます。

結果の確認とプルリクエスト

作業が終わると、「+42 -18」のように、追加と削除の行数が表示されます。クリックすると、左にファイル一覧、右に変更箇所が出ます。行を選んでコメントを書くと、次のメッセージと一緒にClaudeに届き、「ここは直さないで」といった指示を、場所つきで伝えられます。

変更に納得したら、画面上部の「Create PR」から、通常のプルリクエスト、ドラフト、またはGitHubの作成画面への移動を選べます。PRを作ったあとも、同じ会話が続くので、CIの失敗やレビューのコメントを貼り付けて、直してもらえます。GitHubの変更を見張らせて、失敗やコメントに自動で対応させる「Auto-fix」を使うには、Claude GitHub Appのインストールが必要です。

依頼の書き方のコツ

Web版は、作業の途中で細かく口を出さずに、任せて待つ使い方が中心です。そのため、最初の依頼の書き方が結果を左右します。公式のクイックスタートでは、次の点が挙げられています。

• ファイルや関数の名前を書く：「テストを直して」より、「tests/test_auth.pyの失敗しているテストを直して」のほうがよい
• エラーの出力があれば貼り付ける
• 症状だけでなく、期待する動きを書く

たとえば「お問い合わせページの送信ボタンを押しても、完了メッセージが出ない。送信後に『送信しました』と表示されるようにしてほしい」のように、現状と望む結果の両方を書くと、Claudeが作業の範囲を判断しやすくなります。

Web版が向いている場面

スマホから使う

Claudeのスマホアプリ（iOS・Android）の「Code」タブからも、Web版と同じクラウドのセッションを開始・確認できます。公式ドキュメントでは、スマホアプリは、Claude Codeが動く場所ではなく、クラウドのセッションや、自分のパソコンで動いているセッションを操作するための窓口と説明されています。外出中に作業の結果を確かめたり、短い指示を出したりする使い方に向いています。

Web版の詳しい使い方は、「Claude Code on the webとは」の記事で解説しています。

料金と使えるプラン

どの画面で使うかにかかわらず、Claude Codeを使う費用は、Claudeのプランの料金です。Web版も、公式のドキュメントでは「クラウドの仮想マシンに、別の料金はかからない」と説明されています。2026年10月時点の公式の料金ページに載っている価格は次のとおりです（米ドル表示）。

プランの内容や価格は、Anthropicの判断で変わることがあります。契約の前に、公式の料金ページで最新の内容を確認してください。

使用量を確かめる方法

VS Code拡張では、入力欄に/usageと入力すると、アカウントと使用量のダイアログが開きます。claude.aiのプランでは、現在のセッションや週の上限に対する使用量のバーが表示されます。デスクトップ版では、モデルを選ぶ欄の隣にある「使用量のリング」から、コンテキストの使用状況とプランの使用量を確認できます。

ここで言う「コンテキスト」は、Claudeが一度に覚えておける量のことです。会話が長くなってコンテキストがいっぱいになると、Claudeは自動で会話を要約して続けます。早めに整理したいときは/compactと入力します。

どのプランから始めるか

会社の仕事で使う場合、社員が個人でProを契約して業務のファイルを扱うと、情報の管理が難しくなります。数人で試す段階から、TeamやEnterpriseにしておくと、あとで広げるときにも設定を引き継げます。

場面別の選び方

ここまでの内容を、場面別にまとめます。「迷ったらこれ」の目安として使ってください。

画面を行き来する方法

1つに決める必要はありません。公式のドキュメントには、作業を別の画面に移す方法がいくつか載っています。

公式ドキュメントでは、ターミナル版からWeb版（クラウド）へは、既存のセッションを移す方法はなく、claude --cloudで新しいセッションを作る形と説明されています。逆に、デスクトップ版は、Localのセッションをクラウドに送れます。

組み合わせて使う例

3つの方法は、1つの案件の中で組み合わせて使うこともできます。たとえば、次のような流れです。

画面が変わっても、同じリポジトリのCLAUDE.mdや設定が使われるため、「社名は正式名称で書く」「見出しは短くする」といった決めごとを1か所に書いておけば、どの画面でも同じ基準で動きます。ただしWeb版が読むのは、GitHubにあるリポジトリの中の分だけです。手元だけに置いた個人用の設定は、Web版には届きません。

迷ったときの始め方

1. デスクトップ版を入れて、小さなフォルダで試すコピーを取ったフォルダに、「このフォルダに何が入っているか説明して」と頼みます。ファイルが変わらない「読むだけ」の依頼なので、安心して試せます。
2. 変更を伴う依頼を、Manualモードで試す「この文言を直して」のような小さな依頼を出し、差分の表示と、受け入れ・断るの操作に慣れます。
3. 使い方が見えてきたら、ほかの画面を足すエディタで編集する機会が多ければVS Code拡張、GitHubで管理している案件があればWeb版を足します。

会社で使うときに決めておくこと

画面で使えるようになると、ターミナルより敷居が下がり、使う人が増えやすくなります。そのぶん、次のような決めごとを先に用意しておくと、人によって扱いがばらつくのを防げます。

• Claudeに触らせてよいフォルダと、触らせてはいけないフォルダ（顧客情報、契約書、人事資料など）
• 使ってよい権限モード（最初はManualかPlanに限る、など）
• 作業前のコピーの取り方（Gitで管理する、別のフォルダに複製する、など）
• 変更を本番のサイトや共有フォルダに反映する前の、確認する人
• どの画面から使ってよいか（個人のProの契約を業務で使わせない、など）

どの画面でも、Claudeが行えるのは「ファイルを書き換える」ことです。本番の環境に直接つながったフォルダを指定しない、変更を公開する前に人が内容を確認する、という基本は共通です。

よくある質問

まとめ

画面で使えるようになると、ターミナルへの苦手意識がなくなる一方で、「どこまで任せてよいか」「どのフォルダを触らせてよいか」を決めずに使い始めてしまう場面が増えます。まずは小さなフォルダで、変更を確かめながら試し、業務に広げる段階でルールを整えていくのがおすすめです。

社内への導入では、どの画面を標準にするか、権限と渡してよいデータの線引きをどうするか、社員の方への使い方の説明をどう進めるかなど、決めることが一気に増えます。INTERCREATE JAPANでは、Claude Codeの導入から、社内で使い続けられる仕組みづくりまでをお手伝いしています。