WordPressサイトを本来あるべき姿に保つことは、ストレスになることがあります。ちょっとしたアップデートや簡単なCSSの調整で、レイアウトが静かに壊れてしまうことがあり、訪問者に指摘されるまで気づかないことがよくあります。
WordPressのビジュアルリグレッションテストは、変更の前後にページの見た目がどのように変化するかを自動的に比較し、何かが変化した瞬間に通知することで、この問題を解決します。
「ビジュアルリグレッションテスト」は技術的に聞こえるかもしれませんが、開発者ツールを使わなくても利用できます。手作業でのチェックにかかる時間を節約し、恥ずかしいレイアウトの問題を回避するための簡単な方法です。
さまざまなツールや方法をテストした後、コーディングや技術的な専門知識を必要としない信頼性の高いオプションを見つけました。このガイドでは、WordPressサイトでビジュアルリグレッションテストを実行する方法を5つの簡単なステップで紹介します。🧑💻
ビジュアルリグレッションテストとは？
ビジュアルリグレッションテストとは、サイトのデザインがアップデート後に予期せず変更されたかどうかを確認する方法です。ページの変更前後のスナップショットを比較して、見た目が異なるものを検出します。
WordPressコアのアップデート、プラグインのインストール、テーマの変更、コードの調整を行うたびに、フロントエンドのどこかがずれる可能性があります。ボタンがなくなったり、レイアウトが壊れたり、画像が突然読み込まれなくなったりします。
問題は？これらの視覚的なバグは、訪問者がコンタクトフォームやデザインフィードバック調査を通じて指摘するまで、見過ごされがちです。その頃には、サイトのユーザーエクスペリエンスへのダメージはすでに生じているかもしれません。
そのため、ビジュアルリグレッションテストを実行することは非常に役立ちます。
プロセスは簡単です。更新前にページのスクリーンショットを撮り、更新後に再度撮り、それらを比較して変更された点を見つけます。
ステージングサイト（推奨）でテストしている場合、ライブ公開前に視覚的な問題を検出するために、安全にアップデートを実行し、比較を行うことができます。
これらの比較を手動で実行する必要もありません。
VRTs、Percy、BackstopJSのような視覚的回帰テストツールを使用すると、スクリーンショットの比較を自動化し、さまざまな画面サイズでサイトがどのように表示されるかを確認できます。これにより、デスクトップ、タブレット、モバイルでのレイアウトの問題を検出できます。
WordPressユーザーにとって、ビジュアルリグレッションテストが重要なのはなぜですか？
WordPressウェブサイトを管理している場合、ビジュアルリグレッションテストは時間を節約するセーフティネットとなります。
WordPressサイトは、テーマ、ページビルダー、ブロック、プラグインなど、多くの独立したパーツから組み立てられているため、レイアウトの破損に対して特有の脆弱性があります。これらはすべて、ページのレンダリング方法について異なる前提を置いています。
これらのいずれかによって、ページの見た目が静かに変わることがあります。
- プラグインのアップデートにより、ボタンやフォームのスタイリングが変更される
- WordPressコアのアップデートにより、Gutenbergブロックの表示方法が変更される
- WooCommerceのアップデートにより、製品レイアウトやチェックアウトフィールドが変更される
- テーマのアップデートにより、スペーシング、フォント、またはレスポンシブブレークポイントが調整される
- カスタムCSSの編集が、予想以上に多くのページに影響を与える
WordPressのビジュアルリグレッションテストは、訪問者よりも先にこれらの意図しない変更を検出します。アップデートごとにすべてのページを確認する代わりに、ツールは変更前後のスクリーンショットを比較し、見た目が異なるものをすべてフラグ付けします。
忙しいサイトオーナーにとっては、安心感が得られます。クライアントサイトを管理する代理店にとっては、クライアントから指摘される前にリグレッションを検出できることを意味します。
それでは、WordPressで簡単にビジュアルリグレッションテストを実行する方法を説明します。これからカバーする手順の概要を以下に示します。
🧑💻 プロのヒント：ビジュアルリグレッションテストを実行したり、デザインを変更したりする前に、ステージングサイトを使用することを強くお勧めします。
ステージングサイトとは、ライブウェブサイトのプライベートなクローンであり、ユーザーに影響を与えることなく、アップデート、プラグインの変更、デザインの微調整を安全にテストできる場所です。これにより、レイアウトの問題、ボタンの欠落、または視覚的なバグを、公開される前に発見するのに役立ちます。
設定方法がわからないですか？詳細については、WordPressステージングサイトの作成に関するステップバイステップガイドをご覧ください。
ステップ1：ビジュアルリグレッションテストプラグインのインストールと有効化
開始するには、ステージングサイトのダッシュボード（または、お好みであればライブサイト）にログインしてください。
このチュートリアルでは、初心者向けで視覚的回帰テストに使いやすいVRTsプラグインを使用します。レイアウトのずれ、ボタンの欠落、更新後の要素の破損など、VRTsは早期発見に役立ちます。
仕組みは次のとおりです。プラグインは、選択したページのスクリーンショットを撮ります。プラグインの更新やテーマの調整など、サイトに変更を加えた後に、手動で比較を実行するか、自動的に実行するようにスケジュールできます。
プラグインは、「変更前」と「変更後」のスクリーンショットを並べて比較し、視覚的な違いを強調表示します。
そのため、すべてのページを手動で確認する代わりに、何が変更されたか、そして何かおかしい点がないかを示す簡単な視覚レポートを取得できます。
プラグインをインストールするには、まずVRTsのウェブサイトにアクセスし、「無料で始める」ボタンをクリックしてプランにサインアップする必要があります。
その後、いずれかのプランを選択できます。
執筆時点では、無料プランでは1つのドメインで1日あたり最大3ページをテストでき、毎日のテストをスケジュールできます。有料プランでは、より多くのページをテストしたり、手動テストを実行したり、WordPressコア、プラグイン、テーマのアップデート後にビジュアルリグレッションテストを自動的に実行したりできます。
使用したいプランの下にある「今すぐ購入」または「今すぐインストール」をクリックするだけです。
次に、VRTs のウェブサイトでアカウントにサインアップし、支払い情報を追加するための指示に従います。
サインアップが完了すると、VRTsダッシュボードにアクセスでき、そこからプラグインを.zipファイルとしてダウンロードできます。
次に、プラグイン » プラグインを追加ページに移動し、「プラグインをアップロード」ボタンをクリックします。ここから、先ほどダウンロードしたVRTsプラグインの.zipファイルを選択できます。
インストールが完了したら、プラグインを有効化してください。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。
ステップ2：VRTプラグインの設定
プラグインを有効化したら、ビジュアルリグレッションテストを実行するタイミングを決定します。
WordPress管理メニューのVRTs » 設定に移動します。
設定ページ内で、「トリガー」セクションまでスクロールします。ここで、スナップショットを自動的に取得して比較するタイミングをプラグインに指示します。
利用可能なオプションは次のとおりです。
- 24時間ごとにテストを実行（無料）– これはデフォルト設定です。VRTは、選択した投稿またはページを1日1回、視覚的な変更がないか自動的にチェックします。
- WordPressおよびプラグインのアップデート後にテストを実行（Pro）– アップデートによって発生するレイアウトの問題を、発生したときにすぐに検出するのに役立ちます。
- お気に入りのアプリでテストを実行（Pro）– Webhookを使用して、VRTを外部ツールまたはワークフローに接続します。
- オンデマンドでテストを実行（Pro）– WordPressダッシュボードから直接、必要なときにいつでも手動でテストを実行します。
ワークフロー（またはライセンス）に合ったトリガーを選択したら、ページの下部にある「変更を保存」ボタンをクリックするだけです。
ステップ3：テストする新しいページまたは投稿の追加
プラグインの設定を構成したら、ビジュアルリグレッションテストに含めたいページまたは投稿を選択する時期です。
「テスト」タブに切り替えましょう。ここでビジュアルテストを管理および実行します。ここから「新規追加」ボタンをクリックできます。これにより、テストする投稿またはページを選択できます。
表示されるポップアップで、視覚的回帰テストに含めたい投稿またはページを選択します。
次に、「新規テスト追加」をクリックして選択を確認します。
VRTプラグインは、選択した各ページの初期スナップショットを取得します。これは、現在の投稿またはページの見た目の「前」バージョンであるベースラインとして機能します。
テストを設定した後、初期スナップショットを読み込むためにページをリフレッシュするように指示が表示されます。リフレッシュしてください。
リフレッシュ後、テストに追加したページまたは投稿のスナップショットへのリンクが表示されます。
また、「テストステータス」が翌日に自動的に「スケジュール済み」に設定されていることもわかります。これは、VRTの無料バージョンが24時間ごとにテストを実行するためです。
「スナップショットを表示」リンクをクリックすると、最初のスクリーンショットを確認できます。
これは次のように新しいタブで開きます。
無料版をご利用の場合、テストは翌日にスケジュールされます。サイトの作業を進め、24時間後に再度確認して比較レポートを確認してください。
ただし、Pro版をご利用の場合は、すぐにテストを実行して問題を即座に特定できます。
ステップ4：視覚的な違いの確認
テストが完了し、視覚的な変更が検出されると、VRTs » Runs タブに通知が表示されます。
Runs 画面で、変更が検出された実行にカーソルを合わせることができます。
次に、表示される「詳細を表示」リンクをクリックします。
次の画面で、ページの前後バージョンを示すサイドバイサイド比較が表示されます。
プラグインは視覚的な違いを自動的に強調表示するため、次のような問題をすばやく特定できます。
- レイアウトのずれと要素のずれ：プラグインの更新やテーマの変更後にデザインが変更され、ボタンの位置がずれたり、テキストが飛び跳ねたりした場合、VRTsがそれをフラグ付けします。
- 要素の欠落または破損：画像、CTAボタン、埋め込みフォームが欠落している場合でも、VRTsは予期せず消えたものを簡単に発見できます。
- 動的コンテンツ（誤検知）：場合によっては、ツールがエラーではない変更をフラグ付けすることがあります。これは、ページを読み込むたびに変化する画像スライダー、広告、またはローテーションするお客様の声でよく発生します。
- 予期しないコンテンツの変更：プラグインは、テキスト、リンク、または画像の変更も通知するため、ユーザーよりも先に不正な編集や公開エラーを検出できます。
画面中央のドラッグハンドルを使用して、古いバージョンと新しいバージョンの間でスライドし、正確な変更を視覚的に確認できます。
変更が意図的なものであった場合（計画的なホームページのリニューアルなど）、新しいスナップショットを承認するだけで、プラグインはそれを今後の新しいベースラインとして使用するようになります。
ステップ5：レビューと対応
ビジュアルリグレッションテストを実行した後、結果に基づいて対応してください。
アラートの確認を開始する前に知っておくべきことの1つは、フラグが付けられたすべての違いが実際にバグであるとは限らないということです。ページは訪問ごとに正当に変更されることがあり、テストはその変更もフラグ付けします。
これらは「偽陽性」と呼ばれ、新規ユーザーがビジュアルリグレッションテストに不満を感じる最も一般的な理由です。ツールは基本的にピクセル差 > 0%かどうかをチェックするため、ピクセルを移動させる動的な要素はすべてアラートをトリガーします。
WordPressサイトで最も一般的な偽陽性のトリガーは次のとおりです。
- スライダーとアニメーション（画像カルーセル、ヒーローアニメーション、ホバーエフェクト）
- ライブデータ（最新の投稿フィード、コメント数、WooCommerce在庫カウンター）
- 広告の配置とトラッカー訪問ごとに異なるコンテンツを読み込む
- CookieまたはGDPR同意バナー予測不能に表示される
- 遅延読み込み画像キャプチャ時に読み込まれたりされなかったりする可能性のあるもの
- フォント読み込みが完了する前にわずかに異なる表示になるもの
これらがフラグ付けされているのを見たら、VRTで比較ビューを開き、「要素を非表示にする」オプションを使用して、その領域を将来のテストから除外してください。そうすれば、レビューする価値のある実際のデザイン変更のみが表示されるようになります。まさにそれが望むことです。
次にできることは次のとおりです。
- ページを手動で編集する：変更が小さい場合は、レイアウトの調整、要素の移動、不足している機能の追加など、ページを編集することで直接問題を修正できます。
- バックアップにロールバックする：レイアウトの変更が軽微な場合は、ページを以前のバージョンに復元することで元に戻すことができます。メジャーアップデートがサイト全体を破損した場合は、最近のウェブサイトのバックアップを復元する必要があるかもしれません。ただし、そうするとサイトのすべてのデータがロールバックされ、最近の販売やコメントが消去される可能性があることに注意してください。
✋ 注意：バックアップツールの推奨が必要な場合は、Duplicatorが優れた選択肢です。使いやすく、数回クリックするだけでWordPressサイトをクローンできます。
当社のビジネスウェブサイトの一部では、バックアップとサイト移行にDuplicatorを使用しており、ぜひチェックすることをお勧めします。これは、ライブサイトのコピーをローカルステージング環境にプルダウンして、ビジュアルテストを安全に実行できるようにするための優れたツールです。
プラグインの詳細については、Duplicatorの完全レビューをお読みください。
ただし、問題を修正してもテストでエラーが表示される場合は、WordPressキャッシュをクリアするだけでなく、CDNやホスティングキャッシュもクリアするようにしてください。これにより、ツールはサイトの最新バージョンを確認できます。
FAQ：WordPressでビジュアルリグレッションテストを実行する方法
ビジュアルリグレッションテストを始めたばかりという方は少なくありません。ここでは、WordPress ユーザーや開発者からよく寄せられる質問に対する簡単な回答をいくつかご紹介します。
スナップショットテストとビジュアルリグレッションテストの違いは何ですか？
スナップショットテストは開発者の用語で、通常はサイトの背後にある非表示のコードをチェックして、画面上での表示ではなく、以前のバージョンと一致するかどうかを確認することを指します。
ビジュアルリグレッションテストは、スクリーンショットを比較してレイアウトやデザインの変更を検出することにより、サイトが人間の目にどのように見えるかを実際にチェックします。
WordPressでビジュアルリグレッションテストに最適なツールは何ですか？
最も簡単なオプションは、VRTs – Visual Regression Testsプラグインです。初心者向けで、ダッシュボード内で実行でき、コーディングは不要です。無料バージョンはほとんどのユーザーにとってうまく機能します。
手動でリグレッションテストを行うにはどうすればよいですか？
手動テストとは、アップデート後に重要なページをすべてクリックして、すべてが正しく表示されていることを確認することです。ホームページ、お問い合わせページ、ブログ記事、カスタムレイアウトやチェックアウト手順などのページを確認する必要があります。これは機能しますが、かなりの時間がかかる可能性があります。
リグレッションテストを高速化するにはどうすればよいですか？
自動化しましょう。VRTs – Visual Regression Testsのようなプラグインは、主要なページのスクリーンショットをキャプチャして比較できるため、すべてを手動で確認する必要はありません。
ステージングサイトを使用すると、ライブサイトを更新する前に問題を検出することもできます。
WordPressウェブサイトのデザインをテストする最善の方法は何ですか？
ビジュアルリグレッションツールは、更新後のレイアウトの変更を検出する最も簡単な方法の1つです。また、公開前にステージングサイトで更新をプレビューするのにも役立ちます。
デスクトップ、タブレット、モバイルでページがどのように表示されるかを確認してください。ブラウザの開発者ツールを使用すると、さまざまな画面サイズをすばやくテストできます。そして最後に、実際のユーザーやクライアントからフィードバックを得ることで、見落としがちな詳細を検出できます。
WordPressサイトでビジュアルリグレッションテストを実行するのはいつですか？
ビジュアルリグレッションテストを実行するのに最適なタイミングは、サイトのデザインに影響を与える可能性のある変更の直前と直後です。これには、WordPressコアの更新、プラグインとテーマの更新、カスタムCSSの編集、新しいブロックやページビルダー要素の追加が含まれます。
頻繁に変更を行わない場合は、スケジュールされた毎日のテストで、チェックすることを考えていなかったレイアウトを静かに破損したプラグインの更新など、遅い問題を検出するのに十分です。
ビジュアルリグレッションテストで誤検知が発生するのはなぜですか？
誤検知は、テストが実際にはバグではない違いをフラグ付けした場合に発生します。WordPressサイトで最も一般的な原因は、スライダー、アニメーション、広告の配置、Cookieバナー、遅延読み込み画像、最新投稿やWooCommerceの在庫カウンターなどのライブデータです。
VRTでは、これらの要素を非表示にして比較から除外できるため、将来のテストでは実際のデザイン変更のみがフラグ付けされます。
次のステップ：WordPressサイトのデザインを改善する
この記事でWordPressのビジュアルリグレッションテストの方法を学べたことを願っています。サイトの改善を続けたい場合は、こちらも役立つかもしれません：
- WordPressウェブサイトの再設計方法に関する初心者ガイド
- 効果的なWordPressウェブサイトのための主要なデザイン要素
- WordPressでウェブサイトのデザインフィードバックを得る方法
- WordPressでユーザーエクスペリエンスを向上させる方法
- ウェブサイト訪問者に尋ねるべきユーザーエクスペリエンスに関するフィードバック質問
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
質問や提案はありますか？コメントを残して、議論を開始してください。