スクリーンショットを送ったのに、「どのページですか？」と聞き返された！？
急いで直してほしい時ほど、この往復がもどかしいですよね。
受け取る側からすると、画像1枚では動きようがないことが多いんです。同じ画面を自分でも開いてみないと、原因を探せないので。逆に言えば、こちらが同じ状態を再現できる情報さえあれば、すぐ調査に入れます。写真の腕は関係ありません。画像2枚と、短い6項目。これだけで最初のやり取りはぐっと減ります！
この記事でわかること
この記事では、確認の往復を減らすために、何を撮って何を添えるかを整理します。
- 表示崩れを伝えやすいスクリーンショットの撮り方
- 画像と一緒に伝えたい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を自分で変更せず、情報をそろえた段階で相談してもらうほうが安全です。
- 個人情報がある管理画面でだけ発生する
- 特定の人や社内環境でしか再現しない
- 決済、会員登録、問い合わせ送信に関わる
- 直前にテーマやプラグインを更新している
- 一度直っても、しばらくすると再発する
もし、不具合を伝える相手が決まっていない、サーバーや管理画面の情報が手元にない、という状態なら、伝え方より先に管理情報の整理が必要かもしれません。何を受け取っておくとよいかは、制作会社との保守契約が終わる前に受け取る管理情報にまとめました。
最後にもうひとつ。不具合の連絡は、原因まで調べてから送る必要はまったくありません。再現できる情報さえあれば、あとはこちらで追えます。「よく分からないけど、こうなっています」で十分です。
おわりに
表示崩れを一度で伝えるコツは、ページ内の位置が分かる全体画像と、問題箇所が読める拡大画像。この2枚にURL、端末、ブラウザ、時刻、操作手順、正しい状態を添えることです。ここまでそろっていれば、聞き返される回数はかなり減ります。
不具合の整理や修正依頼がたびたび発生して、社内だけでは回らなくなってきた。そんな時は、日々の更新や制作会社とのやり取りも含めてお手伝いできます。お困りなら、お力になれると思うのでお気軽にご相談ください。
