CLI / Desktop / Web の違い

仕組み・概念
CLI / Desktop / Web の違い
同じ Claude Code を呼び出す入口が4つあること。ターミナルで claude と打つ基本形(CLI)、VS Code等への拡張、デスクトップアプリ、ブラウザのWeb版。中身は同じで、アカウントも設定も4つで共通。

Claude Code をどの入口で使えばいいか迷っている、これから使い始める人向け

Claude Code を使い始める初日に「ターミナル・アプリ・ブラウザのどれで動かすか」で迷ったら、まず手元のパソコンで動く標準形=ターミナルで claude と打つ形から入り、外出先やスマホから重い処理を投げたくなったらクラウドで動くWeb版に切り替える、という形で使い分ける。

Claude Code を使い始めるとき、最初にぶつかるのが「これ、どこで動かすの?」という疑問です。公式サイトを開くとターミナル・VS Code・デスクトップアプリ・ブラウザと入口が並んでいて、初日から迷子になりやすい。中身は全部同じ Claude Code なのに、見える窓口が4つあるせいで「どれを選べば正解なのか」が分からなくなります。

結論を先に言うと、入口が違うだけで正体は1つです。アカウントも設定も全部共通。だから「どこから入っても同じ相棒に会える」が大枠の理解になります。

そもそも「入口の違い」って何のこと?

Claude Code は、コードを読んで・直して・コマンドまで実行してくれる開発用のAI相棒です。その正体が何かは別エントリ「claude-code」にまとめているので、ここでは深追いしません。このページの主役は「同じ相棒を、どの窓口から呼び出すか」の比較だけです。

公式ドキュメントは入口を4種類で説明しています。ターミナルで claude と打つ基本形(CLI)、VS Code などのエディタに組み込む拡張、単体で立ち上がるデスクトップアプリ、そしてブラウザで開くWeb版です。どれを選んでも、後ろで動いているエンジンは同じものだと明記されています。

噛み砕くと

同じ店が、入口を4つ持っているようなイメージです。正面玄関(ターミナル)、いつも使う作業場から直結する裏口(VS Codeなどの拡張)、専用の建物(デスクトップアプリ)、そして外出先からでも入れる出張窓口(ブラウザのWeb版)。

どの入口から入っても、出てくる店員は同じ。あなたの会員カード(アカウント)も、店に預けたメモ(設定やCLAUDE.md)も、4つの入口で共有されます。だから今日はターミナルで頼んだ続きを、明日ブラウザから受け取る、みたいな動きができます。

入口で変わるのは「立っている場所」だけ。手元のパソコンで動かすか、クラウドで動かすか。ここが選び方のいちばんの分かれ目です。

大事な前提:ほとんどの入口で Claude の有料プランがいる

入口を選ぶ前に1つだけ。公式は「ほとんどの面で Claude のサブスク(月額の有料プラン)か Anthropic Console のアカウントが必要」と書いています。デスクトップアプリも「有料プランが必要」と明記されています。

つまり「どの入口にするか」を悩む前に、ログインできるアカウントを用意しておくのが先です。アカウントは4つの入口で共通なので、1回作れば全部の窓口で使い回せます。

「料理ブログを作る」を例に、4つの入口を見比べる

「世界の家庭料理を紹介する料理ブログ(cooking-blog)を作りたい」という場面で考えます。同じ作業を、4つの入口それぞれでどう始めるか並べてみます。

ステップ1: ターミナルで claude を打つ(CLI=基本形)

いちばん素直な入口がこれです。ターミナルを開いて、作りたいフォルダに移動して、claude と打つだけ。

$ cd cooking-blog
$ claude

初回はログインを求められます。あとは「トップページのデザインを作って」と日本語で頼めば、手元のフォルダのファイルを直接読んで・書いてくれます。公式はこれを「フル機能のCLI」「おすすめ」と位置づけています。手元で動くので、自分のパソコンのファイルにそのまま手が入るのが特徴です。

ステップ2: VS Code に組み込んで使う(IDE拡張)

すでに VS Code でコードを書いている人なら、拡張を入れる手があります。VS Code の拡張一覧で「Claude Code」を検索して入れると、エディタの中に相棒の窓口が出ます。

ターミナルとの違いは見た目です。変更前後の差分が色付きで横に並んで見えたり、コードの一部を選んで「ここ直して」と渡せたり。やっていること自体はターミナル版と同じで、手元のファイルを触ります。

ステップ3: デスクトップアプリで開く

ターミナルもエディタも使わず、専用アプリ1つで完結させたい人向けの入口です。Mac版・Windows版をダウンロードして入れて、起動したら「Code」タブを押すと作業が始まります。

差分を画面で見ながら確認できたり、複数の作業を横に並べて同時に走らせたり、クラウドの処理を手元から起動できたりします。ここで初心者がやりがちな勘違いがあります。「アプリだから全部クラウドで動く」と思いがちですが、デスクトップアプリは手元のパソコンで動くのが基本で、クラウド処理は必要なときに呼び出す形です。

ステップ4: ブラウザのWeb版で開く(claude.ai/code)

パソコンに何も入れたくない、あるいは手元にプロジェクトのファイルがない、という場面の入口です。ブラウザで claude.ai/code を開けば、何もインストールせずに使えます。

公式は「ローカルにファイルがないプロジェクトでも作業できる」「長時間かかる作業を投げて、終わったころに見に来られる」と説明しています。料理ブログのファイル一式がネット上の保管場所に置いてあれば、手元に何もなくても触れるわけです。Web版はクラウドで動くので、パソコンを閉じても処理は続きます。公式が対応を挙げているのはデスクトップのブラウザと iPhone のアプリ(iOS版)で、この2つから開けます。

ステップ5: 入口をまたいで続きをやる

公式が強調しているのが「作業は1つの入口に縛られない」点です。Web版で始めた長時間の作業を、ターミナルに claude --teleport で引っ張ってくる、といった移動ができます。

ここが「正体は1つ」の実利です。朝はブラウザで指示を出して、昼に会社のパソコンのターミナルで続きを見る。同じアカウント・同じ設定だから、入口が変わっても話が途切れません。

ステップ6: 比較表でまとめる

4つの入口を並べると、選び方の軸が見えてきます。

入口 動く場所 向いている人・場面 最初の一歩
ターミナル(CLI) 手元のパソコン まず標準形で始めたい人。公式のおすすめ ターミナルで claude と打つ
VS Code等の拡張(IDE) 手元のパソコン すでにエディタでコードを書いている人 VS Codeの拡張で「Claude Code」を入れる
デスクトップアプリ 手元のパソコン(クラウド起動も可) 専用アプリ1つで、差分を見ながら進めたい人 Mac/Windows版を入れて「Code」タブ
Web(ブラウザ) クラウド 何も入れたくない人。外出先・iPhoneから ブラウザで claude.ai/code を開く

つまり「入口の違い」を知ると何が分かるのか

  • 分かること: 同じ Claude Code が4つの窓口から使えて、手元で動かすか・クラウドで動かすかで選べばいいという軸
  • 分からないこと(このページの範囲外): 各入口の具体的なインストール手順は「getting-started」へ、入れた後に最初に打つことは「first-steps」へ送ります
  • 気にしなくていい場面: とりあえず手元で軽く試したいだけなら、入口比較で悩まずターミナルの claude から始めて問題なし

使いどころ3シナリオ(具体題材で見る)

シナリオ1: 自分のパソコンで料理ブログをゼロから作るとき

手元のフォルダに料理ブログを新規で作る場面では、ターミナルの claude が素直です。cd cooking-blog して claude と打てば、手元のファイルにそのまま手が入ります。公式おすすめの基本形なので、最初の1本はここから入るのが無難です。

シナリオ2: すでにVS Codeで料理ブログを書いている途中のとき

レシピ一覧ページを VS Code で書いている最中なら、わざわざターミナルに切り替えるより拡張が楽です。エディタの中で「この関数、エラー出てるから直して」と選んで渡せて、直した差分が色付きで横に出ます。作業場を離れずに相棒を呼べるのが利点です。

シナリオ3: 外出先のiPhoneから、重い処理を投げておきたいとき

料理ブログの全記事に画像の説明文を一括で付ける、みたいな時間のかかる作業は、Web版が向きます。家を出る前にブラウザで投げておけば、クラウドで処理が進みます。電車の中で iPhone のアプリから進み具合を見て、家に帰ってからターミナルに引き継ぐ、という流れも作れます。

初心者が踏みやすい落とし穴

  • 入口ごとに別アカウントが要ると思い込む。アカウントは4つの入口で共通です。1回ログインすれば全部の窓口で使えます。
  • 「アプリ=クラウド」「ターミナル=手元」と単純に決めつける。デスクトップアプリは手元で動くのが基本、Web版がクラウド。アプリかどうかで動く場所は決まりません。
  • Web版なら手元のファイルも勝手に触れると思う。Web版はクラウドで動くので、ネット上に置いたプロジェクトが対象です。手元のパソコンのファイルをそのまま編集したいなら、ターミナルか拡張を選びます。
  • 入口を1つに決めたら他に移れないと思う。公式は入口をまたいで作業を移せると明記しています。ターミナルで始めた続きをブラウザで、も普通にできます。
  • このページでインストール方法まで分かると期待する。ここは入口の比較と選び方だけです。入れる手順は「getting-started」、入れた後の最初の操作は「first-steps」に分けています。
  • 有料プランの確認を後回しにする。ほとんどの入口で Claude の月額プランが要ります。入口で悩む前に、ログインできるアカウントを先に用意しておくと詰まりません。
  • 「どれが正解か」を考えすぎて手が止まる。迷ったらターミナルの claude です。公式のおすすめ=標準形で、後からいつでも他の入口に乗り換えられます。

書き方

claude                (ターミナル=CLIの基本形。手元で動く)
claude.ai/code        (ブラウザ=Web版。クラウドで動く)

やってみるとこうなる

入力

$ cd cooking-blog
$ claude

出力例

ログインを求められたあと、ターミナルの中に Claude Code との対話画面が開く。以後はそのフォルダのファイルを手元で読み書きできる。ブラウザの claude.ai/code を開けば、同じアカウントでクラウド側の対話画面が開く。

このページに出てきた言葉

CLI
「コマンドラインインターフェース」の略。黒い画面に文字のコマンドを打って操作する方式。ここでは <code>claude</code> と打つ基本形を指す
ターミナル
黒い画面で文字のコマンドを打ち込むアプリ。Windowsの「コマンドプロンプト」「PowerShell」、Macの「ターミナル」アプリ
IDE
コードを書くための高機能なアプリの総称。VS Code や JetBrains のソフトがこれにあたる
クラウド
手元のパソコンではなく、ネットの向こうのサーバーで処理が動く仕組み。自分の機材を閉じても処理が続く
Web版
ブラウザで <code>claude.ai/code</code> を開いて使う形。何もインストールせず、クラウドで動かせる

関連項目

公式ドキュメント

https://code.claude.com/docs/en/overview

-

← 戻る