一部のテストでは、ビジュアルバグを報告することができます。ビジュアルバグは、Webサイトやアプリのグラフィカルユーザーインターフェースに関する問題です。例えば、次のようなものがあります。

テキストや要素の位置ずれなど、レイアウト構成の問題
レスポンシブデザインの問題（例: あるモバイル端末では要素が表示されるが、別の端末では表示されない）
テキストや要素が意図せず重なって表示される
テキストや要素が途中で切れて表示される
HTMLまたはCSSファイルの修正によって解決できる問題

繰り返し発生する問題

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

問題が発生するたびに個別のバグ報告を提出する必要はありません。提出された場合は却下されます。お客様には、視覚的な問題について一度の報告があれば十分です。担当者が問題を調査し、すべての発生事例について解決いたします。

例

一部の要素で同じ表示上の問題が発生している（例: テキストや画像が枠より大きく表示されている）。
入力欄が初期テキストを表示するのに十分な大きさではなく、初期テキストが最後まで表示されない。
ティーザーが意図せず他の要素と重なって表示される。

機能バグへの変更

ビジュアルバグによって機能が利用できなくなった場合は、実際に不具合があるのが機能そのものではなくても、機能バグとして報告する必要があります。

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

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

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

レスポンシブコンテンツと非レスポンシブコンテンツ: 見逃されやすいビジュアルバグ

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

このような問題は、Webサイトを素早く操作している間は気付きにくく、必要な情報は表示されているものの、表示が不自然なページに突然遭遇することがあります。このような場合、そのまま見過ごしてしまい、バグを提出し忘れる可能性があります。

例

レスポンシブデザインをテストしていると、あるページ（「Popular TV Show and Movie Genres」ページなど）はスマートフォンで正しく表示されていても、カテゴリーページ（「COMEDY」など）へ移動すると、要素が小さすぎるため、コンテンツがほとんど見えなくなることがあります。

確認方法

ページごとに拡大・縮小の表示が一貫しているか確認してください。
画面サイズでテキストが読めなくなっていないか確認してください。
ナビゲーション要素が小さすぎてタップしにくくなっていないか確認してください。
一部のページでのみ横スクロールが表示されていないか確認してください。

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

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