AI（Claude Code）にサイトを作らせるとき、僕はデザイン用の「手順書」（スキル）を使っている。半年育てた自作の手順書もある。でも、それが本当に効いているのか一度も測っていなかった。だから測った。結果は、手順書なしが1位だった。
やったこと
同じ依頼文で、条件だけ変えた4体の AI に同じサイトを作らせた。
- 課題: 架空の製造業向けサービスのサイト4ページ（トップ・事例・料金・問い合わせ）
- 4条件: 自作の手順書（design-forge）／公式の手順書（frontend-design）／他社製の手順書（ui-ux-pro-max）／手順書なし
- 採点: 4案の名前を伏せて A〜D に置き換え、別の AI 2体に100点満点で独立採点させた。どれがどれかは採点後に開封。採点者が人ではなく AI なので、点数は参考値。だからこそ4案の実物を下に置いた
4案の実物
上から順に、手順書なし・自作・公式・他社製。画像を押すと実際のサイトが開く（別タブ）。
左上: 手順書なし（1位）／右上: design-forge（2位）／左下: frontend-design（3位）／右下: ui-ux-pro-max（4位）。4案とも「点検表」「紺と朱」という同じ方向に寄ったのが面白い。
結果
| 条件 | 平均点 | かかった時間 |
|---|---|---|
| 手順書なし | 86.0 | 30分 |
| design-forge（自作） | 84.0 | 48分 |
| frontend-design（公式） | 83.5 | 26分 |
| ui-ux-pro-max（他社製） | 81.0 | 25分 |
この表から言えるのは、手間をかけた手順書ほど良くなるわけではなかった、ということだ。ただし点数は AI の採点なので「AI の目にはこう映った」以上の意味はない。差は最大5点で、順位を分けたのは見た目の印象ではなく「ボタンの文字が薄くて読めない」「タブレット幅でメニューが折れる」といった細かい欠陥だった。
わかったこと
- 手順書は「欠陥を減らす」方向には効いた。自作は統一感が最良、他社製はアクセシビリティが最良。ただし「印象を上げる」方向には効かなかった
- 依頼文の一言のほうが強い。「点検表のチェック印」と書いただけで、4案とも同じ方向に寄った。出来を左右するのは手順書より題材の描写
- 1回ずつの比較なので断言はできない。「手順書なしが最強」ではなく「この課題では手順書の効果は測れないほど小さい」が正しい読み
- AI の採点は参考にしかならない。AI は「文字の色が薄い」のような欠陥は確実に拾うが、「良いデザインか」の判断は人の好みとずれうる。順位を鵜呑みにせず、上の4案を自分の目で見比べてほしい
次にやること
自作の手順書を軽くする。重い工程を削り、代わりに4案共通で出た欠陥3点（ボタンの色の濃さ・タブレット幅のメニュー・グラフのスマホ表示）のチェックリストを入れる。そのうえで同じ課題でもう一度比べる。