Webサイトの表示崩れを証拠として残す方法｜スクリーンショットにURL・日時・閲覧環境を添えて再現性を高める

Webサイトの表示崩れを報告するとき、崩れている箇所だけを撮影した画像を送っても、相手が同じ状態を再現できず、原因の調査に時間がかかることがあります。

証拠として残すには、画面の状態に加えて、対象ページのURL、発生日時、使用した端末やブラウザ、再現手順まで記録し、必要に応じて画面録画で「どの操作をしたときに崩れたのか」を示すことが大切です。

Webサイトの表示崩れを証拠として残す基本

表示崩れとは、テキストや画像の重なり、レイアウトのずれ、ボタンの欠落、文字化け、画面からの要素のはみ出し、スマートフォンでの横スクロールなど、Webページが本来想定された見た目や操作性になっていない状態です。

表示崩れを発見したら、まずページを更新したり画面を閉じたりする前に、発生した状態を保存してください。

最初に残すべき証拠は、崩れた画面のスクリーンショットです。

スクリーンショットだけでは情報が不足することがある

スクリーンショットは、発生した状態を一目で共有できる便利な方法ですが、画像だけでは「どのページで起きたのか」「いつ発生したのか」「どの操作がきっかけだったのか」までは分からない場合があります。

たとえば、ログイン後だけ表示される画面の崩れや、メニューを開いた直後に発生するレイアウトのずれは、静止画だけでは再現条件が伝わりにくい傾向があります。

そのため、画面の画像と再現に必要な周辺情報を一つの記録としてまとめることが重要です。

証拠として記録する情報

表示崩れを報告する際は、次の情報をできるだけそろえておきましょう。

• 表示崩れが発生したページのURL
• 発生した日時と、可能であればタイムゾーン
• 使用した端末の種類とOS
• ブラウザ名とバージョン
• 画面解像度やブラウザの表示幅
• ログイン状態や利用していたアカウントの種類
• 表示崩れが発生するまでの操作手順
• 発生頻度と、再読み込み後も再現するかどうか
• スクリーンショットまたは画面録画

社内システムや会員向けページでは、URLや画面に個人情報が含まれることがあるため、共有前に不要な情報を隠してください。

表示崩れの証拠にスクリーンショットを使う方法

まずは画面全体を撮影する

表示崩れが見つかったら、最初にブラウザのウィンドウ全体を撮影し、どのページのどの位置で問題が起きているか分かる状態にします。

不具合部分だけを大きく切り取った画像は見やすい一方で、周辺のレイアウトやブラウザの状態が分からなくなるため、全体画像と拡大画像を分けて保存すると確認しやすくなります。

ページ全体を保存したい場合はDevToolsを使う

縦に長いWebページでは、通常のスクリーンショットだけでは画面に表示されている範囲しか保存できないことがあります。

Google ChromeなどのChromium系ブラウザでは、開発者向けの機能であるChrome DevToolsを使って、ページ全体のスクリーンショットを取得できます。

Chrome DevToolsは、Webページの表示や動作を確認し、問題を診断するための機能を備えた開発者ツールです。

1. 対象ページをブラウザで開きます。
2. F12キー、またはブラウザのメニューから開発者ツールを表示します。
3. デバイスの形をした「デバイスの切り替え」ボタンを選択します。
4. 表示された画面で、スマートフォンやタブレットの表示幅を指定します。
5. 開発者ツールのメニューからスクリーンショットに関する機能を選びます。

Chrome DevToolsの表示や項目名は、ブラウザのバージョンや言語設定によって異なる場合があります。

公式の機能や最新の操作方法を確認したい場合は、Chrome DevToolsの公式ドキュメントを参照してください。

スマートフォン表示の崩れは表示幅を記録する

レスポンシブ対応のWebサイトでは、同じページでもウィンドウの横幅によって表示が変わるため、画像だけでなく撮影時の表示幅も残しましょう。

「スマートフォンで見た」と記録するだけでなく、端末名、画面の向き、ブラウザの表示倍率、可能であればビューポートの幅と高さまで記載すると、再現性が高まります。

記録項目	記録例	必要な理由
端末	iPhone、Androidスマートフォン、Windowsパソコンなど	OSや画面サイズによる違いを確認するため
ブラウザ	Google Chrome、Microsoft Edge、Safariなど	ブラウザごとの表示処理の違いを確認するため
表示幅	390×844px、1366×768pxなど	レスポンシブレイアウトの切り替え条件を確認するため
表示倍率	100％、125％など	文字や要素の大きさの違いを確認するため

URL・日時・閲覧環境を一緒に残す方法

URLはアドレスバーを含めて撮影する

証拠画像には、可能であればブラウザのアドレスバーを含め、対象ページのURLが分かる状態で保存します。

アドレスバーを写せない場合は、画像ファイルの名前や報告書にURLを記載し、短縮URLではなく実際にアクセスしたURLを残してください。

URLにトークン、メールアドレス、顧客番号などが含まれる場合は、そのまま共有せず、機密情報を伏せた画像や安全な別資料に置き換えます。

撮影日時はファイル情報だけに頼らない

スクリーンショットの作成日時はファイルのプロパティから確認できることがありますが、コピーや編集によって情報が変わる可能性があるため、報告文にも発生日時を明記します。

「2026年○月○日○時○分ごろ」のように具体的に記録し、複数の担当者が関わる場合は、端末の時刻設定やタイムゾーンの違いにも注意してください。

画像の撮影日時と、表示崩れを確認した日時は必ずしも同じとは限りません。

ブラウザとOSのバージョンを確認する

表示崩れの原因がブラウザやOSの違いにある場合、ブラウザ名だけでは調査に必要な情報が足りないことがあります。

ブラウザの設定画面やバージョン情報から、ブラウザ名とバージョンを確認し、OSの種類とバージョンも合わせて記録しましょう。

会社やサービスの問い合わせフォームに入力する場合は、「Chrome最新版」のような表現だけで終わらせず、取得できる範囲で具体的なバージョン番号を記載することをおすすめします。

再現手順を記録して表示崩れを伝える

第三者が同じ操作をできるように書く

再現手順は、詳しい人だけが理解できる書き方ではなく、別の担当者が同じ条件で試せるように順番に記録します。

1. ブラウザを起動し、対象ページを開きます。
2. 必要なアカウントでログインします。
3. 画面上部のメニューを選択します。
4. 表示された一覧から対象の項目を選択します。
5. 画面を横向きにする、またはウィンドウ幅を変更します。
6. ボタンの位置がずれ、本文と重なることを確認します。

「画面が崩れた」とだけ書くのではなく、「メニューを開いた後に右端のボタンが画面外へ移動した」のように、操作と結果を具体的に表現します。

再現条件を切り分ける

一度だけ発生したのか、同じ操作で毎回発生するのかを確認すると、偶発的な通信状態の問題と、一定条件で発生するレイアウトの問題を区別しやすくなります。

確認項目	確認内容
再読み込み	ページを再読み込みしても同じ状態になるか
ブラウザ変更	別のブラウザでも発生するか
表示幅変更	特定の画面幅だけで発生するか
ログイン状態	ログイン前後で発生状況が変わるか
通信環境	Wi-Fiやモバイル回線を変えても発生するか

ただし、検証のために何度も操作すると、最初に発生した状態を失う可能性があります。

最初の状態をスクリーンショットや録画で保存してから、条件の切り分けを始めると安心です。

画面録画が有効なケース

操作の流れが原因の表示崩れ

クリック、スクロール、入力、画面遷移などの操作をきっかけに表示が崩れる場合は、画面録画がスクリーンショットよりも状況を伝えやすくなります。

たとえば、モーダルウィンドウを開いた瞬間に背後のページがずれる、スクロール中に固定メニューが重なる、フォームのエラー表示でボタンが押せなくなるといった問題は、発生までの流れを動画で示せます。

一時的にしか起きない不具合

表示崩れが毎回発生するとは限らない場合、発生した瞬間に静止画を撮るのは難しく、再現を待っている間に状態が元へ戻ることもあります。

画面録画を開始してから操作すれば、表示が変化する前後の状態を連続して残せるため、調査担当者が原因を推測しやすくなります。

操作手順を口頭で説明しにくい場合

複数の画面を移動したり、特定の場所をクリックしたりする手順は、文章だけでは操作対象を取り違えることがあります。

録画中にマウスポインターの動きやクリック位置を見せれば、どのボタンを選択したのかを視覚的に伝えられます。

録画に音声を入れられる環境であれば、操作しながら説明する方法もありますが、機密情報や個人情報を声に出さないよう注意してください。

Bandicamを表示崩れの記録に活用する方法

画面録画を使う場合は、パソコンの画面を指定した範囲で録画できるソフトを利用すると、ブラウザ上の操作を効率よく記録できます。

その選択肢の一つが、パソコン画面の録画に対応したBandicamです。

Bandicamでは、画面全体または指定した範囲を録画できるため、Webサイトの表示崩れを確認する目的では、ブラウザ部分を中心に記録する使い方が考えられます。

表示崩れの記録に向いている機能

• ブラウザの操作範囲を指定して録画する
• 表示崩れが起きるまでのクリックやスクロールを記録する
• マウスポインターやクリック位置を確認しやすくする
• 録画した動画を担当者への報告資料として共有する

画面全体を録画すると、デスクトップ上の通知や別のアプリケーションが映り込むことがあるため、必要な範囲だけを選べる場合はブラウザ周辺に限定すると管理しやすくなります。

一方で、ブラウザの外側にある通知やウィンドウ切り替えが原因の場合は、画面全体を録画したほうが状況を確認しやすいことがあります。

Bandicamで録画する基本的な流れ

1. Webサイトを開く前に、録画に不要なアプリケーションや通知を閉じます。
2. Bandicamで画面録画の範囲を選択します。
3. ブラウザのアドレスバーが映る位置を確認します。
4. 録画を開始してから、表示崩れが発生する操作を実行します。
5. 表示崩れが確認できた時点で、操作を止めて録画を終了します。
6. 動画ファイルにURL、日時、環境を対応づけて保存します。

録画の冒頭でメモ帳などに対象URL、発生日時、ブラウザ名、画面サイズを表示しておくと、動画と記録情報を確認しやすくなります。

ただし、メモ帳の内容を画面に表示する方法では、入力した情報がそのまま動画に残るため、パスワードや個人情報は絶対に表示しないでください。

録画はスクリーンショットの代わりではなく、表示崩れが発生するまでの経緯を補足する資料として使うと効果的です。

Bandicamの詳細な機能や利用条件は、Bandicamの公式サイトで確認してください。

証拠動画を撮影するときの注意点

個人情報や機密情報を映さない

画面録画では、ブラウザの履歴、ブックマーク、通知、チャット、メール、顧客情報などが意図せず映り込むことがあります。

録画前に不要なタブを閉じ、通知を停止し、テスト用アカウントやマスキング済みのデータを使用してください。

すでに録画した動画に機密情報が含まれている場合は、共有前に編集するか、必要な部分だけを撮り直しましょう。

録画ファイルを編集しすぎない

不要な冒頭や末尾を切り取る程度の編集は問題ありませんが、表示崩れが起きた部分を加工すると、証拠としての信頼性が下がる可能性があります。

編集前の元ファイルを保管し、共有用の動画と区別できるファイル名を付けてください。

例として、2026-04-15_1430_chrome_mobile-layout_original.mp4のように、日付、時刻、ブラウザ、内容が分かる名前にすると管理しやすくなります。

ファイルの保管場所を決める

スクリーンショットや録画をデスクトップに置いたままにすると、紛失や上書きが起きやすいため、案件や不具合ごとに保存場所を分けましょう。

フォルダー	保存する内容
01_発生時の画像	全体画像、問題箇所の拡大画像
02_画面録画	編集前の元動画、共有用の動画
03_環境情報	URL、日時、端末、ブラウザ、再現手順
04_共有履歴	問い合わせ先、送付日時、回答内容

社内規程や取引先のルールがある場合は、指定されたクラウドストレージやチケット管理システムを利用し、個人向けの公開サービスへ無断でアップロードしないでください。

表示崩れの報告テンプレート

記録した情報は、次のような形式にまとめると、開発担当者やサポート窓口へスムーズに共有できます。

項目	記載例
事象	商品一覧のカードが横方向に重なって表示される
発生日時	2026年4月15日14時30分ごろ
URL	https://example.com/products
端末・OS	Windows 11のノートパソコン
ブラウザ	Google Chromeの使用バージョン
表示サイズ	ブラウザの表示幅1366×768px
再現手順	トップページから商品一覧を開き、表示幅を変更する
発生結果	2列目のカードが1列目に重なり、文字が読めない
添付資料	スクリーンショット2枚、操作画面の録画1本

問い合わせ先が動画を受け取れない場合は、スクリーンショットを基本資料として送付し、動画は指定された方法で別途共有してください。

ファイル容量が大きい場合も、無断で公開リンクを作成せず、アクセス権限と保存期限を設定できる方法を選びます。

スクリーンショットと画面録画の使い分け

状況	適した記録方法	理由
文字や画像の位置がずれている	スクリーンショット	問題箇所を短時間で確認できるため
ページ全体の配置を確認したい	全体スクリーンショット	上下の構成や要素の位置関係を残せるため
クリック後に崩れる	画面録画	発生前後の操作を伝えられるため
スクロール中に崩れる	画面録画とスクリーンショット	動きと最終的な状態を両方確認できるため
一度しか再現しない	画面録画	発生の瞬間を保存しやすいため

多くのケースでは、まずスクリーンショットを保存し、操作の流れや発生条件が分かりにくい場合に画面録画を追加する方法が効率的です。

まとめ

Webサイトの表示崩れを証拠として残すには、問題箇所のスクリーンショットだけでなく、URL、発生日時、端末、OS、ブラウザ、表示幅、再現手順を一緒に記録することが重要です。

縦長のページ全体を確認したい場合はChrome DevToolsを使い、スマートフォン表示の不具合では画面幅や端末の情報も残しましょう。

クリックやスクロールなどの操作をきっかけに発生する問題や、一時的な不具合は、画面録画を使うと発生前後の流れを分かりやすく伝えられます。

画面録画ソフトを選ぶ際は、必要な範囲を録画できるか、マウス操作を確認しやすいか、共有しやすい形式で保存できるかを確認してください。

Bandicamは、ブラウザ画面の操作手順や表示崩れの発生過程を記録する選択肢の一つとして活用できます。

証拠を残す目的は、きれいな画像を作ることではなく、第三者が同じ状況を理解し、必要に応じて再現できる状態にすることです。