Claude Code にWebサイトのコーディングをさせる方法—ドキュメント設計から指示出しまで

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」から、設計書を作成してもらう

layout-design-spec.md（レイアウト設計書ルール）

# layout-design-spec.md（レイアウト設計書ルール）

デザインカンプ（PDF/画像）から `page-{CONTENT}.md` を生成するための記法・ルール集。
Claude.ai にデザインカンプを渡したとき、このドキュメントに従って設計書を出力させる。

---

## 出力ファイル

`{ページフォルダ}/page-{CONTENT}.md`

---

## 記法

| 記号 | 意味 | 対応するHTML要素 |
|------|------|-----------------|
| `┃` | section / department（大枠） | `<section>` / `<div class="dept-...">` |
| `⟦⟧` | コンテナ・ゾーン・レーン | `section__interior` / `topzone` / `bottomzone` / `leftlane` / `rightlane` |
| `{}` | ラッパー（パターン名付き） | `fluid-wrapper` / `shelf-wrapper` / `chest-wrapper` 等 |
| `[]` | アイテム | `<dt>` / `<dd>` / `<li>` 等 |
| `<>` | HTML要素 | `<img>` / `<h2>` / `<p>` 等（タグ名 + テキストまたはファイルパス） |
| `<> なし` | テキストのみ（お任せ） | 要素指定なしのテキスト |
| `()` | 補足情報 | `alt=""` / リンク先 / キャプション等 |
| `---` | 区切り線 | `<hr>` |
| `,` | 縦並べ（改行） | 通常の縦積み |
| `/` | 横並べ | float / flex / grid の横並び |

### `/` の多義性について

`/` は2レベルで使われる：

- Fluid 内の float 分割な`{ fluid: [画像] / [テキスト] }`
- Lane の横並びな`⟦ leftlane ⟧ / ⟦ rightlane ⟧`

`⟦⟧` で囲まれているかどうかで読み分けること。

---

## ブロック構造

```
┃ section : {セクション名}（SP）
───────────────────
⟦ interior.mx-auto :
  ...
⟧


┃ section : {セクション名}（PC）
───────────────────
⟦ interior.mx-auto :
  ...
⟧
```

### SP / PC の書き分けルール

<strong>レイアウトが SP と PC で異なる場合は必ず別ブロックで書く。</strong>

- Lane 分割の有無（`fxd-row_pc` 等）が変わる場合
- Fluid の float 方向が変わる場合
- アイテムの表示順が変わる場合（`order-*`）

レイアウトが同じで見た目だけ変わる場合（幅・文字サイズ等）は1ブロックでよい。

---

## 命名規則

### セクション名

```
sect-{識別コード}-{セクション名}
```

例：`sect-eqipCki4-Tebra`

### 画像ファイル名

```
{識別コード}-{セクション名}_{種別}{連番}.{拡張子}
```

| 種別 | 用途 |
|------|------|
| `pht` | 写真 |
| `ttl` | タイトル画像・SVG |
| `pic` | 図解・イラスト |
| `logo` | ロゴ |
| `icon` | アイコン |

例：
```
eqipCki4-Tebra_pht1.jpg
eqipCki4-Tebra_ttl1.svg
eqipCki4-Tebra_pic2.png
```

SP / PC で異なる画像を使う場合は `_sp` / `_pc` サフィックスを付ける：
```
eqipCki4-Tebra_pht1_sp.jpg
eqipCki4-Tebra_pht1_pc.jpg
```

---

## `⟦⟧` コンテナの種類

| 書き方 | 対応クラス | 用途 |
|--------|-----------|------|
| `⟦ interior.mx-auto ⟧` | `section__interior mx-auto` | 通常のコンテンツ幅 |
| `⟦ inheader.mx-auto ⟧` | `section__inheader mx-auto` | セクション内ヘッダー |
| `⟦ topzone ⟧` | `section__topzone` | 縦分割・上部（幅が interior と同じ） |
| `⟦ bottomzone ⟧` | `section__bottomzone` | 縦分割・下部（幅が narrower な場合等） |
| `⟦ leftlane ⟧` | `section__leftlane` | 横分割・左カラム |
| `⟦ rightlane ⟧` | `section__rightlane` | 横分割・右カラム |

### Zone（縦分割）を使うとき

セクション内で <strong>見出し部分とコンテンツ部分の幅が異なる</strong> 場合に使う。

```
⟦ interior.mx-auto :
  ⟦ topzone :          ← 見出し（interior 全幅）
    { hgroup : ... }
  ⟧,
  ⟦ bottomzone :       ← コンテンツ（narrower）
    { ledge : ... }
  ⟧
⟧
```

### Lane（横分割）を使うとき

<strong>同一 interior 内を左右カラムに分割する</strong> 場合に使う（`fxd-row`）。

```
⟦ interior.fxd-row_pc.mx-auto :
  ⟦ leftlane : ... ⟧ /
  ⟦ rightlane : ... ⟧
⟧
```

---

## `{}` ラッパーのパターン名

SKILL.md の使用判断フローで決定したパターン名を記載すること。

| 書き方 | 対応ラッパー | 使いどころ |
|--------|------------|-----------|
| `{ hgroup : }` | `hgroup-wrapper` | セクション見出しグループ |
| `{ fgroup : }` | `fgroup-wrapper` | セクション末尾グループ |
| `{ list : }` | `list-wrapper` | リストグループ |
| `{ chest : }` | `chest-wrapper` | レイアウト設定なし・汎用BOX |
| `{ fluid : [] / [] }` | `fluid-wrapper_pc` | 画像＋テキストの横並び（float） |
| `{ bleed : }` | `bleed-wrapper` | 画面端まではみ出すレイアウト（float） |
| `{ shelf : [] [] [] }` | `shelf-wrapper_pc` | 横並び複数行（flex-wrap: wrap） |
| `{ ledge : [] [] }` | `ledge-wrapper_pc` | 横並び1行（flex-wrap: nowrap） |
| `{ tile : }` | `tile-wrapper` | 均等グリッド |
| `{ bento : }` | `bento-wrapper` | 不均一グリッド |
| `{ rack : }` | `rack-wrapper` | 縦積み（flex-direction: column） |
| `{ cards : }` | `cards-wrapper` | カード型（縦） |
| `{ frame : }` | `frame-wrapper` | 画像上にテキスト配置 |
| `{ board : }` | `board-wrapper` | 要素を絶対位置で自由配置 |

---

## `<>` HTML要素の書き方

```
<タグ名.クラス名 : 内容またはファイルパス>（補足）
```

例：
```
< h2 : ZEH >
< h3.fz-xxl : 断熱材とペアガラス >
< img : img/eqipCki3-Paneglass_pic1.png (alt="断熱材とペアガラス") >
< em.fz-xxl : 強調テキスト >
< small.fz-xs : 注釈テキスト >
```

### 見出しレベルの目安

| 要素 | 用途 |
|------|------|
| `<h2>` | ページタイトル（hgroup 内） |
| `<h3>` | セクション見出し（hgroup 内） |
| `<h4>` | セクション内小見出し |
| `<em>` | リード文・強調文 |
| `<p>` | 本文 |
| `<small>` | 注釈・キャプション |

---

## 共通属性（設計書には書かなくてよい・コーディング時に自動付与）

コーディング時に Claude Code が自動付与するもの：

- `scroll-fadeIn`（`section__interior` / `department__interior` に付与）
- `contain-intrinsic-size: 1000px`（`<section>` に付与）
- lazy load：`class="lazy"` + `src="data:image/gif;base64,..."` + `data-src0="..."`
- `<picture>` で必ず `<img>` を囲む

---

## margin / padding / font-size の指定

設計書では <strong>デザインカンプから読み取れる範囲で記載する</strong>。省略してもよい（コーディング時に調整する）。

```
< h3.fz-xxl.mb-1r : 見出し >         ← font-size・margin をクラスで指定
< p.fz-ss : テキスト >               ← font-size のみ指定
< img : img/xxx.jpg >                ← サイズ指定なし（お任せ）
```

### よく使うクラス

| クラス | 意味 |
|--------|------|
| `fz-xxxs` `fz-xxs` `fz-xs` `fz-ss` `fz-sm` `fz-sl` `fz-md` `fz-ml` `fz-lg` `fz-xl` `fz-xxl` | font-size |
| `mt-1r` `mb-1r` `mt-2r` `mb-2r` 等 | margin-top / bottom |
| `ta-center` `ta-center_sp` | text-align |
| `mx-auto` | margin-inline: auto |

---

## section vs department

| 要素 | クラス | 用途 |
|------|--------|------|
| `<section>` | `sect-{識別コード}-{セクション名}` | コンテンツセクション |
| `<div>` | `dept-{識別コード}-{セクション名}` | メニュー・前置き・後置き等（非コンテンツ） |

設計書での書き方：
```
┃ section : Tebra
┃ department : Prelude
```

---

## lang 属性

| 値 | フォント | 用途 |
|----|---------|------|
| `ja-MP` | ヒラギノ明朝, 游明朝 | 和文・明朝体 |
| `ja-GP` | Noto Sans JP | 和文・ゴシック体（本文） |
| `ja-ShipOMP` | しっぽり明朝 OTF | リード文・強調文 |

セクション全体に適用する場合は `<section lang="ja-GP">` のように `section` タグに指定。
部分的に変える場合は該当 `<>` 要素に指定する。

設計書での書き方：
```
┃ section[lang="ja-GP"] : Tebra
```

---

## 出力例

```
┃ section[lang="ja-GP"] : Tebra（SP）
───────────────────
⟦ inheader.mx-auto :
  { hgroup :
    < h3.fz-lg.bd-bottom : 共用部オールマイティシステム［Tebraキーシステム］ >
  }
⟧,
⟦ interior.mx-auto :
  ⟦ leftlane :
    { fluid :
      [< img : img/eqipCki4-Tebra_pic2.png (Tebraキー) >] / ←float の横並び
      [< em.fz-md : キーを差し込んで回す面倒な施解錠操作が不要なTebraキー。 >,
       < img : img/eqipCki4-Tebra_logo1.png (alt="Clavis Tebra cell") >,
       < h4 : Tebraキー >,
       < p.fz-ss : 鞄やポケットに入れたまま…通過可能です。 >]
    }
  ⟧, ←通常の縦積み
  ⟦ rightlane :
    { fluid :
      [< img : img/eqipCki4-Tebra_pic3.png (alt="概念図：メインエントランス/サブエントランス") >] /
      [< p.fz-ss : Tebraキーを携帯していれば…たいへん便利です。 >]
    }
  ⟧
⟧


┃ section[lang="ja-GP"] : Tebra（PC）
───────────────────
⟦ inheader.mx-auto :
  { hgroup :
    < h3.fz-lg.bd-bottom : 共用部オールマイティシステム［Tebraキーシステム］ >
  }
⟧,
⟦ interior.fxd-row_pc.mx-auto :
  ⟦ leftlane :
    { fluid :
      [< img : img/eqipCki4-Tebra_pic2.png (Tebraキー) >] / ←float の横並び
      [< em.fz-md : キーを差し込んで回す面倒な施解錠操作が不要なTebraキー。 >,
       < img : img/eqipCki4-Tebra_logo1.png (alt="Clavis Tebra cell")>,
       < h4 : Tebraキー >,
       < p.fz-ss : 鞄やポケットに入れたまま…通過可能です。 >
      ]
    }
  ⟧ / ←flex の横並び
  ⟦ rightlane :
    { fluid :
      [< img : img/eqipCki4-Tebra_pic3.png (alt="概念図：メインエントランス/サブエントランス") >] /
      [< p.fz-ss : Tebraキーを携帯していれば…たいへん便利です。 >]
    }
  ⟧
⟧
```

📍 レイアウト設計指示文のテンプレート

# 新しいセッション開始
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. 設計書を基に、コーディング

設計書を確認・修正、設計書からコーディングしてもらう

📍 コーディング指示文のテンプレート

# 新しいセッション開始
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
  - ...?ver=20260417195936
```

完了後、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="...?ver=20260417195936"`）を使うこと
- 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 3. コーディング後にレビュー・振り返り

レビュー・振り返りを行なって、次回のためにアップデートする

📍 レビュー・振り返り文のテンプレート

# 新しいセッション開始
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ページ目から一気に楽になります。

【Adobe XD】便利なプラグインのまとめ

アニメーションを損なわない『SVG Cleaner』の最適化設定

PowerPointのノート部分をLibreOfficeで抽出する方法

自社サーバーにフォームを設置するのに「Internal Server Error」で大変だった話

サーバーに置いた動画が再生されない場合のチェックポイント

カラフルボックスでのドメイン変更方法について

開発者のためのフォームテスト効率化！Chrome拡張機能「Form Auto Filler」

Claude Code にWebサイトのコーディングをさせる方法—ドキュメント設計から指示出しまで

Claude Code にWebサイトのコーディングをさせる方法—ドキュメント設計から指示出しまで

ディレクトリ構成

CLAUDE.md には何を書くか

1. 命名規則

2. 絶対ルール

3. レイアウトシステムへの参照

4. lang属性などの意図的な非標準実装

SKILL.md の設計

Step 1. デザインカンプを基に、設計書を作成

layout-design-spec.md（レイアウト設計書ルール）

📍 レイアウト設計指示文のテンプレート

Step 2. 設計書を基に、コーディング

📍 コーディング指示文のテンプレート

Step 3. コーディング後にレビュー・振り返り

📍 レビュー・振り返り文のテンプレート

まとめ

AIコードレビューツール比較：PHP個人開発でCodeRabbitを12回回した実録と主要ツール総まとめ

HINODE ICT lab