Contents
  1. Claude CodeはVSCodeの拡張機能でインストールできる
  2. インストール前に確認する3つの事前準備
  3. Claude Code拡張機能をインストールする手順
  4. Sparkアイコンを見つけてClaudeにログインする
  5. インストールできたか確認する
  6. うまくいかないときの対処法3選
  7. インストールが終わったら次は初期設定へ進もう

Claude CodeはVSCodeの拡張機能でインストールできる

Claude CodeはVSCodeの拡張機能だけで完結します。ターミナル操作もWSLも一切不要です。マーケットプレイス（＝VSCodeの拡張機能ストア）から1クリックでインストールでき、5分あれば使い始められます。

本記事では、2026年5月時点の最新版にあわせて、最短のインストールルートだけを解説します。

インストール前に確認する3つの事前準備

準備1：VSCode本体（バージョン1.98.0以上）

VSCodeがまだ入っていない方は、公式サイトからインストールしてください。Windows・Mac・Linuxどれも無料で使えます。

すでにVSCodeを使っている方は、バージョンが1.98.0以上か確認してください。古いとClaude Code拡張機能が動きません。

  1. VSCodeを開く
  2. 上のメニューから「ヘルプ」→「バージョン情報」をクリック（Macの場合は「Code」→「Visual Studio Codeについて」）
  3. 表示されたウィンドウでバージョン番号を確認
VSCodeのバージョン情報画面

古い場合は同じメニューから「更新の確認」を選べばアップデートできます。

準備2：Claudeアカウント

AnthropicのClaudeアカウントが必要です。まだの方は claude.com にアクセスして、メールアドレスで無料登録してください。

すでにClaudeを使っている方は、同じアカウントでそのままClaude Codeも使えます。新しく作る必要はありません。

準備3：有料プランの契約（Pro月額20ドル～）

Claude Codeは無料プランでは使えません。次のどれかの有料プランの契約が必要です。

  • Pro（月額20ドル）：個人で試すなら最も一般的
  • Max（月額100ドル～）：使用量が多い方向け
  • Team：チーム利用向け
  • Enterprise：企業向け

個人ではじめて使う方は、まずProプランから始めるのがおすすめです。月額固定なので使いすぎて高額請求が来ることはありませんし、合わなければ翌月解約できます。

プランの契約は claude.com/pricing から進められます。事前準備はこれで完了です。

Claude Code拡張機能をインストールする手順

事前準備が揃ったら、いよいよ拡張機能のインストールです。

ステップ1：VSCodeで拡張機能ビューを開く

VSCodeを起動して、左サイドバーにある「四角が4つ並んだアイコン」をクリックしてください。

ショートカットキーでも開けます：Ctrl+Shift+X（Windows/Linux）または Cmd+Shift+X（Mac）。

VSCodeの拡張機能ビュー

ステップ2：「Claude Code」を検索してインストール

拡張機能ビューの上にある検索ボックスに「Claude Code」と入力してください。検索結果に複数の拡張機能が表示されます。

必ず発行元が「Anthropic」のものを選んでください。Claude Codeは人気が高いため、似た名前のニセモノ拡張機能がいくつも並んでいます。発行元が「Anthropic」と表示されている公式版を選び、青い「インストール」ボタンをクリックしてください。

Claude Code拡張機能の検索結果

ステップ3：インストール完了後にVSCodeを再起動

インストールは数秒～30秒程度で終わります。完了したら、念のためVSCodeを一度閉じて開き直してください。

再起動が面倒な場合は、コマンドパレットから「Developer: Reload Window」を実行するだけでもOKです。コマンドパレットは Ctrl+Shift+P / Cmd+Shift+P で開けます。

Sparkアイコンを見つけてClaudeにログインする

拡張機能のインストールが終わったら、最後にClaudeアカウントでログインします。これでClaude Codeが使える状態になります。

Sparkアイコンを探す

VSCodeの左サイドバーに、新しく「Sparkアイコン」と呼ばれるマーク（✱）が追加されています。これがClaude Codeのアイコンです。

Sparkアイコン

ブラウザでAnthropicアカウントにログイン

Sparkアイコンをクリックすると、Claude Codeのパネルが開いて「Sign in」ボタンが表示されます。これをクリックしてください。

ブラウザが自動で開き、Claudeのログイン画面が表示されます。Claudeのアカウントでサインインを完了させてください。

サインイン後、「How do you want to log in?（どの方法でログインしますか?）」と書かれた画面が表示されます。選択肢は3つあります。

Claude Codeのログイン方法選択画面ログイン方法の選択画面。一番上の「Claude.ai Subscription」を選ぶ
  1. Claude.ai Subscription（Use your Claude Pro, Team, or Enterprise subscription）
    → 個人ユーザーはこれを選んでください。先ほど契約したProプランで使う方法です
  2. Anthropic Console（Pay for API usage through your Console account）
    → API使用量に応じた従量課金。慣れていないと予想外の請求が来ることがあるので選ばない
  3. Bedrock, Foundry, or Vertex（API keys or third-party providers）
    → AWS・Microsoft・Google経由で使う企業向け選択肢。個人利用なら関係ない

一番上の「Claude.ai Subscription」がオレンジ色で強調表示されているはずです。これがAnthropicの推奨選択肢で、個人ユーザーが選ぶべき方法です。クリックして次に進んでください。

インストールできたか確認する

ログインが終わったら、Claude Codeがちゃんと動くか3つだけ確認しておきましょう。

  1. Sparkアイコンをクリックして、チャットパネルが開く
  2. チャット欄に「こんにちは」と打ち込んで送信し、返答が返ってくる
  3. チャット欄に /status と打ち込んで、現在のバージョン情報が表示される

3つともクリアできれば、インストールは完了です。

うまくいかないときの対処法3選

インストール作業でつまずいたときは、まずこの3つを試してください。多くの場合これで解決します。

拡張機能が見つからない・インストールできない

VSCodeのバージョンが1.98.0未満だと、Claude Code拡張機能が検索結果に出ない場合があります。「ヘルプ」→「バージョン情報」でバージョンを確認し、古ければ「更新の確認」からアップデートしてください。

Sparkアイコンが表示されない

インストール後にSparkアイコンが見つからない場合は、次の順で試してください。

  1. 適当なファイルを1つ開いてから、エディタ右上を見る
  2. コマンドパレット（Ctrl+Shift+P / Cmd+Shift+P）で「Developer: Reload Window」を実行
  3. それでもダメならVSCodeを完全に閉じて開き直す

ログインボタンを押してもブラウザが開かない

VSCodeの環境設定でブラウザ起動がブロックされている可能性があります。VSCodeを再起動して再度試すか、画面に表示されているURLをコピーしてブラウザのアドレスバーに貼り付けてください。

インストールが終わったら次は初期設定へ進もう

インストールはこれで完了です。ただし、このままだとClaude Codeは英語で返答したり、勝手にファイルを編集したりすることがあります。次は安全に使うための初期設定に進みましょう。

[内部リンク: Claude Code VSCode版の初期設定5項目に関する記事]

[内部リンク: Claude Code VSCode版の基本的な使い方に関する記事]