Claude Code Academia

第1章 Claude Code デスクトップアプリで「作れる」体験 — 最初の1時間

ここからが本編です。

第1章の目標はシンプルで、自分のPCに環境を整えて、一文の依頼で「動くもの」を作ってみる。これだけです。

「いきなりアプリ作るって、無理じゃないですか？」と思うかもしれません。でも本当に作れるんですよ。しかも、ものすごく簡単に。

序章で書いた「14年前は専門職を雇わないとできなかったこと」を、これから1時間以内に体験してもらいます。

1-1. Claude Code デスクトップアプリをインストールして開く

【学習目標】

  • Claude のデスクトップアプリを自分のPCに入れて、Code モードを開ける状態にする
  • 「Code」と「ブラウザ」が別物だということを頭に入れておく

【前提知識】

  • 序章を読み終えていること。それだけです。

【概念解説】

このカリキュラムでは、Claude を2つの形で使い分けます。

  • Code：Claude のデスクトップアプリの「Code モード」のこと。ファイルを作ったり編集したり、自分のPC内で実際に手を動かしてくれる主役
  • ブラウザ：Claude のブラウザ版（claude.ai）。会話だけのシンプルなやつ。Code が作業中で答えてくれない時の相談相手

「2つも使うの？」と思うかもしれませんが、これは僕自身が3週間で複数のアプリを作る中で自然にたどり着いた使い方なんですよ。理由は単純で、Code が作業を進めている間は会話がブロックされるので、「ちょっと聞きたい」が発生した時にブラウザを開いて並行で相談する方が圧倒的に楽だったんです。

「自分には早すぎる」と感じる必要はないです。今ここでアプリを入れて、ブラウザのタブを1つ開いておく。これだけで準備完了です。

ちなみに、ネットで Claude Code を調べると「ターミナル版」とか「VS Code 拡張」とか色々出てきますが、全部無視してOK。本書ではデスクトップアプリだけを使います。

【ハンズオン手順】

▼ ブラウザ側でやること

  1. ブラウザで https://claude.ai を開く
  2. アカウントを作成（既にあれば ログイン）
  3. 設定から Pro プラン以上 に加入していることを確認します。無料プランでは Code は使えません

▼ Code 側でやること（インストール）

  1. Anthropic のサイトから「Claude Desktop」をダウンロード
  2. Mac の人：.dmg ファイルを開いて、Claude のアイコンを Applications フォルダにドラッグ
  3. Windows の人：インストーラーを起動して、画面の指示に従って進める
  4. インストールが終わったら、アプリを起動
  5. 初回はログインを求められます。ブラウザで使っているのと同じアカウントでログインしてください

▼ Code 側でやること（Code モードを開く）

  1. アプリが起動したら、画面上部のタブで「Code」を選ぶ
  2. 左サイドバーに「New session」「Routines」「Customize」と表示されていれば、Code モードに入れています

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

  • 左サイドバーが見えていて、上部のタブが「Code」になっている画面を、スクショで残しておくと安心です
  • 何かおかしい時は、その画面のスクショをブラウザに貼って「これで合ってる？」と聞いてみてください

▼ 困ったら聞く例

  • ブラウザに →「Claude Desktop をインストールしたら、起動した時にこういう画面が出ました。次は何をすればいいですか？（スクショ）」
  • ブラウザに →「Mac で『開発元が確認できないため開けません』と出ました。どうすれば？」

【つまずきポイント】

  • Pro プラン未加入のまま Code を起動すると、最初に「プランに加入してください」のメッセージが出ます。先にブラウザ側で加入を済ませてから Code を起動する順番が安全です
  • ブラウザと Code のアカウントが違うと、過去のやりとりが共有されず混乱します。必ず同じアカウントを使ってください
  • Mac で「開発元が確認できないため開けません」が出るのは、ほぼ全員が出会います。びっくりしなくて大丈夫。「システム設定 → プライバシーとセキュリティ」から個別に許可すれば開けます

【確認問題】

  • このカリキュラムで「Code」と「ブラウザ」と呼んでいるのは、それぞれ何のことですか？
  • Code を使うために必要な Claude のプランは何プラン以上ですか？

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

これで道具は揃いました。次のレッスンで、いよいよ最初の一文を打ってみます。一行打って、何かが動く。ちょっと感動すると思いますよ。

1-2. 一文で動くものができる — 「簡単なストップウォッチアプリを作って」を打ってみる

【学習目標】

  • 「○○を作って」という一文だけで、Code が実際にファイルを作ってくれる体験をする
  • 出来上がったものをプレビューパネルで確認する
  • 「これでアプリ作れちゃうんだ」という最初の手応えを掴む

【前提知識】

  • 1-1 で Code が起動した状態になっていること

【概念解説】

これから打ち込むのは、たったこれだけです。

簡単なストップウォッチアプリを作って

「えっ、これだけ？」と思うかもしれません。これだけなんです。

仕様も書かなくていい。プログラミング言語の指定もいらない。ストップウォッチがどう動くかを説明する必要もない。Code は「ストップウォッチアプリ」の標準的な仕様を知っているので、よしなに作ってくれます。

これが Code の本領で、世の中の WEB 制作の常識を完全にひっくり返した部分なんですよ。「指示を細かく言わなくても伝わる」という感覚を、まずはここで体験してください。

【ハンズオン手順】

▼ Code 側でやること（作業フォルダを開く）

  1. Code の左サイドバーから「New session」を押す
  2. 作業するフォルダを指定する画面が出てきます。デスクトップに practice というフォルダを作って、それを指定するのがオススメです
  3. もし「フォルダ指定？それ何？」と感じても、今は深く考えなくて大丈夫。第5章でしっかりやります。今は「とりあえずデスクトップに練習用フォルダを作って指定する」とだけ覚えてください

▼ Code 側でやること（依頼を打つ）

  1. 画面下部の入力欄に、次の一文を打ち込みます
簡単なストップウォッチアプリを作って
  1. Enter を押す
  2. しばらく待ちます（30秒〜1分くらい）

▼ Code 側でやること（結果を確認する）

  1. Code が「シンプルなストップウォッチアプリを HTML で作ります」みたいな返事をしてくれます
  2. 続いて「作成済み stopwatch.html +202 -0」のような行が出てきます。これは「stopwatch.html というファイルを 202行ぶん作ったよ」という意味です
  3. プレビューパネル（画面の右側か別ウィンドウ）が開いて、実際にストップウォッチが動いている画面が見えるはずです
  4. Start ボタンを押すと時間が進む。Stop で止まる。Reset で 0 に戻る。動くはずです

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

  • プレビューパネルで動いているストップウォッチのスクショを撮っておくと、後で振り返るのに使えます
  • 何か違うものが出てきたら、その画面をブラウザに貼って「これでいいの？」と聞いてみてください

▼ 困ったら聞く例

  • Code に →「ストップウォッチアプリ作って、と頼んだのですが、何も起きません。どうすれば？」
  • ブラウザに →「Code でファイルが作られたのですが、プレビューパネルが開きません。何が原因と考えられますか？」

【つまずきポイント】

  • 「指示が短すぎて不安」と感じても、そのまま打って大丈夫。Code は「最低限の機能を持つストップウォッチ」を勝手に組み上げてくれます。長く書きすぎる方が逆に混乱を招きます
  • 30秒待っても動かない時は、まだ作業中の可能性が高いです。1分くらい待ってみて、それでも何も出てこなければブラウザに聞きましょう
  • プレビューパネルが「真っ白」のままなら、リロードボタンを押すと表示されることがあります

【確認問題】

  • 「簡単なストップウォッチアプリを作って」とだけ打って、Code が何を作ってくれましたか？（ファイル名と、おおよその行数）
  • プレビューパネルで、ストップウォッチの Start、Stop、Reset の動作を確認できましたか？

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

一文で動くものが出来た瞬間は、結構な手応えがあると思います。じゃあ次は、もう少し中身のあるものを依頼してみましょう。Code が質問を返してくる体験をしてもらいます。

1-3. もう一歩踏み込む — Code が質問してくれる体験（カフェ紹介ページ）

【学習目標】

  • Code に依頼した時に「あれこれ質問が返ってくる」体験をする
  • 質問に答えるだけで、ちゃんとした見た目の Web ページが出来上がる体験をする
  • 「自分が仕様を全部考えなくてもいい」という感覚を掴む

【前提知識】

  • 1-2 でストップウォッチが作れていること

【概念解説】

ストップウォッチは Code が「標準仕様」を知っているのでスッと作れました。でも「カフェの紹介ページ」となると、そう簡単にはいかないんですよ。

カフェにも色々ありますよね。雰囲気がモダンなのか温かみがあるのか。メニューを載せるのか載せないのか。アクセス情報はどこまで詳しく書くか。

こういう場合、Code は勝手に進めずに、必要な質問を返してきます。これがすごく大きい。なぜなら、自分が全部の仕様を最初に考えなくていいからです。

質問されたら答える。それだけで、ちゃんとしたページが出来上がります。これは僕が3週間で複数のアプリを作る中で、最も「あ、これなら自分でも作れる」と思った体験でした。

【ハンズオン手順】

▼ Code 側でやること（依頼を打つ）

  1. 同じ session のままで、次の一文を打ち込みます
小さなカフェの紹介ページを作りたい
  1. Enter を押して、しばらく待つ

▼ Code 側でやること（質問に答える）

Code はたぶん、次のような質問を投げ返してくると思います（順番や内容は多少違うかもしれません）

  • カフェの雰囲気は？（モダン／温かみ／和風 など）
  • 何セクション欲しい？（メニュー／店舗情報／アクセス／予約フォーム など）
  • 配色のイメージは？

これに、思いついたまま答えていきます。たとえば

  • 「温かみのある雰囲気で」
  • 「メニューと店舗情報とアクセスが欲しい」
  • 「ブラウンと白の落ち着いた配色で」

くらいで OK です。完璧な答えを出そうとしなくて大丈夫。

▼ Code 側でやること（結果を確認する）

  1. 質問が一通り終わると、Code が「作成済み cafe-XXXXX.md +123 -0」みたいに、まず設計図のファイルを作ります
  2. その後、index.html、style.css、script.js のような実際のファイルを順番に作っていきます
  3. 完成すると、プレビューパネルで実際のカフェ紹介ページが見られるようになります

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

  • Code が質問を投げてきた画面のスクショ
  • 質問にすべて答え終わった画面のスクショ
  • 完成したカフェ紹介ページのスクショ

この3つを撮っておくと、後で「自分が何をしたか」を振り返れます。

▼ 困ったら聞く例

  • Code に →「質問の意味がよく分かりません。もう少しかみ砕いて説明してもらえますか？」
  • ブラウザに →「カフェ紹介ページを作っていて、Code がこういう質問を返してきました（スクショ）。どう答えれば普通ですか？」

【つまずきポイント】

  • 答えに迷ったら「お任せします」「分からないのでオススメで」でOK。Code はちゃんと標準的な選択肢を選んでくれます
  • 質問が多すぎて圧倒される時は、一気に全部答えなくていい。「分かるところから順に答えますね」と前置きして、答えやすいものから順に返しましょう
  • .md ファイルが勝手に作られたことに驚かなくて大丈夫。これは Code が作業の段取りを書き出した設計図です。中身は次のレッスンで覗いてみます

【確認問題】

  • Code はカフェ紹介ページを作る前に、どんな質問を投げ返してきましたか？（覚えている範囲で）
  • 質問に答え終わった後、Code がまず最初に作ったファイルは何でしたか？（拡張子は .md です）

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

2つの「動くもの」が手元に残りました。ここで一度、立ち止まって振り返ります。さっきの「勝手に作られた .md ファイル」って何だったのか。プレビューパネルって実は何が起きているのか。第1章の最後に、その正体を見ておきましょう。

1-4. ここまでで何が起きたか — Artifact、.md、プレビューパネルの正体

【学習目標】

  • 1-2、1-3 で起きていたことを、もう一段深く理解する
  • 自分の PC のどこに何が出来上がっているかを確認できる
  • これから第2章で「世界地図」を見る前の、足場を整える

【前提知識】

  • 1-3 でカフェ紹介ページが出来上がっていること

【概念解説】

ここまで30〜45分くらいで、2つの「動くもの」を作れたと思います。もうこの時点で、世の中の WEB 制作の常識的なハードルは越えています。

でも、なんか「魔法」みたいで、何が起きているのか実感が湧かないかもしれません。ここで一度、起きていた現象を3つだけ言葉にしておきましょう。

1. プレビューパネルの正体

Code が作ったファイルを、その場でブラウザのように表示してくれる小窓のことです。実は中身は、自分のPC内に作られた本物のファイルを、Code が読み込んで表示しているだけ。「魔法」ではなく、本物のファイルが本当にあなたのPCに作られているんですよ。

2. 勝手に作られる .md ファイル

カフェ紹介ページの時、Code は最初に cafe-XXXXX.md みたいなファイルを作っていました。これは「作業の設計図」です。本格的に作業に入る前に、Code が自分用のメモとして「こういう順番で、こういう内容を作るぞ」と書き出していたんです。

実はこれ、第7章で「Plan Mode」として深く勉強する機能の入口です。今は「Code は黙って作業するんじゃなくて、設計図を書いてから作業する」とだけ覚えておいてください。

3. 「作成済み stopwatch.html +202 -0」の意味

これは「stopwatch.html というファイルを、新しく202行のコードで作りました」という報告です。+202 が「追加した行数」、-0 が「削除した行数」。何も削っていない、新しく202行ぶん書いたという意味です。

これからファイルを修正していくと、「+5 -3」みたいに「5行追加して3行削った」という表示に変わっていきます。コード自体は読めなくても、これだけ分かると「Code が今どれくらいの規模の作業をしたか」が把握できるようになります。

【ハンズオン手順】

▼ Code 側でやること

  1. Code の画面で、左サイドバーから「Routines」をクリックしてみる（今後の参考に、こんな機能があるんだなと眺める程度でOK）
  2. その後、左サイドバーで作業中のセッション（さっきカフェ紹介ページを作ったやつ）を選び直す
  3. 作業履歴の中に「作成済み cafe-XXXXX.md」の行があるはずです。それをクリックしてみてください
  4. .md ファイルの中身が表示されます。設計図がどんなものか、ざっと眺めてみてください。読めなくていいです。雰囲気だけで OK

▼ Finder（Mac）／エクスプローラー（Windows）側でやること

  1. 1-2 でフォルダを指定した場所（デスクトップの practice フォルダなど）を開く
  2. 中に index.html、style.css、script.js、cafe-XXXXX.md のようなファイルがあるはずです
  3. 「あ、本物のファイルだ」と確認するだけで OK

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

  • フォルダの中身を Finder / エクスプローラーで開いた画面のスクショ
  • ファイルが実在することを目で確認した瞬間が、けっこう大きな一歩です

▼ 困ったら聞く例

  • Code に →「.md ファイルの中身を見たのですが、何が書いてあるか分かりません。要点だけ解説してもらえますか？」
  • ブラウザに →「ファイルが PC のどこに保存されているのか分からなくて困っています。1-2 で『デスクトップに practice』と指定した気がするのですが」

【つまずきポイント】

  • .md ファイルを編集しようとしないで OK。今はあれが何か知るだけで充分です。Code が必要に応じて更新してくれます
  • HTML や CSS、JS の中身を読もうとしなくていい。読めるようになる必要もありません。あなたの仕事は「依頼する」「結果を確認する」「ダメ出しする」の3つです
  • フォルダの場所が見つからない時は、Code に「今どこに保存されてますか？」と聞けば教えてくれます

【確認問題】

  • 「プレビューパネル」で見ていたものは、実は何でしたか？
  • Code が勝手に作る .md ファイルは、何のための文書ですか？
  • 「作成済み index.html +120 -0」と表示されていたら、これは何を意味していますか？

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

第1章はこれで完了です。たった4レッスンですが、もう手元には2つの動くものが出来上がっています。ここで取り上げた「.md（設計図）」「プレビューパネル」「フォルダ指定」は、第5章でもう一度ちゃんとやります。

ただし、その前に第2章で「世界地図」を見ておきましょう。GitHub、Cloudflare、Supabase ...これから出会う言葉が、それぞれどんな役割を持っているのかを、図書館や宅配業者の比喩で整理します。完璧に覚える必要はありません。手を動かしながら、徐々に腑に落ちていきますから。

← 序章
第2章 →