6サイト作って、手で書く・AIに書かせる・検品する、を体に入れる

準備編 道具をそろえる

道具をそろえます。VSCodeとLive Serverと Claude Code。

保存したら画面が変わる状態を作ります。

壊れているかを機械に聞く方法も、ここで覚えます。

カンプと配布物

VSCode／Live Server／Claude Code／Node.js（配布物はありません・読むだけの回です）

手で書くところ

作業フォルダ／VSCode／Live Server／DevTools／HTMLの型を1回だけ写経／UTF-8

AIに任せるところと検品

Claude Code の導入と最初の設定／Cursor・ChatGPTを副で使うときの注意／html-validate

入門編 湘南のカフェサイト

海沿いのカフェの1ページサイトを、全部手で書きます。

HTMLの骨組みとCSSの並べ方を、1行ずつ解説します。

AIには聞くだけ。書かせるのは次の回からです。

手 100 : AI 0

カンプと配布物

HTMLカンプ1枚／PNG（1440・390）／完成ZIP／公開デモ

手で書くところ

セマンティックHTML／リセットCSS／box-sizing／flexbox／gap／object-fit／picture要素／メディアクエリ768px

AIに任せるところと検品

AIは質問だけに使う（「このCSSが効かない理由」）／npx html-validate で error 0

初級編 工務店の3ページサイト

工務店の3ページサイト。同じ部品を3枚で使い回します。

BEMとCSS変数で、あとから直せる書き方に整えます。

部品3つをAIに書かせ、カンプと見比べて直します。

手 70 : AI 30

カンプと配布物

HTMLカンプ3枚／PNG（1440・390）／完成ZIP／公開デモ

手で書くところ

BEM／CSSカスタムプロパティ／CSS Grid（auto-fill・minmax）／details要素のSPナビ／dl要素／相対パスの共通パーツ

AIに任せるところと検品

AIに書かせる：お知らせ一覧・施工事例グリッド・フッター／html-validate＋Playwrightのスクショ比較

中級編1 湘南のAI勉強会の告知ページ

AI勉強会の告知を、縦長1ページで作ります。

clamp() と dialog で、可変の余白と申し込み窓を作ります。

スマホ版はAIに起こさせ、Lighthouseで測ります。

手 50 : AI 50

カンプと配布物

縦長HTMLカンプ／PNG（1440・390）／完成ZIP／公開デモ

手で書くところ

clamp()／min()・max()／position:sticky の追従CTA／scroll-margin-top／dialog要素の申し込み窓／フォームの入力補助

AIに任せるところと検品

AIに書かせる：スマホ版CSS・FAQのdetails・OGPとJSON-LD（Event）／＋Lighthouse（SEO・ベストプラクティス）

中級編2 藤沢のパーソナルジムのサイト

パーソナルジム。スマホの見た目から先に組みます。

スクロールの動きとスライダーはAIの担当です。

キーボードと「動きを減らす」設定で壊れないか調べます。

手 30 : AI 70

カンプと配布物

モバイル先行カンプ（390・1440）／PNG／完成ZIP／公開デモ

手で書くところ

モバイルファースト／2段階ブレークポイント（600px・1024px）／container query／:focus-visible／動かなくても読める初期状態

AIに任せるところと検品

AIに書かせる：IntersectionObserverの表示アニメ・スクロールスナップの実績スライダー・prefers-reduced-motion対応／＋アクセシビリティ（axe・キーボード操作）

中級編3 片瀬のウェブマガジンのトップページ

動画背景と大きな文字で見せるメディアサイトです。

音と動画はブラウザの制限があるので、ボタンで鳴らします。

重さを測って、上限まで落とすところまでやります。

手 20 : AI 80

カンプと配布物

フルスクリーンカンプ／PNG（1440・390）／完成ZIP／公開デモ

手で書くところ

video要素の背景（muted・playsinline・poster）／clamp()の大胆なタイポ／article要素の記事一覧

AIに任せるところと検品

AIに書かせる：動画背景と静止画フォールバック・音のボタン再生・srcsetと遅延読み込み／＋性能（転送量・LCP・DevTools Network）

上級編 藤沢の製作所の企業サイト

6ページの企業サイトを作って、実際に公開します。

構成からAIに任せ、あなたは指示と検品だけをします。

Git・Cloudflare Pages・GA4 まで通します。

手 10 : AI 90

カンプと配布物

6ページ分のHTMLカンプ／PNG（1440・390）／完成ZIP／公開デモ

手で書くところ

指示書を書く（サイトマップ・ページ要件・制約）／AIの構成案2つから採否を決める／コミットメッセージ／修正指示

AIに任せるところと検品

AIに書かせる：6ページのHTML・CSS・フォーム・404・robots.txt・sitemap.xml・canonical・JSON-LD／＋Git・Cloudflare Pages・GA4リアルタイム・リンク切れ0