設計したとおりの UI を出荷する — CI をすり抜けたそれではなく

機能テストは一つの問いによく答えてくれます。「クリックした とき、ボタンは正しいことを行うか?」 しかし、クリックする 前に起きること — ボタンの色が正しいか、サイズが正しいか、 位置が正しいか、360 ピクセルの画面で読めるか、直近の CSS リファクタ後にそもそも見えているのか — については沈黙し ます。リリース日インシデントの大半は、このすき間に住んで います。

私たちが目にする実際のリグレッション — そして ScanU が 捕捉するために設計されているもの — は、いくつかの予測 可能なトリガーの周りに集中する傾向があります。

• CSS のリファクタリングが、ある一つのブレークポイントで flex コンテナの gap を潰す。デスクトップでは レイアウトは同じに見えるが、768 ピクセルのタブレットでは 2 枚のカードが重なり始める。
• デザイントークンの更新で、すべての spacing 値が 2 ピクセル 動く。どこも落ちないが、緻密に整えられていた数十の コンポジションが、静かにバランスを失う。
• サードパーティウィジェット — Cookie バナー、ライブ チャット、広告スロット — が静かなアップデートを出し、 first paint をずらす。コードを 1 行も触っていないのに、 Core Web Vitals が一晩で悪化する。
• フレームワークのアップグレードがデフォルトの font-feature スタックを差し替える。ロングフォームの ページで本文が半行分リフローし、ヒーローの CTA が突如 ファーストビューの下に沈む。
• フィーチャーフラグのロールアウトが DOM を並べ替える。 Safari ではモーダルの stacking context が変わり、閉じる ボタンがクリックできなくなる。Chrome ではすべて正常に 見える。

どれもアサーションを赤くしません。しかしすべてがユーザー 体験を損ねます。ScanU の仕事は、この二番目のタイプの 破損を、赤いユニットテストと同じくらい見やすく、レビュー しやすく、ブロックしやすいものに変えることです。diff が pull request に現れれば、デザイナーは、レビュワーが関数 シグネチャに口を出すのと同じ要領で意見を返せます — マージ の前に、そして本番に到達する前に、です。

この転換 — 「ステージングで誰かが気づくのを祈る」から 「ビジュアルの変更をコードの変更と同じようにレビューする」 への移行 — が、現代のリリースパイプラインにおけるビジュアル リグレッションテストツールの中心的な価値です。

各実行は 3 段階のパイプラインです。まず ScanU は各ブラウザ エンジンでテスト対象のページまたはコンポーネントへ遷移し、 設定された一式の readiness シグナル — フォント読み込み 完了、画像のデコード完了、ネットワークの静止、data-ready 属性、あるいはカスタムの JavaScript プローブ — を待機し、すべての CSS アニメーションを最終 フレームにピン留めします。次に、同じ実行のなかで、設定 されたそれぞれのビューポートでページをキャプチャし、長い ページには scroll-stitching を使って可視領域だけでなく 完全なアーティファクトを取得します。最後にそのキャプチャ を承認済みベースラインと比較し、(ブラウザ、ビューポート) のペアごとに結果を出します:一致、許容範囲内、または 有意に異なる、のいずれかです。

比較そのものは素朴なピクセル diff ではありません。ScanU は 知覚的モデルを用い、アンチエイリアス、サブピクセル レンダリング、色空間のわずかな揺らぎを理解します。これに より、WebKit のカーニングの癖がバグと誤認されることは ありません。読み込みごとに変わることが分かっている領域 — ライブデータ、相対時刻、ランダム化コンテンツ、カルーセル — には明示的なマスクを設定でき、それらの領域は diff に ノイズをまったく足しません。

本物の変化が現れたとき、プラットフォームは 3 枚の同期 されたペインを提示します:ベースライン、現在のキャプチャ、 そして動いた箇所を正確に示す diff オーバーレイです。各 変更にはレビュー可能な判断 — 承認、却下、ベースラインの 更新 — が一つずつ記録され、その判断はプロジェクト履歴の 一部になります。暗黙のドリフトも、自動承認もありません。 ベースラインが動くのは、権限のある人間が「動かす」と 明言したときだけです。

同じパイプラインは 3 つのエントリポイントから駆動できます: ライブ URL(本番、ステージング、PR プレビュー)に対して、 静的サイトあるいはビルドされたアセットバンドルに対して、 Storybook スタイルのサンドボックス内のコンポーネント プレビューに対して。多くのチームは、一つ目をリリース ゲートとして、二つ目をデプロイ成果物のために、三つ目を デザインシステム作業のために使います — いずれも同一の ベースライン保管庫に注ぎ込みます。

チームの形がどうであれ、ScanU は通常、次の 5 つのうちの いずれかの理由で採用されます:ビジュアルリグレッションが 捕まえられたはずの直近の本番インシデント、人手での監査が 不可能なデザインシステム移行、「テストがグリーン」以上の リリースゲートを要する CI/CD ワークフロー、ビフォー/ アフターの証跡を必要とする顧客向け納品物、あるいは EU ホストのテストツールを選好するコンプライアンス姿勢です。 これら 5 つすべての背後には共通の CI/CD 連携 があり、トリガーが PR でもマージでも夜間スケジュールでも、 同じパイプラインが仕事をします。

ScanU は欧州連合内で構築され、ホスティングされ、保管と 処理もすべて EU で運用されるインフラ上で行われます。 データ所在の義務を負うチーム — 規制産業、公共部門の バイヤー、プライバシーに敏感な B2B 顧客 — にとって、 これは好みではなく調達要件であることが多く、ScanU は 製品能力を犠牲にすることなくこの要件を満たすよう設計 されています。

この姿勢から、いくつかの意図的な設計判断が導かれます:

• データ最小化。プラットフォームは スクリーンショットと diff に必要なメタデータだけを 保持します。diff に寄与しないページのソース、Cookie、 リクエストボディは吸い上げません。
• 機微な文脈では既定でマスキング。 個人情報を含むと分かっているフィールド — アカウント ヘッダー、メールアドレス、注文番号 — はマスク領域と して宣言でき、キャプチャ画像は保管先に書き込まれた 時点ですでに編集済みになります。
• アクセス制御。誰が diff を見られるか は一級の権限です。レビュワー、貢献者、外部監査人には 明示的なロールが付与され、すべてのベースライン更新は 承認者とともにログに残ります。
• プロセッサの透明性。サブプロセッサ の一覧は公開され、バージョン管理されています。隠れた アナリティクスパイプラインがあなたのスクリーンショット を見ることはありません。
• あなたが制御する保持期間。ベースライン と diff 成果物は、設定した期間だけ保持されます。古い 実行は静かに積み上がるのではなく、自動的に期限切れに なります。

完全なプライバシーポスチャ — サブプロセッサ、リージョナル ホスティング、DPA、保持期間 — については、 GDPR とデータ取り扱いに関するドキュメント をご覧ください。多くのチームにとって大事なのは短い答え です:あなたのスクリーンショットは EU にとどまり、 プラットフォームはそれが EU にとどまり続けるように 作られています。

ビジュアルバグは、少数の繰り返しパターンに集中します。 一件ずつ見ると些細に見え、どれも赤いテストなしで本番へ 届き得ます。これらはすべて、PR がマージされる前の次回の ScanU 実行で diff として表面化します。

• spacing のずれ。gap ユーティリティが 16 から 20 ピクセルに上がり、均等に呼吸していたカード グリッドが、モバイルで急に詰まって見える。HTML は 変わっていないのに、レイアウトは変わっている。
• デプロイ後のレイアウト破綻。ビルド パイプラインのアップグレードが、backdrop-filter を autoprefix していた PostCSS プラグインを取り落とす。 Safari では、ぼかしが効いていたナビゲーションバーが、 突然不透明になる。
• 詳細度のずれによる CSS リグレッション。 Tailwind クラスの順序変更、新しいユーティリティレイヤー、 あるいはリファクタされたカスケードが、どのルールが勝つ かを微妙に変える — 見出しが数ページで強調色を失う。
• レスポンシブのブレークポイント破綻。 新しいナビゲーション項目がタブレットのブレークポイント で溢れて 2 行目に回り、iPad や大型 Android でヒーロー がファーストビューの下に押し出される。
• ブラウザ間のレンダリング差異。 text-wrap: balance に頼ったデザインが Chrome ではきれいに決まるのに、未出荷のエンジンでは バランスを欠いたまま。クロスブラウザのチェックなしでは、 開発者のマシンでは見えない。
• フォントとタイポグラフィのドリフト。 フォントベンダーがサブセットを入れ替え、ウェイトが 100 だけずれ、マーケティングサイトのすべての段落が 1/4 行だけリフローする。コピーの密度は変わるが、 リポジトリのどの diff もそれを説明しない。
• サードパーティウィジェットのリグレッション。 同意バナーのベンダーが出したアップデートで、ダーク テーマで「同意」ボタンが見えなくなる。コンバージョン 率は落ちるのに、あなたのテストはグリーンのまま。
• デザインシステムのドリフト。ボタン コンポーネントがフォーカスリングのオフセットを変える。 依存する利用者は 20 人、影響を受けるページは 20。 20 ページを人手でレビューする人はいません。
• 本番に逃げるビジュアルバグ。以上の どれもが、その週たまたま誰も開かないルートやブレーク ポイント、チームで日常的には誰も使わないブラウザを 掛け合わせた先で待っています。

機能概要 では、検出プリミティブ — 知覚的許容、マスク領域、 スクロールキャプチャ、ベースラインのブランチング — を さらに詳しく説明し、各プリミティブが上のどのカテゴリに 対応するかを示しています。多くのチームにとって短い答え はこうです:ビジュアルに変化があれば ScanU が気づき、 意図通りならワンクリックで受け入れ、そうでなければ 他の誰よりも先に捕まえた、ということです。