Claude Code は、アプリ開発やフォームシステムだけでなく、Webサイトのフロントエンドコーディングにも十分活用できます。
ただし、何も準備なしに「このデザインをHTMLにしてください」と投げても、期待通りのコードが返ってくることはほぼない。独自のCSSシステムを使っている場合はなおさらだ。
この記事では、実際にページ（content_001.html / content_001.css）を Claude Code で実装した経験をベースに、「何をどう伝えれば、Claude Code が自走してくれるか」を体系化して紹介します。
ディレクトリ構成
Design System/
├─ .claude/
│ ├─ CLAUDE.md # プロジェクト統括設定
│ └─ skills/
│ └─ layout-system/
│ ├─ SKILL.md # レイアウト選択スキル
│ └─ patterns/ # レイアウトパターン
│ ├─ bleed.md
│ ├─ board.md
│ ├─ fluid.md
│ └─ ...
├─ CONTENT/
│ ├─ img/
│ ├─ content_001.css # 既存CSSの確認
│ ├─ content_001.html # 既存HTMLの確認
│ ├─ page-CONTENT.md # 設計書（構成・カラー・テキスト・画像一覧）
│ └─ CONTENT_XD.jpg # デザインカンプ
└─ docs/
├─ utility-classes.md # 使用可能なユーティリティクラス
└─ component-classes.md # 使用可能なコンポーネントクラス
SKILL.md は .claude/skills/ 配下に置くこと。
Claude Code はこのパスをスキルとして自動認識するため、「レイアウト」「Bleed」「Board」などのキーワードが出た瞬間に自動でロードされる。
CLAUDE.md には何を書くか
CLAUDE.md はセッション開始時に Claude Code が最初に読むファイルだ。ここに書くべきことは大きく4つ。
1. 命名規則
「どのクラス名をどこに使うか」が曖昧だと、Claude Code は毎回推測する。明示しておく。
## 命名規則
ページクラス : pg-{ページクラス（小文字）}
識別コード : {PascalCase}（section/dept クラス名・画像名に使用）
セクション: sect-{識別コード}-{セクション名}
画像 : {識別コード}-{セクション名}_{画像種}{連番}.{拡張子}
画像種: pht（写真）/ bg（背景） / pic（それ以外の画像） / ttl（タイトル）/ txt（テキスト）
2. 絶対ルール
## 絶対ルール
- 画像は必ず遅延ロード（class="lazy" + data-src0="..."）を使う
- セクション固有CSSはセクションスコープ内に閉じる
- 指示されたセクション以外のコードは変えない
「触っていないファイルは変えない」は特に重要だ。指示していないセクションを「最適化」と称して書き換えられると、デバッグが困難になる。
3. レイアウトシステムへの参照
## レイアウトシステム
`.claude/skills/layout-system/SKILL.md` を参照。
Tailwind / Bootstrap は使わない。
4. lang属性などの意図的な非標準実装
## 意図的な非標準実装
lang="ja-MP", lang="ja-GP" は非標準BCP47タグだが意図的。
CSSの :lang() セレクタでフォントを切り替えるためのマーカー。
「invalid BCP 47」の警告は無視してよい。
知らないと Claude Code が「修正」しようとするものは、必ず事前に伝える。
SKILL.md の設計
SKILL.md はレイアウトパターンの「選択基準」と「実装詳細」の橋渡しをする。
重要なのは使用判断フローです。
画像を画面端まで広げたい？
├─ Yes → Bleed
│ ↓
│ その画像の上に要素を重ねたい？
│ ├─ Yes → Bleed + Board 複合
│ └─ No → Bleed のみ
└─ No → ...
このフローがあると、Claude Code は「このセクションには Bleed + Board を使うべき」と自律的に判断できる。なければ毎回こちらが指定する必要がある。
実装詳細は patterns/ ディレクトリに分割して管理する。
patterns/
├─ bleed.md — float で全幅はみ出し
├─ board.md — 絶対位置で自由配置
├─ fluid.md — float で画像とテキスト
├─ shelf.md — flex で横並び複数行
└─ ...
各ファイルにはクラス一覧・HTML構造・CSS・図解を書く。
特に図解（ASCII アート）は Claude Code の理解精度を上げるのに効果的です。
Step 1. デザインカンプを基に、設計書を作成
レイアウト設計書ルール「layout-design-spec.md」から、設計書を作成してもらう
Claude Codeにレイアウトを正確に再現させる「中間設計書」記法
📍 レイアウト設計指示文のテンプレート
# 新しいセッション開始
claude --enable-auto-mode
プロジェクト名：my_site.jp
ページ：my_site.jp/content
Task X.X: CONTENTページ レイアウト設計書の作成 を開始します。
--------
**Task X.X.1: Explore（探索・理解）**
以下のドキュメントを読んで、実装内容を深く理解してください：
- @CLAUDE.md # プロジェクト統括設定（最初に読む）
- @CONTENT/page-CONTENT.md # 設計書（構成・カラー・テキスト・画像一覧）
- @CONTENT/CONTENT_XD_sp.pdf # デザインカンプ（モバイル）
- @CONTENT/CONTENT_XD_pc.pdf # デザインカンプ（PC）
- @CONTENT/content_001.css # 既存CSSの確認
- @CONTENT/content_001.html # 既存HTMLの確認
- @CONTENT/img # 画像フォルダ
- @.claude/skills/layout-system/SKILL.md # レイアウト選択（使用判断フローを確認）
- @docs/utility-classes.md # 使用可能なユーティリティクラス
- @docs/component-classes.md # 使用可能なコンポーネントクラス
- @docs/layout-design-spec.md # レイアウト設計書ルール
**重要**: この段階ではコードは書かないでください。
完了後、Task X.X.2 に進んでください。
--------
**Task X.X.2: Plan（計画）**
設計前に以下を確認・整理してください：
- `page-CONTENT.md` のセクション定義から、セクション名・識別コードを確認する
- SP/PC のレイアウト差異を整理する
- SKILL.md の「使用判断フロー」で使用するレイアウトパターンを決定する
- 使用するパターンの詳細を `@.claude/skills/layout-system/patterns/{パターン名}.md` で確認する
- 画像ファイル名を `page-CONTENT.md` の命名規則に従って確定する
以下の形式で実装計画をまとめてください：
```
セクション：sect-{識別コード}-{セクション名}
レイアウト：{パターン名}（理由：{選択理由}）
SP：{SP時のレイアウト概要}
PC：{PC時のレイアウト概要}
使用画像：
- {識別コード}-{セクション名}_pht1.jpg
- {識別コード}-{セクション名}_ttl2.svg
- ...
```
完了後、Task X.X.3 に進んでください。
--------
**Task X.X.3: Code（実装）**
layout-design-spec.md（レイアウト設計書ルール）に従って、
- レイアウト設計書 `page-CONTENT.md`
を作成（更新）してください。
**共通ルール**
- レイアウトは `SKILL.md` と `patterns/` を参照すること
- クラス命名は既存ファイルの規則に従うこと（`pg-{ページクラス（小文字）}` / `sect-{識別コード}-{セクション名}`）
- セクション固有のCSSはセクションスコープ（`.sect-{識別コード}-{セクション名}`）に閉じること
完了後、Task X.X.4 に進んでください。
--------
**Task X.X.4: Record（記録）**
実装完了後、以下を記録してください：
**開発日誌**：
- /devlog Task X.X: CONTENTページ レイアウト設計書の作成 # Slash Command
- 実装内容・変更点 → `logs/CHANGELOG.md`
- 発生したエラー・解決策 → `logs/ERRORLOG.md`
- 新しいパターン・知見 → `logs/PATTERNS.md`
**Self-Improvement**：
ユーザーから修正・指摘を受けた場合は、必ず以下を記録してください：
- 同じミスを繰り返さないためのルールを `logs/PATTERNS.md` に追記
- CLAUDE.md への追記が必要な場合は提案する
「Task X.X: CONTENTページ レイアウト設計書の作成 → ✅完了」と報告してください。
開始してください。
Step 2. テキスト照合・チェックフェイズ
ページ全体のテキストを、デザインカンプ（.jpg）と照合する。修正点があれば、修正する。
📍 チェックフェイズのテンプレート
# 新しいセッション開始
claude --enable-auto-mode
プロジェクト名：my_site.jp
ページ：my_site.jp/content
**Task X.X: CONTENTページ テキスト照合・チェックフェイズ を開始します。**
--------
**Task X.X.1: テキスト照合**
以下を読み込んで、テキストを照合してください：
- @CONTENT/page-CONTENT.md # 設計書（照合元）
- @CONTENT/CONTENT_XD_pc.jpg # デザインカンプ（照合先）
**確認項目**
- [ ] 設計書のテキストとカンプの文言が一致しているか（誤字・脱字・省略がないか）
- [ ] テキストが `〔省略〕` `...` 等で省略されていないか（省略箇所はカンプから全文拾う）
- [ ] 画像 alt テキストがカンプの内容と一致しているか
修正があれば `page-CONTENT.md` を直接更新してください。
--------
**Task X.X.2: 未確定事項の確認**
`page-CONTENT.md` の `未確定事項・要確認` のチェックボックスを確認してください。
- 解消できるものはカンプを見て解消し、設計書を更新する
- 判断できないものは残し、コメントを追記する
--------
**Task X.X.3: 記録**
- 修正箇所・解消した未確定事項 → `logs/CHANGELOG.md`
「Task X.X: CONTENTページ テキスト照合・チェックフェイズ → ✅完了」と報告してください。
開始してください。
Step 3. 設計書を基に、コーディング
設計書を確認・修正、設計書からコーディングしてもらう
📍 コーディング指示文のテンプレート
# 新しいセッション開始
claude --enable-auto-mode
プロジェクト名：my_site.jp
ページ：my_site.jp/content
Task X.X: CONTENTページのコーディング を開始します。
--------
**Task X.X.1: Explore（探索・理解）**
以下のドキュメントを読んで、実装内容を深く理解してください：
- @CLAUDE.md # プロジェクト統括設定（最初に読む）
- @CONTENT/page-CONTENT.md # 設計書（構成・カラー・テキスト・画像一覧）
- @CONTENT/CONTENT_XD_sp.jpg # デザインカンプ（モバイル）
- @CONTENT/CONTENT_XD_pc.jpg # デザインカンプ（PC）
- @CONTENT/content_001.css # 既存CSSの確認
- @CONTENT/content_001.html # 既存HTMLの確認
- @CONTENT/img # 画像フォルダ
- @.claude/skills/layout-system/SKILL.md # レイアウト選択（使用判断フローを確認）
- @docs/utility-classes.md # 使用可能なユーティリティクラス
- @docs/component-classes.md # 使用可能なコンポーネントクラス
- @docs/layout-design-spec.md # レイアウト設計書ルール
**重要**: この段階ではコードは書かないでください。
完了後、Task X.X.2 に進んでください。
--------
**Task X.X.2: Plan（計画）**
実装前に以下を確認・整理してください：
- `page-CONTENT.md` のセクション定義から、セクション名・識別コードを確認する
- SP/PC のレイアウト差異を整理する
- SKILL.md の「使用判断フロー」で使用するレイアウトパターンを決定する
- 使用するパターンの詳細を `@.claude/skills/layout-system/patterns/{パターン名}.md` で確認する
- 画像ファイル名を `page-CONTENT.md` の命名規則に従って確定する
以下の形式で実装計画をまとめてください：
```
セクション：sect-{識別コード}-{セクション名}
レイアウト：{パターン名}（理由：{選択理由}）
SP：{SP時のレイアウト概要}
PC：{PC時のレイアウト概要}
使用画像：
- {識別コード}-{セクション名}_pht1.jpg
- {識別コード}-{セクション名}_ttl2.svg
- ...
```
完了後、Task X.X.3 に進んでください。
--------
**Task X.X.3: Code（実装）**
以下のルールに従って、HTMLとCSSを実装：
- @CONTENT/content_002.css
- @CONTENT/content_002.html
を作成してください。
**共通ルール**
- レイアウトは `SKILL.md` と `patterns/` を参照すること
- クラス命名は既存ファイルの規則に従うこと（`pg-{ページクラス（小文字）}` / `sect-{識別コード}-{セクション名}`）
- 画像はすべて lazy load（`class="lazy"` + `data-src0="..."`）を使うこと
- Tailwind / Bootstrap は使わないこと
- セクション固有のCSSはセクションスコープ（`.sect-{識別コード}-{セクション名}`）に閉じること
- 触っていないセクションのコードは変えないこと
**CSSの記述順序**
```css
/* .section
-------------------------------------- */
.pg-{ページクラス（小文字）} .sect-{識別コード}-{セクション名} {
/* padding: 上 横 下 */
padding: calc(var(--⅝fem) * 2) 0px calc(var(--⅝fem) * 2);
}
/* SP */
@media screen and (max-width: 743.9px) { ... }
/* PC */
@media print, screen and (min-width: 744px) { ... }
```
**セクション基本HTML**
```html
```
実装を始める前に、より良いコーディングのために必要な情報があれば質問してください。
--------
**Task X.X.4: Record（記録）**
実装完了後、以下を記録してください：
**開発日誌**：
- /devlog Task X.X: CONTENTページのコーディング # Slash Command
- 実装内容・変更点 → `logs/CHANGELOG.md`
- 発生したエラー・解決策 → `logs/ERRORLOG.md`
- 新しいパターン・知見 → `logs/PATTERNS.md`
**Self-Improvement**：
ユーザーから修正・指摘を受けた場合は、必ず以下を記録してください：
- 同じミスを繰り返さないためのルールを `logs/PATTERNS.md` に追記
- CLAUDE.md への追記が必要な場合は提案する
「Task X.X: CONTENTページのコーディング → ✅完了」と報告してください。
開始してください。
Task 2（Plan）を独立させることが最も重要。「まず計画を言語化させる」ステップを挟むことで、Claude Code が どのパターンを選ぶべきかどうかを自分で整理できます。
Step 4. コーディング後にレビュー・振り返り
レビュー・振り返りを行なって、次回のためにアップデートする
📍 レビュー・振り返り文のテンプレート
# 新しいセッション開始
claude --enable-auto-mode
プロジェクト名：my_site.jp
ページ：my_site.jp/content
Task X.X: CONTENTページのレビュー・振り返り を開始します。
--------
**Task X.X.1: Explore（探索・理解）**
以下のドキュメントを読んで、実装内容を深く理解してください：
- @CLAUDE.md # プロジェクト統括設定（最初に読む）
- @CONTENT/content_002_修正前.css # 修正前のCSS
- @CONTENT/content_002_修正前.html # 修正前のHTML
- @CONTENT/SS-content_002_修正前_sp.png # 修正前のスクリーンショット（SP）
- @CONTENT/SS-content_002_修正前_pc.png # 修正前のスクリーンショット（PC）
- @CONTENT/content_003_修正後.css # 修正後のCSS
- @CONTENT/content_003_修正後.html # 修正後のHTML
- @CONTENT/SS-content_003_修正後_sp.png # 修正後のスクリーンショット（SP）
- @CONTENT/SS-content_003_修正後_pc.png # 修正後のスクリーンショット（PC）
- @CONTENT/page-CONTENT_レビュー・修正点.md # レビュー・修正点
次回より良いコーディングをするために必要な情報があれば質問してください。
--------
**Task X.X.2: Plan（計画）**
以下のドキュメントを確認し、アップデートする計画を立ててください：
- @.claude/skills/layout-system/SKILL.md # レイアウト選択
- @docs/utility-classes.md # 使用可能なユーティリティクラス
- @docs/component-classes.md # 使用可能なコンポーネントクラス
- @docs/layout-design-spec.md # レイアウト設計書ルール
完了後、Task X.X.3 に進んでください。
--------
**Task X.X.3: Code（実装）**
Task X.X.2の計画に従って、
アップデートが必要なドキュメントをアップデートしてください。
完了後、Task X.X.4 に進んでください。
--------
**Task X.X.4: Record（記録）**
実装完了後、以下を記録してください：
**開発日誌**：
- /devlog Task X.X: CONTENTページのレビュー・振り返り # Slash Command
- 実装内容・変更点 → `logs/CHANGELOG.md`
- 発生したエラー・解決策 → `logs/ERRORLOG.md`
- 新しいパターン・知見 → `logs/PATTERNS.md`
**Self-Improvement**：
ユーザーから修正・指摘を受けた場合は、必ず以下を記録してください：
- 同じミスを繰り返さないためのルールを `logs/PATTERNS.md` に追記
- CLAUDE.md への追記が必要な場合は提案する
「Task X.X: CONTENTページのレビュー・振り返り → ✅完了」と報告してください。
開始してください。
まとめ
Claude Code にWebサイトのコーディングを任せるには、「Claude Code が知らないことを事前に教える」ことに尽きる。
- 命名規則が曖昧 → 毎回推測する → ミスが増える
- レイアウトパターンが未定義 → 汎用的な実装になる → 修正が増える
- SP/PC差異の設計がない → どちらかが崩れる
ドキュメントへの投資は1回すれば使い回せる。最初は手間がかかるが、2ページ目・3ページ目から一気に楽になります。
関連記事
IllustratorのデザインカンプからCSSを抽出する方法
