5分で完了：Webサイトの自動ビジュアルモニタリングを設定する方法

プラグインを更新した、プルリクエストをマージした、CSSファイルを変更した。自分のブラウザでは問題なく見えました。でも、Safariは確認しましたか？モバイルは？影響を受けた可能性のある他の15ページは？

ほとんどのチームは確認していません — 手動チェックは時間がかかりすぎ、締め切りのプレッシャーの下では省略されがちだからです。

自動ビジュアルモニタリングは、ブラウザとデバイスにまたがるWebサイトのスクリーンショットをスケジュールに従って取得し、既知のベースラインと比較し、変化を検出した際にアラートを送ることでこの問題を解決します。そして適切なツールを使えば、セットアップは5分もかかりません。

ビジュアルモニタリングとは何をするのか

ビジュアルモニタリングは、継続的に行われる自動プロセスです：

1. スクリーンショットの取得 — 選択したページを、指定したブラウザとデバイスサイズで撮影
2. 新しいスクリーンショットとベースラインの比較 — ピクセルレベルの差分アルゴリズムで照合
3. 視覚的な差異のハイライト — 何が変わったかを正確に表示
4. 通知 — 変化が検出された際にメールまたはSlackでアラート
5. 自動繰り返し — 日次、週次、またはカスタムの定義したスケジュールで実行

これにより、他のテスト形式ではすり抜けてしまう変化を検出します：CSSリグレッション、コンテンツ変更によるレイアウトシフト、サードパーティスクリプトの副作用、ブラウザのレンダリング差異などです。

ステップ1：アカウント作成と最初のプロジェクト

ScanU.euでサインアップして始めましょう。無料プランではクレジットカード不要で、月500スクリーンショットが利用可能です。最も重要なページのモニタリングを始めるには十分な量です。

ログイン後、新しいプロジェクトを作成します：

• わかりやすい名前を付けます（例：「コーポレートサイト」や「クライアント — Acme Store」）
• モニタリングしたいサイトのベースURLを入力します

プロジェクトのセットアップはこれだけです。設定ファイルも、ローカルインストールも、CLIツールのインストールも不要です。

ステップ2：ページの選択

モニタリングするページを選択します。URLを手動で入力するか、ScanUの自動ページ検出機能でサイトマップから利用可能なページを取得できます。

最も重要なページに集中しましょう：

• トップページ — 最もトラフィックの多いエントリーポイント
• 主要ランディングページ — コンバージョンが発生する場所
• 商品・サービスページ — 顧客が意思決定を行う場所
• お問い合わせ・サインアップページ — フォームが正しくレンダリングされる必要がある場所
• ナビゲーションが複雑なページ — メニューやレイアウトが複雑な場所

まず5〜10ページから始めましょう。後からいつでも追加できます。

ステップ3：ブラウザとデバイスの選択

テストするブラウザとデバイスを選択します。ScanUは3つのブラウザエンジンに対応しています：

• Chrome（Chromium） — 最も広く使われるデスクトップ・モバイルブラウザ
• Firefox — 開発者や技術系ユーザーに重要
• Safari（WebKit） — iOSユーザーにとって不可欠（iOSではすべてのブラウザがWebKitエンジンを使用）

デバイスは、ユーザー層に合った組み込みプリセットから選択します。実用的な初期セット：

• モバイル： iPhone 15、Samsung Galaxy S24 — iOSとAndroidをカバー
• タブレット： iPad（第10世代） — 最も一般的なタブレット
• デスクトップ： 1920×1080 — 標準的なラップトップとモニターの解像度

この組み合わせで、クレジットを使いすぎることなく、クロスブラウザ・クロスデバイスのしっかりしたカバレッジが得られます。無料プランでは10のデバイスプリセットが含まれ、有料プランでは100以上が利用可能です。

ステップ4：最初のテスト実行とベースラインの確立

「テスト実行」をクリックして初回のスクリーンショットを取得します。ScanUのクラウドインフラがブラウザのレンダリング、ページの読み込み、スクリーンショットの取得をすべてバックグラウンドで処理します。

数分以内にダッシュボードにページ、ブラウザ、デバイスの組み合わせごとのスクリーンショットが表示されます。これらの初回スクリーンショットがベースライン — 以降のすべての比較の基準点 — になります。

ベースラインが正しいことを確認しましょう。サイトが一時的な状態（メンテナンスモード、A/Bテストのバリエーション）にある場合は、通常の状態に戻してからベースラインを確立してください。

ステップ5：スケジュールモニタリングの設定

手動でテストを実行する必要がないよう、自動モニタリングを設定します：

1. プロジェクトのモニターセクションに移動
2. 新しいモニターを作成
3. スケジュールを設定 — アクティブなサイトには日次チェックがおすすめ、安定したサイトなら週次で十分
4. タイムゾーンを選択
5. モニターを有効化

これ以降、ScanUは定義されたスケジュールに従って自動でビジュアルテストを実行し、結果をベースラインと比較し、ビジュアルの変化があればフラグを立てます。

オプション：通知の設定

ビジュアルの変化が検出された際にアラートを受け取るには、通知を設定します：

• メール通知 はすべての有料プランで利用可能で、テスト実行で差異が検出された際にサマリーを送信します
• Slack連携 は特定のチャンネルにアラートを送り、チームの通常のワークフローの中でビジュアルリグレッションアラートを確認できます

Slackの場合、インテグレーション設定からワークスペースを接続し、各プロジェクトでアラートを受け取るチャンネルを選択します。

変化が検出されたとき

スケジュールされたテストでビジュアルの差異が検出されると、ダッシュボードにハイライトされた差分として表示されます。変化があった各ページについて、以下の情報が得られます：

• ベースラインスクリーンショット — 変更前のページの見た目
• 現在のスクリーンショット — 現在の見た目
• 差分オーバーレイ — 変更箇所のビジュアルハイライト（変更ピクセルが赤で表示）
• 差分パーセンテージ — ページのどの程度が変化したか（小数点以下2桁まで表示）

ここから次のアクションを決めます：

• 変更を承認 — 意図的な変更の場合（例：バナーを更新した）。新しいベースラインが作成されます。
• 変更を調査 — 予期しない変更の場合。最近のデプロイ、CMSの更新、サードパーティスクリプトの変更を確認します。
• リグレッションを修正 — バグの場合は修正し、新しいテストを実行して修正を確認します。

効果的なビジュアルモニタリングのための実践的なヒント

差分しきい値を適切に設定する。 ScanUではプロジェクトごとに0.1%〜10%の差分しきい値を設定できます。ほとんどのサイトではデフォルトの1%で十分です。しきい値を低くすると、より微細な変化を検出できますが、レンダリングノイズが検出される場合もあります。しきい値を高くすると、大きなレイアウトシフトのみに集中できます。

小さく始めて拡大する。 最も重要な5ページを2〜3デバイスでテストすることから始めましょう。ワークフローに慣れたら、ページとデバイスを追加してカバレッジを拡大します。

差分を速やかにレビューする。 スケジュールモニタリングは、誰かが結果をレビューして初めて役に立ちます。SlackやメールのNotificationを設定して、アラートが対応できる人に確実に届くようにしましょう。

意図的にベースラインを確立する。 計画的なビジュアル変更（リデザイン、新キャンペーン、ブランディング更新）を行った場合は、テストを実行して新しいベースラインを承認しましょう。これにより、以降のモニタリング実行での誤検知を防ぎます。

デプロイと連携する。 デプロイの前後に比較テストを実行してリグレッションを即座に検出しましょう。スケジュールモニタリングはセーフティネットであり、デプロイ前テストの代替ではありません。

費用について

ScanUの無料プランでは、月500スクリーンショット、1プロジェクト、10デバイスプリセットが利用可能です。小規模サイトをいくつかの主要な構成でモニタリングするには十分です。

より包括的なモニタリングには、有料プラン（Pro）が€19/月からで、3,000スクリーンショット、5プロジェクト、35以上のデバイスプリセットが含まれます。全プランにChrome、Firefox、Safariのテストが含まれ、ブラウザ別の追加料金はありません。

すべてのデータはドイツ・フランクフルトでホスティングされており、デフォルトでGDPR準拠です — 欧州のチームやEUの顧客にサービスを提供する企業にとって重要なポイントです。

今すぐモニタリングを始めましょう

ビジュアルモニタリングの設定に、DevOpsの専門知識も、ローカルインフラも、専任のQAチームも必要ありません。ScanUなら、ゼロから自動クロスブラウザモニタリングまで5分以内で到達できます。

アカウントを作成し、最初のプロジェクトをセットアップし、最初のテストを実行してください。コーヒーが冷める前に、ブラウザとデバイスにまたがるベースラインスクリーンショットが手に入ります。

今すぐビジュアルモニタリングを始める →