WordPressサイトを本来あるべき姿に保つことは、ストレスになることがあります。ちょっとしたアップデートや簡単なCSSの調整で、レイアウトが静かに壊れてしまうことがあり、訪問者に指摘されるまで気づかないことがよくあります。
難しいのは、すべてのページを手作業でチェックするのは現実的ではないことです。時間がかかりすぎますし、小さな変更を見落としやすいです。🤦
「ビジュアルリグレッションテスト」は技術的に聞こえるかもしれませんが、開発者ツールを使わなくても利用できます。手作業でのチェックにかかる時間を節約し、恥ずかしいレイアウトの問題を回避するための簡単な方法です。
さまざまなツールや方法をテストした後、コーディングや技術的な専門知識を必要としない信頼できるオプションを見つけました。このガイドでは、数回の簡単な手順でWordPressサイトのビジュアルリグレッションテストを実行する方法を説明します。
ビジュアルリグレッションテストとは？
ビジュアルリグレッションテストとは、サイトのデザインがアップデート後に予期せず変更されたかどうかを確認する方法です。ページの変更前後のスナップショットを比較して、見た目が異なるものを検出します。
WordPressコアのアップデート、プラグインのインストール、テーマの変更、コードの調整を行うたびに、フロントエンドのどこかがずれる可能性があります。ボタンがなくなったり、レイアウトが壊れたり、画像が突然読み込まれなくなったりします。
問題は？これらのビジュアルバグは、訪問者がコンタクトフォームやデザインフィードバック調査を通じて指摘するまで、しばしば見過ごされます。その頃には、サイトのユーザーエクスペリエンスへのダメージはすでに生じている可能性があります。
そのため、ビジュアルリグレッションテストを実行することは非常に役立ちます。
プロセスは簡単です。更新前にページのスクリーンショットを撮り、更新後に再度撮り、それらを比較して変更された点を見つけます。
ステージングサイト（推奨）でテストしている場合、ライブ公開前に視覚的な問題を検出するために、安全にアップデートを実行し、比較を行うことができます。
これらの比較を手動で実行する必要もありません。
VRTs、Percy、BackstopJSなどのビジュアルリグレッションテストツールを使用すると、スクリーンショットの比較を自動化し、さまざまな画面サイズでサイトがどのように表示されるかを確認できます。これにより、デスクトップ、タブレット、モバイルでのレイアウトの問題を検出できます。
WordPressユーザーにとって、ビジュアルリグレッションテストが重要なのはなぜですか？
WordPressウェブサイトを管理している場合、ビジュアルリグレッションテストは時間を節約できるセーフティネットとなります。アップデート後にすべてのページをクリックして確認する代わりに、このツールは変更された内容の視覚的なレポートを提供し、修正が必要かどうかを示します。
これは、複数のWordPressサイトで更新を実行するエージェンシー、クライアントのウェブサイトを管理するフリーランサー、または製品ページやチェックアウトページがそのまま残っていることを確認したいオンラインストアのオーナーなど、多くのシナリオで特に役立ちます。
要するに、ビジュアルリグレッションテストは、イライラする驚きを避け、時間を節約し、WordPressサイトをスムーズに実行し続けるのに役立ちます。
それでは、WordPressで簡単にビジュアルリグレッションテストを実行する方法を説明します。これからカバーする手順の概要を以下に示します。
- ステップ1：ビジュアルリグレッションテストプラグインのインストールと有効化
- ステップ2：VRTプラグインの設定
- ステップ3：テストする新しいページまたは投稿の追加
- ステップ4：視覚的な違いの確認
- ステップ5：レビューと対応
- FAQ：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 画面で、変更が検出された実行にカーソルを合わせることができます。
次に、表示される「詳細を表示」リンクをクリックします。
次の画面で、ページの前後バージョンを示すサイドバイサイド比較が表示されます。
プラグインは視覚的な違いを自動的に強調表示するため、次のような問題をすばやく特定できます。
- レイアウトのずれと要素のずれ：プラグインのアップデートやテーマの変更後にデザインが変更され、ボタンの位置がずれたり、テキストが飛び跳ねたりした場合、VRTはそれをフラグ付けします。
- 要素の欠落または破損: 画像、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でもフォローできます。
質問や提案はありますか？コメントを残して、議論を開始してください。