ビジュアル監視の設定
Webページのスクリーンショットを定期撮影し、差分を自動検出するビジュアル監視の設定方法を解説します。
ビジュアル監視とは
Webページのスクリーンショットを定期的に撮影し、前回との差分を自動検出する機能です。 CSSの崩れや意図しないコンテンツ変更を視覚的に検知できるため、リリース後のデザイン崩れを素早くキャッチできます。
監視の追加手順
1
ビジュアルチェックページを開く
サイドバーから「ビジュアルチェック」をクリックして、ビジュアル監視の管理ページに移動します。
2
URLを入力
監視したいページのURLを入力します。HTTPSのページを推奨しますが、HTTPのページも監視可能です。
3
端末を選択
監視する端末サイズを選択します。以下のプリセットから選択できます。
- デスクトップ（1920 x 1080）
- iPhone 14（390 x 844）
- iPhone SE（375 x 667）
- iPad（810 x 1080）
- Pixel 7（412 x 915）
4
チェック間隔を設定
チェック間隔を選択します。「定期実行」では以下の間隔から選択、「毎日1回」では実行時刻を指定できます。
- 定期実行: 15分 / 30分 / 1時間 / 6時間 / 24時間
- 毎日1回: 時・分を指定
5
保存して監視開始
設定を保存すると、次の実行タイミングから自動で監視が開始されます。初回実行時にベースラインとなるスクリーンショットが撮影されます。
設定画面のイメージ
ビジュアルチェック — 新規追加
ビジュアル監視を追加
example.com トップページ
https://example.com
ログインオプションPro
作成
キャンセル
複数のビューポートで同じURLを監視することで、デスクトップとモバイルの両方のレイアウト崩れを検知できます。