表示崩れを一度で伝えるコツは、写真を2枚にすることです。崩れた部分だけでなく、ページ全体と拡大を撮る。そこへURL、端末、ブラウザ、発生時刻、操作手順、正しい状態を添えます。
修正担当が同じ画面を再現できれば、最初の連絡から調査へ移れます。
写真の腕は関係ありません。画像2枚と短い6項目を一組にするだけで、どのページの何を見ればよいかが伝わります。急いでいるときほど、画像1枚だけを先に送らず、再現に必要な情報までそろえます。
この記事でわかること
- 表示崩れを伝えやすいスクリーンショットの撮り方
- 画像と一緒に伝えたい6つの情報
- 動きの不具合を操作手順にする方法
- 撮影前に隠したい個人情報や認証情報
- そのまま使える不具合報告のテンプレート
スクリーンショットは「全体」と「拡大」の2枚にする
スクリーンショットは、同じ画面を全体と拡大の2枚に分けます。崩れている場所だけを大きく撮ると、文字やボタンの状態は分かっても、それがページのどこなのかが伝わりません。反対にページ全体だけでは細かなズレが見えなくなります。
- ページ内の位置が分かる全体の画像
- 崩れている部分が読める拡大画像
全体のほうには、ページ上部の見出しやメニューなど、場所の目印になるものを入れます。拡大のほうには、はみ出した文字や重なったボタンなど、直してほしいところを大きく写します。
赤枠や矢印を付けられるなら、指摘は1枚につき1か所が分かりやすいです。どうしても複数を1枚に書き込むときは、A・B・Cと印を振って、本文の説明と対応させておくと迷いません。
ページ全体を縦長の1枚に収める撮り方もありますが、縮小されて細部が読めなくなります。私は、全体1枚と問題箇所の1枚に分けています。受け取る側が拡大操作を繰り返さずに済みます。
画像と一緒に6つの情報を送る
画像だけでは同じ状態を再現できないことがあります。下の6項目を画像に添えます。
| 項目 | 書き方の例 |
|---|---|
| ページURL | https://example.com/service/ |
| 端末 | iPhone、Androidスマートフォン、Windowsパソコンなど |
| ブラウザ | Safari、Chrome、Edgeなど |
| 発生時刻 | 7月26日 10時ごろ |
| 操作手順 | メニューを開き、サービスを選んだ後 |
| 正しい状態 | ボタンが文章の下に1列で並ぶ |
この中で特に大事なのがURLです。「サービスページです」だけだと、似た名前の固定ページや、過去に作ったテストページと取り違えることがあります。省略せず、実際に崩れを見たページのURLをそのまま貼ります。
端末やブラウザは、正確な名前が分からなくても大丈夫です。「会社のノートパソコン」「縦向きのスマートフォン」くらいでも十分伝わります。
画面幅まで分かれば理想ですが、それを調べるために手を止める必要はありません。分かる範囲を正確に書くほうが優先です。
「いつからか」は、無理に思い出さなくて構いません。推測で「先週くらいから」と書かれるより、「7月26日の朝に気づいた」と確実な時刻だけあるほうが助かります。
動きの不具合は、操作順を番号で書く
メニューが開かない、送信ボタンを押しても進まない、画像が途中で消える。こういう動きの問題は、静止画では伝わりません。スクリーンショットに操作手順を足します。
- トップページを開く
- 右上のメニューボタンを押す
- 「サービス」を押す
- メニューが閉じ、ページは移動しない
「押しても動きません」だけだと、どこを押したのか、その前に何をしていたのかが分かりません。ページを開いたところから問題が起きるまでを番号で並べておくと、こちらでも同じ操作をなぞれます。
あわせて、毎回起きるのか、たまになのかも書いておくと、原因を絞る手がかりになります。「3回試して3回とも」「再読み込みしたら一度だけ動いた」のように、実際に確かめた範囲だけで大丈夫です。
動画を撮る場合も、URL、端末、ブラウザ、期待する状態は文字で残しておくのがおすすめです。動画だけだと、再生しながら必要な情報を探すことになって、かえって時間がかかります。
「崩れている」だけでなく、正しい状態を書く
意外と抜けやすいのが、ここです。同じ画面を見ても、それが不具合なのか意図したデザインなのか、制作側だけでは判断できないことがあります。スマートフォンでは要素を縦に並べたり、一部を隠したりする設計をよく使うので、なおさらです。
そのため、今の状態と一緒に「どうなってほしいか」を書きます。
- 現在：ボタンが文章の上に重なっている
- 正しい状態：文章の下にボタンが表示される
- 現在：商品画像の右側が切れている
- 正しい状態：画像全体が枠内に収まる
- 現在：パソコンでは見える電話番号がスマートフォンでは消える
- 正しい状態：スマートフォンでも電話番号を表示したい
正しい状態が分からなければ、「パソコンと同じ内容が読めればいい」といった困りごとベースで構いません。見た目まで完全にそろえる必要があるかどうかは、そのあと相談すれば決まります。
撮る前に、個人情報と認証情報を隠す
スクリーンショットには、送るつもりのなかったものまで写り込みます。撮影前に画面の端まで一度見ます。
- フォームに入力した氏名、メールアドレス、電話番号
- 注文番号、顧客名、住所などの顧客情報
- WordPress管理画面のユーザー名
- ログイン用URLや一時的な認証コード
- ブラウザのタブ名、ブックマーク、通知
- アクセス解析画面に表示された社内用の名称や数値
必要な部分だけ切り取るか、塗りつぶして読めなくします。隠しきれたか自信が持てない画像は、送らずに公開ページで撮り直すのが確実です。
管理画面の不具合を伝えるときも、パスワードや認証コードは画像にも本文にも入れません。ログイン情報の共有が必要になったら、スクリーンショットとは別に、安全な渡し方を決めてからにします。
見落としやすいのが公開ページです。問い合わせの完了画面や会員ページには、個人情報が表示されていることがあります。「公開されているページだから大丈夫」とは考えず、撮る範囲を見直します。
そのまま使える不具合報告テンプレート
長い文章を書く必要はありません。この形にはめるだけで、必要な情報がそろいます。
【困っていること】
スマートフォンで、問い合わせボタンが文章に重なります。
【URL】
https://example.com/contact/
【端末・ブラウザ】
iPhone／Safari／縦向き
【確認した時刻】
7月26日 10時ごろ
【操作手順】
1. 上のURLを開く
2. ページ下部までスクロールする
3. 問い合わせ欄を表示する
【現在の状態】
ボタンが直前の文章に重なり、文章が読めません。
【正しい状態】
文章の下に、ボタンが重ならず表示される状態を希望します。
【試したこと】
再読み込みと、スマートフォンの縦横切り替えを試しました。
【添付】
ページ全体1枚、問題箇所の拡大1枚埋まらない欄は、無理に埋めなくて大丈夫です。「試したこと：なし」でも問題ありません。むしろ、推測で埋められるより正確です。
自分で整理できる範囲と、相談したい条件
公開ページのURL、端末、ブラウザ、操作手順をそろえて、全体と拡大の2枚を撮る。ここまでは自分で進められます。
サイトの設定を変える作業ではありません。同じ操作をもう一度試し、再現するかどうかも確かめられます。
次のような場合は、設定やCSSを自分で変更せず、情報をそろえた段階で相談してもらうほうが安全です。
- 個人情報がある管理画面でだけ発生する
- 特定の人や社内環境でしか再現しない
- 決済、会員登録、問い合わせ送信に関わる
- 直前にテーマやプラグインを更新している
- 一度直っても、しばらくすると再発する
不具合が複数たまり、どれから伝えるか決まっていない場合は、たまったWeb修正の依頼で優先順位を付ける方法で今日・今月・保留へ分けます。最初に見る1件を決めてから、その1件の画像と再現情報をそろえる順番です。
依頼後に対応中と確認待ちが混ざる場合は、ホームページの修正依頼を管理する表に残す7項目へ進みます。スクリーンショットは1件の内容を伝える資料、管理表は複数件の現在地を追う資料として分けます。
不具合の連絡は、原因まで調べてから送る必要はありません。再現できる情報があれば、修正担当が原因を追えます。「よく分からないけど、こうなっています」で十分です。
おわりに
表示崩れを一度で伝えるコツは、ページ内の位置が分かる全体画像と、問題箇所が読める拡大画像。この2枚にURL、端末、ブラウザ、時刻、操作手順、正しい状態を添えることです。修正担当が同じ状態を再現できるため、情報不足による聞き返しを減らせます。
不具合の整理や修正依頼が繰り返し発生し、社内だけでは管理しきれない。そんなときは、日々の更新や連絡方法を分けるところからお力になれるかもしれませんので、お気軽にご相談ください。
