新しいボタン一つでレイアウト全体が変わることがあります：固定した比較ビューが役立つ理由

ボタンをもっと目立たせることが目的です。変更後、オファーカードは大きな画面では見栄えがよくなります。しかし狭いビューでは、幅の広がったボタンが価格を行の外へ押し出してしまいます。変更は小さなものでしたが、その影響はコンテンツ同士の関係全体に及びます。

Playwrightは、参照画像とのスクリーンショット比較について文書化しており、撮影環境が比較に影響し得ることも指摘しています。この手法は、私たち独自の演習を行うよい機会になります。ピクセルの差異がすべて誤りというわけではなく、画像が同一であっても、それだけで正しい動作が証明されるわけではありません。重要なのは、比較によってどの目に見える期待を検証したいのかということです。

何を変えるべきか、何を維持すべきかを書き出します

この架空のカードでの意図は、「ボタンを認識しやすくし、その一方でタイトル、価格、必要な注記は完全に読める状態を保つ」というものです。この一文には、望ましい変更とその限界が含まれています。「ボタンをより良くする」では、判断がはるかに難しくなります。

コンテンツのケースを三つ用意します。短いタイトル、長いタイトル、そして追加条件付きのタイトルです。変更の前後で同じ内容を使用してください。都合のよいプレースホルダーテキストを使った比較では、後で実際のコンテンツで生じるスペース不足そのものが隠れてしまうことがあります。

また、少なくとも広いビューを一つ、狭いビューを一つ選んでください。これらの幅は問いの一部であり、すべてのデバイスについての包括的な主張ではありません。狭いケースでは、スペースが少ないときにも関係が保たれるかどうかを検証します。

参照には管理された環境が必要です

ブラウザ、オペレーティングシステム、フォント、その他の条件が撮影に影響することがあります。そのため、異なる環境で撮影した変更前の画像は、参照としては弱いものになります。関連する環境を一定に保ち、テストと合わせて記録してください。

準備したテストページ向けの、私たち独自の短いPlaywrightの例は、次のようになります。適切なbaseURLがすでに設定されたプロジェクトを前提としており、この記事のために実行したものではありません：

import { test, expect } from '@playwright/test';

test('Offer card stays readable when narrow', async ({ page }) => {
  await page.setViewportSize({ width: 390, height: 844 });
  await page.goto('/angebot-demo');
  await expect(page).toHaveScreenshot('angebot-390.png');
});

ページ名とファイル名は教材用の例です。文書化されたスクリーンショット比較では、撮影した画像を参照と照合します。重要な編集作業として残るのは解釈です。その差異は意図したものなのか、それとも必要なコンテンツを押し出しているのか、という点です。

差異はまず一つの観察結果です

差分画像をボタンの周りだけで見ないでください。価格、改行、隣接する注記を確認します。もしかすると大きくしたボタンは正しく、その横のレイアウトにもっと柔軟性が必要なのかもしれません。あるいは、改善とされたものが広いビューでしか意味をなさなかったのかもしれません。

テストが再びグリーンになるまで、許容される差異を反射的に引き上げないでください。それでは問題を理解しないまま問いを変えることになります。許容値を設けることは正当化できる場合もありますが、観察された差異の種類に合っている必要があります。

同様に、新しい参照を設けることも一つの判断です。意図した新しい状態は見た目が異なる場合があります。それを比較の基準とするのは、内容を評価した後に限るべきです。そうしなければ、気づかれなかった副作用がそのまま新しい目標画像として宣言されてしまいます。

見た目に加えて、実際のクリック経路も必要です

見た目が同一のボタンでも、誤った動作を引き起こすことがあります。そこで、ビジュアルチェックに通しの確認を加えてください。キーボードでボタンに到達し、操作を実行し、期待どおりの到達状態を確認します。スクリーンショットと動作テストは、異なる問いに答えるものです。

ご自身のWordPressサイトでこの演習を行う場合は、 KENJTEC WordPressBuilder ai の作業コピーを使えば、変更中の状態を公開サイトから切り離しておけます。Playwrightによる比較は、KENJTECの外でご自身のツールを使って実行します。作業コピーから変更を取り込むのは別の手順であり、その際には適切な範囲を選ぶ必要があります。

固定した比較ビューの利点は、変更を妨げることにあるのではありません。望ましい改善が周囲の要素を尊重しているかどうかを可視化してくれるのです。期待、観察、実際の操作がそろって初めて、新しいボタンについての確かな判断が得られます。

出典と状況

調査および文書は2026年十月25日時点のものです。ビジュアル比較。