# 実験の条件（experiment.md）

「AI × CSS設計 比較実験」の条件を、再現できる形で全公開します。**同じ AI・同じお題・同じ見た目仕様**を渡し、**渡す「CSS 設計の資料」だけ**を変えて 3 パターンを生成しました。

## 何を統制したか

| 種類 | 変数 | 内容 |
|---|---|---|
| 統制変数（全パターン共通） | お題 | 下記「共通のお題」 |
| 統制変数（全パターン共通） | 見た目の仕様 | [`docs/design.md`](./design.md)（レイアウト・配色・hover・アニメーション。`prefers-reduced-motion` 対応込み） |
| 統制変数（全パターン共通） | モデル・生成条件 | 下記「生成条件」 |
| **独立変数（パターンごとに変える）** | **渡す CSS 設計の資料** | なし / FLOCSS / mFLOCSS |

「見た目はほぼ同じ、設計はまったく違う」を言い切れるのは、独立変数を「設計資料」だけに絞り、見た目を design.md で固定したからです。

## この実験が測るもの（評価軸）

本実験が比較するのは CSS の**設計構造**（層の分離・命名規則・トークン参照）です。セマンティックマークアップ・アクセシビリティ・流体タイポグラフィといった実装品質の規範は、仕様（設計構造）ではなくリファレンス実装 [mflocss/starter](https://github.com/mflocss/starter) が示す領域のため、本実験の評価軸には含めていません。

## 3 パターンの資料構成

| # | 渡した資料 | 位置づけ |
|---|---|---|
| 1 | design.md のみ | ベースライン（設計資料なし） |
| 2 | design.md + FLOCSS 公式ドキュメント | 従来手法（比較対照） |
| 3 | design.md + mFLOCSS リファレンス | mFLOCSS 準拠（構造・思考が揃う） |

- パターン 2 の FLOCSS は横並びの対照群です（1→3 が「なし→構造」の梯子）。

## 共通のお題

すべてのパターンに、以下のお題と `docs/design.md` を渡しました。

```
以下のサンプルページを実装してください。

## お題
- ヘッダー（サイトロゴ + ナビゲーション3項目）
- メインエリア: カードリスト（3枚。画像 + タイトル + テキスト + ボタン）
- フッター（コピーライト + SNSリンク2つ）
- レスポンシブ対応（モバイルファースト、768px でブレイクポイント）
- 採用する手法がファイル構成を定めている場合は、それに従って実装してください
```

> **最終行（ファイル構成の共通指示）について**: 3 パターンすべてに同一の 1 行を渡しています（統制変数）。構成を「定めているか・どう定めているか」は渡した設計資料側の性質なので、この指示は特定パターンを有利にしません。パターン 1 は構成の定めなし、パターン 2 は FLOCSS 公式ドキュメントの構成、パターン 3 は mFLOCSS AGENT_GUIDE の構成が、それぞれそのまま反映されます。

## 各パターンに追加で渡した資料

| # | 追加資料 | 出典 |
|---|---|---|
| 1 | （なし） | — |
| 2 | FLOCSS 公式ドキュメント（全文） | [hiloki/flocss](https://github.com/hiloki/flocss)（MIT） |
| 3 | mFLOCSS AGENT_GUIDE（全文） | [mflocss/agent-reference](https://github.com/mflocss/agent-reference) |

> **AGENT_GUIDE 全文の公開について**: パターン 3 に渡した mFLOCSS AGENT_GUIDE は [mflocss/agent-reference](https://github.com/mflocss/agent-reference) が出典です。同リポジトリの公開に合わせて本ドキュメントからも全文を辿れるようにします（公開準備中）。design.md / お題 / FLOCSS 公式ドキュメントは、この場ですべて参照できます。

## 生成条件

- **モデル**: `claude-sonnet-5`（3 パターンとも同一）
- **生成方法**: 素の一発出し。プロンプトを 1 回渡して出てきた出力を、そのまま結果としています。**反復修正なし・生成中の描画確認なし**（ブラウザやスクリーンショットのツールは使わせていません）。
- **各パターンは独立生成**（他パターンの出力は参照させていません）。
- **生成日**: 2026-07-19

### 公開前の人間レビューによる修正一覧

公開にあたり、**design.md（見た目の統制変数）が明示する項目への準拠差だけ**を人間レビューで修正しています。design.md が規定していない細部（画像下の余白、フッターの縦位置など）の生成差はそのまま残しています。**設計構造（層・命名・トークン参照・ファイル構成）には手を入れていません**。修正した箇所は次のとおりです:

- パターン 1・2・3: コンテンツ幅のコンテナに `box-sizing: content-box` を追加（design.md「コンテンツ最大幅 1120px」の準拠。全称リセットの `border-box` のままでは実効コンテンツ幅が 1088px になるため）
- パターン 3: `color-scheme` の重複定義を 1 箇所に整理、それに伴い空になった `:root` ルールを削除

このほか、パターン切替ナビと実験バナー（`xexp-*`）は実験サイト側の後付け共通要素で、生成対象外です（各ページの HTML コメントに明記）。

## 再現性についての注記

AI の生成は非決定的です。同じプロンプトでも、実行するたびに細部の異なる CSS が出ます。ここで公開しているのは「ある 1 回の生成結果」であり、各パターンの傾向（設計資料の有無で構造がどう変わるか）を見るためのものです。厳密な同一再現を保証するものではありません。