ClaudeCode入門ガイド
トップ
Claude Code で作る Webサイト作成・ホームページ作成 12レッスン完全コース/カリキュラム/第1章: 準備と環境構築/1-2 Claude Code のインストール手順

1-2 Claude Code のインストール手順

無料

Web サイト作成に必要な Claude Code を Mac / Windows にインストールします。Node.js のセットアップから API キー登録まで、最短ルートで 30 分で AI 自動生成できる環境を整える手順を解説します。

第1章: 準備と環境構築30分

このレッスンで身につくこと

このレッスンは Web サイト制作コースの 2 本目です。まだ何もインストールしていない PC を、Claude Code でサイトを作れる状態 にするところまで一気に持っていきます。

ポイント

このレッスンのゴール

  • Mac でも Windows でも、自分の環境に合わせた最短ルート で Node.js を入れられる
  • npm install -g @anthropic-ai/claude-code 1 行で Claude Code を導入できる
  • claude を起動して、簡単な日本語指示でファイルが作られる ことを確認できる
  • Anthropic Console で API キーを発行し、Web 制作に十分な月額上限（$10〜$20） を設定できる
  • 失敗パターン を先に潰しておき、後で「動かない」で 1 時間溶かさない

所要時間 — 約 30 分（実機を触りながら 1 回通すと、だいたいこのくらいです） 難易度 — ★★☆☆☆（コマンドの貼り付けが主、初めての人でも完走できます）

入門コースとの違い — Web 制作に必要な最低限を最短で

Claude Code 入門ガイド にも同じテーマのレッスンがあります。あちらは Mac / Windows それぞれ 45 分かけて 全部の罠を網羅 しています。本コースは違います。「Web サイトを 1 本作って公開する」 というゴールに必要な最短ルートだけを集めます。

項目入門コース本コース（Web 制作）
インストールの分量Mac / Windows それぞれ 1 章1 レッスンで両 OS まとめて
API 上限の推奨額$30〜$50$10〜$20 で十分
Node.js のバージョン管理nvm 等まで紹介LTS 1 本 で済ませる
気づき

Web サイト制作は Claude Code の中でも最軽量の用途 です。複雑なライブラリも、巨大なリポジトリも、長時間の自動化も登場しません。だから 環境構築も最低限 でいい。「動けばいい」を貫いて、サイト作りの中身に時間を使いましょう。

Node.js のインストール — Mac / Windows それぞれの最短手順

Claude Code は Node.js（JavaScript 実行環境） の上で動きます。まずは Node.js を入れます。

Mac の場合

Mac には 2 つの選択肢があります。迷ったら方法① を選んでください。

方法難易度おすすめ度
① 公式インストーラ（.pkg）★☆☆☆☆◎（迷ったらこれ）
② Homebrew★★☆☆☆○（普段から brew を使っている人だけ）

方法① 公式インストーラ（.pkg）

  1. ブラウザで https://nodejs.org を開く
  2. 「LTS」 と書かれた緑のボタンをクリック（Long Term Support 版、長期サポート）
  3. ダウンロードされた .pkg ファイル（例 node-v22.11.0.pkg）をダブルクリック
  4. インストーラを すべてデフォルトのまま「続ける」 で進める
  5. インストール完了後、ターミナルを新しく開いて バージョン確認
node --version
# v22.x.x のように表示されれば成功

npm --version
# 10.x.x のように表示されれば成功

方法② Homebrew

brew install node@22
node --version

Homebrew を入れていない人は方法① にしてください。「Homebrew を入れるために 30 分かける」のは、このコースのゴールに対して回り道すぎます。

Windows の場合

Windows も基本は同じで、公式インストーラ（.msi） を使う方法が最短です。

  1. ブラウザで https://nodejs.org を開く
  2. 「LTS」 と書かれた緑のボタンをクリック
  3. ダウンロードされた .msi ファイル（例 node-v22.11.0-x64.msi）をダブルクリック
  4. セットアップウィザードを すべてデフォルトのまま「Next」 で進める
  5. インストール完了後、コマンドプロンプトを新しく開いて バージョン確認
node --version
# v22.x.x のように表示されれば成功

npm --version
# 10.x.x のように表示されれば成功
ポイント

2025 年 7 月以降、Claude Code は Windows ネイティブ対応 しています。WSL（Windows Subsystem for Linux）は不要です。ネット記事で「WSL を入れろ」と書いてあるものは 半年前以上の古い情報 なので、無視して大丈夫です。

Node.js のバージョン要件

Claude Code は Node.js 18 以上 を要求します。実務的には Node 20 LTS または 22 LTS を入れておけば困りません。古い Node 16 のままだと Unsupported engine エラーになるので、その場合は最新 LTS に上げてください。

Claude Code インストール

Node.js が入ったら、Claude Code 本体のインストールは たった 1 行 です。Mac でも Windows でも同じコマンドです。

npm install -g @anthropic-ai/claude-code

==-g は「グローバルインストール」のオプションです。これで、どのフォルダにいても claude コマンドが使える== ようになります。

実行すると、以下のような出力が流れます。完了まで 30 秒〜1 分 くらいです。

added 142 packages in 38s

23 packages are looking for funding
  run `npm fund` for details

added X packages という行が出れば成功です。途中で WARN（警告）が出ても、ほとんどの場合は無視して OK。ERR と書かれていなければ大丈夫 です。

インストールできたか確認

claude --version
# 1.x.x のような番号が表示されれば成功

ここで「claude というコマンドは見つかりません」「'claude' は内部コマンド... として認識されていません」と出た場合は、ターミナル（コマンドプロンプト）を一度閉じて、新しく開き直して ください。これで 8 割解決します。

Bad

よくある失敗 — インストールしたターミナルをそのまま使い続けると、PATH が反映されず claude が見つかりません。インストール後はターミナルを開き直す。これだけで救われる人がたくさんいます。

動作確認 — claude 起動 + 簡単な指示

API キーを設定する前に、Claude Code 本体が動く状態 になっているかを先に確認します。

まず作業フォルダを作る

==必ずプロジェクトのフォルダに入ってから claude を起動 してください。Claude Code は 起動したフォルダ以下== をプロジェクトとして認識します。デスクトップやドキュメントのルートで起動すると、関係ないファイル全部が対象になって混乱します。

Mac の場合は次のとおりです。

cd ~/Documents
mkdir my-website
cd my-website

Windows の場合は次のとおりです。

cd C:\Users\YourName\Documents
mkdir my-website
cd my-website

claude を起動

claude

初回起動すると、認証方法を聞かれます。

╭──────────────────────────────────────────────╮
│ ✻ Welcome to Claude Code                     │
│                                              │
│ Choose authentication method:                │
│  ❯ 1. Anthropic API Key                      │
│    2. Claude Console (OAuth)                 │
│    3. Use existing credentials               │
╰──────────────────────────────────────────────╯

==1. Anthropic API Key を選びます。次のセクションで取得する API キーを、ここに貼り付けます。まだキーを持っていない場合は、いったん Ctrl+C で終了== して、次に進んでください。

API キーの取得（Web 制作なら $10/月で十分）

Claude Code は Anthropic のサーバーに API を叩いて、応答を受け取る クライアントです。そのため、API キー（あなた専用の鍵） が必要になります。

[あなたの PC] ─── 指示 ───▶ [Anthropic API] ─── LLM 応答 ───▶ [あなたの PC]
                            ↑
                          API キーで認証
                          使った分だけ課金

ステップ① Console に登録

https://console.anthropic.com を開いて 「Sign up」 → メール or Google で登録 → メール認証 → 組織名入力。所要時間 2〜3 分。

ステップ② クレジットを購入

Claude Code は プリペイド方式（前払い） です。「Billing」→「Add payment method」でクレジットカード登録 →「Buy credits」で 最初は $10 くらい購入。

気づき

Web サイト制作なら、月 $10 で 1〜2 サイト作って公開まで余裕 です。サイト制作は 1 セッションで使うトークン量がそれほど多くありません。「いきなり大金を入れるのが怖い」人は $5 からでも OK。

ステップ③ 月額上限を設定（重要）

絶対にやってください。設定し忘れると、寝てる間に Claude が暴走して数千円〜数万円使うリスクがあります。「Settings」→「Limits」→ 「Monthly limit」 を $20 に。

ステップ④ API キーを発行

「API Keys」→「Create Key」→ 名前入力（例「My Website Project」）→ ==sk-ant-api03-...== で始まるキーが表示される。

Bad

このキーは一度しか表示されません。発行画面を閉じる前に、必ずコピーしてパスワードマネージャ（1Password / Bitwarden / Mac のキーチェーン等）に保存してください。.txt に平文保存はマルウェアに抜かれるリスクがあります。

キーを Claude Code に渡す

ターミナルに戻って、もう一度 claude を起動します。さきほど Ctrl+C で抜けた場合は、認証画面が再表示されます。

Enter your Anthropic API Key:
sk-ant-api03-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

✓ API key validated.
✓ Saved to ~/.config/claude/config.json

キーは自動で保存されるので、次回からは入力不要 です。

はじめての指示 — 動作確認

API キーを入れ終わると、対話画面が開きます。

╭──────────────────────────────────────────────╮
│ ✻ Welcome to Claude Code v1.x.x              │
│                                              │
│ /help for commands                           │
│ /quit to exit                                │
╰──────────────────────────────────────────────╯

>

==>== が表示されたら準備完了です。Web サイト制作っぽい指示を 1 つ投げてみます。

> 「こんにちは」とだけ表示するシンプルな HTML ファイル hello.html を作って

Claude はファイル作成を提案してきます。(y/n) の確認が出たら ==y を押す== と、実際にファイルが作られます。

hello.html を作成しました。
ブラウザで開くと「こんにちは」が表示されます。

ファイルマネージャ（Finder / Explorer）で my-website フォルダを開き、==hello.html をダブルクリックしてブラウザで開いて== みてください。「こんにちは」が表示されれば、Claude Code は完璧に動いています。

Good

ここまで来たら成功

  • Node.js が入っている（node --version で確認済み）
  • Claude Code 本体が入っている（claude --version で確認済み）
  • API キーで認証できている（claude が > まで進んだ）
  • 実際にファイルが作れる（hello.html がブラウザで開けた）

この 4 つが揃っていれば、第 2 章以降のレッスンは全部問題なく進められます。

エディタ選択（VS Code 推奨だが必須ではない）

Claude Code が出力したファイルを 自分でも編集したい場面 が出てきます。そのためにエディタを 1 つ用意しておくと便利です。

エディタ価格おすすめ度
Visual Studio Code無料◎（迷ったらこれ）
Cursor一部有料○（AI 機能付き VS Code、好みで）
メモ帳 / TextEdit無料×（文字コード事故が起きやすい）

迷ったら Visual Studio Code。https://code.visualstudio.com からダウンロードして、デフォルト設定のままインストールするだけです。

ポイント

VS Code は必須ではありません。このコースでは「ファイル作成・編集はすべて Claude Code に任せる」ので、自分でコードを書く場面はほぼゼロです。入れるのが面倒なら、最初は 入れずに進めて OK。

失敗パターン

ここでは Web 制作で特にハマりやすい 4 つの失敗 を先に潰しておきます。

失敗① Node のバージョンが古い

症状 — claude を起動すると ==Unsupported engine== というエラーが出る。

原因 — 昔入れた Node.js（バージョン 14 や 16）が残っている。

解決 — もう一度 https://nodejs.org から最新 LTS を上書きインストールするだけで OK です。Mac の Homebrew なら brew upgrade node、nvm を使っているなら nvm install --lts && nvm use --lts。古いものを丁寧にアンインストールする必要はありません。上書きで十分。

失敗② API キーを Git にコミットしてしまう

症状 — sk-ant-api03-... で始まるキーを、うっかり GitHub に Push してしまう。

結果 — 攻撃者にキーが奪われ、知らない間に数万円分の API が使われる 事故が実際に多発しています。Anthropic のキーは Bot が GitHub を 24 時間スキャンしていて、Push してから数分で発見されます。

Bad

絶対にやってはいけない

.env  ← Git にコミット禁止
config.json  ← Git にコミット禁止

ANTHROPIC_API_KEY=sk-ant-api03-... のようなファイルを ==.gitignore に必ず入れて== ください。Claude Code 自体は ~/.config/claude/config.json（Mac / Linux）か %APPDATA%\claude\config.json（Windows）にキーを保存するので、プロジェクトのフォルダにキーが入ることはありません。「自分で .env を書いてキーを保存する」必要はないので、書かないのが一番安全です。

もし誤って Push してしまったら、すぐに Anthropic Console で キーを失効（revoke） してください。Git の履歴から消すより、キーを無効化するほうが速くて確実です。

失敗③ デスクトップで claude を起動する

症状 — Claude Code が周囲のファイルを大量に読み込んで遅い、または プライベートな書類が文脈に入ってしまう。

解決 — 必ず ==専用の作業フォルダを mkdir で作ってから==、そこに cd して claude を起動する。「my-website」のように分かりやすい名前を付けておくと、後で迷いません。

トラブル時の最後の手段

30 分悩むより 3 分でやり直したほうが早い ことが多いです。何かおかしくなったら、迷わず クリーンインストール を試してください。

# Mac / Linux
npm uninstall -g @anthropic-ai/claude-code
npm cache clean --force
npm install -g @anthropic-ai/claude-code@latest

ここまでやってもダメな場合は、Node.js ごと入れ直すのが最終手段です。

まとめ

このレッスンで押さえてほしいことを 6 つ並べます。実機で動かして確認 できればこのレッスンは完走です。

  1. Node.js は nodejs.org の LTS を入れる。Mac は .pkg、Windows は .msi。両方 デフォルト設定で進める だけ
  2. Claude Code は ==npm install -g @anthropic-ai/claude-code== の 1 行で入る
  3. インストール後は必ず ターミナル（コマンドプロンプト）を開き直す
  4. Web 制作なら 月額上限 $20、最初のクレジット $10 で十分
  5. API キーは絶対に Git にコミットしない。~/.config/claude/config.json に自動保存される
  6. ==デスクトップで claude を起動しない==。必ず専用フォルダを mkdir で作ってから

<Checklist items={["node --version で v18 以上が表示される","claude --version でバージョン番号が表示される","Anthropic Console で月額上限を $20 に設定した","API キーをパスワードマネージャに保存した","my-website フォルダで claude を起動し、hello.html が作れた"]} />

章末演習

章末演習 — 読み終わるだけで終わらせず、手を動かして「自分ごと」に落とし込みましょう。所要時間 15〜20 分。

  1. 今すぐ ターミナル（コマンドプロンプト）を開いて、node --version と claude --version を実行してください。両方バージョンが出れば、このレッスンの内容は実機で完走できています
  2. Anthropic Console（console.anthropic.com）にログインし、Settings → Limits で月額上限を $20 に設定してください。Web 制作だけなら、これで事故のリスクはほぼゼロになります
  3. 作業フォルダ my-website を作って、claude を起動し、「==hello.html というファイルを作って、中央に "Hello, Website!" と大きく表示して==」と指示してみてください。(y/n) の確認が出たら y を押して、ファイルが実際に作られることを確認します
  4. 作られた hello.html をブラウザで開いて、表示されることを確認したら、Claude にもう 1 つ指示を投げてみてください。「背景色を薄い水色に変えて」と頼むと、その場で更新が走ります。対話で少しずつ作り変える のが Claude Code の真骨頂です

<Quiz question="Web サイト制作で Claude Code を使うために、最低限必要なものはどれですか？" options={["Node.js 18 以上 + Anthropic API キー + 作業用フォルダ","WSL（Windows Subsystem for Linux）と Visual Studio Code","Cursor エディタと GitHub アカウントと Vercel アカウント"]} answer={0} />

<Quiz question="API キーを誤って GitHub に Push してしまった場合、最初にやるべきことは？" options={["Git の履歴から該当ファイルを削除する","Anthropic Console でキーを失効（revoke）して、新しいキーを発行する","リポジトリを Private に切り替える"]} answer={1} />

次のレッスン 1-3: 作業フォルダの準備 では、いま動作確認で使った my-website フォルダを、本格的な Web サイトのプロジェクト として整え直します。Claude Code の起動オプションや、最初に書いておくと便利な「お約束ファイル」も紹介します。