VSCode版Claude CodeのUI（パネル）と基本操作を、図解たっぷりで解説します
AIの進化により、単なる制作業務の価値は暴落しつつあり悩んでいる。そんな人は多いと思います。しかし、悲観する必要はありません。 今こそ「作る側」から「教える側」へ回るチャンスです。
AI時代を勝ち抜くための「億を稼ぐスクールビジネス」を、期間限定で公開しています。無料ですのでチェックしましょう。
（無料公開、限定100名、4月26日まで）
» 今すぐ億を稼ぐマニュアルをゲットする
今回は、Claude Code（VSCode版）の画面構成と基本操作についてわかりやすく解説します。
- UIが英語なのでツライ…
- テキストボックスに文字を打つとAIとチャットができる以外よくわからない
- モデルの選択が見当たらなくて不安
- そもそもモデルとかよくわからない
- メンションとかコマンドって何？
こんなお悩みや不安を感じている初心者さん、必見ですよ。
後半は簡単なデモサイトを使って、モデルを切り替えながらAIと一緒にコーディングする方法も実演します。デモで使用した素材もご提供しますので「導入したけれど、何をしたら良いかわからない」という方も、ぜひ活用してみてください。
VSCode版のClaude Codeの操作対象
Claude Codeのパネル
前回の導入編のおさらいになりますが、もう一度VSCode版のClaude Codeのチャット画面（AIへの指示パネル）の開き方を確認します。
VSCodeにClaude Codeを追加すると、左側のサイドバーにアイコンが表示されます。
左サイドバーのアイコンをクリックして、New sessionを選択すると、AIチャット用のタブが開きます。
また、ファイルを開いた状態であれば、右上にもClaudeのアイコンが表示されます。
こちらからもパネルを開けます。
どちらから開いても、使いやすいほうで構いません。
エディターの配置、左右分割するか否かなども、使いながら自分のベストポジションを探していきましょう。
VSCode版のClaude Codeの操作対象
ターミナルから使う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. チャットエリア下部のボタン
入力欄の下には、5つのボタンが並んでいます。
ここが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全体の基本設定を確認・変更できます。
③ 現在activeなファイル
VSCodeで開いているファイル名が表示されている箇所は、オン・オフを切り替えられるボタンのようなものです。
ファイルなどのアイコンが表示されている状態の場合は、Claude CodeにVSCodeで開いているファイル・選択している箇所が送られます。
④ 動作モードの切替
Claude Codeがファイルを編集するときの動作モードを切り替えられます。
こちらを使わず、入力を選択している状態でshift + Tabキーでも切り替えが可能です。
選択できるモードは以下の３つです。
-
Ask before edits
ファイルを書き換える前に、必ず確認を求めてきます。初めのうちはこのモードがおすすめです。 -
Edit automatically
確認なしで、自動的にファイルを編集します。操作に慣れてきたらこちらも試してみましょう。 -
Plan mode
コードを書く前に、まず「どう実装するか」の計画を提示してくれます。大きな変更を加えるときや、方針を確認してから進めたいときに便利です。
また、下部にあるEffortは、AIが問題に対してどれくらい時間・処理をかけるかを調整します。
⑤送信ボタン
右端の目立つ矢印は、Claude Codeに指示（入力欄に入れた内容）を送信するボタンです。
モデルの選択について
Claude Codeでは、作業内容に応じて使用するAIモデルを切り替えることができます。
AIモデルとは？
モデルとは、AIの「頭脳」にあたる部分です。
モデルによって得意なことや処理の重さが異なり、賢さとコストのバランスが変わってきます。
従量課金制ではかかる金額が変わってきますし、プロプランでは利用量に上限があり制限がかかってしまう可能性があります。
コスパ良くClaude Codeを使用するには、作業内容に応じてモデルとを使い分けることが大切です。
モデルの種類と切り替え方
／メニューから Switch model を選ぶと、使用するモデルを変更できます。
現在選べるモデルは大きく Opus、Sonnet、Haiku の３系統です。
Default: Claude Sonnet（ソネット）
性能と速度のバランスが良いモデルです。
デフォルトで設定されており、日常的なコーディング作業のほとんどはSonnetで十分対応できます。
Claude Opus（オーパス）
最も高性能なモデルです。複雑な問題への対応や、精度の高い推論が得意です。
その分、処理が重く利用量も多く消費します。Plan modeで設計を相談するときなど、じっくり考えてほしい場面で使うのがおすすめです。
Claude Haiku（ハイク）
3つのモデルの中で最も軽量・低コストなモデルです。
シンプルな質問への回答や、文章作成、短いコードの修正など、軽めのタスクをすばやく処理したいときに向いています。
迷ったときの選び方目安
作業内容に合わせて動作モードとモデル選択を組み合わせて設定することで、クオリティとコストの両立を図ることができます。
よくわからない場合は、基本はEdit automatically ＋デフォルト（Sonnet）設定。
「大きな変更をする前に計画を立てたい」というときだけPlan mode＋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で作った、架空の動物園サイトを修正してみます。
ヘッダーのグローバルナビゲーションを、スマホユーザーでも使いやすいようにハンバーガーメニューにしてみましょう。
試してみたいけどファイル作るのが面倒…という方は、ぜひ素材を使ってみてください。
この素材のフォルダ（もしくはClaude Codeにコーディングやレビューをお願いしたいフォルダやファイル）をVSCodeで開いてください。
① Plan modeで相談→実装
いきなりコードを書いてもらう前に、まずAIに計画を立ててもらうこともできます。
どんな変更が行われるかを事前に確認でき、意図しない修正を防ぐことができます。
軽い修正などでは使わずに進めても良いのですが、せっかくなのでPlan modeも試してみましょう。
手順1. モードとモデルを切り替える
モードをPlan modeに切り替えます。 入力欄右下の「Ask before edits」ボタンをクリック、もしくはshift + Tabキーで、Plan modeを選択してください。
Plan modeで設計を相談するときは、最も高性能なOpusが適しています。
/model →「Switch model」からClaudeの最新Opusを選択します。
手順2. 指示を送る
入力欄に以下のように入力して送信してみましょう。
nav要素のメニューを、スマホ幅の場合はハンバーガーメニューなるように変更したいです。
スマートフォン表示（画面幅768px以下）のときはメニュー部分を非表示にして、ハンバーガーアイコンをタップするとメニューが開閉するイメージです。
実装方法を提案してください。
送信すると、AIはプロジェクトを調査し、考え始めます。
結構時間がかかるので待ちましょう。
手順3. 提案内容を確認する
しばらくするとAIから実装プランが返ってきます。
「どのファイルをどう変更するか」「どんなコードを追加するか」といった内容が日本語で説明されます。
プランが出そろうと、チャットパネルは 「Accept this plan?」 という表示に切り替わっていますね。
3つの選択肢から次のアクションを選びます。
-
1. Yes, and auto-accept
プランに同意して、ファイルの編集も自動で進めます。確認なしにどんどん変更が適用されるので、内容をしっかり確認した上で選びましょう。 -
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を開いて動作を確認してみましょう。
画面幅を狭めると、ナビゲーションがハンバーガーメニューに切り替わるはずです。
おお…！問題なく動作していますね。
デモの場合は、今のままでも十分に使えるクオリティでした。
② 追加修正をお願いする
一発でうまくいかなかったり、メニューの出現方法を変えたいなどのリクエストがある場合は追加で指示もできます。
また、簡易な修正や更新の場合は上のようにplan modeを使わず、この方法で直接指示をしてもコーディングをしてくれます。今回のコーディングくらいの範囲で「どんなふうに」を明確に指示できるなら、いきなりコーディング依頼を送信しても問題ないです。
手順1. 直してほしい部分を明確化する
今回デモでClaude Codeが書いてくれたコードは、動作に全く問題ないものでした。
ただ、ハンバーガ―ボタンをタップした時の、メニューの出現がちょっと無機質です。
上（ヘッダーの背景色部分）からヌルヌルと降りてきてくれた方が、もう少し「開く」イメージが強まるのではないでしょうか。
このあたりは生成された現時点のコードや好みもありますので、「横からスライドイン」や「フェードで表示」など、自分のイメージに合った指示を出してみましょう。
手順2. モードとモデルを設定する
モードを Ask before edits、モデルを Default: Claude 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との対話を繰り返しながら完成に近づけていくことが基本になります。何度もやり取りをしていると「こういう風にプロンプトを書くと上手くいきやすい」という傾向も掴めてきます。
今回のように、上手くいかなくても問題のないプロジェクトを使って試してみましょう！
まずは無料で7講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
4月26日まで