サイトのデザインを別のAIに採点させた、3巡の改善ループ
warp-studio.com のデザインを、直す AI と採点する AI を分けて3巡で見直しました。8つの観点は3〜4点から4〜5点になりましたが、途中でスマホの横揺れや CLS 0.526 など4つの新しい問題も生みました。その原因と直し方、足したゲートの記録です。
2026年10月6日から7日にかけて、このサイト warp-studio.com のデザインを見直しました。運営者の私が頼んだのは「今の内容とデザインが合っているか評価し、方向性も含めて改善ループで」です。直す作業は AI のコーディング支援に任せ、採点は作業の経緯を知らない別の AI に任せました。評価は3回で、8つの観点の点数は3〜4点から4〜5点に上がりました。ただ、その途中で、直す側の変更から4つの新しい問題が生まれ、うち3つは退行（直したつもりの変更で、別の所が悪くなること）でした。4つとも、直した側の確認は通っていました。その記録です。
このサイトは Google AdSense（Google の広告配信サービス）の審査に3回落ち、「製品と制作ノート」のサイトに作り直して再申請する準備をしています。
作った本人に採点させない
このサイトの改善ループには、もともと見た目のゲート G4 がありました。ゲートとは、変更を次に進めてよいかを決める関門です。G4 では、作者（直す側の AI）が手元のサイトを PC と幅390px で撮影して目で確かめ、横のはみ出しとエラーが無ければ通します。
デザインの見直しにあたって、10月6日に G4b を足しました（ループの決まりの v1.2）。白紙の評価者、つまり作業の文脈を持たない別の AI が、8つの観点で採点し、変更の前後を比べて退行を探します。合格は「前回より下がる観点が無く、新しい重大な問題が0」です。評価者は数字を測って採点し、サイトのファイルには手を入れません。足した理由は、記録に「作者が自分の画面を採点しないため」とあります。イエタの改善ループのゲート設計についての制作ノートにも G4b が出てきますが、番号が同じだけの別のゲートです。
記事と製品ページは10月8日から23日にかけて順に公開する予定だったため、1回目と2回目の評価は、すべてが出そろう予定だった10月23日の状態を手元で組み立てたサイトで行いました。
1回目の評価は3〜4点
8つの観点の点数は、3回を通して次のように動きました。
| 観点 | 1回目 | 2回目 | 3回目 |
|---|---|---|---|
| 内容とデザインの合い方 | 3 | 4 | 4 |
| 情報の階層と導線 | 3 | 4 | 4 |
| 長文の読みやすさ | 4 | 4 | 4 |
| 一貫性と完成度 | 3 | 4 | 4 |
| 信頼感 | 4 | 5 | 5 |
| スマホ | 3 | 4 | 4 |
| アクセシビリティ | 3 | 4 | 4 |
| 表示の速さと技術面 | 3 | 4 | 4 |
1回目の評価は、問題を「見た目の調子ではなく、構成と細部」にあるとしました。いちばん重い指摘は、トップがゲーム中心だった時期の構成のままだったことです。最初の画面には自作のゲーム「社畜サバイバー」しか無く、主力の英会話アプリ「イエタ」は PC で上から1,721px、制作ノートは2,497px の位置にありました。ほかにも、10〜11px の小さな文字が多いこと、トップの最初の画面でいちばん大きく描かれる画像（LCP）が1,019KB の PNG だったことなど、18件の指摘が並びました。
方向は案Aを選んだ
評価者は、方向性の案を3つ出しました。
| 案 | 中身 | 手間の見積もり | 評価者の見たリスク |
|---|---|---|---|
| A 制作ノートの紙面 | 紙・墨・赤茶・明朝の調子を保ち、構成と細部を直す | 2〜3日 | 小さい。URL も部品も変えない |
| B ラボノート | 白い背景とゴシックで、技術の記録帳に寄せる | 4〜6日 | 今の個性が消える。壊す範囲が広い |
| C プロダクトスタジオ | 製品ごとの色とアイコンで、製品カタログに寄せる | 4〜5日と素材 | 広告の着地ページのように見え、読むためのサイトの印象が弱まる |
評価者が推した案Aで進めました。推した理由は4つです。紙と明朝の調子は長文の記録に合い、減点の大半は色や書体の系統を変えずに直せること。AdSense の審査で効くのは「読むためのサイト」としての完成度だ、という見立て。再申請の前に、作り直しで壊す範囲を広げたくないこと。B の「数字を目立たせる」と C の「製品を対等に並べる」は、A の中でも取り込めること。
トップは「紹介 → 製品4本 → 新しいノート6本 → 運営者 → 過去の制作」の順に組み替えました。文字の下限は12px、本文は16px で1行42字ほどにし、画像は WebP（PNG より軽くしやすい画像の形式）に変えています。
見出しから Georgia を外した
見出しの書体は、欧文の Georgia を和文の游明朝より先に指定していたため、見出しの数字と英字は Georgia で表示されていました。Georgia の数字は、オールドスタイル数字と呼ばれる形です。0・1・2 は小文字と同じ高さしかなく、ほかの数字は上や下にはみ出します。評価者は、「1回0.01円台」の「0.01」が「o.o1」のように見えると指摘しました。
制作ノートの見出しには、「122件のテスト」や「$0.05」のように数字がよく入ります。実測した数字を読んでもらうサイトで、見出しの数字を読み違えさせるのは困ります。そこで Georgia は見出しから外し、ロゴにだけ残しました。
--serif: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
--logo: Georgia, "Yu Mincho", serif;2回目の評価で見つかった4つの新しい問題
2回目は別の評価者が採点し直し、点数は4〜5点になりました。1回目の18件は、解消12件、一部6件、未対応0件です。トップの製品の枠（タイル）のうちイエタのものは、PC で上から678px の位置に上がり、トップを開いたときの転送量は1,372KB から128KB になりました。
一方で、変更から新しい問題が4つ生まれていました。N1〜N3 は1回目の指摘への対応が別の所を悪くした退行で、N4 は新しく作ったタイルの問題です。
| 起きたこと | 原因 | 直し方 | |
|---|---|---|---|
| N1 | スマホで制作ノート1本のページ全体が横に103px 揺れる | 表を横スクロールにしたら、表の中の読み上げ用の文字が枠の外に出た | 表の枠に position: relative |
| N2 | 画像が読み込み前に場所を取らず、製品ページで CLS 0.526 | 縦長の画像向けの指定が、すべての画像に当たった | 縦長の画像にだけ class を付ける |
| N3 | 幅360px 以下で「引っ越し手続きチェック」の見出しがはみ出す | 見出しを語の途中で折らない設定で、長い製品名が折れなくなった | 見出しの字を画面の幅に合わせて縮める |
| N4 | ボタンが「…チェックを開 / く」と語の途中で折れる | 長い製品名をボタンの文字に入れた | 見た目は「開く ↗」、製品名は読み上げ用に |
N1 の読み上げ用の文字は、画面には出さず、スクリーンリーダー（画面を読み上げるソフト）にだけ「（別タブで開きます）」と伝える文字です。この文字は位置の基準を表の枠ではなくページ全体に取っていて、スクロールの枠に収まっていませんでした。1回目の指摘で表を横スクロールにしたとき、表の右端のリンクが画面の外に出て、ページの幅を押し広げたのです。
N2 の CLS は、読み込み中に画面がずれる量です。評価者によると、Google は0.25を超えると「悪い」としています。評価者は画像が届くのを300ミリ秒遅らせて測り、イエタの製品ページで0.526（幅1280px）と0.393（幅390px）が出ました。縦長の画像を細く出すために書いた img[height] は、「縦長の画像」ではなく「高さの属性を持つすべての画像」に当たります。その指定で幅を auto にしていたため、読み込む前の画像は枠線だけの大きさになっていました。今は、ページを生成するときに縦長の画像にだけ class を付け、高さを先に決めています。
.prose-figure img { width: 100%; }
.prose-figure img.portrait { height: 640px; width: auto; max-width: 100%; object-fit: contain; margin-inline: auto; }製品ページの画面の一覧も同じ形で、縦長の画像の高さを560px に決めています。
4つとも、作者の G4（14ページを PC と390px で撮影）は通っていました。N1 が起きたノートは、その14ページに入っていません。N3 は360px 以下でしか起きず、N2 は、手元では画像がすぐ届くため、遅らせて測らないと見えません。N4 は作者自身の撮影に写っていましたが、語の途中の折れは合格の条件に入っていませんでした。
直した本人は、直した箇所ばかり見てしまいます。AI に作業を任せるようになっても、作る役と確かめる役は分けておくほうがいいと感じています。
3回目は検証だけを頼んだ
N1〜N4 を直したあと、作者も10月23日の状態の手元のサイトで、12ページ×7つの幅（320〜1280px）を機械で確かめました。横のはみ出しとボタンの折れは0、画像を遅らせたときの CLS は0〜0.022 です。
そのうえで、作者とも2回目の評価者とも別の検証者に渡しました。検証の日の手元のサイトは、その日に公開していた状態（製品2本、ノート2本）で組み立てたものだったため、長い製品名はブラウザーの中だけでページに入れて、N3 と N4 を再現しました。N1 も、外部リンクを8つ含む表を差し込んで確かめています。結果は G4b の通過です。
- 15の URL × 7つの幅の105通りで、横のはみ出し、12px 未満の文字、コンソールのエラーがすべて0（存在しない URL の404を除く）
- 画像を300ミリ秒遅らせたときの CLS は、測った15通りすべてで0
- ゲームのページの転送量は、2回目の1,765KB から306KB（幅1280px で最後までスクロールしたとき）。1回目にトップの LCP だったゲーム画面の PNG（1,019KB）は、WebP で106KB、スマホ用の幅640px 版で34KB
NG は1件でした。表の日付の列を折らない指定が、この指定のきっかけになった表（イエタのゲート設計のノートの、9列の表）に効いていなかったのです。「10-03〜04」という範囲のセルが日付を見分ける正規表現に当たらず、列ごと対象から外れていました。ほかに、縦長の画像1枚だけは読み込む前に場所を取っておらず、画像が画面に入ってから届く条件では CLS 0.44（幅390px）が出ました。どちらも検証のあとで直しています。本番には、公開前の検査とテスト13件が通ったうえで、運営者の私が手元から反映しました。
これから
点数は上がりましたが、これは評価者の判断で、読む人や審査する人の反応ではありません。再申請はまだで、11月中旬以降の見込みです。このループの本当の答えになるのは、AdSense の再審査の結果と、Search Console（Google 検索での登録状況を見る道具）の索引の状況です。
外部リンクの印「↗」が細く見える点と、ノート一覧の説明文をドラッグで選べない点は見送りました。↗ は全ページ共通の記号で、変えると全体の調子が変わるため、説明文は、行のどこを押しても記事へ移る作りと引き換えのためです。これからも、構成や見た目を大きく変えるときは、G4b を通してから出します。