Claude Codeで作るWebサイト作成｜初心者向け12レッスン

Claude Code で Web サイトを作る入門

Claude Code でホームページや LP をノーコードで作る全 4 章 12 レッスンの全体像を確認し、コース修了時に手元に残る成果物（公開済みサイトと独自ドメイン URL）をはっきりイメージします。

Claude Code のインストール手順

Web サイト作成に必要な Claude Code を Mac / Windows にインストールします。公式のネイティブインストーラーを最短ルートとして、npm の代替手順、認証、動作確認まで解説します。

Claude Code 用の作業フォルダ準備

Claude Code でホームページ制作を始めるための作業フォルダを用意し、ターミナルから起動します。正しい場所に正しい名前でフォルダを作ることで、後の LP 生成や GitHub 公開作業がスムーズになります。

Claude Code 用 LP 構成の作り方

Claude Code でランディングページを生成する前に、ヒーロー・特徴・お客様の声・CTA など効果的な LP の構成要素を整理し、AI に渡す指示書（プロンプト設計図）の作り方を解説します。

Claude Code で LP を生成する手順

Claude Code に設計図を渡してランディングページの HTML / CSS を AI 自動生成します。一発で形にする指示の出し方と、生成結果がイマイチだったときに修正を依頼するコツを学びます。

Claude Code で LP デザイン調整

Claude Code が AI 自動生成したランディングページのデザインを、対話形式で磨き上げます。配色・余白・フォント・CTA の見せ方を具体的に指示し、印象に残る LP に仕上げる手順を解説します。

ホームページのページ構成設計

1 枚の LP をメニュー・お店紹介・問い合わせなど複数ページのホームページに拡張するためのサイト構成を設計します。Claude Code に渡すページ一覧とナビゲーション設計図の作り方を解説します。

Claude Code でページを追加する

Claude Code を使ってメニュー・お店紹介・お問い合わせの 3 ページを HTML 自動生成し、トップページからリンクで結びます。複数ページのホームページに育てる具体的な指示の出し方を解説します。

サイトデザインを CSS で統一する

複数ページのサイトデザインを CSS 共通化で統一し、配色・余白・フォントを揃えてブランドの一貫性を出します。Claude Code に共通スタイルを抽出させて全ページに適用する手順を解説します。

Web サイト公開先の選び方

GitHub Pages・Cloudflare Pages・Vercel など無料で Web サイトを公開できるホスティングサービスを比較し、独自ドメインや表示速度の観点から自分のホームページに合った公開先を選びます。

サイトを GitHub にアップロードする

Git の基本コマンド（init / add / commit / push）を学び、Claude Code で作ったサイトを GitHub のリポジトリにアップロードします。GitHub Pages 公開の準備までを一通り進めます。

GitHub Pages でサイトを公開する

GitHub Pages の設定を ON にして、世界中からアクセスできる公開 URL を取得します。独自ドメインを取得して接続する手順と公開後の動作確認の進め方も合わせて解説します。