自社サイト（HP）の刷新で、AI（Claude Code）に60枚のデザイン案を作らせて自分で1枚選んだ。ところが実装が終わって見てみると、選んだ絵とは別物の画面になっていた。原因は分かりやすい1つのミスではなく、個々には正しい判断が積み重なった結果だった。
なぜやったか
前段で「Awwwards掲載サイト級」の品質を求めた。AIには、8つの切り口（王道・シェーダー・タイポグラフィなど）から32案を出させ、審査で20案に絞ったうえで、1案につき3枚、計60枚のカンプ画像を並列生成させた。それを僕がビューアで見比べて1枚選んだ。
やったこと
- 選んだカンプは「画面の大半を巨大な文字の並びが占める」構図だった
- 実装後の画面は「英語のログ表示が延々と流れ、巨大な文字はほぼ存在しない」逆の構図になっていた
- 実機で確認したところ、副題や事業名などの日本語が画面に表示されず、aria-label（読み上げ用の属性）の中にしか書かれていないバグも見つかった
決めたこと
なぜズレたのか自己分析させたところ、3つの判断が原因だった。「余白が見えない」という指摘に対応して画面幅を削りすぎたこと、「見られやすい面に平凡な文が乗っている」という指摘でログ表示を前倒ししたこと、大見出しの文言が「見飽きた言い回し」と酷評されて格下げされたこと。どれも単独では妥当な直しだが、積み重なると選んだ絵から離れていった。
わかったこと
- AIによる細かい指摘に一つずつ従うと、全体の構図が少しずつ崩れることがある。直すたびに元の絵と見比える工程が要る
- 表示用の文章と読み上げ用の属性は別物で、後者にしか書いていないと画面には何も出ない。見た目の確認だけでは気づけない
- 大掛かりな選定の仕組み自体（多数案を並列生成し絞り込む）は機能したが、選んだあとの実装工程を無検証で自走させると絵から離れる
次にやること
実装の節目ごとに、選んだカンプと画面を並べて見比える工程を挟む。