第4章 Claude Code 導入と、2つの Claude の併用

第1章で Code を入れて、サクッと使い始めました。第3章でターミナルとも初対面しました。

ここで一度立ち止まって、Code 周りの全体像をもう少し丁寧に整理します。第1章では駆け足だったので、

そもそも Claude Code には3つの顔がある、という話
なぜデスクトップアプリ版を採用するのかの根拠
インストールでつまずく典型パターンと対処
「Plan モード」「自動モード」という2つのモードがある、という事実
「2つの Claude」を併用する、ということの意味

このあたりを腑に落としていきます。

4-1. Claude Code には3つのフロントエンドがある

【学習目標】

Claude Code には複数の使い方があることを知る
本書がなぜ「デスクトップアプリ版」を選ぶのかの背景を理解する

【前提知識】

第1章までで Code を使ったことがあること

【概念解説】

第1章で「他のフロントエンドは全部無視してOK」とお伝えしました。一旦は無視で大丈夫なんですが、後で他の人と話す時に「ターミナル版？VS Code 版？って何？」となる可能性があるので、ここで整理しておきます。

Claude Code には、大きく3つのフロントエンドがあります。

1. デスクトップアプリ版（本書で使う「Code」）

独立したアプリ。アイコンをクリックして起動
画面上部に「Chat」「Cowork」「Code」の3タブがある（本書では「Code」タブを使う）
左サイドバーに「New session」「Routines」「Customize」が並ぶ画面
プレビューパネル、編集承認ボタンなど、GUI が親切
初心者向き

2. ターミナル CLI 版

ターミナル（黒い画面）の中で claude というコマンドを打って起動
文字ベース、コピーボタンや GUI はなし
動作が軽い、SSH 経由でリモートサーバーでも使える
エンジニア向き

3. VS Code 拡張版

VS Code（コードエディタ）の中に、Claude Code の機能を埋め込んだもの
コードを編集しながら、その横で Claude に話しかけるイメージ
エディタを既に使い慣れている人向き

中身（Claude Code の AI としての能力）はどれも同じです。違うのは「どんな見た目で、どこから使うか」だけ。

僕自身の経験では、最初は勉強会で VS Code 拡張版を触ったけど分からず、次の日にターミナル版を触ったけどやっぱり分からず、最終的にデスクトップアプリ版に落ち着いて初めて作業が回り始めた、という流れでした。

これは別に特殊なケースではなくて、プログラミング経験が浅い人ほど、デスクトップアプリ版が圧倒的に始めやすいんですよ。

【ハンズオン手順】

▼ ブラウザ側でやること

次のように聞いてみてください

Claude Code には複数のフロントエンドがありますが、
プログラミング経験のない初心者が始めるのに最も向いているのは
どれですか？理由も含めて教えてください。

「デスクトップアプリ版が向いている、GUI が親切、視覚的に分かりやすい」といった答えが返ってくればOK

【つまずきポイント】

「VS Code 拡張の方が本格的でかっこいいかも」と思う必要はない。本格的かどうかではなく、自分が前に進めるかどうかが大事
将来 VS Code 拡張やターミナル版を使いたくなったら、その時に乗り換えてOK。中身は同じなので、知識は引き継げます

【確認問題】

Claude Code の3つのフロントエンドを言えますか？
本書はそのうちどれを使いますか？

【次のレッスンへの橋渡し】

3つの選択肢の存在は把握できました。次のレッスンで、なぜデスクトップアプリ版が初心者向きなのかをもう少し具体的に深掘りします。

4-2. なぜデスクトップアプリ版を採用するのか

【学習目標】

デスクトップアプリ版の優位性を、具体的に理解する
「自分はこの選択でいいんだ」と納得する

【前提知識】

4-1 で3つのフロントエンドの存在を知ったこと

【概念解説】

デスクトップアプリ版が初心者にとって優れている理由は、いくつかあります。

1. プレビューパネルがある

Code が作ったファイル（HTML など）を、その場でブラウザのように表示してくれる小窓があります。「作ったものがリアルタイムで見える」というのは、初心者にとってめちゃくちゃ重要なんですよ。第1章でストップウォッチが動く瞬間を体感できたのは、これのおかげです。

ターミナル版だと、HTML が完成しても自分でブラウザを開いて確認する必要があります。地味に手間で、フローが切れます。

2. ファイルの差分が色付きで見える

「+202 -0」のような行数表示や、変更箇所が緑（追加）・赤（削除）でハイライト表示されます。コードを読めなくても、「Code が今どこを変えたか」が視覚的に分かるので、安心感があります。

3. 編集の承認・拒否がボタン1つ

「これを書き換えていい？」と Code が聞いてきた時、ボタンで Yes / No を答えられます。ターミナル版だとキーボードで y や n を打つ必要がありますが、ボタンの方が直感的です。

4. セッション履歴がサイドバーに残る

過去にやった作業が、左サイドバーに「Recents」として並びます。クリックすれば過去のセッションに戻れる。これがあると「あの時の続きから」が圧倒的にやりやすいです。

5. Routines、Customize などの GUI 設定

スラッシュコマンドを覚えなくても、設定が GUI で触れます。例えば「Customize」から好きな振る舞いを指定できる。これは第7章で詳しくやります。

これらの「あって嬉しい機能」が全部一画面に揃っているのが、デスクトップアプリ版の強みです。

【ハンズオン手順】

▼ Code 側でやること

Code を起動して、左サイドバーを観察してみる
「New session」「Routines」「Customize」「Recents」などのメニューを目で確認する
過去にやった「ストップウォッチアプリ」のセッションを Recents から開いてみる
プレビューパネルが復活して、ストップウォッチがまた動くはずです

▼ スクショ伴走のチェックポイント

サイドバーが見えている状態のスクショを撮って、自分の Code がどんな画面構成か把握しておくと、後で何かあった時に役立ちます

【つまずきポイント】

「Recents」に何も並んでいない人は、まだ作業履歴が少ないだけ。これからどんどん増えていきます
複数のセッションを並行で開けますが、最初は1つに集中する方が混乱しません

【確認問題】

デスクトップアプリ版の「プレビューパネル」は、何のための機能ですか？
過去のセッションに戻るには、サイドバーのどのエリアを見ますか？

【次のレッスンへの橋渡し】

利点が見えました。ここからは、Mac と Windows でのインストール詳細を改めてしっかり確認していきます。第1章でうまくいった人はサラッと読み流すだけでOK。引っかかった人は、ここで腰を据えて対処していきましょう。

4-3. デスクトップアプリのインストール（Mac版）

【学習目標】

Mac 版 Code のインストール手順を、つまずきポイント含めて完全に把握する
第1章で詰まった人がここで解決できる

【前提知識】

macOS が動く Mac を持っていること

【概念解説】

Mac へのインストールは比較的シンプルですが、いくつか初心者がハマる定番ポイントがあるので、ここで網羅しておきます。

インストールの全体像

Anthropic 公式サイトから .dmg ファイルをダウンロード
.dmg ファイルを開く
Claude アイコンを Applications フォルダにドラッグ
Applications から Claude を起動
初回起動時に「開発元が確認できない」警告 → システム設定で許可
ログイン画面でアカウント認証
上部タブで「Code」を選択
完成

【ハンズオン手順】

▼ ブラウザ側でやること（ダウンロード）

ブラウザで Claude の公式ダウンロードページに行く
macOS 用のダウンロードボタンを押す
.dmg ファイルがダウンロードされる

▼ Mac の Finder 側でやること（インストール）

ダウンロードフォルダで .dmg ファイルをダブルクリック
ウィンドウが開いて、Claude アイコンと「Applications」フォルダのショートカットが並ぶ
Claude アイコンを Applications フォルダにドラッグ&ドロップ
アイコンがコピーされる（数秒）
ウィンドウを閉じる
Launchpad または Applications から Claude を起動

▼ Mac のシステム設定でやること（最初の警告を許可）

初回起動時に「"Claude" は開発元を確認できないため開けません」と出るのが定番
システム設定 → プライバシーとセキュリティ
一番下までスクロール
「"Claude" は開発元を確認できないためブロックされました」のメッセージの隣に「このまま開く」ボタン
クリック → パスワード入力 → 開く

▼ Code 側でやること（ログイン）

アプリ起動後、ログイン画面が出る
ブラウザで使っているのと同じアカウントでログイン
Pro 以上のプランに加入していることが必須
認証完了

▼ Code 側でやること（Code モードに入る）

画面上部にタブが3つある：「Chat」「Cowork」「Code」（Cowork は本書では使いません）
「Code」をクリック
左サイドバーに「New session」「Routines」「Customize」が出れば成功

▼ スクショ伴走のチェックポイント

各ステップで成功画面のスクショを撮っておくと、次回別のPCにインストールする時にも参考になります

▼ 困ったら聞く例

ブラウザに →「Mac で Claude をインストールしたら『アプリは破損している可能性があります』と出ました。どう対処すれば？（スクショ）」

【つまずきポイント】

「開発元が確認できない」エラーは必ず出ます。これは Apple のセキュリティ機能なので、慌てずシステム設定で許可してください
Apple Silicon（M1/M2/M3）か Intel か分からない時は、アップルメニュー → このMacについて、で確認。Apple Silicon の方が新しい
ダウンロードボタンが Apple Silicon 用と Intel 用で分かれている場合は、自分の Mac に合った方を選ぶ

【確認問題】

Mac で初回起動時の「開発元が確認できない」警告は、どこで許可しますか？
インストール後、Code モードに入るには画面上部のどのタブを選びますか？

【次のレッスンへの橋渡し】

Mac のインストールはこれで一通り。次は Windows のインストールです。Mac だけでも問題ない人は次は飛ばしてもOKです。

4-4. デスクトップアプリのインストール（Windows版）

【学習目標】

Windows 版 Code を直接インストールしてログインできる状態にする
Git for Windows を入れる理由を理解する

【前提知識】

Windows 10 または 11 が動くPCを持っていること

【概念解説】

Mac と同様に、Windows でもデスクトップアプリは直接インストールできます。WSL2（Windows Subsystem for Linux）は不要です。

WSL2 が必要になるのは、Claude Code を「ターミナル CLI 版（npm でインストールする方法）」で使う場合の話です。本書が使うのはデスクトップアプリ版だけなので、まったく関係ありません。ネットで調べると WSL2 の記事がよく出てきますが、それは別経路の話だと思って無視してOKです。

Windows ユーザーだけ追加で必要なもの

Code モードで「local session」を開くとき、バックグラウンドで Git を使います。Mac には Git が最初から入っているので問題ないですが、Windows には標準で入っていないため、「Git for Windows」を別途インストールする必要があります。

難しいものではなく、インストーラーを実行して「次へ次へ」で進むだけです。

【ハンズオン手順】

▼ ブラウザ側でやること（Code のダウンロード）

claude.ai/download を開く
Windows 版のダウンロードボタンをクリック
.exe ファイルがダウンロードされる

▼ Windows のエクスプローラー側でやること（Code のインストール）

ダウンロードフォルダで .exe をダブルクリック
インストーラーが起動したら「次へ」で進む
インストール完了したら Code を起動

▼ ブラウザ側でやること（Git for Windows のダウンロード）

git-scm.com を開く
「Download for Windows」をクリック
ダウンロードされた .exe をダブルクリック
選択肢はすべてデフォルトのまま「次へ」で進めてOK

▼ Code 側でやること（ログインと確認）

ログイン画面でアカウント認証
Pro 以上のプランに加入していることが必須
画面上部のタブが「Chat」「Cowork」「Code」と3つ並んでいるので「Code」を選択（Cowork は本書では使いません）
左サイドバーに「New session」「Routines」「Customize」が出れば成功

▼ スクショ伴走のチェックポイント

インストールの途中で「次へ」以外のボタンが出たり、見慣れない警告が出たら、スクショをブラウザに貼って確認しましょう

▼ 困ったら聞く例

ブラウザに →「Windows に Claude Code デスクトップアプリをインストールしたら、こういう画面が出ました。どう対処すれば？」（スクショ添付）

【つまずきポイント】

「WSL2 が必要」と書いてある記事を見ても、それはターミナル CLI 版の話です。デスクトップアプリには不要なので無視してOK
Git for Windows を入れ忘れると、local session が開けないことがあります。Code のインストール前に先に入れておくのが安心です
ウイルス対策ソフトが警告を出す場合、claude.ai/download からダウンロードした正規のファイルです。スクショをブラウザに貼って確認しましょう

【確認問題】

デスクトップアプリ版の Code を使う場合、WSL2 は必要ですか？
Windows ユーザーが Code とは別に追加でインストールするものは何ですか？

【次のレッスンへの橋渡し】

インストール周りはこれで完了。次は、Code を使うために必須の「認証と課金プラン」について整理します。

4-5. 認証と課金プラン

【学習目標】

Claude のプランの違いを理解する
自分の状況に合ったプランを選べる

【前提知識】

Code がインストールできていること

【概念解説】

Claude には複数の有料プランがあります。Code を使うには、Pro 以上のプランが必要です。

プランの種類（おおざっぱな整理）

プラン	月額目安	特徴
Free	無料	ブラウザでしか使えない、利用量制限あり
Pro	約3,000円	ブラウザ・Code どちらも使える、個人向け標準
Max	約20,000〜30,000円	大容量利用、ヘビーユーザー向け
Team	別途	チーム向けプラン

※ 価格は変動する可能性があります。最新は Anthropic 公式サイトで確認してください

初心者はまず Pro でOK

3週間で複数アプリを作った僕は、最初は Pro で始めて、利用量が増えてから Max にアップグレードしました。

最初から Max を選ぶ必要はないんですよ。Pro で「ちょっと使い切ってしまうな」と感じてからアップグレードすれば充分。

支払い方法

クレジットカードでの月額支払いが基本。ブラウザでログインして、設定 → 支払い、から手続きできます。

プラン変更のタイミング

アップグレード：いつでも可能、即時反映
ダウングレード：次回更新時に反映
解約：いつでも可能、課金期間終了まで使える

【ハンズオン手順】

▼ ブラウザ側でやること

ブラウザで Claude にログイン
アカウント設定 → 支払い
現在のプランを確認
Pro 以下なら Pro 以上にアップグレード

▼ Code 側でやること

Code を起動
ログイン状態を確認
左下にユーザーアイコンとプラン名（例：「Pro」「Max」）が表示されていれば正しい

▼ スクショ伴走のチェックポイント

プラン名が表示されている状態のスクショを撮っておくと、後で「自分は今どのプランだっけ？」と迷わずに済みます

【つまずきポイント】

「Pro と Max、どっち買えばいいか分からない」→ まず Pro でOK。足りなくなったらアップグレードできるので、最初から Max にする必要なし
支払いがうまくいかない時は、クレジットカードの国際決済が有効か確認。日本のカードでも普通は問題ないですが、稀に Anthropic の決済が引っかかることがあります

【確認問題】

Code を使うために必要な、最低限のプランは何ですか？
プランは後からアップグレード・ダウングレードできますか？

【次のレッスンへの橋渡し】

これで Code を使う準備は完全に整いました。次は、実際に作業を始める前に絶対知っておくべき「Plan モード」と「自動モード」について。これを知らないまま使い始めると、正直「恐怖でしかない」なので、ここでしっかり把握しておきましょう。

4-6. Plan モードと自動モードがある、ということを先に知っておく

【学習目標】

Code には2つのモードがあることを知る
それぞれがどう違うのか、なんとなく分かる
深い使い方は第7章で詳しくやることを把握する

【前提知識】

ここまでで Code が使える状態になっていること

【概念解説】

これ、僕が「最初に教えてもらって良かった、最初に知らないと作業始めてしまってたと思うと恐怖でしかない」と強く言っていたポイントなんです。

Code には2つのモードがあります

自動モード（デフォルト）

依頼するとすぐに作業を始める
ファイル作成・編集・コマンド実行を、Code が判断して進める
軽い作業や、信頼できる作業向き

Plan モード

依頼するとまず「計画書」を見せてくれる
どのファイルをどう変えるか、何を作るか、を全部書き出す
こちらが「OK」と言うまで実際の作業は始まらない
重い作業、慎重に進めたい作業向き

なぜこの違いが重要なのか

たとえば「Web アプリにログイン機能を追加して」と依頼したとします。

自動モードだと → 即座に複数のファイルを書き換え、ライブラリをインストールし、データベースの設定まで一気に進める。「あれ、思ってたのと違う……」となっても、もう書き換わってる
Plan モードだと → 「こういう手順で進めます。ファイル A と B を変更し、ライブラリ C を入れます。よろしいですか？」と先に確認。意図と違えばその場で軌道修正できる

使い分けの目安

場面	自動モード	Plan モード
1ファイルだけの小さな修正	◎	△（大げさ）
新しい機能を追加する	△	◎
何が起きるか想像できない依頼	×	◎
デプロイ・公開作業	×	◎

迷ったら Plan モード にしておくのが安全です。僕は大事な作業では必ず Plan モードを使っています。

詳しい使い方は第7章で

Plan モードの細かい使い方、良い Plan と悪い Plan、計画書を CLAUDE.md に資産化する方法、などは第7章でじっくりやります。ここでは「こういうモードが2種類ある」という事実だけ頭に入れておいてください。

【ハンズオン手順】

▼ Code 側でやること

Code の入力欄の近くに、モードを切り替えるトグルかボタンがある（バージョンによって場所が違います）
「自動モード」と「Plan モード」を切り替えて、それぞれどんな表示になるか確認する
どこにあるか分からなければ、ブラウザに「Code でモードを切り替えるにはどこを触ればいい？」と聞く

▼ スクショ伴走のチェックポイント

自動モードの画面と、Plan モードの画面、それぞれのスクショを撮って違いを目で見ておくと、後で迷わずに済みます

【つまずきポイント】

「結局どっちを使うべき？」→ 慣れるまでは Plan モード推奨。安全側に倒した方が事故が減ります
モード切り替えの場所がバージョンによって違う。最新のUIはブラウザに聞くのが手っ取り早いです

【確認問題】

自動モードと Plan モードの違いを、自分の言葉で一文で説明してください
大事な作業の時は、どちらのモードを推奨しますか？

【次のレッスンへの橋渡し】

モードの存在が分かりました。第4章最後のレッスンで、Code とブラウザを併用する「2つの Claude」のスタイルを定着させましょう。

4-7. 2つの Claude を併用する — Code（作業用）とブラウザ（相談用）の使い分け

【学習目標】

Code とブラウザを併用するメリットを理解する
状況に応じてどちらに聞くべきかの判断ができる

【前提知識】

Code とブラウザの両方がログインできていること

【概念解説】

ここまで何度か登場してきた「Code（作業用）とブラウザ（相談用）の併用」スタイルを、ここで正式に整理します。

なぜ2つを並走させるのか

理由は1つ。Code が作業中は、こちらからの会話がブロックされるから。

たとえば Code に「ログイン機能を追加して」と頼んだとします。Code は作業に取り掛かり、ファイルを書き換え、ライブラリをインストールし、何分かかかるかもしれません。その間、こちらから「待って、今のところもう一回確認したいんだけど」と話しかけても、応答が返ってきません。作業が終わるまで待つことになります。

その「待ち時間」に、別のことを考えたくなることがあるんです。「あれ、そもそもこのやり方で合ってる？」「他のサイトではどう実装してた？」「セキュリティ的に気をつけるべきことは？」みたいな。

そういう時にブラウザの出番。ブラウザは会話だけのシンプルな Claude なので、いつでも応答してくれるんです。

役割分担の典型例

場面	どっちに聞く
「○○というアプリを作って」	Code
「このエラーの意味は？」	Code（手が空いてれば）またはブラウザ
「○○と××の違いは？」（概念質問）	ブラウザ
「Code が今やってる作業、これで合ってる？」	ブラウザ（Code は作業中なので聞けない）
「ファイル一覧を見たい」	Code
「自分のスキル感的に、次に何を勉強すべき？」	ブラウザ
「このコードの意味を行ごとに解説して」	ブラウザ（コードを貼って聞く）

ウィンドウ配置のコツ

僕がおすすめしている配置：

画面左半分：Code（デスクトップアプリ）
画面右半分：ブラウザ（claude.ai を開いたブラウザ）

これで、Code が作業中でも、目線をちょっと右にずらすだけでブラウザに聞ける。マルチタスクが圧倒的に楽になります。

「こういう使い方、みんなしてるのかな」と僕も最初は思っていましたが、これは Claude Code をある程度使い込んだ人がほぼ全員たどり着く、極めて合理的なパターンです。

【ハンズオン手順】

▼ ウィンドウ配置をやってみる

Code を起動して、画面左半分に配置
ブラウザで claude.ai を開いて、画面右半分に配置
Mac なら ⌃+⌥+← / → で半分に配置できます（バージョンにより）
Windows なら Win+← / → で配置

▼ Code 側でやること

何か Code に依頼してみる（例：「カフェ紹介ページに、お問い合わせフォームを追加して」）
Code が作業を始める

▼ ブラウザ側でやること（Code 作業中に並行で）

Code が作業している間に、ブラウザで次のように打つ

カフェ紹介ページにお問い合わせフォームを追加する作業を
Code に依頼しています。一般的にはどんな項目を入れるのが
ベストプラクティスですか？

ブラウザが答えてくれる
Code の作業結果を見て、ブラウザの助言と照らし合わせて確認する

▼ スクショ伴走のチェックポイント

Code 左、ブラウザ右、で並んでいる画面のスクショを撮っておくと、自分の作業環境の標準形が見えます

【つまずきポイント】

「同じ質問を Code とブラウザに二重で聞いて、答えが違うとどうする？」→ 基本的に Code の答えを優先。Code はあなたのプロジェクト状況を見て答えていますが、ブラウザは一般論で答えているので
ブラウザに貼ったファイルの内容は、Code には伝わらない。これは別々のセッションです。情報共有したいなら、自分でコピペする必要があります

【確認問題】

なぜ Code とブラウザの両方を使うのですか？
概念的な質問（「○○と××の違いは？」）は、どちらに聞くのが向いていますか？

【次のレッスンへの橋渡し】

第4章はこれで完了です。Code とブラウザを併用する作業環境が整いました。

次はいよいよ、本書の中核となる第5章「作業開始の儀式とスクショ伴走モデル」に入っていきます。ここからが、僕が3週間で複数のアプリを作った時の実践的なノウハウの集積地です。