VSCode版Claude CodeのUI（パネル）と基本操作

今回は、Claude Code（VSCode版）の画面構成と基本操作について解説します。

後半は簡単なデモサイトを使って、モデルを切り替えながらAIと一緒にコーディングする方法も実演します。デモで使用した素材もご提供しますので「導入したけれど、何をしたら良いかわからない」という方も、ぜひ活用してみてください。

VSCode版のClaude Codeの操作対象

Claude Codeのパネル

前回の導入編のおさらいになりますが、もう一度VSCode版のClaude Codeのチャット画面（AIへの指示パネル）の開き方を確認します。

VSCodeにClaude Codeを追加すると、左側のサイドバーにアイコンが表示されます。
左サイドバーのアイコンをクリックして、New sessionを選択すると、AIチャット用のタブが開きます。

また、ファイルを開いた状態であれば、右上にもClaudeのアイコンが表示されます。
こちらからもパネルを開けます。

どちらから開いても、使いやすいほうで構いません。
エディターの配置、左右分割するか否かなども、使いながら自分のベストポジションを探していきましょう。

VSCode版のClaude Codeの操作対象

Claude Code（VSCode版）が読み書きするのは、基本的に現在VSCodeで開いているプロジェクト（フォルダ）の中です。

上図のように、開いているプロジェクト、エクスプローラーパネルに表示されている部分が、Claude Codeが参照・操作できる範囲になります。
このため、作業を始める前に、VSCodeで使いたいプロジェクト、操作対象にするフォルダを開いておく必要があります。

開いているフォルダの外には基本的に手を出さないので、「触ってほしくないファイルに誤ってアクセスされにくい」という安心感もありますね。

Claude Code（VSCode版）の画面構成と機能

Claude Codeパネルの主要UIを確認していきましょう。
大きく3つのパートに分けて、それぞれご紹介していきます。

1. パネル上部のアイコン

パネルの上部は、左にこのチャットのタイトル、右上に以下の機能を持つアイコンがあります。

チャットのタイトル・時計アイコン（履歴）

時計のアイコンでは、過去にClaude Codeとやり取りした会話の履歴を確認できます。
会話ごとに記録されているので、前回の作業内容を振り返ったり、チャットを再開することができます。

チャットのタイトルは自動で付けられますが、履歴に表示されているペンのアイコンから変更も可能。絶対に使わないであろうチャット履歴は削除もできます。

吹き出しアイコン（新しい会話を開始する）

現在の会話を終了して、新しいチャットを始めるときに使います。

Claudeのチャット機能では、AIにプロンプト（指示）を送るたびに毎回、過去すべてのチャット履歴が送信されています。
長いやり取りが続くとトークンの消費量が増え、利用量の上限に達しやすくなります。

一つのタスク（作業）に区切りがついたら、新しい会話に切り替えるのがおすすめです。
タスクごとに新しい会話を使用すると、チャット履歴も整理されるので、後日「あの時の…」と見返すときも探しやすいですよ。

2. メインのチャットエリア

パネルの中央〜下部が、実際にAIとやり取りするチャットエリアです。
中央部分にチャットの内容が表示されます。

下部にあるテキストボックスのような部分がAIに送信するプロンプトの入力です。
右下の矢印ボタン（送信ボタン）もしくはEnterキーで送信できます。
（※改行したいときはShift＋Enter、もしくはCtrl/Cmd＋Enter）

3. チャットボックスの詳細

入力欄は、文字を打つ上の段と、ボタンが並ぶ下の段に分かれています。
下の段には6つのボタンが並んでいて、ここがClaude Codeのメニューのようなものになります。

上の段の右端にあるマイクのアイコンは音声入力です。話した言葉を文字にして入力できます。
以下では、下の段のボタンを順番に紹介します。

① ＋ ボタン

ファイルや画像をClaude Codeに渡したいときに使います。
たとえば「このデザインカンプに合わせてCSSを書いてほしい」というときに画像を添付したり、「このファイルを参考にして」とドキュメントを渡すことができます。

• Upload from computer
  チャットにファイルを添付します。プロジェクト外のファイルを参照してほしいときに使います。
• Add context
  プロジェクト内のファイルを指定して会話に含めます。@メンションと同じ機能です。
• Browse the web
  ブラウザを直接操作・参照し、動作確認やデバッグを行う時に使います。

② ／ ボタン

／ボタンをクリックすると、コマンドと設定がまとまった総合メニューが開きます。
ちなみに、入力欄に /（スラッシュ）を入力しても同じ一覧が表示されます。

下図のように、いくつかのグループに分かれています。
上部の検索窓（Filter actions）にキーワードを入力すると、項目をすばやく絞り込むこともできます。

Context（コンテキスト）
会話の内容や参照ファイルに関する操作がまとまっています。

• Attach file
  ファイルや画像を会話に添付します。入力欄の＋ボタンと同じ機能です。
• Mention file from this project
  プロジェクト内のファイルを指定して会話に含めます。@メンションと同じ機能です。
• Clear conversation
  現在の会話履歴をリセットします。
• Rewind
  会話を特定のやり取りまで巻き戻します。「少し前の状態に戻りたい」というときに使います。

Model（モデル）
使用するAIモデルや、その動作に関する設定です。
詳しくはモデルの説明と選択で解説します。

Customize（カスタマイズ）
AIの動作やツール連携に関する高度な設定がまとまっています。
AIに記憶させるルールの設定や、外部ツールとの連携など、より細かくClaude Codeをカスタマイズしたい方向けの項目です。
多くはターミナルの操作が必要になるため、まずは気にせず進めてしまってOKです。

Slash Commands（スラッシュコマンド）
Claude Codeでは / から始まるコマンドが用意されています。
AIチャット・コーディング支援機能に関するショートカットキーのようなものです。
よく使われるものに関しては、次のセクションで紹介します。

Settings（設定）
Claude Code（VSCode版）全体に関する設定になります。

• Switch account
  ログインしているアカウントを切り替えます。
• General config
  Claude Code全体の基本設定を確認・変更できます。

③ モデル選択

現在使っているAIモデルの名前が表示されています。クリックすると、使用するモデルを切り替えられます。
モデル名の右側にある「Medium」などの表示は、AIがどれだけじっくり考えてから答えるか（Effort）の度合いです。
モデルについて詳しくはモデルの説明と選択で解説します。

④ 現在開いているファイル

VSCodeで開いているファイル名が表示されている箇所は、オン・オフを切り替えられるボタンのようなものです。

ファイル名が表示されている状態の場合は、Claude CodeにVSCodeで開いているファイル・選択している箇所が送られます。×を押すと、送らないようにできます。

⑤ 動作モードの切替

Claude Codeがファイルを編集するときの動作モードを切り替えられます。
こちらを使わず、入力欄を選択している状態でshift + Tabキーでも、順番に切り替えが可能です。

選択できるモードは以下の４つです。
はじめて開いたときは、Manual以外のモードが選ばれていることもあります。まずはManualに切り替えておきましょう。

• Manual
  ファイルを書き換えるたびに、毎回確認を求めてきます。慣れるまでは、このモードがおすすめです。
• Edit automatically
  確認なしで、自動的にファイルを編集します。便利ですが、何をどう書き換えたかを見ないまま進んでしまうので、操作に慣れてから試してみましょう。
• Plan
  コードを調べたうえで、書き換える前に「どう実装するか」の計画を提示してくれます。大きな変更を加えるときや、方針を確認してから進めたいときに便利です。
• Auto
  安全チェックを通った操作は自動で進め、危なそうな操作のときだけ止まって確認を求めます。

また、メニューの下部にあるEffortは、AIが問題に対してどれくらい時間・処理をかけるかを調整します。

⑥ 送信ボタン

右端の目立つ矢印は、Claude Codeに指示（入力欄に入れた内容）を送信するボタンです。

モデルの選択について

Claude Codeでは、作業内容に応じて使用するAIモデルを切り替えることができます。

AIモデルとは？

モデルとは、AIの「頭脳」にあたる部分です。
モデルによって得意なことや処理の重さが異なり、賢さとコストのバランスが変わってきます。

賢いモデルほど、1回の作業で使える量を多く消費し、返事が来るまでの時間も長くなりがちです。
従量課金（API）ではかかる金額が変わりますし、Proプランなどの月額プランでは利用量の上限に早く達してしまいます。
コスパ良くClaude Codeを使うには、作業内容に応じてモデルを使い分けることが大切です。

モデルの種類と切り替え方

入力欄の下にある③モデル選択をクリックすると、使用するモデルを変更できます。
／メニューの Switch model や、入力欄に /model と入力しても同じ一覧が開きます。

Claudeのモデルには、大きく分けて次の4つの系統があります。

※ 各系統の中でも、新しいバージョンが順に登場します。同じ系統が複数並んでいるときは、数字がいちばん大きいもの（新しいもの）を選びましょう。

※ 「Default (recommended)」は、その時点でおすすめのモデルに自動で切り替わる設定です。どのモデルになるかは時期によって変わります。

迷ったときの選び方目安

作業内容に合わせて動作モードとモデル選択を組み合わせて設定することで、クオリティとコストの両立を図ることができます。

よくわからない場合は、基本はManual＋Sonnet。
「何度頼んでもうまく直らない」「大きな変更をする前に計画を立てたい」というときにOpusへ切り替える、という使い方がおすすめです。

AIへの指示の出し方を知ろう

プロンプトの基本

Claude Codeへの指示は、日本語でOKです。
難しいコマンドや専門用語を覚える必要はありません。
チャットで話しかけるような感覚で指示を出してみましょう。

ただし、伝え方によって結果の精度が変わります。
最低限押さえておきたい以下の３つのポイントは外さないようにしましょう。

ポイント①対象をはっきり伝える

AIは優秀なので、曖昧な指示でも意図をくみ取ろうとしてくれます。
しかし、その場合は意図とは違う結果になってしまうこともあります。

最小限のやり取りで、意図した結果を出してほしい場合は「どのファイルの」「どの部分を」まで伝える必要があります。

❌ 「ナビゲーションを修正してください」
⭕ 「header.htmlのナビゲーションメニューをハンバーガーメニューに変更してください」

ポイント②やりたいこと（完成イメージ）を伝える

どんな動作・見た目にしたいかを具体的に書くと、余計なやり取りが減ります。

❌ 「ハンバーガーメニューに変更してください」
⭕ 「スマートフォン表示の場合はハンバーガーアイコンを表示し、アイコンをタップすることでメニューが開くようにしてください」

①と組み合わせて、「どのファイル」の「どの部分」を「どうしたいか」が基本の３項目です。
「どうしたいか」部分は具体的に書くほど、仕上がりがイメージに近付く可能性が高まります。

「header.htmlのナビゲーションメニューを改善してください。
スマートフォン表示（幅768px以下）の場合は、右端にハンバーガーアイコンを表示する形にします。
ハンバーガーアイコンをクリックすると、右側からメニューが開くようにしてください。」

ポイント③一度に頼みすぎない

複数の変更をまとめて依頼すると、意図しない修正が増えやすくなります。
1回の指示では1つのタスクを目安にしましょう。

さらに便利なショートカット

先ほどご紹介した、下部メニューの＋ボタンや／ボタン。
これらは、ボタンから設定しなくても、入力欄に直に打ち込んで使用できる機能も多くあります。

よく使うものは直に入力できると、より作業がスムーズです。
以下では代表的なものを紹介します。

@ メンション機能

入力欄で @ を入力すると、プロジェクト内のファイルを指定して会話に含めることができます。
「このファイルを修正してほしい」「参照してほしい」などの指示をより正確に伝えることができます。

Claude Codeはエディタ上で選択しているコードも把握できます。
選択と@メンションを組み合わせることで、プロンプト（入力欄）に見てほしい・直してほしい箇所を細々と打ち込む手間が省けます。

スラッシュコマンド

テキストボックスに / を入力すると、よく使う操作をすばやく呼び出せます。
代表的なものとしては、以下があります。

• /model
  AIモデルの切り替えを開きます。
• /clear
  現在の会話履歴をリセットして、まっさらな状態から始めます。作業が一区切りついたときや、別のタスクに切り替えるときに使いましょう。
• /compact
  会話が長くなってきたとき、内容を要約してコンパクトにまとめます。やり取りが増えてきたと感じたら使ってみましょう。
• /usage
  Account & usage... に進むと、利用状況を確認できます。

/コマンドはたくさん用意されており、「よく使うコマンド」は作業内容等によって差の大きい部分です。
コマンド一覧は、日本語版の公式ドキュメント（ https://code.claude.com/docs/ja/commands ）に用意されていますから、確認してみてください。

実際にAIコーディングを試してみよう

実際にClaude Codeを使って、簡単なWebページの修正でAIコーディングを試してみましょう。

使用するサンプルファイル

HTMLとCSSで作った、架空の動物園サイトを修正してみます。
ヘッダーのグローバルナビゲーションを、スマホユーザーでも使いやすいようにハンバーガーメニューにしてみましょう。

試してみたいけどファイル作るのが面倒…という方は、ぜひ素材を使ってみてください。

素材：zooSozai.zip
ダウンロードはこちら

この素材のフォルダ（もしくはClaude Codeにコーディングやレビューをお願いしたいフォルダやファイル）をVSCodeで開いてください。

※ デモ画像のモデル名やボタンの表記は、撮影した時期のものです。モデルの選択肢や画面の表示は時期によって変わるので、お使いの画面と違っていても問題ありません。

① Planモードで相談→実装

いきなりコードを書いてもらう前に、まずAIに計画を立ててもらうこともできます。

どんな変更が行われるかを事前に確認でき、意図しない修正を防ぐことができます。
軽い修正などでは使わずに進めても良いのですが、せっかくなのでPlanモードも試してみましょう。

手順1. モードとモデルを切り替える

モードをPlanに切り替えます。
入力欄の下にある⑤動作モードのボタンをクリック、もしくはshift + Tabキーで、Planを選択してください。

複数のファイルにまたがる変更を相談するので、今回はじっくり考えるOpusを使います。
入力欄の下の③モデル選択から、Opusを選択します（Opusが複数並んでいるときは、数字がいちばん大きいもの）。

手順2. 指示を送る

入力欄に以下のように入力して送信してみましょう。

nav要素のメニューを、スマホ幅の場合はハンバーガーメニューになるように変更したいです。
スマートフォン表示（画面幅768px以下）のときはメニュー部分を非表示にして、ハンバーガーアイコンをタップするとメニューが開閉するイメージです。
実装方法を提案してください。

送信すると、AIはプロジェクトを調査し、考え始めます。
結構時間がかかるので待ちましょう。

手順3. 提案内容を確認する

しばらくするとAIから実装プランが返ってきます。
「どのファイルをどう変更するか」「どんなコードを追加するか」といった内容が日本語で説明されます。

プランが出そろうと、チャットパネルは 「Accept this plan?」 という表示に切り替わっていますね。
3つの選択肢から次のアクションを選びます。

• 1. Yes, and use auto mode
  プランに同意して、Autoモードで進めます。安全チェックを通った変更は確認なしで適用されるので、内容をしっかり確認した上で選びましょう。
• 2. Yes, and manually approve edits
  プランに同意しつつ、ファイルを書き換えるときは1つひとつ確認しながら進めます。初めのうちはこちらがおすすめです。
• 3. No, keep planning
  まだプランの修正を続けたいときに選びます。「この部分はこうしてほしい」と追加の要望がある場合はこちらを選んで、引き続き相談しましょう。

また、下のテキストボックスに直接コメントを入力して修正を依頼することもできます。

手順4. 実際にコードを書いてもらう

提案されたプランに問題がなさそうなら、ファイルを書き換える前に確認が入る [2. Yes, and manually approve edits] を選択します。
AIがコーディングを始めてくれます。

ファイルの新規作成や修正が入ると、画面には差分表示が現れます。

• 🟥 赤い行　削除される部分
• 🟩 緑の行　新しく追加される部分

内容を確認して問題なければ 「Accept」 をクリックして、ファイルの作成・変更を行います。
（気になる点があれば Rejectで変更を取り消し、指示を出し直してください）

変更箇所が縮小表示されている場合は、クリックすると全面表示との切り替えができます。
問題なければ 1. Yes もしくは 2. Yes, allow all edits this session （以降の編集でもすべての変更を承認する）を選択してください。

変更してほしくない場合は 3. No を選ぶか、下のテキストボックスに直接コメントを入力して修正を依頼します。

手順5. 動作を確認

全ての変更が終わると、チャット画面に完了報告が表示されます。

index.htmlだけではなく、同じナビゲーションを使っている全ページに変更を反映してくれています。便利ですね！

ブラウザでindex.htmlを開いて動作を確認してみましょう。
画面幅を狭めると、ナビゲーションがハンバーガーメニューに切り替わるはずです。
おお…！問題なく動作していますね。
デモの場合は、今のままでも十分に使えるクオリティでした。

② 追加修正をお願いする

一発でうまくいかなかったり、メニューの出現方法を変えたいなどのリクエストがある場合は追加で指示もできます。

また、簡易な修正や更新の場合は上のようにPlanモードを使わず、この方法で直接指示をしてもコーディングをしてくれます。今回のコーディングくらいの範囲で「どんなふうに」を明確に指示できるなら、いきなりコーディング依頼を送信しても問題ないです。

手順1. 直してほしい部分を明確化する

今回デモでClaude Codeが書いてくれたコードは、動作に全く問題ないものでした。
ただ、ハンバーガーボタンをタップした時の、メニューの出現がちょっと無機質です。

上（ヘッダーの背景色部分）からヌルヌルと降りてきてくれた方が、もう少し「開く」イメージが強まるのではないでしょうか。

このあたりは生成された現時点のコードや好みもありますので、「横からスライドイン」や「フェードで表示」など、自分のイメージに合った指示を出してみましょう。

手順2. モードとモデルを設定する

モードを Manual、モデルを Default もしくは Sonnet に変更します。
Sonnet は「迷ったときの選び方目安」で紹介した、ふだんの作業向けの組み合わせです。

設定が確認できたら、上の手順1で考えた内容を元に指示を送ります。

ハンバーガーメニュー開閉時のアニメーションの変更をお願いします。
メニュー部分はヘッダーの真下から、下方向にスライドして出てくるアニメーションにしてください。
閉じる場合は反対に、上方向に向かってスライドして欲しいです。

補足
今回は①のコーディングから続いているので、該当箇所の指定はしていません。
このプロンプトが初回になる場合は、「どこに書かれている」 「なにを」 変更するかも記述しましょう。

手順3. 差分を確認してAcceptする

AIがファイルの変更内容を提示します。
画面に差分表示が現れますので、確認しましょう。
最初は縮小表示、クリックすると全面表示にできます。

　↓

差分表示の見方はシンプルです。

• 🟥 赤い行　削除される部分
• 🟩 緑の行　新しく追加される部分

上図の場合は、単に display: none; と display: block; で表示/非表示を切り替えていたところを、スライドアニメーション向きのプロパティ指定に変更していることがわかります。

変更箇所を確認して、問題なければ 1. Yes もしくは 2. Yes, allow all edits this session （以降の編集でもすべての変更を承認する）を選択してください。
気になる点があれば、3. Noを選ぶか、下のテキストボックスに直接コメントを入力します。

手順4. 表示を確認する

完了したら、チャット画面に報告が表示されます。

ブラウザでindex.htmlを開いて動作を確認してみましょう。

メニューがヘッダーの下からスライドして出てくるようになっていれば成功です。

もしも、AIによるコーディングが意図通りにならなかった場合でも大丈夫です。
そのままClaude Codeに「〇〇の動作がうまくいきません」と伝えれば、修正案を提案してくれます。

Claude Codeに限らず、AIを活用しながら制作を行う際には、AIとの対話を繰り返しながら完成に近づけていくことが基本になります。何度もやり取りをしていると「こういう風にプロンプトを書くと上手くいきやすい」という傾向も掴めてきます。

今回のように、上手くいかなくても問題のないプロジェクトを使って試してみましょう！