Zenn
🐕

【非エンジニア向け】簡易バグ報告シート

2022/09/21に公開
#
テスト
idea

これは何？

  • エンジニアやカスタマーサポートが、報告者のバグをすぐに解決しやすくするようなバグ報告の方法をまとめたもの

※主に社内の非エンジニア向けにバグ報告する際の参考資料として作成しています。

使い方

  • バグ報告をする人（以降報告者）にこの「簡易バグ報告シート」を渡す
  • 報告者は、後述する「バグ報告のテンプレート」を利用して、バグ報告テンプレートに詳細を記載する
  • 報告者は、後述する「チェックリスト」を見て適切な報告ができているか確認します。
  • バグ報告をもらった調査する人（以降調査者）は、このシートをもとに調査を進めます。

※社内ではSlack Botで「バグ報告」と記載するとこの簡易バグシートが自動で出る設定にしています。

バグ報告のテンプレート

  • 以下コピペして利用してください。
【実現したいこと】

- 投稿1を閲覧したいです。

【環境】

- Windows 10
- Google Chrome

【事前準備】

- https://example.com/sign_in へアクセスする
- 以下の値を入力する
   - ID: xxxx
   - PASS: xxxx (DMしました)
- ログインをクリックする

【再現手順】

- https://example.com/wp/posts/1 を開く

【期待値】

- タイトル「投稿1」が表示されること

【結果】

- NG
- 「管理者に報告してください」というページが出てくる

【ログ】

- 以下表示した際のエラーログです
- 以下ページを開いた時のスクリーンショットです
- 以下再現手順を行った際のGIF/動画です

チェックリスト

  • [] 実現したいことについて共有できていますか？
  • [] バグが発生している端末などの環境について共有できていますか？
  • [] バグが発生する再現手順について共有できていますか？
  • [] 再現手順を踏んだ後の期待値が記載されていますか？
  • [] どのページを開いているか共有されましたか？
  • [] 誰がどう見ても解釈が揺れない具体的な表現ができていますか？
  • [] 解釈ではなく、事実を共有できていますか？

実現したいことについて共有できていますか？

  • 調査者は、今起こっている問題を解決するために、本来どうあるべきなのかを定義してから修正を進めます。
  • 一方で、何をしようとしているのかがわからない場合、何が問題なのか把握することが非常に困難です。

誰がどう見ても解釈が揺れない具体的な表現ができていますか？

  • 調査者は、事実をもとにバグの原因を調査します。
  • そのため、報告者の表現に解釈が揺れる表現がされている場合、調査が難航します。
  • 例えば、「WordPressにログインできない」という表現があったとします。
  • 調査者は、この表現を見たときに、適切に事実を把握できないため、以下の推測を行います。
    • 正しいログインページを開けているのか？ログインページだと思っているページが実は違うページなのでログインできないのかもしれない。
    • アカウントが発行されていないので、ログインできていないのではないか？
    • IDとパスワードが間違っているのではないか？
    • 実はログインできているけど、報告者がログインできていないと思い込んでいるだけなのではないか？
  • これらの推測をもとに、一つ一つこういう質問をしていきます。
    • 「ログインをする際に、どういうURLを開きましたか？」
    • 「ご利用されたアカウントのIDをご共有いただけますか？」
    • 「入力されたIDとパスワードを、DMでお送りいただけますか？」
    • 「ログインできていない」とおっしゃられていますが、実際どのページを見られておりますでしょうか？
  • 一方で報告者からしたら、これ一つ一つ答えるのって毎回しんどいので、先にチェックリストに沿った情報が埋まっていると一発で調査できるのでおすすめです。
  • 解釈が揺れる言葉は基本使わないように報告を心がけましょう。

「解釈」ではなく、「事実」を共有できていますか？

  • 「WordPressにログインできない」は、事実ではなく解釈です。
  • 「https://example.com/sign_in にアクセスし、IDとパスワードを入力してログインをクリックすると、管理者に問い合わせてくださいというページが出てくる」は事実です。
  • 調査者は、解釈を入れられると基本全部無視し、事実を調査しています（再現できないため）
  • 解釈をどうしても入れたい場合は、事実と並列に記載すると非常に読みにくくなるので、必ず事実と切り分けて下さい。

バグ報告に便利なツール

Gyazo

  • スクリーンショット、GIFをWeb上で共有できるツール
  • ファイルのアップロードができない環境でも、とりあえずWeb上で共有してくれたりするので便利
  • またGithubなどの一部のサービスではURL貼り付けるだけでGIFを再生してくれるので重宝します。
  • 最悪、テキストでテンプレートで報告するのが面倒であれば、GIFで動画とって、ぺって貼り付けて共有でもよいと思います。

https://gyazo.com/ja

Windows純正レコーダー

  • WIN+Gで録画できます。

Mac純正レコーダー

  • CMD + SHIFT + R で録画できます。

Discussion