先に完成体験をしたい方へ
90分でLPを公開する実務ラボ
カリキュラムを通読する前に、ダミー素材と検証手順を使って公開URLを一つ完成させられます。
こんな人向け
Webサイトを作りたいけど、
何から始めるか迷っている方へ
LPや複数ページのサイトを、制作から公開後の確認まで順番に学びたい方に向けたコースです。
お店やサービスのサイトを作りたい
カフェ、サロン、教室などの小規模ビジネスサイトを、要件整理から形にしていきたい方。
ポートフォリオを公開したい
作品や経歴をまとめたLP・複数ページサイトを作り、公開までの流れを知りたい方。
Web制作の流れを身につけたい
Claude Codeへの指示、表示確認、公開前後のチェックを一通り経験したい方。
このコースで学べること
LP作成から公開前後の確認まで、
順番に実践
企画・ページ作成・複数ページ化・公開前後のチェックを、実際に手を動かしながら学びます。
準備と環境構築
Claude Code で Web サイトを作る入門 / Claude Code のインストール手順 / Claude Code 用の作業フォルダ準備
LP（ランディングページ）を作る
Claude Code 用 LP 構成の作り方 / Claude Code で LP を生成する手順 / Claude Code で LP デザイン調整
複数ページのサイトに拡張
ホームページのページ構成設計 / Claude Code でページを追加する / サイトデザインを CSS で統一する
公開する
Web サイト公開先の選び方 / サイトを GitHub にアップロードする / GitHub Pages でサイトを公開する
カリキュラム
全4章・12レッスン
第1章: 準備と環境構築
無料Claude Code で Web サイトを作る入門
Claude Code でホームページや LP をノーコードで作る全 4 章 12 レッスンの全体像を確認し、コース修了時に手元に残る成果物（公開済みサイトと独自ドメイン URL）をはっきりイメージします。
Claude Code のインストール手順
Web サイト作成に必要な Claude Code を Mac / Windows にインストールします。公式のネイティブインストーラーを最短ルートとして、npm の代替手順、認証、動作確認まで解説します。
Claude Code 用の作業フォルダ準備
Claude Code でホームページ制作を始めるための作業フォルダを用意し、ターミナルから起動します。正しい場所に正しい名前でフォルダを作ることで、後の LP 生成や GitHub 公開作業がスムーズになります。
第2章: LP（ランディングページ）を作る
無料Claude Code 用 LP 構成の作り方
Claude Code でランディングページを生成する前に、ヒーロー・特徴・お客様の声・CTA など効果的な LP の構成要素を整理し、AI に渡す指示書（プロンプト設計図）の作り方を解説します。
Claude Code で LP を生成する手順
Claude Code に設計図を渡してランディングページの HTML / CSS を AI 自動生成します。一発で形にする指示の出し方と、生成結果がイマイチだったときに修正を依頼するコツを学びます。
Claude Code で LP デザイン調整
Claude Code が AI 自動生成したランディングページのデザインを、対話形式で磨き上げます。配色・余白・フォント・CTA の見せ方を具体的に指示し、印象に残る LP に仕上げる手順を解説します。
第3章: 複数ページのサイトに拡張
無料ホームページのページ構成設計
1 枚の LP をメニュー・お店紹介・問い合わせなど複数ページのホームページに拡張するためのサイト構成を設計します。Claude Code に渡すページ一覧とナビゲーション設計図の作り方を解説します。
Claude Code でページを追加する
Claude Code を使ってメニュー・お店紹介・お問い合わせの 3 ページを HTML 自動生成し、トップページからリンクで結びます。複数ページのホームページに育てる具体的な指示の出し方を解説します。
サイトデザインを CSS で統一する
複数ページのサイトデザインを CSS 共通化で統一し、配色・余白・フォントを揃えてブランドの一貫性を出します。Claude Code に共通スタイルを抽出させて全ページに適用する手順を解説します。
第4章: 公開する
無料Web サイト公開先の選び方
GitHub Pages・Cloudflare Pages・Vercel など無料で Web サイトを公開できるホスティングサービスを比較し、独自ドメインや表示速度の観点から自分のホームページに合った公開先を選びます。
サイトを GitHub にアップロードする
Git の基本コマンド（init / add / commit / push）を学び、Claude Code で作ったサイトを GitHub のリポジトリにアップロードします。GitHub Pages 公開の準備までを一通り進めます。
GitHub Pages でサイトを公開する
GitHub Pages の設定を ON にして、世界中からアクセスできる公開 URL を取得します。独自ドメインを取得して接続する手順と公開後の動作確認の進め方も合わせて解説します。