「Claude Codeを使い始めたけど、黒い画面（ターミナル）に文字を打ち込むのがどうも不安…」——この記事は、そんな非エンジニアの方のために、使い慣れたVS Code（ブイエス・コード）の中でClaude Codeを動かす方法を、画面の流れに沿って1ステップずつ解説します。私自身、ターミナルよりVS Codeの方が「今なにが起きているか」が見えて安心でした。
⚠️ この記事の情報は2026年7月時点のものです。Claude Codeは更新がとても速いツールなので、画面の名称やボタンの位置は変わることがあります。念のため公式ドキュメントもあわせてご確認ください。
結論：VS Codeの「拡張機能」を入れるだけ。ターミナルは要りません
まず結論からお伝えします。VS CodeにはClaude Code専用の「拡張機能（アプリを追加する部品）」が用意されていて、それを入れるだけで、VS Codeの中にClaude Codeの会話パネルが表示されます。ターミナルにコマンドを打つ必要はありません。
VS Codeの中で使うと、こんな良いことがあります。
- 変更が「差分」で見える：AIが直す前と後を左右に並べて見せてくれるので、納得してから許可できます
- 文字を選ぶだけで伝わる：気になる部分をマウスで選択すると、Claudeが自動でその箇所を見てくれます
- ボタンで許可・却下できる：危ない操作は「許可」を押すまで実行されません
- 会話が残る：過去のやりとりを一覧から呼び戻せます
つまり、この記事でやることは「拡張機能を入れて、パネルを開いて、ログインする」だけ。所要時間は5〜10分です。では始めましょう。
準備するもの
- VS Code（バージョン1.98以上）：無料のコード編集アプリです。まだの方は公式サイトからインストールしておきましょう
- Claudeの有料プラン：Proプランなど、有料プランのアカウントが1つあればOKです（Max・Team・Enterpriseでも可）
ちなみに、難しい「APIキー」の準備は不要です。ふだんClaudeにログインしているアカウントで、そのままサインインできます。
STEP 1：VS Codeに「Claude Code」拡張機能を入れる
VS Codeを開いたら、キーボードで Ctrl+Shift+X（WindowsやLinuxの場合）を押します。Macなら Cmd+Shift+X です。すると画面の左側に「拡張機能」の一覧が開きます。
上の検索ボックスに「Claude Code」と入力し、出てきたAnthropic（アンソロピック）製の拡張機能の「インストール」ボタンを押します。これで準備の半分は完了です。
つまずきポイント①：拡張機能が見つからない・入れても出てこない
検索に出てこないときは、VS Codeのバージョンが古い可能性があります。「ヘルプ→バージョン情報」で1.98以上か確認してください。入れたのにパネルが出てこないときは、コマンドパレット（Ctrl+Shift+P）を開いて「Developer: Reload Window（ウィンドウの再読み込み）」を実行すると直ることが多いです。
なお、VS Codeによく似た「Cursor（カーソル）」などのエディタでも、同じように「Claude Code」で検索すれば入れられます。
STEP 2：Claude Codeのパネルを開く
拡張機能を入れたら、何かファイルを1つ開いてみてください。すると画面の右上に、星のような「スパーク（✱）アイコン」が表示されます。これがClaude Codeの目印です。クリックすると会話パネルが開きます。
アイコンが見当たらないときは、次のいずれかでも開けます。
- 画面いちばん左の縦帯（アクティビティバー）にある✱アイコンをクリック
Ctrl+Shift+Pでコマンドパレットを開き、「Claude Code」と打って「Open in New Tab」などを選ぶ- 画面右下のステータスバーにある「✱ Claude Code」をクリック（ファイルを開いていなくても押せます）
STEP 3：初回だけログインする
パネルを初めて開くと、ログイン画面が出ます。「Sign in」ボタンを押すと、いつものブラウザが立ち上がるので、Claudeのアカウントで許可すればOKです。難しい設定は必要ありません。
もし後から「Not logged in（ログインしていません）」と出たら、もう一度サインインし直せば戻ります。
STEP 4：最初の指示を出してみる
あとはパネルの入力欄に、日本語でお願いを書くだけです。「このファイルが何をしているか説明して」「この部分をわかりやすく直して」——そんな普通の言葉で伝わります。
便利なのが、気になる部分をマウスで選択してから聞く方法です。選択しておくと、Claudeが自動でその箇所を見てくれます。さらに Alt+K（Macは Option+K）を押すと、「このファイルの何行目〜何行目」という印を入力欄に差し込めます。
STEP 5：変更を「差分」で確認して許可する
Claudeがファイルを直そうとすると、いきなり書き換えるのではなく、「直す前」と「直した後」を左右に並べて見せてくれます。内容に納得したら「許可」、やめたいときは「却下」を押します。ここが、VS Codeで使ういちばんの安心ポイントです。
差分の画面で自分で手直ししてから許可することもできます。その場合はClaudeにも「人が直した」と伝わるので、話がかみ合わなくなりません。
VS Codeならではの、覚えておくと便利な機能
- プランモード：いきなり作業させず、「まず何をするか」の計画を先に見せてもらえます。計画に赤ペンでコメントを入れてから始められるので、暴走が心配な方におすすめです
- @（アットマーク）でファイル指定：入力欄で「@」を打つと、ファイル名の一部だけでも候補が出て、そのファイルを見てもらえます
- チェックポイントで巻き戻し：やっぱり前の状態に戻したい、というとき、メッセージにカーソルを合わせると「巻き戻し」ボタンが出ます
- タブで複数の会話：別々の作業を、タブを分けて同時に進められます
「拡張機能」と「ターミナル版（CLI）」の違い
Claude Codeには、今回入れた拡張機能（画面パネル版）と、黒い画面で使うターミナル版（CLI）の2種類があります。非エンジニアの方は、まずは画面が見やすい拡張機能版で十分です。
ひとつ注意点があります。拡張機能版はパネル用のプログラムを内部に持っていますが、VS Codeのターミナルで claude と打って使いたい場合は、別途ターミナル版のインストールが必要です（拡張機能を入れただけでは claude コマンドは使えません）。ターミナル版の入れ方は、下の関連記事「Windowsにインストールする全手順」で解説しています。なお、両方は会話の履歴を共有するので、行き来しても続きから使えます。
まとめ：VS Codeなら「見て・選んで・許可する」だけ
VS CodeでClaude Codeを使う流れは、①拡張機能を入れる → ②✱アイコンでパネルを開く → ③ログイン → ④選んでお願いする → ⑤差分を見て許可する、の5ステップだけでした。ターミナルの黒い画面が苦手でも、これなら「今なにが起きているか」が目で見えるので安心です。まずは小さなお願いから、気軽に試してみてください。
関連記事
- Claude CodeをWindowsにインストールする全手順【非エンジニア向け】
- Claude Codeの使い方【非エンジニア向け・最初の1時間】
- Claude Codeのスラッシュコマンド入門【よく使う操作をまとめて呼び出す】
無料テンプレート配布のお知らせ
Claude Codeを安全・便利に使うための設定テンプレート（CLAUDE.md）を無料配布しています。メールアドレスをご登録いただくと、すぐにダウンロードリンクをお送りします。
免責事項
本記事は執筆時点（2026年7月）の情報に基づく、筆者個人の体験の記録です。記事中の自動売買システムに関する記述は、特定の投資手法や自動売買の利用を推奨するものではありません。投資には元本割れのリスクがあり、最終的な判断はご自身の責任で行ってください。また、本記事ではセキュリティに関わる話題に触れていますが、悪用防止の観点から、具体的な脆弱性や攻撃手法の詳細は記載していません。AIツールの仕様は予告なく変更される場合があります。最新情報は各公式ドキュメントをご確認ください。本記事の内容を用いて生じたいかなる損害についても、筆者は責任を負いかねます。
コメント