# 「AIっぽいデザイン」の出どころを調べた実験の素材

記事: 「AIっぽいデザイン」はどこから来るのか（`/blog/ai-design-originality`）

2026年10月18日に、Claude Code（2.1.301）で`claude-opus-5-5`に架空の店のランディングページを作らせ、できたページの見た目を数えた記録です。合計78本、API換算で約62ドル、エージェントの実行時間は合計約294分でした。換算額はローカルログインで動かした値で、実際の請求額ではありません。

## 置いてあるファイル

| ファイル | 中身 |
|---|---|
| `prompts.json` | 条件ごとの依頼文の全文 |
| `results.json` | 78本それぞれの計測値と、条件ごとの集計（`summary`） |
| `gen.py` | 生成を回したスクリプト（`claude -p`を条件ごとに呼ぶ） |
| `measure.js` | Playwrightで撮影し、背景色・見出しの書体・縦書き・ふくろうのSVGなどを測るスクリプト |
| `extra.js` | 見出しの一語強調、小さな英字ラベルの数を測るスクリプト |

生成された78本のHTMLと撮影画像の原本は、サイズが大きいので置いていません。記事内の画像は、各ページの最初の画面（幅1440px）を縮小して並べたものです。

## 条件

お題は2つ。コーヒー店は「ふくろう坂焙煎所」（長野県松本市、元書店員の夫婦、定期便の申し込みを増やす）。勤怠SaaSは「ハコタイム」（従業員5〜50人向け、無料トライアルの申し込みを増やす）です。どちらも店・サービスの事実は全条件で同じ文面を渡しました。

| ラベル | 本数 | 依頼文 | 作業フォルダ |
|---|---:|---|---|
| `plain` | 12 | `A`（素の依頼） | 空 |
| `skill` | 12 | `A`と同じ | `.claude/skills/frontend-design/SKILL.md`を置く |
| `neu` | 6 | `NEU`（店名を「二番町焙煎所」、「坂」「ふくろう」を除く） | 空 |
| `neuskill` | 6 | `NEU` | スキルを置く |
| `neuskill2` | 6 | `NEU2`（`NEU`の「元書店員」を「元会社員」に） | スキルを置く |
| `saasplain` | 6 | `SAAS` | 空 |
| `saasskill` | 6 | `SAAS` | スキルを置く |
| `dir` | 12 | `A`＋「デザインの手がかり」1行（`V1`〜`V12`、1本ずつ別） | 空 |
| `self` | 12 | `A`＋「5つ書き出し、ふだんの型から最も遠い1つで作る」（`Q`） | 空 |

- 依頼文にスキルの名前は書いていません。スキルを置いた条件でも、使うかどうかはモデルが決めました。
- スキルは Anthropic の公式リポジトリ `anthropics/skills` の `skills/frontend-design/SKILL.md`（コミット `41bbe19d`、2026-09-03更新。`main`の現行版と同一）をそのまま使いました。ファイルのSHA-256の先頭16桁は `d91970639e9f5c37` です。ライセンスはApache 2.0です。
- `V1`〜`V12`の「デザインの手がかり」は、実験者（ニコ）が書いた12行です。切符、レコードジャケット、建築図面、昭和の喫茶店の看板、実験ノート、雑誌の特集、発車案内板、絵本、包装紙、スイス・ポスター、天気図、切手と消印にしました。

## 実行環境

- `claude -p <依頼文> --model claude-opus-5-5 --output-format stream-json --verbose --setting-sources project --strict-mcp-config --tools Bash,Read,Write,Edit,Skill`
- 環境変数 `CLAUDE_CODE_DISABLE_AUTO_MEMORY=1`、標準入力は `/dev/null`。effort・thinkingは既定のまま。
- 1本ごとに空の一時フォルダをcwdにしました。依頼文に外のパスは書いていません。
- 全ストリームのツール呼び出しを調べ、実験フォルダや個人の設定ファイルを読み書きした例が0件であることを確認しました。HOME配下に触れたのは、Playwrightの有無を調べる一覧表示（`ls`、読み取りのみ）が1本です。Bashでの撮影用に、`/tmp`直下へスクリーンショットを書く動作は多数ありました。

## 測ったもの

撮影は幅1440pxで、最初の画面です。`results.json`の各項目は次のように決めています。

| 項目 | 決め方 |
|---|---|
| `bg_cream` | 画面左上の実際の背景色が、色相30〜55度、彩度0.25以上、明度0.85以上 |
| `h1_mincho` | h1の第1書体名に`Mincho`か`Serif`を含む |
| `h1_vertical` | h1の`writing-mode`が`vertical-*` |
| `h1_one_phrase_accent` | h1の中に、h1全体の7割未満の長さで、色・斜体・背景が違う`span`/`em`/`strong`/`mark`がある |
| `small_english_labels` | 子要素を持たず、文字サイズ16px未満で、英字だけの短い文字列を持つ要素の数 |
| `html_has_owl_svg` | インラインSVGの中身（`<text>`を除く）に`owl`・`ふくろう`・`梟`などを含む |
| `took_own_screenshot` | エージェント自身がBashでスクリーンショットを撮った（コマンドに`screenshot`・`headless`・`playwright`・`chrome`を含む） |

「ふくろうの絵が入っているか」「5案の中身」「どの方向を選んだか」「見た目の種類」は、機械ではなく人（ニコ）が画像と出力を見て数えました。盲検ではありません。

## 既知の問題

- `self-11` は、全面を縦書きの横スクロールにしたページで、Chromiumでもstable版のChromeでも最初の画面が真っ白に描画されました。`bg_cream`などの値は白紙のページから取っています。記事では1本として数え、白紙だったことを書いています。
- 試行どうしで、エージェントがスクリーンショットを同じ名前（例: `/tmp/lp_desk.png`）で書いた例があります。並行実行だったため、他の試行の画像を読んだ可能性はゼロとは言えません。計測は各試行のHTMLから行っているので、数字には影響しません。
- スキルを置いた条件は、自分でスクリーンショットを撮った本数が多く（12本中12本、素の依頼は12本中10本）、撮影の回数も多めでした。スキルの効果と、確認の効果が混ざっています。
- 勤怠SaaSの`saasplain-6`は、背景が白でクリーム判定になっていません。
- 各条件は6〜12本です。統計的な検定はしていません。

## 再現するには

1. `anthropics/skills`から`frontend-design`を取得し、`gen.py`の`ROOT/skill/frontend-design/SKILL.md`に置く。
2. `prompts/`にprompts.jsonの各項目を`A.txt`などとして書き出し、`python3 gen.py A 0 plain 12 6`（依頼名、スキル有無0/1、ラベル、本数、並列数）のように回す。`V1`〜`V12`は`python3 gen.py 'V*' 0 dir 12 6`。
3. `npm i playwright`のあと、`node measure.js`と`node extra.js`で計測する（パスは`/tmp/aid`前提。冒頭の`root`を変える）。