【図解たっぷり】Claude Code入門｜何ができる？料金とVS Codeでの始め方・基本の使い方を解説

「このまま受託制作を続けて、3年後も生き残れるだろうか？」
AIの進化により、単なる制作業務の価値は暴落しつつあり悩んでいる。そんな人は多いと思います。しかし、悲観する必要はありません。 今こそ「作る側」から「教える側」へ回るチャンスです。

THE REAL STORY

億を稼ぐ
スクールの
『裏側』

※ 期間限定公開
ビジネスの設計図を
全て見せます。

Skillhub代表
吉田 光利

「実はこのSkillhubも、
僕１人で作りました。 0から作り上げて、生徒6万人まで育てたノウハウ公開します。 」

裏側を無料で覗く

AI時代を勝ち抜くための「億を稼ぐスクールビジネス」を、期間限定で公開しています。無料ですのでチェックしましょう。

（無料公開、限定100名、10月11日まで）

今すぐ受け取る（無料）

「Claude Code（クロード コード）」という名前を、SNSやニュースで見かけることが増えました。
気になってはいるけれど、こんな疑問で止まっていませんか。

• 結局、なにができるツールなの？
• ブラウザで使うClaudeやChatGPTと、何が違うの？
• 料金はいくら？無料で使える？
• 黒い画面（ターミナル）でコマンド入力が要るんでしょう？難しそう…

この記事では、Claude Codeの概要・料金・始め方を、Web制作を学び始めた方に向けて順番に説明します。
黒い画面は使いません。無料のエディタ「VS Code」に追加して使う方法で進めます。

先にお伝えしておくと、Claude Codeは無料プランでは使えません。
料金についても前半でくわしく説明しますので、契約するかどうかの判断材料にしてください。

• Claude Codeについて知ろう
• Claude Codeをはじめる前に
• Claude CodeをVS Codeで使ってみよう
• Claude Codeを使ってミニWebアプリを作る
• まとめ

Claude Codeについて知ろう

この記事では、次の順番で見ていきます。

• Claude Codeって結局なに？ なにがすごいの？
• 料金と、始める前に必要なもの
• VS Codeへの入れ方と、画面の見方
• 実際にミニWebアプリを作ってみる

後半では、Claude Codeを使って、ボタンを押すたびに配色を提案してくれる「配色ジェネレーター」を作ります。

Claude Codeって結局なに？

出典：The AI for Problem Solvers | Claude by Anthropic

Claude（クロード）は、Anthropic（アンソロピック）という会社が作っているAIです。
ChatGPTと同じように、ブラウザでチャットをして使ったことがある方もいらっしゃるでしょう。

Claude Codeは、そのClaudeを自分のパソコンの中で働かせるためのツールです。
ひとことで言うと、チャットで指示を出すと、自分でファイルを作ったり直したりしてくれるAIのアシスタントです。

ブラウザで使うClaudeとの一番の違いは、あなたのパソコンのファイルに直接触れるかどうかです。

• ブラウザ版のClaude＝やり方を教えてくれる人。
  「こう書くといいですよ」とコードは教えてくれますが、それをコピーして、ファイルに貼り付けて、保存するのはあなたの仕事です。
• Claude Code＝代わりに作業をしてくれる人。
  「これ作って」とお願いすれば、必要なファイルを自分で用意して、中身を書いて、保存するところまで進めてくれます。

表にすると、違いはこうなります。

このように、答えを教えるだけでなく代わりに作業までしてくれるAIを「AIエージェント」と呼びます。
ブラウザ版が「チャットで相談できる物知りな人」だとすると、Claude Codeはあなたのパソコンの中に入って、隣で一緒に作業してくれる人です。

Claude Codeは何がすごいの？ ３つの特徴

「作ってくれる」「直してくれる」は、他のAIエージェントにも共通する特徴です。
そのうえで、使っていて「ここが良い」と感じるのが次の３つです。

① 分からないことは「分からない」と言う

AIは、もっともらしい文章を作るのが得意です。
そのぶん、知らないことでも、知っているかのように答えてしまうことがあります。

Claudeを作っているAnthropicは、AIの正直さを重視すると公言しています。
Claudeの考え方や振る舞いの土台として公開している文書「Claude's Constitution（Claudeの憲法）」にも、次のように書かれています。

It acknowledges its own uncertainty or lack of knowledge when relevant, and avoids conveying beliefs with more or less confidence than it actually has.

（訳：必要な場面では、自分の不確かさや知識の不足を認める。実際に持っている以上にも以下にも、確信があるようには伝えない。）

出典：Claude's Constitution | Anthropic（英語）

実際に使っていても、「そこは確認できていません」「正確なデータはありませんが」のように、自信のない部分を、自信がないと伝えてくる場面がよくあります。
作業を任せたあとの報告でも、「ここまではやりました。ここは試していません」と分けて伝えてくれます。

これは、はじめての方にこそありがたい特徴です。
出てきた答えが正しいかどうかを、まだ自分で見抜けない。そんなときに、AIのほうから「ここは怪しいです」と言ってくれるかどうかで、安心感が大きく変わります。

※ 「間違えない」という意味ではありません。Claudeも間違えることはあります。大事なところは、自分でも確かめましょう。

② 何をするか・何を変えたかを見せてくれる

「プランモード」という機能を使うと、何をどう変えるかの計画を先に見せてもらってから、作業を始めてもらえます。

ファイルを書き換えるときも、「変更前 → 変更後」を並べて見せてくれます。
確認して「OK」か「やめて」を選べるので、知らないうちに書き換えられる心配がありません。

③ いつでもやり直せる

会話の途中の時点まで、ファイルごと巻き戻すことができます。
「さっきの状態のほうが良かった」というときも、やり直しがききます。

コーディング以外にも使えます

名前に「Code」と付いていますが、得意なのはコードだけではありません。
「ファイルを読んで、直して、保存する」という作業なら、幅広く任せられます。

• たくさんある文章ファイルを、まとめて修正・整理する
• フォルダ内のファイル名を、ルールに沿って一括で付け直す
• 資料を読んで、要点を別のファイルにまとめる

SNSでは「外部サービスとつなぐ」「作業を自動化する」といった、さらに進んだ使い方もよく話題になります。こうした機能があるのは本当ですが、最初から全部使う必要はありません。
まずは、会話しながらファイルを作ってもらう・直してもらうところから始めれば十分です。

CodexやAntigravityと何が違う？

「同じようなAIツールが他にもあるけれど、どう違うの？」と思いますよね。
ざっくりとした違いは次のとおりです（性能は日々変わるので、目安として見てください）。

４つのうち、無料で試せないのはClaude Codeだけです。
はじめるハードルが高い点は、Claude Codeの弱点と言えるでしょう。

Claude自体を使うのが初めての方は、まずブラウザ版でAIとチャットしてみてください。
「HTMLページで作って」と指定するか、直して欲しいファイルを添付すると、コーディングの様子も確認できます。
「どんな答え方をするのか」「どんなコードが出てきたか」、まずはそこを確認することをおすすめします。チャットで話していると、特徴として挙げた正直さも見えてくると思います。

Claude Codeをはじめる前に

必要なもの

Claude Codeを VS Code で使うには、次の2つが必要です。

1. VS Code（無料のエディタ）… バージョン 1.98.0
2. Claudeの有料プラン（Proプラン以上）

VS Codeをまだ入れていない方は、ブログ記事 VSCodeの使い方入門！～ 基本からWeb制作まで を先にご覧ください。

Claude Codeの料金と注意点

Claude Codeを使うには、有料プラン（Proプラン以上）が必要です。
ブラウザ版のClaudeは無料プランでも使えますが、無料プランのままではClaude Codeは動きません。

個人向けのプランは次のとおりです。

画像元：https://claude.com/ja/pricing

※ プランの内容や金額は変更される場合があります。上記公式サイトで最新の情報をご確認ください。

知っておきたい注意点は３つです。

• 支払いはドル建てです：日本円での金額は、その時の為替で変わります。
• 使える量に上限があります：有料プランでも使い放題ではありません。上限は約5時間ごとにリセットされ、週ごとの上限もあります。たくさん使うと、リセットまで一時的に使えなくなります。
• ブラウザ版のチャットと、使える量は共通です：Claude Codeでたくさん作業すると、ブラウザ版で使える量もそのぶん減ります。

なお、月額プランのほかに、使った分だけ支払う方法（API）もあります。
しかし、こちらは料金の見通しが立てにくいので、はじめての方はProプランがおすすめです。

アカウント作成とProプランへの加入

すでに無料プランでClaudeを使っている方は、チャットのホーム画面にログインするとアップグレードのお誘いが表示されると思います。表示が見当たらないときは、ご自身のアカウントを開いてみてください。

Claudeのアカウントが無い方は、以下からアカウントを作成しましょう。
https://claude.ai/login

入力したメールアドレス宛に、登録用のメールが届きます。
メール内のリンクを開いて、画面の指示に従って登録・認証を進めてください。

電話番号の認証などを行うと、プラン選択の画面が表示されます。
Claude Codeを使えるように、Proプランを選択します。

月払い／年払いの選択と、支払方法の登録フォームがある画面に進みます。
お支払いのための情報を入力してください。

支払情報の入力が終わると、アプリやClaude Codeの案内が表示されることがあります。
あとからでも導入できるので、いったんスキップして大丈夫です。

続いて初回設定があります。
自分のやり取りをAIの改善に使われたくない方は、改善への協力のスイッチをOFFにしておきましょう。

そのほか、チャットで使う名前などの設定があるので、進めてください。

Claudeのチャット画面が開きます。
左下、アカウント名の横にあるプラン表記が変わっていれば完了です。

Claude CodeをVS Codeで使ってみよう

ここから実際の導入です。むずかしくありません。

ステップ1：拡張機能から「Claude Code」を入れる

VS Codeの左側にある拡張機能（四角が4つ並んだアイコン）を開きます。
ショートカットキーでも開けます。

• Mac：Cmd + Shift + X
• Windows：Ctrl + Shift + X

検索ボックスに 「Claude Code」 と入力します。
発行元が Anthropic のものを選んで「インストール」を押します。

インストールが終わったら、VS Codeをいったん閉じて、開き直してください。

ステップ2：Claudeのアカウントでサインインする

開き直すと、VS Codeの左側のバーと、エディタの右上にClaudeのアイコン（オレンジ色の火花のようなマーク）が表示されます。
クリックすると、Claude Codeのパネルが開きます。

はじめて開いたときは、サインインの画面が表示されます。

Claude.ai Subscription（月額プランでサインイン）をクリックします。

ブラウザで承認を行います。
Claudeに登録しているアカウントでログインし、承認画面で「承認する」を選択します。

承認完了の画面が表示され、VS Code側ではClaude Codeを使用できる状態になります。

• 左側、Claude Codeメニューの + New session
• VS Codeの右上に表示されているClaudeのアイコン

どちらかをクリックすると、Claudeにメッセージを送るチャットパネルが表示されます。

これで、VS CodeでClaude Codeを使う準備は完了です。

ステップ3：入力欄まわりのボタンを知っておく

Claude Codeのパネルは、ボタンなどの表記が英語です。
パネルの下にある入力欄まわりに、いくつかボタンが並んでいるので、最初にそれぞれの意味を知っておくと安心です。

入力欄は、文字を打つ上の段と、ボタンが並ぶ下の段に分かれています。

上の段（入力欄）

• ① テキスト入力ボックス
  Claudeにお願いしたいことを書く場所です。キーボードのEnterで送信されます。改行したいときは Shift + Enter を押してください。
• ② 音声入力
  マイクのアイコンです。話した言葉を文字にして入力できます。

下の段（メニュー）

Claude Codeを使ってミニWebアプリを作る

いよいよClaude Codeを動かします。
ボタンを押すと5色の組み合わせを提案してくれる、「配色ジェネレーター」を作ってみましょう。

① 準備：作業用のフォルダを開く

Claude Codeが読み書きするのは、基本的にいまVS Codeで開いているフォルダの中です。
そのため、作業を始める前に、使いたいフォルダをVS Codeで開いておきます。

お試し用のフォルダ（例：claude-palette）を作って、VS Codeで開きます。
下図のアニメーションのように制限モードになった場合は、管理から「信頼する」を選んでください。

この時点ではフォルダの中はまだ空っぽです。
AIが「何を作って欲しいか」を認識しやすくするように、ファイルを作っておきましょう。

VS Codeで開いたフォルダ（デモではclaude-palette）の中に、index.html を作成してください。
中身は空のままで大丈夫です。

空の index.html を開いた状態で、Claude Codeのパネルを開きます。
エディタやClaude Codeのチャットパネルの大きさは、ご自身が見やすいように調整してください。

上図のように Browser connected の表示や、Claudeからのお知らせが表示される場合があります。そのまま置いておいても、内容を確認して × で閉じても、どちらでも構いません。

② 使うモデルを選ぶ

Claude Codeでは、実際に作業をするAIの種類（モデル）を選べます。
Claudeのモデルには、大きく分けて次の4つの系統があります。

※ 各系統の中でも、新しいバージョンが順に登場します。選べるモデルは、時期によって変わります。

※ 「Default (recommended)」は、その時点でおすすめのモデルに自動で切り替わる設定で、どのモデルになるかは時期によって変わります。Defaultで選ばれるモデルを使用しても問題ありません。

「いちばん賢いモデルを選べば安心」と思うかもしれませんが、注意点があります。
賢いモデルほど、1回の作業で使える量の上限を多く消費します。
返事が来るまでの時間も長くなりがちです。

今回作るのは、ファイル1つで完結する小さなアプリです。
これくらいなら Sonnet で十分に作れるので、この記事のデモは Sonnet で進めます。

入力欄の下にあるモデル選択をクリックして、Sonnet を選んでおきましょう。
Sonnetが複数並んでいるときは、数字がいちばん大きいもの（新しいもの）を選んでください。
画面下の「Effort」は考える度合いの設定です。こちらはそのままで大丈夫です。

③ 計画を見てから、作ってもらう

今回くらいの小さなアプリなら、いきなり「作って」と頼んでも問題ありません。
ですが、せっかくなのでプランモードを使って、計画を見てから作ってもらいましょう。

手順1. モードを「Plan」にして指示を送る

入力欄の下にある動作モード（ステップ3のボタン説明の⑤）をクリックして、Plan を選びます。
入力欄で Shift + Tab を押して切り替えることもできます。
ほかのモードについては、このあとの④で説明します。

Planに切り替えたら、入力欄に以下のように入力して送信します。

ボタンを押すと、ランダムな5色が横に並んで表示されるWebページを、HTML・CSS・JavaScriptで作ってください。
それぞれの色の下に、カラーコード（#から始まる6桁）も表示してほしいです。

手順2. 計画を確認する

送信すると、Claudeはフォルダの中を調べて、考え始めます。
少し待つと、「どのファイルに、何を書くか」をまとめた計画が表示されます。

計画は、エディタの右側に別のタブ（文書）として開きます。
チャットパネルのほうには「Accept this plan?（この計画で進めますか？）」と、承認の選択肢が表示されます。

計画の内容は日本語で書かれています。
ざっと目を通して、頼んだ内容とずれていないかを確認しましょう。

気になるところがあれば、選択肢の下の入力欄（Tell Claude what to do instead）に「色の数は5色ではなく3色で」のように書いて送れば、計画を直してくれます。
計画のタブで文章を選択すると、add Commentから選択箇所にコメントを付けることもできます。

手順3. 計画を承認して、作ってもらう

問題なければ、計画を承認します。選択肢は次の3つです。

• Yes, and use auto mode
  承認して、確認なしでどんどん進めてもらう
• Yes, and manually approve edits
  承認して、ファイルを書き換えるたびに確認しながら進めてもらう
• No, keep planning
  承認せず、計画をもう少し練ってもらう

今回は、変更内容を自分の目で確かめたいので、2つ目の Yes, and manually approve edits を選んでください。

Claudeがコードを書き始め、ファイルを書き換える前に変更内容の確認が表示されます。
エディタには変更前と変更後を並べたタブが開き、チャットパネルには「Allow write to 〜?（このファイルに書き込んでいいですか？）」と表示されます。

• 🟩 緑の行　新しく追加される部分
• 🟥 赤い行　削除される部分

今回は空のファイルに書いてもらうので、ほとんどが緑です。
内容を確認して、問題なければ承認します。選択肢は次の3つです。

• Yes
  今回の書き換えだけを承認する
• Yes, allow all edits this session
  この会話のあいだは、以降の書き換えを確認なしで承認する
• No
  書き換えをやめてもらう

ここでは、1つ目の Yes を選びます。

手順4. ブラウザで確認する

作業が終わると、チャットに完了の報告が表示されます。

筆者が試したときは、上図のように「ブラウザでの動作確認はまだしていません」「ボタンを何度か押して試してみてください」という言葉が報告に添えられていました。毎回必ず出るとは限りませんが、書いてくれると「じゃあ、ブラウザで見てみよう」と次にやることがはっきりしますね。

index.html をブラウザで開いてみましょう。
ボタンを押すたびに、5色の組み合わせが切り替わります。

1行もコードを書かずに、動くものができました。

ただ、何度か押してみると気づくことがあります。
色は確かに変わるのですが、5色がバラバラで、まとまりがありません。良い感じの配色や、見ていて面白いものは出てきますが、「Webデザインの配色」として使えそうな組み合わせは、なかなか出てきません。

④ 話しかけて直す

ここからは、できあがったページを会話で改善していきます。

動作モードを選ぶ

③で計画を承認して作業が終わると、動作モードはPlanから自動的に元の設定に戻ります。
ここから先は、自分の好きなモードで進めて構いません。
動作モードをクリックすると、次の4つから選べます（入力欄で Shift + Tab を押しても、順番に切り替えられます）。

• Manual
  ファイルを書き換えるたびに、毎回確認を求めてきます。はじめのうちは、このモードがおすすめです。
• Edit automatically
  確認なしで、ファイルを書き換えます。
• Plan
  ③で使ったモードです。書き換える前に「どう進めるか」の計画を見せてくれます。
• Auto
  安全チェックを通った操作は自動で進め、危なそうな操作のときだけ止まって確認を求めます。

モードを選んだら、あとは同じパネルで直してほしいことを送るだけです。

配色にまとまりを持たせる：まずは相談する

5色がバラバラなのは分かったけれど、どう直せばまとまりが出るのかは分からない。
そんなときは、いきなり「直して」と頼まずに、まず相談してみましょう。
どんな目的で使いたいのか、いま何に困っているのかを、そのまま伝えます。

このページを、Webサイトの配色を考えるときに使いたいと思っています。
今は5色がバラバラで、そのままでは使いにくいです。
配色に統一感を持たせるには、どんな方法がありますか？
いくつか案を出してください。まだファイルは変更しないでください。

最後の「まだファイルは変更しないでください」がポイントです。
これを書いておかないと、Claudeが案を考えたあと、そのままファイルの書き換えまで進めてしまうことがあります。

送信すると、統一感を出すための方法を、いくつか提案してくれます。

筆者の場合は、「おすすめ」の案も出してくれました。

1 または 3 をベースに、5 のロック機能を足すのがよいと思います。次のような形です。
- ハーモニーの種類（類似・補色・トライアド・モノクロ）をセレクトボックスで選べるようにする
- 「色を生成」で基準色が変わり、ロックした色は維持される
- 各色をクリックでコピーできる

方向性が決まれば、実装します。まずは「ハーモニー選択＋ロック」からにしますか。それとも、モノクロマティックなど1種類に絞りますか。

📄 AIからの返信全文はこちら▾

統一感を出す方法は、大きく5つあります。色の決め方はどれも色相（色み）を基準にします。

## 案

**1. 基準色を1つ決めて、そこから他を導く（ハーモニー配色）**
ランダムに5色を選ぶ代わりに、基準色の色相を色相環上で決まった角度だけずらして残りを作ります。
- **類似色:** 基準色から±30°ほどの範囲。落ち着いていて、まとまりが強いです。
- **補色:** 180°反対。メリハリが強く、アクセント向きです。
- **トライアド:** 120°ずつ。3色で、にぎやかになります。
- **スプリット補色・テトラード:** 補色の変形です。バランスを取りやすいです。

**2. モノクロマティック（同一色相で明度・彩度だけ変える）**
色相を1つに固定し、明るさと鮮やかさを5段階に振ります。最も失敗しにくく、背景・面・文字・ボーダーといった役割にもそのまま当てはまります。

**3. 彩度・明度をそろえて色相だけ変える**
HSLで S と L を固定（例: S=60%, L=70%）し、色相だけをランダムにします。パステル調やビビッド調など、全体のトーンがそろいます。色相がバラバラでも、まとまって見えます。

**4. 配色比率の役割で枠をつくる**
5色を役割で固定します。
- **ベース色（約70%）:** 白系や淡色の背景
- **メイン色（約25%）:** ブランドの印象を決める色
- **アクセント色（約5%）:** ボタンなどの強調
- **文字用の暗色、補助用のグレー系**

ランダムなのは主にメインとアクセントだけにして、ベースと文字色は固定寄りにします。Webサイトで使うなら、この形が最も実用的です。

**5. ロック機能と、見た目・コントラストの確認**
ページ側の機能追加です。
- 気に入った色を固定（ロック）して、残りだけ再生成できるようにします。
- 文字色と背景色のコントラスト比（WCAG の 4.5:1 以上）を表示して、読みやすさを確認できるようにします。
- 色をクリックでコピーします。CSSの変数形式（`--color-1: #…`）で一括コピーもできます。

## おすすめ
**1 または 3 をベースに、5 のロック機能を足す**のがよいと思います。次のような形です。
- ハーモニーの種類（類似・補色・トライアド・モノクロ）をセレクトボックスで選べるようにする
- 「色を生成」で基準色が変わり、ロックした色は維持される
- 各色をクリックでコピーできる

方向性が決まれば、実装します。まずは「ハーモニー選択＋ロック」からにしますか。それとも、モノクロマティックなど1種類に絞りますか。

案を選んで、作ってもらう

提案の中から、使ってみたい案を選んで伝えます。
筆者は、「おすすめ」として挙げてくれた候補が良さそうでしたので、次のようにお願いしました。

おすすめとして提案してくれた「ハーモニー選択＋ロック」をお願いします。

送信すると、Claudeがファイルを読んで、コードの修正案を考えはじめます。

少し待つと「ここを変更しますよ」という比較画面が表示されます。
今度は、消される行（赤）と、追加される行（緑）の両方が表示されます。

どこがどう変わるのかを見てから、承認できます。
確認して問題がなければ、Accept（チェックマークのアイコン）で承認してください。

チャットパネルに完了報告が表示されたら、ブラウザで確認してみましょう。

「配色の種類」を選べるようになり、ボタンを押すと、選んだ種類に沿った5色が出るようになりました。
気に入った色は「固定」しておけば、残りの色だけを作り直せます。
さらに、おすすめの案に含まれていたコピー機能も入っています。色をクリックするとそのカラーコードを、「CSS変数をコピー」を押すと5色をまとめてコピーできます。

バラバラだった最初のページと比べると、Webページの配色を考えるときの道具として、ぐっと使いやすくなりました。

機能を足す

機能を足したいときも、同じようにお願いするだけです。
たとえば、筆者のデモで入った機能が自分のページには無かった、という場合は、次のように頼めます。

• 「色をクリックしたら、カラーコードをコピーできるようにして」
• 「気に入った色を固定して、残りの色だけ作り直せるようにして」
• 「5色をCSSの変数の形で、まとめてコピーできるようにして」

実際に使ってみて「こうだったらいいのに」と思ったことを、そのまま伝えるのもおすすめです。

• 「使い方が分かるように、ページの下に説明を入れて」
• 「文字色と背景色に使ったときに読みやすいか、確認できるようにして」
• 「カラーパレットが画面の中央に配置されるようにして」
• 「色を固定した後に生成ボタンを押すと、固定色だけズレます。固定した色を基準に生成するようにしてください」

どの場合も、

• どのファイルの、どこにコードを入れるかを、自分で考えなくて良い
• 直すたびに、今のコードをAIに貼り付けて見せなくて良い

これが、ブラウザで行う「ただのチャット」との大きな違いです。

気に入らなければ、巻き戻せる

頼んでみたものの、「前のほうが良かった」となることもあります。
たとえば、こんな変更を頼んだとします。

ページの背景を黒にして、全体をかっこいい雰囲気にしてください。

指示どおり黒にしてくれました。
ページの見た目としては悪くないですが、配色を選ぶ道具としては使いにくくなりました。

こういうときは、チャットパネルで取り消したい指示（今回は「背景を黒に」）のメッセージにマウスを乗せます。

メッセージの右上に、矢印が丸くなったアイコンが出てくるので、クリックしましょう。
3つの選択肢が表示されます。

• Fork conversation from here
  ここから会話を分けて、別の流れでやり直す（ファイルはそのまま）
• Rewind code to here
  ファイルだけを、ここまで巻き戻す（会話はそのまま残る）
• Fork conversation and rewind code
  会話を分けて、ファイルも巻き戻す

今回はファイルを元に戻したいので、Rewind code to here を選びます。
すぐには戻らず、確認の画面が出ます。
「何行が消えて、何行が追加されるか」と、対象のファイル名が表示されます。
確認して Rewind を選びます（やめるときは Never mind）。
そうすると、ファイルがその指示を出す前の状態に戻ります。

ブラウザをリロードすると、元に戻っていることが確認できます。

※ 巻き戻せるのは、Claudeが書き換えた部分だけです。自分の手で書き換えた部分は、巻き戻しの対象になりません（確認画面にも「Rewinding does not affect files edited manually」と表示されます）。

やり直しがきくと分かっていれば、「試しにやってみて」と気軽に頼めます。

⑤ 壊れたコードを直してもらう

最後に、わざとエラーのあるコードを直してもらいましょう。
自分で変更した部分は巻き戻しができませんが、もし壊してしまっても、チャットでお願いすれば直してくれます。

HTMLの中から、ボタンの id を探して、1文字だけ消してみます。

<button id="generate">色を生成</button>

↓

<button id="generat">色を生成</button>

JavaScriptは、この id を目印にしてボタンを探しています。1文字違うだけで、ボタンが見つからなくなります。
保存してブラウザで開き直すと、何らかの不具合が発生します。
デモの場合は、5色の表示が全部消えました。
AIが生成したコードによっても異なるので、人によっては「ボタンを押しても反応しない」などの場合もあるでしょう。

このファイルを開いた状態で、Claude Codeにこう頼みます。

ページを開いても、色が表示されなくなりました。
原因を見つけて直してください。

Claudeはファイルを読んで、「HTMLに書いてある id と、JavaScriptで探している名前が違う」ことを自分で見つけて直してくれます。
どこが悪かったのかも、日本語で説明してくれます。

スペルミスや、何かの拍子に1文字消えてしまった・余計な文字が入ってしまった、といった単純な間違いほど、自分では見つけにくく、時間を取られがちです。
あっという間に探してくれるのは助かりますね。

ちなみに、デモでは途中で「巻き戻し」を実行したので、そのことにも触れてくれています。
巻き戻したままで良ければ、そう伝えれば大丈夫です。
あるいは、「黒背景だと色が見にくかった。何か良い案ある？」のように会話を続けてみると、意外なアイディアをもらえるかもしれません。

冒頭でお見せした完成見本は、「機能を足す」で紹介したお願いと、こうした相談を重ねて整えたものです。
ここで終わりにせず、「こうだったらいいのに」を思いつくままに伝えて、自分だけの配色ツールに育ててみてください。

まとめ

Claude Codeは、こんな人に向いています

Claude Codeは、言葉でお願いすると、自分のパソコンの中でファイルを作って・直してくれるAIエージェントです。
特徴は 「分からないことは分からないと言う」「何をするか・何を変えたかを見せる」「やり直せる」 の3つ。
無料では使えません。始めるなら Proプラン（月$20）＋ VS Codeの拡張機能 が入り口です。

• AIの答えが正しいかどうか、まだ自分では判断しきれない → 自信のない部分を「分かりません」「確認できていません」と伝えてくれるので、どこを自分で確かめればいいかが分かります。
• いきなり書き換えられるのは不安。確認しながら進めたい → 計画や変更内容を見せてもらってから進められ、巻き戻しもできます。
• まずは無料で、AIエージェントを体験してみたい → 先にCodexやAntigravityを試してから決めても遅くありません。

※ 各ツールの入門記事は、それぞれ試したプランが異なります。記事どうしで、出来上がったものの品質をそのまま比べることはできません。

AIが書いてくれるなら、もう勉強はいらない？

ここまで読んで、こう感じた方もいるかもしれません。
「AIがここまで作ってくれるなら、もうHTMLやCSS、デザインを学ばなくていいのでは？」

ですが、実際に使ってみると、AIに任せるほど「使う人の力」が問われる場面が出てきます。

• 気づけるか：動いてはいるけれど「配色にまとまりがない」など、足りない点に自分で気づいて、追加でお願いできるか。
• 選べるか：AIの提案や変更内容を見て、「これは良い」「これは違う」と判断できるか。何往復もやり取りしなくても、良いものにたどり着けるか。
• 伝えられるか：自分の「してほしいこと」を、言葉にして伝えられるか。
• 確かめられるか：AIが「確認していません」と言った部分を、自分で確かめられるか。

Claude Codeにしろ、ほかのAIにしろ、何が欲しいかを具体的に言える人・出てきたものの良し悪しが分かる人ほど、力を引き出せます。

基礎がないと、「何か違う」とは感じても、どこをどう直してほしいのかを言葉にできません。
計画や変更内容を見せてもらっても、そのまま承認するだけになってしまいます。

Claude Codeは、作業を任せられるアシスタントです。
優秀なアシスタントも、的確に指示できて、出てきたものをチェックできる人がいてこそ活きます。

Claude Code × AIデザイン
次世代Web制作ワークフロー

GPTやGeminiでデザインを生成し、Claude Codeに「指示」を出して一気に実装から公開まで持っていく。
「AI時代のモダンな開発ワークフロー」と「新しい学び方」を14日で習得します。プロの個別メンタリング付きで、絶対に迷わせません。

吉田 光利

Skillhub代表 & Edbase代表

教育者&起業家です。今は教育テック系のSkillhubとEdbase（エドベース）という会社をやっています。強みはビジネス構築からデザイン、プログラミング、サーバー構築までひと通できることです。著書に「起業のWeb技術」日本実業出版社があります。