Claude Codeといえば、「黒い画面（ターミナル）で動く難しそうなAIツール」というイメージがあるのではないでしょうか。しかし、Claude CodeをVS Code上で動かせば、見やすい画面と快適な操作感で、初心者の方のハードルもグッと下がります。
本記事では、Claude CodeとVS Codeの使い方を設定から実際の活用例まで画像付きで分かりやすく解説します。「手軽なClaude Codeの使い方を知りたい」という方もぜひご一読ください。
Claude Codeの使い方は？
Claudeを開いても、どこからアクセスすればいいか分からず、「Claude Codeの使い方は？」と迷う方もいると思います。ここでは、Claude Codeの使い方の第一ステップとして、Claude Codeを使える場所と、それぞれのアクセス方法を見ていきましょう。
| 使える場所 | アクセス方法 | 開き方 |
|---|---|---|
| エディタ （VS Codeなど） | エディタをインストール→Claude Codeを追加 | エディタ経由で開く |
| ターミナル | Windows→検索欄で「cmd」と入力して開く |
|
| Mac→検索で「ターミナル」と入力して開く | ||
| ブラウザ | ブラウザで「claude.ai/code」にアクセスする | URLから直接開く |
| 「Claude」のサイドバー右上「</>」を開く | Claudeのページから開く |
エディタでの使い方
ここでは、エディタの代表例としてVS Codeのインストール方法を見ていきましょう。まずVS Codeの公式サイトにアクセスし、お使いのOSのダウンロードボタンを押します。「あなたのOSです」と表示されているものを選べばOKです。
ダウンロードが終わったら、パソコンの「ダウンロード」フォルダから、VS Codeをインストールしてください。そのあとの、Claude CodeとVS Codeの連携方法・使い方は後述します。
VS Codeの詳しいインストール方法は以下の記事でお伝えしています。操作画像付きでの解説なので、目で見ながら使い方をマスターしたい方もぜひご一読ください。
ターミナルの使い方
ターミナルでClaude Codeを使う場合は、初回のみインストールが必要です。お使いの環境に合ったコマンド（以下参照）をコピーし、ターミナルのカーソルが点滅している場所に貼り付けてEnterを押せばインストールが始まります。
インストールが終わったら、上の画像の箇所に「Claude」と入力してEnterを押します。その後、矢印キーで「Yes, I trust this folder」に移動してEnterを押せば、Claude Codeが開きます。
【Windows CMD】
curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd【Windows PowerShell】
irm https://claude.ai/install.ps1 | iex【macOS、Linux、WSL】
curl -fsSL https://claude.ai/install.sh | bash
ブラウザ（Claude Code・Claude）からの使い方
最後は、ブラウザ（Claude Code・Claude）からの使い方です。この際、Claudeのチャット画面にある「</>」マークをクリックするか、もしくは「claude.ai/code」へ直接アクセスしましょう。どちらの使い方でも、上の画像と同じページが開きます。
このページが開いたら、「GitHubで続ける」か「ターミナルから接続する」かを選んでください。GitHub連携はあとからでもできるので、「今はスキップ」で先に進むことも可能です。
実務への活用まで学べるClaude Codeセミナー
Claude CodeはVS Codeなど複数の方法で操作できるため、「自分にはどの使い方が合うのか」と迷う方もいるでしょう。そこで私が魅力を感じたのが、実際に操作しながらスキルが身につくClaude Codeセミナーです。
PDFチェックツールなどを実際に作りながら学べるので、操作方法だけでなく、業務での活用イメージもつかめます。学んだことをすぐに仕事に生かせたという口コミもあり、知識を得るだけでなく、実務で使えるセミナーであることがわかります。
Claude CodeとVS Codeの使い方3ステップ
では、Claude CodeとVS Codeの使い方を操作画面とともにわかりやすく解説します。ここでの使い方に進む前に、前項の「エディタでの使い方」でお伝えした方法で、VS Codeのインストールを済ませておきましょう。
ステップ1.VS CodeにClaude Codeを追加する
Claude CodeとVS Codeの使い方として、まずはVS CodeにClaude Codeを追加しましょう。
- VS Codeを開き、左側の四角が4つのアイコンをクリック
- 「Claude」と入力→「Claude Code for VS Code」を選択して「Install」をクリック
- VS CodeにClaude Codeがインストールされる
ステップ2. VS CodeでClaude Codeを開く
追加の使い方が終わったら、次はVS CodeでClaude Codeを開く使い方を解説します。
- 画面右下の「Claude Code」、または左側メニューのClaude Codeアイコンをクリック
- 「Claude.ai Subscription」をクリック
- 「Open」をクリック
- 普段Claudeにログインしているのと同じ方法でログイン
- 「承認する」をクリック
- 承認されると以下の画面が表示→この画面を閉じる
- VS Codeの画面に戻ると、Claude Codeの管理画面が表示
ステップ3. 作業用のフォルダを開く
最後は、Claude Codeに作業してもらう場所（フォルダ）を決める使い方です。この使い方をしておくと、作ってもらったファイルがどのフォルダにあるか迷わずに済みます。なお、新規フォルダの作成方法は以下をご参照ください。
Mac：デスクトップ空白部分で右クリック→新規フォルダー
- デスクトップなどに、新しいフォルダを作成→名前を入力
（ここでは名前を「Claude」にしています） - VS Codeの上部メニュー「File」→「Open Folder」を選択
- 「Claude」フォルダをクリックして選択→「Select folder」をクリック
- 画面中央の上「Welcome」タブの右側「Claude」アイコンをクリック
- チャット画面が表示されるので、試しに「簡単に自己紹介して」と送る
- 回答が表示される
これで、Claude CodeとVS Codeの連携の使い方は完了です。あとはClaude Codeのチャット入力欄に、やってほしいことを入力してみてください。
フォルダを開いてもClaude Codeが動かないときは？
フォルダを開いたときに「Do you trust the authors of the files in this folder？」と表示された場合は、「Yes, I trust the authors」をクリックしてください。
また、画面上部に「Restricted Mode（制限モード）」と表示されている場合は、Claude Codeが使えない状態です。「Manage」→「Trust」をクリックすると解除できます。
Claude CodeとVS Codeの壁はセミナーで解消しよう！
上記の注意点のとおり、「Claude CodeとVS Codeの連携」は簡単そうで、意外なところでつまずきます。私も実際に試したとき、画面に「Restricted Mode（制限モード）」の表示が出たまま先に進めず、どこを触ればいいのか手が止まってしまいました。
そんなつまずきを、プロに教わりながら解消できるのがClaude Codeセミナーです。
私は、操作を覚えるだけでなく、「PDFチェックツール」や「メールの自動生成」など、すぐ仕事に使えるツールを自分で作れる点にも惹かれました。「セミナーに行っても、使い方を聞いて終わりになりそう…」と思っている方にこそ、ぜひ試してほしいカリキュラムです。
セミナー名 Claude Codeセミナー 運営元 GETT Proskill（ゲット プロスキル） 価格(税込) 29,700円〜 受講期間 2日間 受講形式 対面（東京・名古屋・大阪）・ライブウェビナー・eラーニング
Claude CodeとVS Codeで何ができる？実例で解説
Claude CodeとVS Codeの連携の使い方がわかったところで、「実際に何ができるのか」がわかる使い方に進みましょう。
AIセミナーのホームページ作成の使い方
ここでは、使い方の実例として、架空のAIセミナーのホームページを作ってみます。以下は、今回の使い方のプロンプトです。
AIセミナーのホームページを作ってください。
・セミナー名：「はじめての生成AI活用セミナー」
・主要情報（日時・会場・参加費）、講座内容、講師紹介を記載
・申し込みボタンを入れる
・明るく親しみやすいデザイン
- Claude Codeのチャット欄にプロンプトを入力して送信
- 完成すると「Do you want Code to open the external website?」と表示→「Open」をクリック
- ブラウザでホームページが表示される
- 「このフォルダにindex.htmlとして保存して」とチャットで指示→フォルダにファイルが保存
これでホームページの作成と保存の使い方は完了です。
コードで表示する使い方
この使い方で完成したホームページは、再度VS Codeにアクセスして、サイドバーの一番上にあるファイル型アイコンを開いて「index.html」をクリック（左クリック）すると、ホームページがコードで表示されます。
ファイルで完成品を見る使い方
次は、ファイルから完成したホームページの見た目を確認する使い方です。
- 「index.html」を右クリック→「Reveal in File Explorer」をクリック
- 開いたフォルダの「index」をダブルクリック
- ファイルが開いてホームページが表示
デスクトップの「Claude」フォルダから直接ダブルクリックしても同じように開きます。なお、コード表示とファイル表示は左クリックか右クリックかで変わるので、クリック時には注意しておきましょう。
Claude Codeの使い方でVS Codeがおすすめな理由
Claude Codeはターミナルやブラウザ、Cursorなど別のエディタからも使えるので、「わざわざVS Codeと連携しなくてもいいのでは？」と思う方もいるでしょう。
結論からいうと、Claude Codeの使い方で迷ったときはVS Codeがおすすめです。ここでは、Claude Codeの使い方としてVS Codeがおすすめな理由を解説します。
Microsoft製の安心感・無料の手軽さ
VS Codeは、個人でも仕事でも完全無料で使えるMicrosoft製のエディタです。世界中で使われている定番ツールなので信頼性が高く、トラブル時の情報もすぐに見つかります。VS Codeは日本語化もできるため、使い方に迷いがちな初心者の方にも最適です。
フォルダやファイルを見ながら操作できる
VS Codeなら、パソコン内のフォルダ構成やClaude Codeが作ったファイルの中身を、画面で見ながら作業できます。AIの修正案も反映前に画面上で比較・確認（承認・却下）することが可能です。「ターミナルはどのフォルダで作業しているのか分からない」という方にもおすすめの使い方です。
使い方がほかのエディタにも活かせる
実は、Cursorをはじめとする人気のAIエディタの多くは、VS Codeをベースに作られています。これらのツールはVS Codeと使い方が似ているので、VS Codeの使い方さえ覚えておけば、別のエディタに乗り換えても迷うことはほとんどありません。
Cursorは、AIが自律的に作業を行う「AIエージェント機能」を持つコードエディタで、使い方に慣れるための無料プランも設けています。Cursorの詳しい情報については、以下の記事をご参照ください。
Claude CodeとVS Codeの使い方でよくある質問
Claude CodeとVS Codeの使い方を知りたい方は、「料金はかかるの？」「設定は変えられる？」といった疑問も出てくるでしょう。ここでは、Claude CodeとVS Codeの使い方に関するよくある質問を4つご紹介します。
Claude CodeとVS Codeの使い方についてまとめ
Claude CodeはVS Codeと組み合わせると、エディタでコードを見ながらそのまま作業を頼め、VS Code上で完成アプリも実際に表示できます。使い方がわかりやすいとはいえ、実際に触ってみると、最初の設定や表示の意味がわからず手が止まることもありました。
Claude CodeのVS Codeでの使い方は、慣れてしまえば難しくはないので、まずは簡単な使い方から試してみてください。使い方に迷ったときは、セミナーで直接教わりながら学ぶのもひとつの方法です。
