ビジュアルQAチェックリスト：リリース前に確認すべきこと

ビジュアルQAなしでリリースするのはギャンブルです。機能テストは機能が動作することを確認しますが、インターフェースが正しく表示されることは確認しません。ボタンはすべての結合テストに合格しても、モバイルSafariでフォームフィールドと重なる可能性があります。見出しは英語では完璧にレンダリングされても、ドイツ語に翻訳するとコンテナからはみ出す可能性があります。

このチェックリストは、すべてのWebチームがリリース前に実行すべきビジュアル検証をカバーしています。

ビジュアルチェックリストが重要な理由

ビジュアルバグはユーザーに即座に見えるため、特にダメージが大きいです。ずれた要素や壊れたレイアウトは、遅いAPIレスポンスとは異なる方法で信頼を損ないます。しかしビジュアルQAはリリースプロセスの中で最もアドホックな部分であることが多いです。

文書化されたチェックリストはビジュアルQAを再現可能かつ測定可能にします。

レイアウトとスペーシング

ページ構造が正常 — ヘッダー、メインコンテンツ、サイドバー、フッターが正しい順序と期待されるスペーシングでレンダリング。
GridとFlexboxレイアウトが正しく折り返される — デスクトップ、タブレット、モバイルの幅で検証。
セクション間のスペーシングが一貫している — マージンとパディングがデザイン仕様に一致。
重なる要素がない — ツールチップ、ドロップダウン、モーダルがコンテンツと重ならない。
固定・粘着要素が正しく動作する — 固定ヘッダーとフッターがスクロール中にコンテンツを隠さない。

ブレークポイント間の自動レイアウト検証については、クロスブラウザテストワークフローのガイドをご覧ください。

タイポグラフィとコンテンツ

見出しが正しい階層に従う — H1、H2、H3のサイズとウェイトがデザインシステムに一致。
本文テキストが読みやすい — フォントサイズ、行の高さ、コントラストがアクセシビリティ基準を満たす。
テキストの切り詰めやオーバーフローがない — 長い見出し、翻訳文字列、動的コンテンツがコンテナ内に収まる。
リンクが視覚的に区別できる — 下線、色、その他のスタイリングでリンクが識別可能。
コードブロックとプリフォーマットテキストが正しくレンダリングされる。
リストが正しいマーカーでレンダリングされる。

レスポンシブ動作

モバイルレイアウト（375px幅） — ナビゲーションがハンバーガーに折りたたまれ、画像がスケールし、コンテンツが垂直にスタック。
タブレットレイアウト（768px幅） — ほとんどのレスポンシブバグが隠れる場所。2カラムレイアウトがきれいに遷移すること。
デスクトップレイアウト（1440px幅） — マルチカラムレイアウトが正しく表示。
ワイドデスクトップ（1920px以上） — コンテンツがウルトラワイド画面全体に伸びないこと。
向きの変更 — ポートレートとランドスケープの切り替えでレイアウトが壊れないこと。
ズーム動作 — ブラウザズーム150%、200%で重なりや隠れたコンテンツがないこと。

クロスブラウザレンダリング

Chromeデスクトップ — ベースラインレンダリング。
Firefoxデスクトップ — Gecko固有のflexbox gap、フォントメトリクスの問題をキャッチ。
Safariデスクトップ — WebKit固有のbackdrop-filter、position-sticky、flex-wrapの動作。
Safariモバイル（iOS） — すべてのiOSブラウザはWebKitを使用。ビューポート処理が異なる。
Chromeモバイル（Android） — タッチターゲット、ビューポートmeta動作を検証。

すべてのブラウザですべてのページをチェックする必要はありません。トラフィックデータで優先順位を付けましょう。

インタラクティブ状態

ボタン — デフォルト、ホバー、フォーカス、アクティブ、無効、ローディング状態が正しくレンダリング。
フォーム入力 — 空、フォーカス、入力済み、エラー、無効状態。エラーメッセージが正しい位置に表示されること。
ナビゲーション — アクティブページインジケーター、リンクのホバーエフェクト、ドロップダウンメニュー。
モーダルとダイアログ — スムーズに開き、すべての画面サイズで正しくセンタリング。
ツールチップとポップオーバー — トリガーに対して正しい位置に表示。
ローディング状態 — スケルトンスクリーン、スピナー、プログレスバーが正しく表示。

画像とメディア

画像が読み込まれ表示される — 壊れた画像アイコンがない。すべての画像に適切なalt属性。
画像が正しいサイズ — 歪みや予期しないクロッピングがない。
レスポンシブ画像が適切なサイズを配信 — モバイルデバイスがデスクトップサイズの画像をダウンロードしない。
動画埋め込みが機能する — 再生ボタンが表示され、アスペクト比が正しい。
アイコンが正しくレンダリングされる — SVGアイコンが正しいサイズと色で表示。

アクセシビリティと色

色のコントラストがWCAG AAを満たす — テキストとインタラクティブ要素が十分なコントラストを持つ。
フォーカスインジケーターが見える — キーボードナビゲーションで明確なフォーカスリングが表示。
ダークモードが正しくレンダリングされる — 該当する場合、両テーマですべてのコンポーネントが読みやすいことを検証。
色だけで情報を伝えていない — エラー状態やステータスインジケーターが色に加えてアイコンやテキストを使用。

パフォーマンス関連のビジュアルチェック

読み込み中のレイアウトシフトがない — CLS（Cumulative Layout Shift）として測定。
Webフォントがペイント前に読み込まれる — FOUT（Flash of Unstyled Text）やFOIT（Flash of Invisible Text）がない。
ファーストビューのコンテンツが素早くレンダリングされる — 良好な接続で1〜2秒以内。

リリース前検証ワークフロー

ステージングにデプロイ — 本番をできるだけ忠実に再現した環境で検証。
自動スクリーンショットテストを実行 — ブラウザとデバイスマトリクスでベースラインをキャプチャ。
自動差分をレビュー — 各差分を意図的、リグレッション、またはノイズに分類。
手動スポットチェックを実行 — インタラクティブ状態、アニメーション、エッジケースを手動検証。
結果を文書化 — どのチェックが合格し、どれが失敗し、何が修正されたかを記録。
承認またはブロック — すべてのチェックが合格すればリリース承認。重要なビジュアルバグが残っていればブロック。

チームへのチェックリストの適応

このチェックリストは意図的に包括的です。チームに合わせてカスタマイズしましょう：

スタック — ダークモードをサポートしていなければそのチェックを削除。デザインシステムを使用していればコンポーネントレベルのチェックを追加。
オーディエンス — トラフィックの95%がChromeなら、クロスブラウザスコープを縮小しモバイルテストを増やす。
リスク許容度 — 収益に重要なアプリケーションにはより厳格なチェック。社内ツールにはより軽いプロセス。

重要なのは一貫性です。毎リリース実行される短いチェックリストは、期限のプレッシャーでスキップされる包括的なものより価値があります。

ScanUで始める

自動スクリーンショットテストは、このチェックリストの最も時間のかかる部分（レイアウト検証、クロスブラウザレンダリング、レスポンシブブレークポイントチェック）を処理します。プランオプションは料金、プラットフォームは機能、よくある質問はFAQをご覧ください。