Growthappinessでは、サイト、コンテンツ、自動化など、クライアント案件で一日中Claudeを動かしています。そして早々にClaudeデスクトップアプリを使うのをやめました。技術的なこだわりではなく、生産性のためです。実際のファイルを扱い始めた瞬間、アプリはボトルネックになります。私たちが採用し、今ではクライアントにも導入しているのが、VS Code内でClaude Codeを動かす方法です。同じClaude、同じアカウント、でも主導権を握れる環境。VS Codeを一度も開いたことがない人でも分かるよう、正確な手順を順を追って説明します。
デスクトップアプリを離れる理由
デスクトップアプリが得意なのは一つ、会話です。問題は、その会話を成果物にしなければならないときに始まります。あるページの修正を頼むと、Claudeはテキストで返してくる。それを正しいファイルの正しい場所に貼り付けるのは自分の役目です。クライアント案件で20往復もすれば、いかに時間を食うか分かるでしょう。さらに悪いことに、プロジェクトの構造が一切見えないので、手探りで操作することになります。
VS Codeはまさにそれを解決します。Microsoftの無料・オープンソースのエディタで、元々は開発者向けですが、ここではファイル用の単なる作業台として転用します。3つのゾーン：左にフォルダ一覧、右のパネルにClaude、下にコマンド（例えばデプロイ）をウィンドウを切り替えずに実行できるターミナル。バラバラだったものが、一つの画面に収まります。
核心
AIを変えるのではなく、作業環境を変えるのです。同じClaude、同じサブスクリプション、同じ回答ですが、何をしているかが見える環境に置かれます。さらに、難しい問いには第2のエージェント（OpenAIのCodexなど）をすぐ隣で開き、2つの意見を見比べることもできます。
ステップ1 — VS Codeをインストールする
VS Codeの公式サイトにアクセスし、大きな青いDownloadボタンをクリックします。MacかWindowsか、正しいバージョンを自動で選んでくれます。すでにインストール済みなら、ステップ2へ進んでください。
ステップ2 — 5つの拡張機能をインストールする
拡張機能とは、VS Codeに新しい機能を追加するモジュールです。このセットアップは5つの拡張機能を使います。それぞれの役割を見てみましょう。
Claude Code
必須。エディタに組み込まれたAnthropicのエージェントです。パネルで話しかけると、プロジェクトを読み、ファイルに直接書き込みます。これがなければ他は意味を持ちません。
Codex
第2の意見。Claudeと並べて入れるOpenAIのエージェントです。行き詰まったとき、同じ問いを両方のモデルに投げて比べれば、間違った道を避けられます。
Min Theme
視覚的な快適さ。落ち着いた配色で、ライトとダークの両方があります。些細に見えますが、一日中ツールの中で過ごすなら、目が疲れないことがすべてを変えます。
Symbols
視認性。ファイルアイコンをすっきりしたピクトグラムに置き換えます。数十ページあるプロジェクトで、正しいフォルダを一目で見つけられれば、1時間に何度も数秒を節約できます。
Pixel Agents
遊び心。純粋に見た目だけ。エージェントを、作業中に動き回る小さなピクセルアートのキャラクターとして表示します。無駄、でもそれでいい。開くのが楽しいツールは、より使うようになります。
インストール方法：VS Codeを開き、左のバーにある拡張機能アイコン（ブロックでできた小さな四角）をクリックし、検索に各拡張機能の名前を入力してInstallを押します。5回繰り返すだけです。
ステップ3 — 見た目を整える
このセットアップは拡張機能だけではありません。エディタが落ち着いて目に優しくなるよう調整します。2つの設定で十分です。
- テーマ：Cmd + Shift + P（WindowsではCtrl + Shift + P）を押します。コマンドパレットが開きます。名前を入力するだけで任意のコマンドを起動できる検索バーで、アプリ全体で最も便利なショートカットです。themeと入力し、「Preferences: Color Theme」をクリックして、Min Dark（暗）またはMin Light（明）を選びます。切り替えは5秒です。
- アイコン：同じコマンドパレットで「File Icon Theme」と入力し、Symbolsを選びます。
ステップ4 — Claudeを起動し、プロジェクトを開く
サイドバーのClaudeアイコンをクリック（またはコマンドパレットで「Claude」と入力して開く）し、いつものAnthropicアカウントを接続します。右側にClaudeパネルが開きます。
次に作業フォルダを開きます。メニューのFile → Open Folderから、作業したいプロジェクトを選択します。ファイルが左に表示されます。あとは普通の言葉でClaudeに頼むだけ。目の前でファイルがその場で編集されていくのが見えます。
重要なポイント：自律モード
有効化する前に必読
Claude Codeには自律モード（正式な技術名はbypass permissions）があります。デフォルトでは、各アクションの前に許可を求めます。自律モードでは自動で進み、各ステップを確認せずにファイルを編集しコマンドを実行します。よりスムーズですが、その分責任は自分に移ります。私たちが社内ルールとしてクライアントにも伝えているのは、自分が管理しバックアップを取ったフォルダでのみ有効にすること。本番環境や代えのきかないファイルでは決して直接使わないことです。
始めたばかりの方への推奨：最初は自律モードをオフのままにしましょう。Claudeは各アクションの前に確認を求めるので、慣れるまでは安心です。新しいテスト用フォルダを作ってその中で作業し、慣れてから自律モードをオンにしてください。急ぐ必要はありません。
B2Bの中小企業にとって何が変わるか
快適さを超えて、このセットアップは日々のAIとの付き合い方を変えます。小さなチームを率いる人にとっての、3つの具体的なメリットです。
1. コピペをやめられる
チャット画面とドキュメントの往復がなくなります。Claudeがファイルに直接読み書きします。Webページ、コンテンツ計画、データのエクスポート。節約できる時間は本物で、毎日効いてきます。
2. AIが何をしているか見える
ファイルは左にあり、常に見えています。Claudeが何かを変えれば、それが見える。手探りで委ねるのと、主導権を握るのとの違いです。成果物がクライアントに届くなら、これは重要です。
3. すべてが一か所にまとまる
編集、デプロイ用のターミナル、AI、確認用の第2エージェント。すべてが一つのウィンドウにあります。摩擦が減り、一日でより多くを納品できます。
1つのウィンドウ
拡張機能
セットアップ
行き詰まったら
画面が分からないときに粘る必要はありません。最も効果的な反射は、少し皮肉ですが、Claude自身に聞くことです。詰まっている画面のスクリーンショットを撮り、パネルに貼り付けて、このボタンは何のためか、なぜこのエラーが出るのかを尋ねましょう。ツールを学ぶ最速の方法であり、テスト用フォルダにいる限り、何も壊す心配はありません。
Growthappinessの結論
VS Code内でClaude Codeを動かすのは、開発者だけのものではありません。AIをチャットボックスではなく本物の仕事道具に変える、最もシンプルなセットアップです。同じClaudeを、あなたを妨げないウィンドウの中で。
2026年の本当の差別化要因は「誰がAIを使うか」ではありません。誰もが使うからです。それは「誰が成果を出すワークフローにAIを組み込めるか」です。それこそ私たちのClaude AIトレーニングパックが扱う領域です。あなたのセットアップを導入し、正しい使い方を伝え、自走できる状態でお返しします。