2,514行のコード変更を全行レビューさせたら、指摘27件——実物
指摘27件(本物21・好み6)
後日の人手修正と一致2件
所要約40分
人の稼働指示のみ
AIへの指示条件（要旨）自サイトの最大コミット(7ファイル・+2,514行)をレビュー。レビューのみ・ファイル変更禁止・「本物の問題」と「好み」を区別して優先度付け
対象はZuki自身のサイト（Reboot Log v5）の実際のコミットです。指摘はコミット時点(2026-07-10)のコードに対するもので、一部はその後の人手修正で解消済み（各表の「HEAD時点」列参照）。自分のサイトの粗が並びますが、これも原文ママで公開します——「過去の自分の仕事で答え合わせできる」のがこの試し方の価値なので。
AIの出力（原文ママ）
実施日: 2026-07-24 ／ レビュアー: Claude Code（Fable 5）
方法: diff全量の静的レビューのみ（ブラウザ実行なし・リポジトリのファイルは一切変更していない）
1. レビュー対象
- リポジトリ:
product/branding/v5（Reboot Log v5・現本番。※branding直下はgit管理外で、v4/とv5/が各々独立リポジトリだった） - コミット:
df521189e1226d10704e462ad65e36572c1a3d3e（2026-07-10）
「Initial commit: Reboot Log v5 (experimental playful edition)」
- 規模: 7ファイル・+2,514行／-0行（テキスト2,514行＋avatar.jpg 25KB）
| ファイル | 行数 | 内容 |
|---|---|---|
| index.html | 447 | トップページ（日英トグル・横スクロールWORKS・遊び機能） |
| jidoka.html | 335 | B2B LP（AI業務自動化・CSS内蔵） |
| script.js | 351 | 表示演出・言語切替・横スクロール・Canvas・ダイアログ |
| styles.css | 1,319 | デザイン全体 |
| README.md | 60 | ドキュメント |
| .gitignore | 2 | — |
| avatar.jpg | Bin | 25,202 bytes |
- 選定理由: v5全17コミット中で最大（次点は d3dc57b の+318行）。v4は初回コミット1件のみ（+1,696行）で、v5関連優先の指示どおりv5を採用。
- 補足: 初回コミット＝差分がサイト全体なので、「大型変更を丸ごとレビューさせたら何が出るか」の追試としてはむしろ好条件。
2. 総評
コード品質は個人サイトとして高い（セマンティックHTML、skip link、aria-labelledby、prefers-reduced-motion対応、noopener、JS無効時フォールバック等が最初から入っている）。一方で、「公開前に差し替え」前提のプレースホルダーがそのまま本番に出たもの（KINDLE_URL）、モーダルのフォーカストラップ欠如、淡色テキストのWCAG AAコントラスト未達という、実害のある問題が確実に混ざっていた。セキュリティ面は静的サイト＋フォーム無しのため重大リスクなし。
3. 指摘一覧（27件: 高1・中6・低14・好み6）
「本物」= 放置するとユーザー・ビジネス・アクセシビリティに実害が出るもの。「好み」= 動作は正しく、設計趣味・将来の保守性の話。
「HEAD時点」= 2026-07-23時点の最新コミット dcd3705 で残っているかどうか。
優先度: 高（1件）
| # | 分類 | 場所 | 指摘 | 判定 | HEAD時点 |
|---|---|---|---|---|---|
| 1 | リンク切れ | index.html:305 | 書籍CTA「Amazonで見る」が href="KINDLE_URL" のまま。相対URLとして解決され /KINDLE_URL → 404。コメント(L42)に「未確定のまま」と明記して出荷しており、公開時点で確実に踏める壊れリンク | 本物 | 修正済み（625332f・7/15）。本番露出5日間 |
優先度: 中（6件）
| # | 分類 | 場所 | 指摘 | 判定 | HEAD時点 |
|---|---|---|---|---|---|
| 2 | アクセシビリティ | styles.css:12ほか全域＋jidoka.html:13 | 淡墨 --usuzumi #7d766c を小サイズ本文に多用（サイト名和文0.62rem・セクションラベル・料金注記・フッター等）。和紙#f6f4eeとのコントラスト4.08:1（washi-raised上で4.30:1）でWCAG AA(4.5:1)未達。実測計算済み | 本物 | 残存 |
| 3 | アクセシビリティ | script.js:315-351／index.html:430-443 | 再起動ダイアログ（role=dialog, aria-modal=true）にフォーカストラップが無い。Tabで背景コンテンツへ抜ける。背景のinert化・aria-hidden化も無し。Esc/背景クリック/フォーカス復帰は実装済みなので惜しい | 本物 | 残存 |
| 4 | SEO/マーケ | index.html/jidoka.html head | OGP・twitter:cardが無い。SNS発信が主導線のブランディングサイトでシェアプレビューが出ない（コミット時点はREADME上「ローカル実験版」なので条件付き指摘だが、実際は公開後もそのまま運用された） | 本物 | 修正済み（dcd3705・7/23）。公開後13日間欠落 |
| 5 | UX/ビジネス | jidoka.html:324／index.html経由導線 | LPの唯一のコンバージョンが mailto:。メールクライアント未設定環境（会社PC・Webメール派）ではクリックが無反応＝リード取りこぼし。「Googleフォーム作成後に差し替え」とコメント済みの既知課題だが、LP公開とフォームの順序が逆 | 本物 | 残存（メールCTAのまま） |
| 6 | パフォーマンス | script.js:199-231＋styles.css:948-956 | インクエフェクトの requestAnimationFrame ループが描画対象ゼロでも毎フレーム永久実行（全画面clearRect）。canvasはposition:fixed＋mix-blend-mode:multiplyなので常時合成コストも上乗せ。アイドル時のCPU/バッテリー浪費。trail/ripples空のときループを止めれば解決 | 本物 | 残存 |
| 7 | アクセシビリティ | script.js:69-146＋styles.css:484-506 | ピン留め横スクロール中のカードへTabすると、overflow:hidden の .hscroll-pin がフォーカス時に自動スクロールされ得るのに、位置制御はtransformで行っているため二重オフセットの恐れ（フォーカスリング不可視／レイアウトずれ）。scrolljack系の定番落とし穴。要実機確認 | 本物（要検証） | 残存 |
優先度: 低（14件）
| # | 分類 | 場所 | 指摘 | 判定 | HEAD時点 |
|---|---|---|---|---|---|
| 8 | 品質 | 両HTML head | favicon指定なし → /favicon.ico 404＋ブラウザタブが無地。ブランディングサイトとしては勿体ない | 本物 | 残存 |
| 9 | CSSバグ | styles.css:1216＆1220 | .hero .hero-side { animation-delay: 1s }（詳細度0,2,0）が .js .load-reveal:nth-child(2)（0,3,0）に負けて永久に適用されない。縦書き署名の遅延は意図の1sではなく0.25sで動作。実害は演出ニュアンスのみだが正真正銘の特異度バグ | 本物 | 残存 |
| 10 | JSバグ | script.js:330-334 | フリッカー中(900ms以内)に閉じると setTimeout が未クリアで発火し、閉じたオーバーレイに phase-card が残留 → 次回オープン時にフリッカーとカードが同時表示される。closeBtn.focus()も遅延発火（visibility:hiddenのため実害なし）。クローズ時にtimeoutをclearすべき | 本物 | 残存 |
| 11 | 表示 | index.html:106-115＋styles.css:419 | マーキーの translateX(-50%) ループはflex gap(3rem×7個)の関係で半分の位置が一致せず、26秒ごとに約1.5rem(24px)の継ぎ目ジャンプが出る計算 | 本物 | 残存 |
| 12 | ドキュメント | README.md:41-52, 28-36 | 同一コミット内でREADMEが既に古い: NOTE_URL/X_URLは置換済みなのに「要置換」表に残存、SUBSTACK_URLは本文に存在しない、ファイル構成にjidoka.html/avatar.jpgが無い、「公開前提ではなく」の記述のまま本番化 | 本物 | 残存 |
| 13 | 一貫性 | styles.css:2 | ファイルヘッダが「Reboot Log v4」のまま（v5リポジトリ） | 本物 | 残存 |
| 14 | アクセシビリティ | jidoka.html:19 | scroll-behavior: smooth に prefers-reduced-motion ガードなし（index側のstyles.cssにはある。ページ間で品質差） | 本物 | 残存 |
| 15 | パフォーマンス | jidoka.html:10 | Google FontsのCSSを同期読み込み（レンダーブロッキング）。index.htmlはmedia=printトリックで非同期化済みなのにLP側が未適用。display=swapはあるため影響は初回1RTT程度 | 本物 | 残存 |
| 16 | アクセシビリティ | index.html:415 | フッター nav aria-label="外部リンク" の先頭が内部リンク（#request ご依頼）。ラベルと中身が不一致 | 本物 | 残存 |
| 17 | 可読性 | styles.css:143 | サイト名和文が0.62rem≒9.9px（＋#2のコントラスト未達と重複適用）。10px未満は流石に小さい | 本物 | 残存 |
| 18 | 地雷コメント | index.html:417 | 「Substack開設後に復活」のコメントアウトがnote URLのままラベルだけSubstack。将来そのまま復活させると誤リンクを出荷する仕込みになっている | 本物 | 解消（Substack対応済みの導線に変更） |
| 19 | アクセシビリティ | script.js:277 | はんこの aria-label="はんこを押す" がEN切替後も日本語のまま（表示テキストは日英対応済み） | 本物 | 残存 |
| 20 | レスポンシブ | jidoka.html:75-82 | 料金3カラムが721〜768pxで1枚あたり約220pxまで潰れる（.plansのブレイクポイントが720px、コンテナ768px想定のため間の帯が窮屈）。文字折返しが不格好になる帯域 | 本物（軽微） | 残存 |
| 21 | セキュリティ/スパム | jidoka.html:324 | メールアドレスがhrefに平文露出（収集ボット対象）。フォーム移行予定なら許容範囲 | 本物（許容済み） | 残存 |
好みの問題（6件・動作は正しい）
| # | 分類 | 場所 | 指摘 |
|---|---|---|---|
| 22 | 保守性 | jidoka.html:11-84 | デザイントークン（--washi等8色）がstyles.cssとjidoka内蔵styleに二重定義。現状は値一致だが将来ドリフトする構造 |
| 23 | 保守性/CSP | index.html:28,73,304ほか | インラインscript・style属性・onerror/onloadハンドラ。将来strict CSPを敷く際の障害。静的サイトの現状では実害なし |
| 24 | プライバシー | 両HTML | Google Fonts直読み（訪問者IPがGoogleへ）。気にするならセルフホスト。日本の個人サイトでは好みの範疇 |
| 25 | セマンティクス | jidoka.html:300-315 | WHO節だけ見出しがh3（他節はh2）。h2→h3降下なので違反ではないが階層設計として不揃い |
| 26 | 一貫性 | index.html:73 vs jidoka.html:304 | 同じアバターがindexではalt=""（装飾扱い）、jidokaではalt="Zukiのプロフィール画像"。どちらも defensible だが方針は揃えたい |
| 27 | 互換性 | script.js:136 | MediaQueryList.addEventListener はSafari 14未満非対応（フォールバックなしでhscroll切替が死ぬだけ・実害ほぼゼロ） |
4. 「本物」トップ3
- #1 KINDLE_URL リンク切れ（高） — 書籍セクションの唯一のCTAが404。しかも実際に本番で5日間露出してから人手で修正された。AIレビューをコミット時に挟んでいれば出荷前に止まった、この実証の看板事例。
- #3 モーダルのフォーカストラップ欠如（中） — aria-modal=trueを名乗りながらTabで背景に抜ける。Esc対応やフォーカス復帰まで作り込んであるだけに、あと一歩が抜けている典型。HEADでも未修正。
- #2 淡墨テキストのコントラスト4.08:1（中） — サイト全域の小サイズ補助テキストが軒並みWCAG AA未達（実測計算値）。デザインの根幹色なので人手レビューでは「雰囲気」で素通りしやすく、機械的チェックが効く種類の問題。HEADでも未修正。
5. 追試としての学び（教材メモ）
- AIレビューの指摘が後日、人手で実際に修正されている: #1は5日後（625332f）、#4は13日後（dcd3705）に修正された。つまりこのレビューをコミット当日に回していれば、少なくとも2件は先回りできた——「大型diffのAIレビューは空振りしない」ことの直接証拠になる。
- 一方で6件の中優先度が今も残存（#2,3,5,6,7）。レビューの価値は「過去の答え合わせ」より「今すぐ直せるTODOリストが出てくる」ことにある。
- 2,514行規模でも、リンク切れ・コントラスト実測・CSS特異度・タイマー競合・マーキーの継ぎ目計算まで一度に見られるのがAIレビューの強み。逆に#7（フォーカスとscrolljackの干渉）のような実機依存の指摘は「要検証」止まりになる——静的レビューの限界も同時に確認できた。
- 指摘27件の内訳が「本物21・好み6」。好みを混ぜて水増ししない選別（判定列）を最初から要求するのがコツ。
6. 所要の体感
- 履歴調査・対象選定（v4/v5両リポジトリのlog --stat確認）: 約3分
- diff精読（6テキストファイル2,514行を全行、index→jidoka→script→styles→README の順）: 約20〜25分相当。最重量はstyles.css 1,319行
- 裏取り（HEADとの突合せgrep、KINDLE_URL修正コミットの特定、コントラスト比の実計算）: 約5分
- 本レポート執筆: 約10分
- 合計: 約40分相当（人間が同じ精度でやると、コントラスト計算と特異度検証込みで半日仕事の感覚）