Claude Code（クロードコード）はターミナル（黒い画面）で使うもの、というイメージがあるかもしれません。しかし2026年6月時点では、VS Code（Visual Studio Code）という無料のエディタの中で、専用パネルを使って画面操作だけで使うのが推奨される方法になっています。

結論を先にお伝えします。VS Code に「Claude Code」拡張機能を入れてサインインするだけで、ファイルの中身を見ながら、日本語の指示でAIに作業を頼めるようになります。セットアップは10分ほど。必要なのは月額20ドル（約3,000円）からの Claude Pro 以上の有料プランです。ターミナルが苦手な非エンジニアの方にこそ向いた使い方です。

この記事では、私が実際にVS Code版を使って検証した内容をもとに、導入手順から非エンジニア向けの活用例、ターミナル版との違いまでを丁寧に解説します。

まず結論：2026年のVS Code版はここが変わった

Claude Code のVS Code拡張機能は、以前のバージョンと比べて大きく進化しました。2026年6月時点の主な特徴は次のとおりです。

  • 専用の画面パネル（GUI）が標準になった。ターミナルの黒い画面ではなく、チャットのように指示できる
  • 編集前にClaudeの作業計画（プラン）を確認・修正してから承認できる
  • 変更を**左右に並べた差分（Before/After）**で見ながら、承認・却下・修正を選べる
  • 気に入らなければ**特定の時点まで巻き戻す（チェックポイント）**ことができる
  • 過去の会話を履歴から検索して再開できる
  • ファイルの特定の行だけを指定して質問できる（@メンション）

専門用語を1つ補足します。**拡張機能（エクステンション）**とは、VS Code に後から追加できる機能パーツのことです。スマホにアプリを入れるのと同じ感覚で、Claude Code もこの拡張機能の1つとして追加します。

なお、料金や無料で試せる範囲についてはClaude Code は無料で使える？、Claude全体のプラン体系はClaudeのプラン比較で詳しく整理しています。

なぜ非エンジニアこそ VS Code + Claude Code なのか

ターミナルでも同じことができるのに、なぜわざわざ VS Code を使うのか。非エンジニアにとってのメリットを3つに絞って説明します。

メリット1：ファイルを見ながら指示できる

VS Code の画面は、左にフォルダ一覧、中央にファイルの中身、右（または下）にClaude Codeのパネルが並びます。ファイルの内容を確認しながら「この表に列を追加して」「ここの3行目を直して」と指示できるため、作業がとても直感的です。

ターミナルだけだと中身を見るのに別のコマンドが要りますが、VS Code ならクリックするだけでファイルが開きます。

メリット2：変更内容が差分で見える

Claude Code がファイルを変更しようとすると、VS Code が元の内容と変更後の内容を左右に並べて表示します。追加された部分は緑、削除された部分は赤。「Claudeが何を変えたか」が一目でわかります。

しかも、その差分画面で自分で直接手直ししてから承認することもできます。「8割はいいけど、ここだけ言い回しを変えたい」というときに便利です。

メリット3：間違えても巻き戻せる安心感

2026年版の大きな進化が**チェックポイント（巻き戻し）**機能です。Claudeの各メッセージにカーソルを合わせると巻き戻しボタンが出て、「この時点までファイルを元に戻す」を選べます。

「AIに任せて、もし変なことになったらどうしよう」という不安が、この機能でかなり和らぎます。非エンジニアが最初の一歩を踏み出すうえで、心理的なハードルを大きく下げてくれます。

VS Code とは何か（はじめての方向け）

VS Code を初めて聞いた方へ簡単に説明します。

VS Code（Visual Studio Code）は、Microsoft が無料で提供するエディタです。「メモ帳の超高機能版」と考えてください。元はプログラマー向けですが、次の特徴から非エンジニアにも役立ちます。

特徴 非エンジニアにとっての意味
無料 Microsoftが完全無料で提供。費用ゼロで始められる
軽い パソコンへの負荷が小さく、動作が軽快
拡張機能 機能を後から追加できる（Claude Code もその1つ）
ファイル管理 フォルダの中身を一覧表示し、クリックで開ける
検索・置換 複数ファイルをまたいで文字列を検索・置換できる
日本語化 拡張機能でメニューをすべて日本語にできる

日常業務でテキストやCSV（カンマ区切りのデータファイル）を扱う方、複数ファイルを一括編集したい方には、メモ帳より VS Code の方が圧倒的に効率的です。

Visual Studio 2026 でも使える？（VS Code との違い）

VS Code と名前がよく似た Visual Studio 2026 という別のソフトがあり、検索でも混同されやすいポイントなので、ここで整理しておきます。

VS Code Visual Studio 2026
正式名称 Visual Studio Code Visual Studio 2026
位置づけ 無料の軽量エディタ 本格的な開発ツール（主にWindows向け・アイコンは紫）
Claude Code 公式拡張機能 対応（この記事の方法） 未対応（2026年7月時点）

Claude Code の公式拡張機能が使えるのは、VS Code と JetBrains 製エディタのみです（2026年7月時点）。Visual Studio 2026 向けの公式拡張機能はまだ提供されておらず、開発元の公開リポジトリに対応要望が寄せられている段階です。

会社のパソコンに Visual Studio 2026 が入っている方が Claude Code を使いたい場合、選択肢は2つあります。

  1. 無料の VS Code を追加でインストールする方法。Visual Studio 2026 と VS Code は同じパソコンに問題なく共存でき、同じフォルダを両方で開けます。Claude Code に任せる作業だけ VS Code 側で行う使い分けが確実です。
  2. Visual Studio 2026 に内蔵されたターミナル（文字でパソコンに指示を出す画面のこと）で、ターミナル版の Claude Code を動かす方法。ただし画面操作だけで完結する VS Code 版に比べると難易度が上がります。

なお、コミュニティ製の非公式拡張機能も存在しますが、Anthropic のサポート対象外のため、この記事では公式の方法だけを扱います。

インストール手順（10分で完了）

ステップ1：VS Code をインストールする

まだ入れていない方は次の手順で入手します。

  1. ブラウザで code.visualstudio.com を開く
  2. 「Download」ボタンをクリック（お使いのOS用が自動で選ばれます）
  3. ダウンロードしたファイルを開いてインストール

ここで重要な前提が1つあります。Claude Code 拡張機能を使うには、VS Code が 1.98.0 以上のバージョンである必要があります（2026年6月時点）。最近ダウンロードした方なら問題ありませんが、古いVS Codeを使っている方は「ヘルプ → バージョン情報」で確認し、古ければ最新版に更新してください。

ステップ2：Claude Code 拡張機能をインストールする

VS Code を開いたら拡張機能を追加します。

  1. キーボードで Cmd + Shift + X（Mac）／Ctrl + Shift + X（Windows）を押して拡張機能の画面を開く（左側の四角いアイコンからでもOK）
  2. 検索バーに「Claude Code」と入力
  3. **発行元が「Anthropic」**になっている公式の「Claude Code」を選び、「Install（インストール）」をクリック

公式拡張機能は、Anthropicの認証済み（verified）発行元から提供されています（2026年6月時点）。似た名前の非公式拡張機能と間違えないよう、発行元がAnthropicであることを必ず確認してください。

ステップ3：サインインする

拡張機能を入れたら、Anthropicのアカウントでサインインします。

  1. ファイルを1つ開くと、エディタ右上に Sparkアイコン（Claude Codeの目印） が出るのでクリック（または画面右下のステータスバーの「✱ Claude Code」をクリック）
  2. パネルが開いたら「Sign in（サインイン）」をクリック
  3. ブラウザが開くので、Anthropicのアカウントでログインして承認
  4. VS Code に戻ればサインイン完了

サインイン後は「Learn Claude Code」というチェックリスト（やることガイド）が表示されます。各項目の「Show me」を押すと操作を実際に体験できるので、最初の練習に最適です。

料金の前提（ここが2026年版の重要ポイント）

Claude Code を使うには、Anthropicの有料プランが必要です。ここは以前の情報から大きく変わった点なので注意してください。

  • 無料プランでは Claude Code は使えません（2026年6月時点）
  • Pro（月20ドル）以上のどの有料プランでも Claude Code が使えます。以前は上位のMaxプランやAPIクレジットが必要という情報もありましたが、現在は Pro／Max／Team／Enterprise のどれでもOKで、別途APIキーは不要です

つまり最も安い Pro（月20ドル・約3,000円）から VS Code版が使えます。Pro では主力モデルの Sonnet 4.6 を中心に、上位の Opus 4.8（2026年5月28日リリース）も対象プランで利用できます。プランごとの使える量の違いやコスト感はClaude Code の料金で詳しくまとめています。料金の早見表が欲しい方は料金チートシート（2026年版）をどうぞ。

基本的な使い方

セットアップが終わったら、さっそく使ってみましょう。

パネルを開く4つの方法

VS Code でClaude Codeのパネルを開く方法は複数あります。覚えやすいものから使ってください。

  • エディタ右上のSparkアイコン：ファイルを開いていると右上に出る。最も手軽
  • 左端のアクティビティバーのSparkアイコン：常に表示。過去の会話一覧（セッション）が開く
  • 画面右下のステータスバー「✱ Claude Code」：ファイルを開いていなくても使える
  • コマンドパレット：Cmd + Shift + P（Mac）／Ctrl + Shift + P（Windows）で開き、「Claude Code」と入力

最初の指示を出す

パネルの入力欄に日本語で指示を打ちます。まずはこれを試してみてください。

このフォルダにあるファイルの一覧を表示して

現在開いているフォルダの中身を一覧で返してくれます。これだけで基本操作のイメージがつかめます。

特定の行だけを指定して質問する（@メンション）

VS Code版ならではの便利機能が**@メンション**です。ファイル名の前に @ を付けると、Claudeがその中身を読み込んで答えてくれます。

@売上集計.csv の中身を要約して
@手順書.md の3〜10行目をわかりやすく書き直して

さらに、エディタ上でテキストを選択すると、その範囲を自動で認識します。Option + K（Mac）／Alt + K（Windows）を押すと、選択した行番号付きの参照（例：@app.ts#5-10）を入力欄に差し込めます。「ファイルのどこを指しているか」を正確に伝えられるので、長い文書でも狙った場所だけを直せます。

プランを確認してから任せる（プランモード）

入力欄の下にある権限モードの表示を切り替えると、Claudeの動き方を選べます。

  • 通常モード：行動のたびに承認を求める。最初はこれが安心
  • プランモード：先に「これからこう進めます」という計画書（Markdown文書）を出し、承認を待つ。計画にコメントを書き込んで修正できる
  • 自動承認モード：いちいち聞かずに編集を進める。慣れてきて、信頼できる作業のときに

非エンジニアの方は、まず通常モードかプランモードから始めるのがおすすめです。

変更を確認して承認する

Claudeがファイルを編集しようとすると、元と変更後を左右に並べた差分が表示され、承認・却下・指示のし直しを選べます。差分画面で自分が手直ししてから承認すると、その変更もClaudeにきちんと伝わります。

非エンジニア向け 5つの活用例

VS Code + Claude Code で、非エンジニアの方が実務に使える例を5つ紹介します。いずれも私が実際に試して動作を確認した内容です。

活用例1：Markdown で文書を作成する

**Markdown（マークダウン）**は、記号で見出しや箇条書きを表せる軽量なテキスト形式です。VS Code はプレビュー機能を内蔵しているので、書きながら仕上がりを確認できます。

社内向けの議事録テンプレートをMarkdownで作って。
日付・参加者・議題・決定事項・アクションアイテムのセクションを入れて。

議事録、社内マニュアル、報告書テンプレートなど、定型文書の量産に向いています。日本語の扱いで迷ったらClaudeを日本語で使うコツも参考にしてください。

活用例2：CSV データの加工

経理や営業で扱うことの多いCSVファイルの加工も簡単です。

sales_data.csv を読み取って、次の加工をして新しいファイルに保存して。
1. 2026年4月のデータだけ抽出
2. 売上金額の合計を計算
3. 担当者別の売上合計も計算
4. 結果を summary_april.csv として保存

Excelでフィルタをかけ、SUMIF関数を書く作業が、日本語の指示だけで完了します。特に数千行を超える大きなファイルは、手作業より速く正確に処理できることが多いです。

活用例3：設定ファイルの編集

JSONやYAMLといった設定ファイル（システムの動きを決めるファイル）の編集も任せられます。ウェブサイトやメール配信ツール、社内システムの設定など、非エンジニアでも触れる場面は意外とあります。

この設定ファイルの「通知メールの送信先」を
info@example.com から team@example.com に変更して

書式を知らなくても、Claudeが正しい形式で直してくれます。

活用例4：テキストの一括置換

「100個のファイルに含まれる旧社名を新社名に一括で置き換えたい」。こうした作業はVS Code + Claude Codeの得意分野です。

このフォルダ内のすべてのテキストファイルで
「株式会社ABC」を「株式会社XYZ」に一括置換して。
変更したファイルのリストも教えて。

VS Code 自体にも検索・置換はありますが、Claude Codeなら「特定の条件のファイルだけ」「この見出しの下だけ」といった複雑な条件も日本語で指定できます。手作業なら半日かかる作業が数分で終わることもあります。

活用例5：フォルダ整理

「年月別にサブフォルダへ分けて」「ファイル名に日付を付けて」といった整理も指示できます。

このフォルダ内のファイルを次のルールで整理して。
1. 拡張子ごとにサブフォルダを作成（pdf/, images/, docs/）
2. 各ファイル名の先頭に今日の日付（2026-06-15）を追加
3. 整理結果を report.txt にまとめて保存

左のファイル一覧で整理の前後を目で確認しながら進められるのが、ターミナルにはない安心感です。

VS Code版 vs ターミナル版の違い

Claude Code は VS Code内でもターミナルでも使えます。それぞれ向き不向きがあります。

観点 VS Code版（拡張機能） ターミナル版（CLI）
画面 チャット風のパネル・差分プレビュー 文字だけのシンプルな画面
操作 マウス中心。コマンド暗記不要 キーボード・コマンド中心
向く人 初心者・文書/データ作業が中心の方 操作に慣れ、大量処理をしたい方
巻き戻し 対応（チェックポイント） 対応
使えるコマンド 主要なもの（/で一覧） すべて使える
!でのコマンド実行 非対応 対応

機能差を1つ補足します。VS Code版の拡張機能はチャット用のCLIを内蔵していますが、VS Code内蔵のターミナルで claude と打って使いたい場合は、別途CLI本体のインストールが必要です。とはいえ非エンジニアの方は、まずVS Code版（パネル）だけで十分です。

結論として、非エンジニアの方はまずVS Code版から始めるのがおすすめです。慣れてターミナルにも興味が出たら、VS Code下部の内蔵ターミナルから少しずつ試すのがスムーズです。Claude CodeとCoworkの基本はClaude CoworkとCode完全入門で解説しています。なお、CursorなどVS Code系の他エディタでも同じ拡張機能が使えます（Claude Code と Cursor の違いも参照）。

さらに便利に使う 5つのコツ

コツ1：パネルの置き場所を変える

Claudeのパネルは、タブや見出しをドラッグして好きな位置に移せます。右サイドバーに置けばコードを見ながら常時表示、エディタ内のタブとして開けば別作業用、と使い分けられます。

コツ2：会話を履歴から再開する

パネル上部の**「Session history（履歴）」**ボタンから、過去の会話をキーワード検索・期間別に探せます。続きから再開できるので、「昨日やりかけた作業を今日続ける」が簡単です。

コツ3：使用量を `/usage` で確認する

入力欄で / を押して /usage を選ぶと、今のプラン・今週の使用量・上限までの残りが表示されます。「気づいたら上限に達していた」を防げます。Claude全体の障害・稼働状況が気になるときはClaude の障害情報の見方もどうぞ。

コツ4：おすすめ拡張機能を足す

VS Code には他にも便利な拡張機能があります。非エンジニア向けの定番はこちらです。

  • Japanese Language Pack：メニューを日本語化
  • Rainbow CSV：CSVの各列を色分け表示
  • Markdown Preview Enhanced：Markdownをリッチに表示
  • Excel Viewer：Excelファイルを閲覧

コツ5：CLAUDE.md でルールを覚えさせる

作業フォルダに CLAUDE.md というファイルを作り、よく使う指示やルールを書いておくと、Claudeが自動で読み込んで従ってくれます。「文書は社内テンプレートに従う」「CSVの文字コードはUTF-8」といったルールを書けば、毎回指示せずに済みます。

トラブルシューティング

VS Code + Claude Code でよくあるつまずきと対処法です。

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

Sparkアイコンはファイルを1つ開いているときにエディタ右上に出ます。フォルダだけ開いていても出ません。それでも出ない場合は、VS Codeが1.98.0以上か確認し、コマンドパレットの「Developer: Reload Window」で再読み込みしてください。画面右下のステータスバー「✱ Claude Code」ならファイルを開いていなくても起動できます。

拡張機能が見つからない

VS Codeが古いと表示されないことがあります。最新版に更新してから、検索を「Claude」ではなく**「Claude Code」とフルネーム**で行い、発行元がAnthropicのものを選んでください。

サインインできない

ブラウザのポップアップブロックが原因のことがあります。VS Codeからブラウザが開かない場合は、ポップアップを許可して再試行してください。

日本語が文字化けする

ファイルの文字コードが原因です。画面右下の文字コード表示（UTF-8、Shift_JIS等）をクリックして正しいものを選び直します。日本語ファイルは UTF-8 が推奨です。

まとめ

VS Code + Claude Code は、非エンジニアの方にこそおすすめの組み合わせです。2026年6月時点では専用パネルが標準になり、プランの事前確認、差分プレビュー、巻き戻しといった機能で「AIに任せるのが怖い」という不安が大きく減りました。料金も Pro（月20ドル）から始められます。

まずはVS Codeを入れて、公式の「Claude Code」拡張機能を追加し、「デスクトップのファイルを一覧表示して」という簡単な指示から試してみてください。5分で基本操作の感覚がつかめるはずです。

Claude Works では、VS Codeでの活用を含む非エンジニア向けのAI業務効率化を支援しています。「自社の業務で具体的にどう使えるか相談したい」という方は、まずは無料30分相談からお気軽にどうぞ。話を聞きながら、あなたの仕事に合った最初の一歩を一緒に設計します。