バグレポートのための画面録画方法：ステップバイステップガイド
写真は千の言葉に値しますが、動画は千の写真に値します。バグレポートにおいて、画面録画は、数分で修正されるチケットと、数週間バックログに放置されるチケットの違いを生み出す可能性があります。
このガイドでは、画面録画を使用すべきタイミング、BugCapturer で画面録画を作成する方法、そして録画をできるだけ有用にするためのベストプラクティスをご紹介します。
画面録画とスクリーンショットの使い分け
すべてのバグに録画が必要なわけではありません。判断のためのクイックガイドをご紹介します：
| Bug の種類 | スクリーンショット | 画面録画 |
|---|---|---|
| 静的なレイアウトの問題 | ✅ 最適な選択 | ❌ やり過ぎ |
| テキストの欠落または誤り | ✅ 最適な選択 | ❌ やり過ぎ |
| アニメーションまたはトランジションの不具合 | ❌ キャプチャできない | ✅ 必須 |
| ホバー状態またはツールチップの問題 | ❌ キャプチャが困難 | ✅ 最適な選択 |
| 複数ステップのワークフローのバグ | ❌ 多くのスクリーンショットが必要 | ✅ 1つの録画ですべてをカバー |
| パフォーマンス/ラグの問題 | ❌ 速度を示せない | ✅ タイミングを示せる |
| 断続的/タイミングに依存するバグ | ❌ キャプチャできない | ✅ キャッチできる可能性が最も高い |
一般的なルール: 注釈付きの1枚のスクリーンショットでバグを明確に説明できる場合は、スクリーンショットを使用してください。バグに動き、タイミング、または複数のステップが含まれる場合は、動画を録画してください。
BugCapturer で画面を録画する方法
BugCapturer v1.2.0 は画面録画をシンプルにし、すべてをローカルに保持します — アップロードもサードパーティサービスも必要ありません。
ステップ1: BugCapturer を開く
ブラウザツールバーの BugCapturer アイコンをクリックします。利用可能なオプションを含むポップアップが表示されます。
ステップ2: 録画を開始
「Record Screen」ボタンをクリックします。BugCapturer が画面共有の許可を求めます — 録画したいブラウザタブを選択して「Share」をクリックします。
ステップ3: バグを録画する
バグを再現する手順を実行します。録画コントロールが画面の下部に表示され、経過時間が示されます。必要に応じて一時停止と再開が可能です。
ステップ4: 停止して確認する
完了したら「Stop Sharing」をクリックします。録画が BugCapturer のポップアップに表示され、確認できます。
ステップ5: トリミング（任意）
録画の最初または最後に不要な映像がある場合は、トリムツールを使用してカットできます。ハンドルをドラッグして、保持したい部分を選択します。
ステップ6: キーフレームの抽出（任意）
録画からフレームを PNG 画像として抽出して、重要な瞬間をハイライトできます。これらはクイックリファレンスのために録画と一緒に使用できます。
ステップ7: バグレポートに添付する
これで録画はバグレポートに含める準備ができました。BugCapturer 経由でメールを送信すると、録画ファイルが自動的に添付されます。
画面録画のベストプラクティス
短く保つ
15-30秒を目標にしてください。バグの再現に時間がかかる場合は、関連する部分だけを表示するように録画をトリミングすることを検討してください。
手順を示す
録画を開始したら、再現手順を実行してください。これにより、開発者は視覚的な証拠と手順の両方を1つのパッケージで入手できます。
問題をハイライトする
録画後に注釈ツールを使用してください — 抽出したフレームの問題領域に注意を引くために、矢印やボックスを追加します。
ファイルサイズを確認する
WebM 録画は通常、15-30秒で 1-3 MB です。録画がこれよりはるかに大きい場合は、録画品質を下げるか、より積極的にトリミングしてみてください。
明確な名前を付ける
recording-001.webm の代わりに、cart-counter-stale-on-firefox.webm のような説明的なファイル名を使用してください。
一般的なユースケース
ホバー状態の Bug
カーソルが少し外れただけで消えてしまうドロップダウンメニューは、スクリーンショットで説明することはほぼ不可能です。5秒の録画で正確な動作をキャプチャできます。
アニメーションのパフォーマンス
ページ遷移が途切れたりラグが生じたりする場合 — 録画は実際のフレームレートとタイミングを示し、説明よりもはるかに有益です。
複数ステップのフォーム Bug
5ステップ中の4ステップ目で失敗するフォーム — 5枚のスクリーンショットの代わりに、1つの録画でフロー全体とどこで問題が発生するかを示せます。
トラブルシューティング
録画許可が表示されない
サポートされているブラウザ（Chrome 100+）を使用していることを確認してください。許可ダイアログが表示されない場合は、ブラウザのサイト設定で画面録画の許可を確認してください。
録画が大きすぎる
必要な最小限の長さにトリミングしてみてください。高解像度ディスプレイ（4K）を録画している場合は、録画前にブラウザウィンドウのサイズを小さくすることを検討してください。
音声が聞こえない
BugCapturer はデフォルトでタブの音声を録音します。ナレーションを追加する必要がある場合は、代わりにオペレーティングシステムの画面録画ツールを使用してください。
---
BugCapturer はバグ報告とWebフィードバックのための無料の Chrome 拡張機能です。すべてのデータ処理はブラウザ内でローカルに行われます — サーバーもアカウントもトラッキングもありません。