1-1 Claude Code で Web サイトを作る入門
無料Claude Code でホームページや LP をノーコードで作る全 4 章 12 レッスンの全体像を確認し、コース修了時に手元に残る成果物（公開済みサイトと独自ドメイン URL）をはっきりイメージします。
このレッスンで身につくこと
このレッスンは、Claude Code で Web サイトを作る全 4 章・12 レッスンの 入口 です。コマンドの叩き方は次のレッスンから扱うので、ここではまず このコースを終えたとき、自分の手元に何が残るのか をはっきり描いておきます。
このレッスンのゴール
- このコースを終えたときに 作れるようになるもの を、3 つの形で説明できる
- 「Claude Code で Web サイトを作る」が、従来の手書き HTML/CSS 開発と何が違うのかを 4 つの軸 で語れる
- このコースの章立て（全 4 章 12 レッスン）の流れを頭に入れる
- 必要な環境と道具のリストを把握する
- 最初の数時間で陥りがちな 失敗パターン 2 つ を回避できる
- 「1 時間で動くものを公開する」 を最初の現実的なマイルストーンに設定する
所要時間 — 約 30 分（読み込むだけ。実機操作はまだ不要） 難易度 — 星 1（前提知識ゼロでも OK）
はじめに — Web サイト作りは、もう「作れる人だけの特権」ではない
「Web サイトは、デザイナーとエンジニアがチームを組んで作るもの」という常識は、2025 年で終わりました。
これまでの Web 制作は、HTML を書ける人・CSS を書ける人・サーバーを触れる人が揃ってようやく 1 ページ世に出せる、というものでした。個人がポートフォリオを 1 枚作るだけでも、参考書を 3 冊買って週末を 5 回潰す覚悟が必要でした。
Claude Code が出てきて、その前提が崩れました。日本語で「こういうページが欲しい」と伝えるだけで、HTML も CSS も JavaScript も全部書いてくれます。「コードを書く力」より、「何を作りたいかを言語化する力」 が問われる時代になりました。
Web サイトを作れる人と作れない人の境界線は、もう「技術」ではない。「言語化できるか」と「最後まで公開する根気があるか」です。
このコースで一番大事なのは、HTML タグを暗記することでも CSS の細かい記法を覚えることでもありません。自分が作りたいものを言葉にする力 と、最後の「公開」ボタンを押すまで諦めない根気 です。
このコースで身につくこと
このコース全 12 レッスンを終えたとき、あなたは次の 5 つができるようになります。
- Claude Code に指示して、ゼロから 1 ページの LP を生成する
- デザイン・文言を、対話形式で何度も調整する
- トップページから複数のサブページに遷移する Web サイトを構築する
- 無料のホスティングサービスにデプロイし、世界中からアクセスできる URL を発行する
- 公開後の修正・更新を、Claude Code に指示するだけで反映する
特に重要なのは 5 番目です。Web サイトは「作って終わり」ではなく「作ったあと、何度も直す」のが本質。Claude Code を使えば、その「直す」作業が 分単位 でできます。1 行直すために HTML エディタを開いて該当箇所を探して保存して、という手順がまるごと消えます。
文章で表現すると、コース修了後のあなたは次のような状態になっています。
解説「自分の作りたい Web サイトを、人に頼まずに、その日のうちに公開できる」
これが Claude Code で Web サイトを作る というスキルの本質です。Web 制作会社に見積もりを取って、ワイヤーフレームを描いて、納品を待つ — そのループから完全に解放されます。
想定読者と前提知識
このコースは、次のような人を想定して書かれています。
- HTML や CSS を 一度も触ったことがない 完全な初心者
- かつて少しだけ HTML を書いたが、もう何年もブランクがある人
- デザイナーや非エンジニア職で、自分でサイトを持ちたいと思っているが、誰かに頼むのは敷居が高い 人
- 副業や個人事業で、自分のポートフォリオ・LP・ブランドサイト を 1 枚持っておきたい人
- 既に何らかのプログラミング経験はあるが、Web フロントエンドは初めて の人
逆に、このコースが向かないのは次のような人です。
このコースが向かない人
- 既に React/Vue/Next.js などで本格的に Web アプリを開発しているプロフェッショナル（物足りなく感じます）
- 「Claude Code を使わずに、純粋に HTML/CSS を学びたい」という人（このコースは Claude Code が前提です）
- 「ローカルで動かすだけで OK、公開はしない」という人（第 4 章の公開ステップが冗長に感じます）
必要な前提知識はゼロ
技術的な前提知識は 一切不要 です。次のいずれもこのコースの中で説明します。
- HTML / CSS / JavaScript が何か
- ターミナル（黒い画面）の操作方法
- ファイルとフォルダの基本
- Web サイトが「公開される」とは具体的に何が起こるのか
- ドメインと URL の違い
ただし、次のことだけはコース開始前に確認しておいてください。
- ノート PC（Mac でも Windows でも OK）が手元にあること
- インターネット接続があること
- 自由に使えるメールアドレスがあること（ホスティングサービスのアカウント作成に必要）
これだけ揃っていれば、このコースは 全レッスンを完走できます。
このコースで作るもの
具体的に「何が作れるようになるか」を、3 つの完成イメージで示します。
完成イメージ 1 — LP（1 ページ完結型サイト）
第 2 章で作るのは、よく見る縦長の LP（ランディングページ）です。Hero（メインビジュアル） → サービスの特徴 3 つ → お客様の声 → 料金プラン → お問い合わせフォーム、という 典型的な縦長 LP の構造を、Claude Code との対話 30 分 で作ります。デザインも文言も、自分で書く必要はありません。「美容室の LP を作って」「コーチングサービスの LP を作って」と頼むだけで、業種に合わせたデザインと文言が一気に出てきます。
完成イメージ 2 — 多ページサイト（コーポレートサイト / ポートフォリオ）
第 3 章で作るのは、複数ページが行き来できる Web サイトです。トップページから「私たちについて」「サービス一覧」「実績紹介」「お問い合わせ」へリンクで遷移する、普通のコーポレートサイト の構造です。Claude Code に「コーポレートサイトを作って。トップと会社概要とサービスとお問い合わせの 4 ページで」と頼むだけで、1 つのフォルダにすべてのページが生成されます。
完成イメージ 3 — 公開されたサイト（URL を持ったサイト）
第 4 章で行うのは、作ったサイトを世界中からアクセスできる URL に載せる ステップです。https://your-name.netlify.app/ のような URL が自分専用に割り当たります。
これが このコースのいちばん大事な達成点 です。手元のファイルとして HTML があるだけでは、誰にも見せられません。URL を持つことで初めて、SNS で共有でき、名刺に書け、検索エンジンに載り、本物の Web サイトになります。
無料のホスティングサービス（Netlify / Vercel / Cloudflare Pages）を使えば、料金 0 円 で公開できます。独自ドメインが欲しい場合だけ、年 1,500 円程度かかります。
なぜ Claude Code で Web サイトを作るのか
「HTML / CSS は YouTube でも書籍でも学べる。なぜわざわざ Claude Code を使うのか？」というのは正当な疑問です。4 つの軸で答えます。
軸 1 — 学習コストが圧倒的に低い
| 項目 | 従来の HTML/CSS 学習 | Claude Code |
|---|---|---|
| 1 ページ完成までの所要日数 | 約 2〜4 週間 | 30 分 |
| 学ぶ前に読む書籍数 | 3〜5 冊 | 0 冊 |
| 覚えるタグ・プロパティ | 100 以上 | 0 個 |
| エラーで止まる回数 | 数十回 | ほぼゼロ |
これは Claude Code が「HTML を書かなくていい」からではなく、書いてくれる からです。最終的にあなたの手元に残るのは普通の HTML/CSS ファイルです。中身を見れば学べるし、見なくても動きます。
軸 2 — 修正サイクルが分単位
従来の Web 制作で一番ストレスなのは「ちょっと色を変えたい」「ボタンの位置を 10px 下げたい」のような 細かい修正 でした。CSS の該当箇所を探し、プロパティを変え、保存し、ブラウザをリロードして — を繰り返します。
Claude Code を使うと「ボタンを 10px 下げて、色を #0AA5D4 にして」と 1 行で終わり。文字通り 10 秒で反映されます。100 回繰り返しても 1 時間かかりません。これまで「もう少し直したいけど、面倒だから諦めるか」と妥協してきた細部に、今度は全部こだわれます。
軸 3 — デザインの引き出しが広い
「LP を作って」とだけ頼んでも、Claude Code はある程度モダンなデザインを返してきます。それは Claude が 膨大な Web サイトのパターンを学習している からです。「美容サロンの LP」と頼めば美容業界でよくあるデザインが、「テック系スタートアップの LP」と頼めばそれっぽいデザインが出てきます。デザインを 1 から考える必要がない のは、デザイン初心者にとって大きな救いです。
軸 4 — 修正・運用のコストがゼロに近い
Web サイトは「作って終わり」ではありません。文章を直す・画像を差し替える・新しいセクションを足す — そういう運用フェーズが サイト寿命の 90% を占めます。従来は外注すれば修正のたびに数万円〜数十万円。自前で書ける人でもエディタを開いて該当ファイルを探す手間が発生します。
Claude Code なら、運用フェーズも「トップページの料金表にエンタープライズプラン月額 5 万円を追加して」と 対話で完結 します。半日かけて Web 制作会社にメールを書く必要がなくなります。
Claude Code で作った Web サイトは、「作ったあと自分で永遠に運用できる」 — これが他の制作手法に対する決定的な優位性です。
サイトの寿命のうち、作る時間は 10%、運用する時間は 90%。Claude Code はその 90% を圧倒的に楽にします。
コース全 4 章の流れ
本コースは 全 4 章・12 レッスン です。
第 1 章 — 準備と環境構築（今ここ）
| レッスン | タイトル | 内容 |
|---|---|---|
| 1-1 | このコースのゴール | 全体像（今ここ） |
| 1-2 | Claude Code のインストール | Node.js → claude コマンド導入 |
| 1-3 | 作業フォルダの準備 | プロジェクトフォルダを作って claude を起動 |
第 1 章のゴールは Claude Code が手元で動く状態にする ことです。実際にサイトを作るのは第 2 章からです。
第 2 章 — LP を作る
| レッスン | タイトル | 内容 |
|---|---|---|
| 2-1 | LP の骨格を作る | 「LP 作って」で 1 ページ生成 |
| 2-2 | デザインを調整する | 色・余白・フォントを対話で調整 |
| 2-3 | 画像とテキストの差し替え | 実際のコンテンツを流し込む |
第 2 章のゴールは 自分専用の LP が手元のブラウザで開ける 状態にすることです。
第 3 章 — 多ページサイトに拡張
| レッスン | タイトル | 内容 |
|---|---|---|
| 3-1 | ページを増やす | サブページの作成と命名規則 |
| 3-2 | ナビゲーションを作る | グローバルヘッダーとリンク設定 |
| 3-3 | 共通パーツの管理 | ヘッダー・フッターの統一 |
第 3 章のゴールは 複数ページが行き来できる 一般的なサイト構造を持つことです。
第 4 章 — 公開する
| レッスン | タイトル | 内容 |
|---|---|---|
| 4-1 | ホスティングサービスを選ぶ | Netlify / Vercel / Cloudflare Pages |
| 4-2 | サイトをデプロイする | ドラッグ&ドロップで公開 |
| 4-3 | 独自ドメインを設定する（任意） | 自分のドメインを割り当てる |
第 4 章のゴールは 自分のサイトが世界中の誰でもアクセスできる URL を持っている 状態です。
このコースが終わった時点
全 12 レッスン完走時、あなたは 自分の名前で URL を持った Web サイトをインターネットに公開している 状態になります。所要時間は、丁寧に進めて合計 8〜10 時間。週末 2 日あれば完走できます。
必要な環境と道具
コースを始める前に、次のものが揃っているか確認してください。
ハードウェア
- ノート PC または デスクトップ PC（Mac / Windows / Linux いずれも OK）
- インターネット接続
- メモリ 8GB 以上 を推奨（Claude Code は軽量ですが、ブラウザを複数開くので）
ソフトウェア
このコースの中でインストールするので、今は 入っていなくても OK です。
- Node.js（Claude Code を動かすランタイム / 第 1 章 レッスン 1-2 でインストール）
- Claude Code（本体 / 同上）
- ブラウザ（Chrome / Edge / Safari いずれか）
- テキストエディタ（任意、VS Code 推奨）
アカウント
このコースの中で必要になる無料アカウントは次のとおりです。
- Anthropic Console（Claude Code の API キー取得用 / レッスン 1-2 で作成）
- GitHub（ホスティングサービスとの連携用 / レッスン 4-1 で作成）
- Netlify または Vercel（公開先 / レッスン 4-1 で作成）
全部 無料 です。クレジットカードの登録は、Anthropic Console のみ必要です（Claude Code は使った分だけ課金される API 従量制）。
お金の話
このコース全体でかかる費用は、Claude Code の API 利用料が $5〜15、ホスティングは 0 円（無料プランで十分）、独自ドメインを取るなら 年 1,500 円程度。トータル 2,000 円程度 で Web サイトが 1 個持てます。Web 制作会社に頼んだら最低でも 30 万円コースなので、コスト差は明らかです。
API 料金が不安な人は、Anthropic Console で 月額上限（Hard Limit） を $30 などに設定しておくと安心です。上限を超えると自動で停止するので、請求書ショックは起こりません。
失敗パターン — 道具集めで終わる / 完璧主義
このコースを完走できない人 の典型パターンが 2 つあります。先に名指ししておきます。これを避けるだけで、完走率が大きく上がります。
失敗パターン 1 — 道具集めで終わる 病
第 1 章の準備段階で、VS Code のテーマ・拡張機能を 2 時間かけて選ぶ、ターミナルの色設定にこだわる、フォント選びで悩む、「やっぱり違うエディタ試そう」と Cursor / Zed / Neovim を行ったり来たり — そんな寄り道を始める人がいます。
これは 準備のための準備 です。本来 30 分で済むはずのレッスン 1-2 が、半日〜1 日に伸びます。気づくとサイトを 1 つも作らないまま「今日はこの辺で…」と日が暮れます。
避けるべき行動
- 準備に 1 時間以上かける
- 「もっと良いツールがないか」を調べ始める
- フォルダ名・ファイル名の命名規則で悩む
- インストール後すぐに動作確認をせず、設定をいじり始める
推奨される行動
- レッスンに書かれている手順を そのまま順番に やる
- インストールしたら まず動作確認 する（hello world 的なもの）
- 「もっと良いやり方」は後で考える。まずは完走 する
- 装備をカスタマイズするのは 2 周目から
失敗パターン 2 — 完璧主義 病
第 2 章でサイトを作り始めると、Hero 画像の選定に半日かける、コピーライティングに丸 1 日、デザインの微調整に没頭してトップページから先に進めない、「もう少し完成度を上げてから…」と公開しない — そんな完璧主義に陥る人がいます。
これは Web 制作の永遠の罠です。完璧なサイトは存在しません。Apple ですら毎週デザインを調整しています。スタート時点で完璧なサイトを目指す人は、永遠にローンチできません。
Web サイトは「公開してから磨く」のが正解。
公開前に磨こうとすると、永遠に公開できません。80% の完成度で先に公開 し、URL を持った状態で残り 20% を磨くほうが、結果的に良いサイトになります。
Claude Code を使えば、公開後の修正は 1 分で終わります。「公開」をゴールではなく スタート と捉えてください。
最初の現実的なマイルストーン — 「1 時間で動くもの」
このコースを進める上で、最初に置いてほしい現実的な目標があります。
「コース開始から 1 時間以内に、ブラウザで開けるサイトを 1 つ作る」 ことです。
完璧でなくていいです。デザインが気に入らなくてもいいです。文言が借り物でもいいです。とにかく、ブラウザで開いて何か表示される HTML を 1 時間以内に手元に作ってください。
具体的には次の流れを目指します。
0:00 — このレッスン 1-1 を読み終える（今ここ）
0:30 — レッスン 1-2 で Claude Code インストール完了
0:45 — レッスン 1-3 で作業フォルダ作成・Claude Code 起動
0:55 — レッスン 2-1 で「LP 作って」と最初の指示
1:00 — ブラウザで自分の LP が開く ←ここまで来れば成功この 最初の 1 時間 がコース全体の成否を決めます。1 時間以内に何か動くものが手元に出てきたら、あなたはこのコースを 必ず完走できます。逆にここで道具集め病・完璧主義病に陥ると、第 2 章に辿り着く前にエネルギーが切れます。
1 時間ルール
最初の 1 時間は 細部にこだわらない。順番通り進め、何か動くものを 1 個作る。装飾・調整は 2 時間目以降に回す。
完成度を上げる作業は、公開してから いくらでもできます。3 日目に最低限の状態で公開し、4 日目に友達に見せ、5 日目に Hero のコピーを差し替え、7 日目に料金プランを 3 つに変更し、30 日目にトップページを全面リニューアル — このように 小刻みに改善 する流れこそが、Claude Code 時代の Web 制作です。一発で完成形を目指す必要はありません。
1 つ問いかけ — あなたがこのコース修了後に最初に作りたい Web サイトは、次のうちどれに近いですか。
- 自分の自己紹介ページ・ポートフォリオサイト
- 個人事業・副業のサービス LP
- 会社のコーポレートサイト
- 趣味の作品集・ブログ
- その他（具体的にどんなサイト？）
答えを 1 文で 書き出しておくと、第 2 章以降のレッスンで「自分の作りたいもの」に置き換えて手を動かしやすくなります。
まとめ
このレッスンで押さえてほしいことを 7 つ並べます。
- このコースのゴールは 自分の名前で URL を持った Web サイトを公開する こと
- 想定読者は HTML / CSS 完全未経験者 でも OK。前提知識はゼロでよい
- 完成イメージは 1 ページの LP / 多ページのコーポレートサイト / 公開済みサイト の 3 段階
- Claude Code を使う理由は 学習コスト・修正コスト・運用コストが全部ゼロに近い こと
- 必要な道具は PC とインターネットとメールアドレス のみ。お金は約 2,000 円
- 失敗パターンは 道具集め病 と 完璧主義病 の 2 つ。最初の 1 時間は順番通り進めるだけ
- 公開はゴールではなく スタート。完璧を目指さず、まず 1 時間以内に動くものを作る
<Checklist items={["このコースで作るもの（LP / 多ページサイト / 公開済みサイト）が頭に入った","コース全 4 章 12 レッスンの流れを把握した","必要な PC・アカウント・お金の準備を確認した","最初の 1 時間で「動くものを作る」のがマイルストーンだと理解した","道具集め病・完璧主義病に陥らないと心に決めた"]} />
章末演習 — 読み終えるだけで終わらせず、ここで 5 分だけ自分の手を動かして「自分ごと」に落とし込みましょう。
- このコース修了後に作りたい Web サイトを、1 文 で書き出してください（たとえば「自分のフリーランス活動を紹介する 1 ページの自己紹介サイト」）
- そのサイトに 絶対に載せたいセクション 3 つ を書き出してください（たとえばプロフィール / 過去の実績 / 連絡先）
- 想定する読者 を 1 文で書き出してください（たとえば「フリーランスに仕事を依頼したい中小企業の経営者」）
この 3 つを書き出しておくと、第 2 章で実際に LP を作るときに Claude Code への指示がぐっと具体的になり、出てくる成果物の精度が大きく上がります。
<Quiz question="このコース修了時点で、最も重要な達成点は次のうちどれですか？" options={["自分の名前で URL を持った Web サイトを世界に公開している状態になること","HTML と CSS のタグを 100 個以上暗記している状態になること","プロのデザイナー並みの審美眼を獲得している状態になること"]} answer={0} />
次のレッスン 1-2: Claude Code のインストール では、実際に Claude Code を手元の PC にインストールし、最初の起動を行います。所要時間は約 15 分です。