WordPressサイトを本来あるべき姿に保つことは、ストレスになることがあります。ちょっとしたアップデートや簡単なCSSの調整で、レイアウトが静かに壊れてしまうことがあり、訪問者に指摘されるまで気づかないことがよくあります。
難しいのは、すべてのページを手作業でチェックするのは現実的ではないことです。時間がかかりすぎますし、小さな変更を見落としやすいです。🤦
「ビジュアルリグレッションテスト」は技術的に聞こえるかもしれませんが、開発者ツールを使わなくても利用できます。手作業でのチェックにかかる時間を節約し、恥ずかしいレイアウトの問題を回避するための簡単な方法です。
さまざまなツールや方法をテストした後、コーディングや技術的な専門知識を必要としない信頼できるオプションを見つけました。このガイドでは、数回の簡単な手順でWordPressサイトのビジュアルリグレッションテストを実行する方法を説明します。
ビジュアルリグレッションテストとは？
ビジュアルリグレッションテストとは、サイトのデザインがアップデート後に予期せず変更されたかどうかを確認する方法です。ページの変更前後のスナップショットを比較して、見た目が異なるものを検出します。
WordPressコアのアップデート、プラグインのインストール、テーマの変更、コードの調整を行うたびに、フロントエンドのどこかがずれる可能性があります。ボタンがなくなったり、レイアウトが壊れたり、画像が突然読み込まれなくなったりします。
問題は？これらの視覚的なバグは、訪問者がコンタクトフォームやデザインフィードバック調査を通じて指摘するまで、見過ごされがちです。その頃には、サイトのユーザーエクスペリエンスへのダメージはすでに生じているかもしれません。
そのため、ビジュアルリグレッションテストを実行することは非常に役立ちます。
プロセスは簡単です。更新前にページのスクリーンショットを撮り、更新後に再度撮り、それらを比較して変更された点を見つけます。
ステージングサイト（推奨）でテストしている場合、ライブ公開前に視覚的な問題を検出するために、安全にアップデートを実行し、比較を行うことができます。
これらの比較を手動で実行する必要もありません。
VRTs、Percy、BackstopJSのような視覚的回帰テストツールを使用すると、スクリーンショットの比較を自動化し、さまざまな画面サイズでサイトがどのように表示されるかを確認できます。これにより、デスクトップ、タブレット、モバイルでのレイアウトの問題を検出できます。
WordPressユーザーにとって、ビジュアルリグレッションテストが重要なのはなぜですか？
WordPressウェブサイトを管理している場合、視覚的回帰テストは時間を節約するセーフティネットとなります。更新後にすべてのページをクリックして確認する代わりに、このツールは変更された内容の視覚的なレポートを提供し、修正が必要かどうかを示します。
これは、複数のWordPressサイトで更新を実行するエージェンシー、クライアントのウェブサイトを管理するフリーランサー、または製品ページやチェックアウトページがそのまま残っていることを確認したいオンラインストアのオーナーなど、多くのシナリオで特に役立ちます。
要するに、ビジュアルリグレッションテストは、イライラする驚きを避け、時間を節約し、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：レビューと対応
ビジュアルリグレッションテストを実行した後、結果に基づいて対応してください。次にできることは次のとおりです。
- ページを手動で編集する：変更が小さい場合は、レイアウトの調整、要素の移動、不足している機能の追加など、ページを編集することで直接問題を修正できます。
- バックアップに復元する：変更が大きい場合や修正が難しい場合は、ウェブサイトのバックアップまたはバージョン履歴を使用して、ページを以前のバージョンに復元できます。これにより、サイトに問題が残るのを回避できます。
✋ 注意：バックアップツールの推奨が必要な場合は、Duplicatorが優れた選択肢です。使いやすく、数回クリックするだけでWordPressサイトをクローンできます。
当社のビジネスウェブサイトの一部では、バックアップとサイト移行にDuplicatorを使用しており、ぜひチェックすることをお勧めします。プラグインの詳細については、Duplicatorの全レビューをお読みください。
とはいえ、問題を修正してもテストでエラーが表示される場合は、WordPressキャッシュをクリアすることを確認してください。これにより、ツールがサイトの最新バージョンを確認できます。
FAQ：WordPressでビジュアルリグレッションテストを実行する方法
ビジュアルリグレッションテストを始めたばかりという方は少なくありません。ここでは、WordPress ユーザーや開発者からよく寄せられる質問に対する簡単な回答をいくつかご紹介します。
スナップショットテストとビジュアルリグレッションテストの違いは何ですか？
スナップショットテストは、基盤となるコードの出力が以前の記録と一致するかどうかを確認することを指す開発者の用語です。ビジュアルリグレッションテストは、スクリーンショットを比較してレイアウトやデザインの変更を検出することにより、サイトが人間の目にどのように見えるかを確認します。
WordPressでビジュアルリグレッションテストに最適なツールは何ですか？
最も簡単なオプションは、VRTs – Visual Regression Testsプラグインです。初心者向けで、ダッシュボード内で実行でき、コーディングは不要です。無料バージョンはほとんどのユーザーにとってうまく機能します。
手動でリグレッションテストを行うにはどうすればよいですか？
手動テストとは、アップデート後に重要なページをすべてクリックして、すべてが正しく表示されていることを確認することです。ホームページ、お問い合わせページ、ブログ記事、カスタムレイアウトやチェックアウト手順などのページを確認する必要があります。これは機能しますが、かなりの時間がかかる可能性があります。
リグレッションテストを高速化するにはどうすればよいですか？
自動化しましょう。VRTs – Visual Regression Testsのようなプラグインは、主要なページのスクリーンショットをキャプチャして比較できるため、すべてを手動で確認する必要はありません。
ステージングサイトを使用すると、ライブサイトを更新する前に問題を検出することもできます。
WordPressウェブサイトのデザインをテストする最善の方法は何ですか？
ビジュアルリグレッションツールは、更新後のレイアウトの変更を検出する最も簡単な方法の1つです。また、公開前にステージングサイトで更新をプレビューするのにも役立ちます。
デスクトップ、タブレット、モバイルでページがどのように表示されるかを確認してください。ブラウザの開発者ツールを使用すると、さまざまな画面サイズをすばやくテストできます。そして最後に、実際のユーザーやクライアントからフィードバックを得ることで、見落としがちな詳細を検出できます。
次のステップ：WordPressサイトのデザインを改善する
この記事でWordPressのビジュアルリグレッションテストの方法を学べたことを願っています。サイトの改善を続けたい場合は、こちらも役立つかもしれません：
- WordPressウェブサイトの再設計方法に関する初心者ガイド
- 効果的なWordPressウェブサイトのための主要なデザイン要素
- WordPressでウェブサイトのデザインフィードバックを得る方法
- WordPressでユーザーエクスペリエンスを向上させる方法
- ウェブサイト訪問者に尋ねるべきユーザーエクスペリエンスに関するフィードバック質問
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
質問や提案はありますか？コメントを残して、議論を開始してください。