ブログ

開発者が対応できるバグ報告の書き方(スクリーンショット付き)

公開 · バグ報告, QA, スクリーンショット

開発者が対応できるバグ報告の書き方(スクリーンショット付き)

対応してもらえるバグ報告には、正確な手順・ウィンドウ全体のスクリーンショット・エラー文・短い録画が欠かせません。QA・サポート・PM 向けの実践ガイド。

スクリーンショットだけでは、ほとんど何も直りません。バグが直るのは、開発者が再現できる報告があったときです。正確な手順、見たこと、そして期待していた結果。スクリーンショットはそれを目に見える形にしますが、それはエラー文だけを切り取った狭い画像ではなく、十分な文脈が写っている場合に限ります。

このガイドは QA テスター、サポートチーム、プロダクトマネージャー向けです。何をキャプチャするか、再現できる手順の書き方、個人情報の隠し方、そして短い録画のほうが速い場面を扱います。

役に立つスクリーンショットに写っているもの

タイトルバー、ツールバー、開いているダイアログも含めて、ウィンドウ全体をキャプチャします。エラー文の周りだけを切り抜くと、アプリのバージョン、開いていたメニュー、表示していたページ——開発者が問題を再現するのに必要な情報——が隠れてしまいます。

Web アプリなら、ブラウザのコンソールも写します。ブラウザの開発者ツールを開き、コンソールタブに切り替えます。リクエストが裏で失敗している場合、その理由はたいていそこに出力され、ページには表示されません。

正確な状態を写します。エラー文そのもの、入力をはじいたフィールド、開いていたメニューなどです。メッセージを記憶から打ち直さず、画面からコピーしてください。

場所を言葉で説明するのではなく、印を付けます。丸、矢印、番号があれば、開発者は問題へ一直線に向かえます。

INSNAP の番号付き手順 · 1280 × 800

InSnap ならこれを素早く行えます。Mac では ⌘1、Windows では Ctrl+1 を押し、目的のウィンドウにカーソルを合わせてクリックします。選択範囲はウィンドウに吸着し、多くのアプリではカーソルの下のボタンにまで吸着します。図形、線、テキスト、番号で注釈を付けて、結果をコピーします。文章を書いている間は、コピーして ⌘2 か Ctrl+2 を押せば、エディターの上にピン留めできます。

開発者が再現できる手順を書く

  1. 既知の状態から始める。 「サインアウト済み、新しいブラウザタブ、拡張機能なし」と書けば、開発者は何をリセットすればよいか分かります。
  2. 1 ステップ 1 操作 で、画面のラベルを使って書きます。「保存をクリック」「書き出し › PDF を選ぶ」のように。言い換えはしません。
  3. 起きたことと期待していたことを書きます。「保存されずにダイアログが閉じた」は対応できますが、「うまくいかなかった」は対応できません。
  4. 環境を列挙します。 OS のバージョン、アプリのバージョン、そのバグが毎回起きるのかときどき起きるのか。
  5. スクリーンショットは、対応する手順のそばに置きます。 複数撮ったなら、画面上でも同じように番号を振ります。

報告のタイトルは、原因の推測ではなく症状を書きます。「PDF への書き出しが終わらない」であって、「書き出し機能が壊れている」ではありません。

送る前に個人情報を隠す

顧客名、メールアドレス、口座番号、URL に含まれるトークン、顔、私的なメッセージは、バグトラッカーに載せるべきではありません。ファイルを添付する前にぼかすかモザイクをかけ、画面の端も確認します。ブラウザのタブ、通知のポップアップ、ファイルパスは、メインのウィンドウより多くを漏らしていることがよくあります。

InSnap のモザイクツールにはぼかしもあります。何かを完全に消したいときは、スマート消去が周囲の背景から領域を埋めます。なめらかな背景、グラデーション、インターフェースの背景ではうまく働きますが、ごちゃごちゃした写真や、対象の色が背景に近い場合は信頼できません。スマート消去は Pro の機能で、モザイクとぼかしは無料です。

これらはすべてあなたのコンピューター上で行われます。任意の Cloud サブスクリプションを通じて共有を選ばない限り、InSnap がスクリーンショットをアップロードすることはありません。

言葉で足りないときは短い録画を添える

バグには流れのあるものがあります。ちらつくドロップダウン、おかしな場所に落ちるドラッグ、読み込んだあとに飛ぶページ。数秒の動画は、1 段落より雄弁です。

画面の一部を録画する · 1280 × 800

InSnap は画面の一部を録画でき、システム音声、マイク、カメラ、クリック効果、キー入力のオーバーレイを選べます。ここではクリックとキー入力のオーバーレイが特に役立ちます。見る人に、押したキーが正確に伝わるからです。クイック録画は MP4 で保存でき、基本の画面収録は無料です。GIF の出力や、自動ズーム・カメラのピクチャインピクチャ・原画質の書き出しといった編集は Pro です。

クリップは短くし、バグの 1、2 手前から始めます。録画があっても、書いた手順と静止したスクリーンショットも添えてください。スマートフォンで読む人や、動画を再生できない人もいるからです。

よくある質問

バグ報告には何を含めるべきですか?

問題を再現する正確な手順、起きたこと、期待していたこと、アプリと OS のバージョン、そしてウィンドウ全体のスクリーンショットを少なくとも 1 枚。動きのあるものには短い録画を添えます。

スクリーンショットをエラー文だけに切り抜くべきですか?

いいえ。ウィンドウ全体を残します。タイトルバー、開いていたメニュー、周囲のページに、開発者が必要とするバージョンや状態が写っていることが多いからです。エラーは切り抜かずに、丸や矢印で印を付けます。

スクリーンショットの個人情報はどう隠しますか?

添付する前に、名前・メール・トークン・顔にぼかしかモザイクをかけ、ウィンドウの端にあるブラウザのタブや通知も確認します。InSnap はあなたのコンピューター上で編集し、共有を選ばない限り何もアップロードしません。

動画はスクリーンショットより優れていますか?

答える問いが違います。スクリーンショットは状態を、動画は流れを示します。静的な問題には番号付き手順を添えたスクリーンショットを、タイミング・アニメーション・ドラッグ・ちらつきが関わるバグには短い録画を使います。

次のスクリーンショットは、ホットキーひとつで。

macOS 14.4 以降(Apple Silicon / Intel)· Windows 10 以降(64 ビット)