# 陶芸教室の体験予約ページを4通りの頼み方で作らせた実験の素材

記事: 「AIエージェントに「見やすくて、その店らしい」サイトを作らせる方法」

実験日: 2026-10-18。Claude Code 2.1.301、生成モデルは `claude-sonnet-5-5`。判定役は Claude（`claude-opus-5-5`）と Codex CLI 0.162.1。

## 条件（Sonnet 5.5、各3本、計12本）

| 条件 | 内容 | 作業フォルダ |
|---|---|---|
| A | 教室の情報と「予約ページを作って」だけ | 空 |
| B | A＋ブリーフ（訪問者、最重要の行動、固有の表現、3案を書いて1つ選ぶ、品質条件）。画面確認の指示はなし | 空 |
| G | A＋「作業フォルダには Playwright が入っています。仕上げる前に、画面を見て直してください。」 | Playwright |
| W | B＋撮影スクリプト `capture.mjs` を使った「撮る→診断→直す」を2回 | Playwright＋capture.mjs |

## 中身

| パス | 内容 |
|---|---|
| `prompts/` | 4条件の依頼文の全文。`_facts.txt` は全条件に共通の教室の情報（架空） |
| `code/gen.py` | `claude -p` で生成する。使い方 `python3 gen.py MODEL A,B,G,W 3 [CONC]`。`template`（Playwrightを入れたフォルダ）と `template_w`（それに capture.mjs を足したもの）が必要 |
| `code/measure.mjs` | 幅1440・390で撮影し、axe-core、横はみ出し、24px未満の操作要素を測る |
| `code/orphans.js` | 見出しの最後の行が2文字以下になっている数を数える |
| `code/formtest.mjs` | 予約フォームに入力して送信し、確認表示に入力した名前が出るかを見る |
| `code/tile.py` | 縦長の全体画像を列に切って並べる（判定役へ渡す用。Pillowが必要） |
| `code/judge.py` | 名前を隠した対比較。X・Yの順序を入れ替えて2回ずつ。「デザイン」と「その店らしさ」の2問を別々に判定 |
| `code/judge_coffee.py` | 前の記事（コーヒー店LP）の判定用。コーヒー店のC（公式スキル貼付）とG（一文足す）の直接対戦に使った |
| `code/capture.mjs` | W条件で渡した撮影スクリプト。記事に載せているものと同じ |
| `results/trials.json` | 12本ごとの計測値（時間、API換算額、画像を読んだ回数、axe、見出しの孤立など） |
| `results/judgments.json` | 判定役の全判定（72件）。勝者と理由つき |
| `results/coffee-C-vs-G-judgments.json` | コーヒー店LPのSonnet C対Gの判定（12件） |
| `html/` | 生成した12枚の `index.html`。`W-2.v1-before-fix.html` は、W-2が自分で見つけて直したフォームの不具合が残っている初版 |

## 注意

- 教室の情報（料金、時間、送料など）は実験のための架空のものです。
- 判定役はAIだけです。人間のデザイナーによる評価はしていません。
- API換算額は `total_cost_usd` の値です。ローカルのログインで実行したため、実際の請求額ではありません。
- 12本は並行して動かしました（G・Wは別々の作業フォルダ）。Gは作業フォルダ以外の `/tmp` にも撮影した例があり、同名ファイルの混在はありえます。
- 撮影・判定のスクリプトには、作業場所の絶対パス（`/tmp/aiwd2/...`）が残っている箇所があります。自分の環境のパスに直してください。
- 生成したHTMLはGoogle Fontsを読み込むため、オンラインで開いてください。
- お題は日本語の架空の陶芸教室1つ、各条件3本、Sonnet 5.5のみです。