一部のテストでは、ビジュアルバグを報告することができます。ビジュアルバグは、Webサイトやアプリのグラフィカルユーザーインターフェース（GUI）に関する問題です。たとえば：

・レイアウト上の問題（テキスト／要素の位置がずれているなど）
・レスポンシブデザインの問題（あるモバイルデバイスでは要素が表示されるのに、別のデバイスでは表示されないなど）
・テキスト／要素が意図せず互いに重なっている
・テキスト／要素が途中で切れている
・HTMLまたはCSSファイルを修正することで解決できるもの

繰り返し発生する問題

ビジュアル上の問題が繰り返し発生する場合、それぞれの発生箇所でURL、リンク、画像などが異なっていても、提出できるのは1回だけです。同じページで発生する場合も、異なるページで発生する場合も同様です。この1件のバグレポートには、他のURL、リンク、画像なども影響を受けていることを記載してください。

問題が発生するたびに個別のバグレポートを提出してはいけません。そのようなレポートは却下されます。お客様には、ビジュアル上の問題を把握するための1件のレポートだけが必要です。お客様が問題を調査し、すべての発生箇所を修正します。

例：

・一部の要素に同じグラフィカルな問題が発生している。例：テキストや画像が、それを収めるボックスより大きくなっている。
・入力フィールドが、デフォルトのテキストを収めるのに十分な大きさではなく、そのテキストが完全には表示されない。
・ティーザーが意図せず他の要素と重なっている。

機能バグへの格上げ

ビジュアルバグによって機能が妨げられる場合は、実際に機能そのものが壊れているわけではなくても、機能バグとして報告する必要があります。

別の経路やオプションから直感的かつ簡単に機能へアクセスできる場合、ユーザーは実質的にその機能を利用できない状態ではありません。そのため、この問題を機能バグとして提出することはできず、ビジュアル上の問題として扱われます。

ビジュアル上の問題の記録方法

ビジュアルレポートにはスクリーンショットを添付する必要があります。操作によってビジュアル上の問題が発生する場合は、追加でスクリーンキャストが必要になることがあります。バグレポートをどのように記録すべきかについて詳しくは、「バグレポートの要件」の記事を参照してください。

レスポンシブと非レスポンシブのWebコンテンツ：隠れたビジュアルバグ

レスポンシブバグは、コンテンツバグとビジュアルバグのどちらに分類すべきか迷うことがあります。これは、Webサイトのレスポンシブデザインによって発生する問題です。

Webサイトを素早く移動していると、このような問題は気付きにくく、必要な情報がすべて揃っているのに、あるページで突然その表示が不自然になっていることがあります。このような場合、問題を見過ごしてしまい、バグの提出を逃してしまう可能性があります。

ケース例

レスポンシブデザインをテストしていると、あるページ（「人気のテレビ番組と映画のジャンル」ページなど）はスマートフォン上で完全に正しく表示されるのに、カテゴリページ（「コメディ」など）へ移動すると、要素が小さすぎてコンテンツがほとんど見えなくなることがあります。

見分け方

・ページ間で拡大縮小の一貫性がないか確認する
・使用している画面サイズでテキストが判読できなくなっていないか確認する
・ナビゲーション要素が小さすぎてタップできなくなっていないか確認する
・一部のページでは横方向のスクロールが表示されるのに、他のページでは表示されないか確認する

無料のオンラインレスポンシブテスト

Google Chrome Lighthouse（以前はGoogle Mobile Friendly Testとして知られていました）は、Webページがモバイルデバイス向けに最適化されていることを確認するための有用なツールです。このツールは、フォントサイズ、タップターゲット、ビューポート設定（SEOセクション）などのモバイルユーザビリティ要素を評価することで、テスターがWebページ上のビジュアル上の問題を特定するのに役立ちます。ビジュアルバグを見つけた場合、このツールを使うことで、根本原因がページのレスポンシブ対応にあるかどうかを判断しやすくなります。以前のGoogle Mobile-Friendly Testとは異なり、Google Chrome Lighthouseは別のWebサイトで実行するものではなく、Google Chromeブラウザに追加して、テスト対象のWebサイト上で直接実行する必要があります。インストール手順と詳細なチュートリアルはこちらで確認できます。