DOCUMENT · 6.0 KB
docs/browser-qa-2026-08-30.md
Workspace snapshot · 08/31 23:51
Browser QA — 2026-08-30
対象: output/real-e2e/index.html（17セクション）
実行環境: Headless Google Chrome / Playwright / ローカルファイル
判定日: 2026-08-30
結論
生成器を修正して再生成した最終出力は、375 / 390 / 414 / 1280px の全幅で scrollWidth === innerWidth となった。保存後のフルページ画像と全68枚のセクション画像を開き直して目視し、文字の見切れ・重なり・意図しないはみ出し・画像比率の崩れがないことを確認した。
SPの比較表はページ全体を横に広げず、表コンテナ内だけを横スクロールできる。SPナビはネイティブの details / summary で開閉でき、キーボードで開く・最初のリンクへフォーカスする・任意セクションへ移動する操作を確認した。
修正前の確認
修正前は以下を確認した。
- A17: 375 / 390 / 414px でデスクトップナビが非表示になり、代替ナビが存在しなかった。
- A18: 1280pxでFV左カラムとフォームの上端が一致しなかった。
- A19: FV eyebrowに連番が付き、サービス名と重複した。
- A9残:
og:image/twitter:imageが存在しなかった。 - A20: 画像がないセクションにも画像重ね用の負のmarginが適用され、カードが導入文へ重なるケースがあった。
修正前画像は output/real-e2e/evidence/before/ に保存した。ただし当初のフルページ撮影は、撮影器による固定要素の重複合成が含まれるため、視覚的な「問題なし」判定には使用していない。修正前の問題判定は個別表示とDOM計測に基づく。
修正後の全ページ計測
| viewport | innerWidth | scrollWidth | 判定 | FV左上端 | FVフォーム上端 | 画像読込失敗 |
|---|---|---|---|---|---|---|
| 375 | 375 | 375 | OK | 129 | 733（縦積み） | 0 |
| 390 | 390 | 390 | OK | 129 | 733（縦積み） | 0 |
| 414 | 414 | 414 | OK | 129 | 733（縦積み） | 0 |
| 1280 | 1280 | 1280 | OK | 205 | 205 | 0 |
比較表の計測値:
| viewport | コンテナ幅 | table幅 | overflow-x | 判定 |
|---|---|---|---|---|
| 375 | 343 | 1506 | auto | OK |
| 390 | 358 | 1506 | auto | OK |
| 414 | 382 | 1506 | auto | OK |
| 1280 | 1160 | 1160 | auto | OK |
17セクション × 4ビューポート判定
OK は、最終再生成後に保存された該当セクション画像を開いて目視し、DOM計測の横あふれ結果とも一致したものだけに付けた。
| # | section id | variant | 375 | 390 | 414 | 1280 | 症状 |
|---|---|---|---|---|---|---|---|
| 1 | hero | hero-form | OK | OK | OK | OK | SPは縦積み。PCはコピーとフォームの天端一致。画像比率正常 |
| 2 | trust-first | trust-metric-band | OK | OK | OK | OK | 修正前のカード重なりを解消 |
| 3 | problem-bottleneck | pain-cards | OK | OK | OK | OK | 1カラム化・画像比率とも正常 |
| 4 | risk-loop | risk-timeline | OK | OK | OK | OK | SPで画像とタイムラインを1カラム化 |
| 5 | mechanism-two-step | step-flow | OK | OK | OK | OK | SPでステップを1カラム化 |
| 6 | mechanism-before-after | before-after | OK | OK | OK | OK | SPでBEFORE/AFTERを1カラム化 |
| 7 | usecase-direction | usecase-story | OK | OK | OK | OK | SPで画像とストーリーを1カラム化 |
| 8 | usecase-production | usecase-grid | OK | OK | OK | OK | 修正前の導入文とカードの重なりを解消。SPは1カラム |
| 9 | differentiation | reason-stack | OK | OK | OK | OK | SPで画像と理由リストを1カラム化 |
| 10 | comparison-alternatives | comparison-table | OK | OK | OK | OK | SPはコンテナ内横スクロール。文書全体の横あふれなし |
| 11 | process | process-timeline | OK | OK | OK | OK | SPでタイムラインと画像を1カラム化 |
| 12 | proof-screens | case-study-featured | OK | OK | OK | OK | SPで事例情報を1カラム化 |
| 13 | pricing-nextstep | estimate-explainer | OK | OK | OK | OK | SPで料金カードを1カラム化 |
| 14 | fit | segment-selector | OK | OK | OK | OK | 修正前の導入文とカードの重なりを解消。SPは1カラム |
| 15 | faq | faq-list | OK | OK | OK | OK | 質問行の見切れ・重なりなし |
| 16 | message | editorial-message | OK | OK | OK | OK | SPでメッセージを1カラム化 |
| 17 | contact | form-split | OK | OK | OK | OK | SPでフォームを1カラム化。入力欄の横あふれなし |
A17 / A18 / A19 / A9残の完了判定
- A17: OK。375 / 390 / 414pxで「目次」から4つのセクションリンクを表示する。390pxで
Enter開閉、Tabフォーカス、2操作以内のページ内遷移を自動確認した。 - A18: OK。1280pxでFVコピーとフォームの上端がともに205px、1440pxでともに215pxとなることを実測した。
- A19: OK。heroの連番を削除し、重複するサービス名の代わりに対象読者「従業員5〜50名の制作会社へ」を表示した。
- A9残: OK。
og:image/twitter:imageを絶対URLで出力した。bundle生成時にpublicUrlを差し込める。 - A20: OK。画像が存在する場合だけ重ねレイアウトを生成するようにし、画像なしセクションの負のmargin適用を止めた。
証跡
- 最終フルページ:
output/real-e2e/evidence/after/full-375.png,full-390.png,full-414.png,full-1280.png - 最終セクション別:
output/real-e2e/evidence/after/sections/{width}/（17枚 × 4幅） - DOM計測:
output/real-e2e/evidence/after/metrics-chromium.json - SPナビ操作:
output/real-e2e/evidence/after/mobile-nav-interaction.json - 修正前:
output/real-e2e/evidence/before/
再現手順
npm test
node scripts/rebuild-real-e2e.mjs
node scripts/browser-qa-real-e2e.mjs
node scripts/check-mobile-nav.mjs
npm run build
output/real-e2e/ は生成器から再生成しており、成果物を手編集していない。