バグ報告用の画面録画:開発者向け完全ガイド

Aike著 | 最終更新:

「動きません」としか書かれていないバグ報告を受け取り、困った経験はどの開発者にもあるでしょう。UIの問題か、バックエンドの問題か。毎回発生するのか。どのブラウザーで、どのような条件で起きるのかも分かりません。

動画によるバグ報告なら、この曖昧さを解消できます。30秒の画面録画で、文章なら何段落も必要な情報を伝えられ、報告者が意識していなかった細部まで映ることがあります。

バグ報告用に画面を録画

バグ報告を動画で残す理由

現代の開発チームでは、動画によるバグ報告が標準的な手法になりつつあります。その理由は次のとおりです。

再現が速くなる

開発者はバグが発生する正確な操作を確認できます。

  • クリックや操作の正確な順序
  • 使用した入力値
  • 問題が起きたタイミング
  • 実際の結果と期待される結果の違い

Microsoftの調査では、動画を含む添付ファイル付きのバグ報告は、平均で23%速く修正されることが分かっています。

やり取りを減らせる

動画がない場合、典型的なバグ報告のやり取りは次のようになります。

  回数   やり取り

 1

 QA:「ログインボタンが動きません」

 2

 開発者:「ブラウザーは何ですか?コンソールにエラーはありますか?」

 3

 QA:「Chromeです。エラーは表示されていません」

 4

 開発者:「こちらでは動きます。認証情報を共有できますか?」

 5

 QA:[認証情報を共有]

 6

 開発者:「まだ正常です。録画してもらえますか?」

動画があれば、「Chromeでログインボタンが反応しない様子を録画しました」という1通のメッセージで済みます。

断続的なバグを記録できる

一部のバグは時々しか発生しません。発生時の映像を残せば証拠になり、開発者は録画を詳しく調べて発生条件を把握できます。

資料として活用できる

バグ報告動画は次の用途にも役立ちます。

  • 回帰テストの証拠
  • 新しいQAメンバー向けの研修資料
  • 問題の発生状況を示す履歴

録画すべき内容

完全なバグ報告動画には、次の内容を含めます。

必須要素

  1. 初期状態から開始:アプリの起動またはページの新規読み込みを映す
  2. 前提条件:ログイン、ページ移動、データ入力など必要な準備を映す
  3. バグの発生操作:問題を引き起こす正確な手順を映す
  4. 結果:エラー表示、誤動作、クラッシュなど実際に起きたことを映す
  5. 期待される動作:本来どうなるべきかを必要に応じて説明する

記録すべき技術情報

  項目   記録方法

 ブラウザーとバージョン

 「ヘルプ」→「バージョン情報」を映すか動画名に記載

 コンソールエラー

 再現前に開発者ツール(F12)を開く

 ネットワークリクエスト

 開発者ツールの「Network」でAPIエラーを表示

 URL・ルート

 移動時にアドレスバーを映す

 画面解像度

 特定の解像度で起きる場合は明記

適切なツールの選び方

すべての画面録画ソフトがバグ報告に適しているわけではありません。次の機能を確認しましょう。

バグ報告に重要な機能

  • 動作負荷が小さい:システム資源を消費してバグを隠さない
  • カーソル強調:クリックや移動を見やすくする
  • クリック表示:クリックした時点と場所を示す
  • システム音声録音:エラー音や通知音を記録する
  • マイク録音:必要に応じて説明を加える
  • 簡単なトリミング:不要部分をすぐに削除する
  • 小さいファイルサイズ:バグ管理ツールで共有しやすくする

無料ツール

Windows Game Bar(標準搭載)

  • Win+Gキーで起動
  • 基本機能のみだが短い録画には十分
  • カーソル強調機能がない点が大きな制約

OBS Studio

  • 無料で高機能
  • バグ報告に適した録画には設定が必要
  • 操作の習得に時間がかかる

Loom(無料プラン)

  • リンクで簡単に共有可能
  • 無料プランは5分まで
  • 短く簡易的な報告に適している

プロ向けツール

LosslessRec

ゲームと業務の両方に対応するLosslessRecには、バグ報告に役立つ次の機能があります。

  • GPUエンコード:動作負荷を最小限に抑え、バグを隠さない
  • クリック強調:マウスクリックを視覚的に表示
  • カーソル効果:カーソルの周囲を円で強調
  • マルチトラック音声:システム音声とマイクを別々に録音
  • 高画質出力:録画内の文字を鮮明に表示

Camtasia

  • 録画と編集を1本で完結
  • 価格が高い(買い切り299ドル)
  • 完成度の高いチュートリアル形式の報告に適している

最適な録画設定

バグ報告では、ファイルサイズより鮮明さを優先します。開発者が文字、UI要素、エラーメッセージをはっきり確認できる必要があります。

  設定   推奨値   理由

 解像度

 ネイティブ(1:1)

 文字を鮮明で読みやすく保つ

 フレームレート

 30 fps

 UIには十分で、ファイルも小さい

 ビットレート

 10-15 Mbps

 容量を増やしすぎず文字を鮮明に保つ

 コーデック

 H.264

 幅広い環境で再生可能

 形式

 MP4

 各種環境で再生でき、バグ管理ツールに埋め込める

 カーソル

 強調+クリック表示

 操作内容を正確に示す

ヒント:必ず画面のネイティブ解像度で録画してください。縮小すると文字がぼやけて読みにくくなり、バグ報告で最も避けたい状態になります。

ベストプラクティス

録画前

  1. 先に一度再現する:正確な手順を把握しておく
  2. 機密情報を消す:パスワードや個人情報を含むタブを閉じる
  3. 環境を準備する:必要なウィンドウやタブを開いておく
  4. 必要なら開発者ツールを開く:「Console」と「Network」を準備する
  5. 音声を確認する:システム音が問題の説明に役立つか判断する

録画中

  1. 状況から始める:冒頭でアプリやページを映す
  2. 意識して操作する:操作が分かるよう普段よりゆっくり動かす
  3. 操作の間を空ける:クリック後に少し止まり、結果を映す
  4. 1つの問題に集中する:1本の動画で複数の問題を扱わない
  5. 必要なら説明する:短い音声説明で分かりやすくする

録画の流れの例

  • 0:00~0:03:アプリの起動またはページ読み込みを映す
  • 0:03~0:08:問題が起きる場所へ移動する
  • 0:08~0:15:バグを発生させる操作を行う
  • 0:15~0:20:エラーや誤動作など結果を映す
  • 0:20~0:25:可能なら期待される動作を簡潔に示す

録画後

  1. 不要部分を削る:長い読み込み時間や不要な操作を削除する
  2. 読みやすさを確認する:動画内のエラーメッセージが読めるか確認する
  3. 必要なら圧縮する:多くのバグ管理ツールで扱える50MB未満にする
  4. 分かりやすい名前にする:「bug-login-timeout-chrome-2026-03-09.mp4」など

バグ報告テンプレート

バグ報告に動画を添付するときは、次の情報を整理して記載します。

  項目   例

 タイトル

 ログイン失敗後にログインボタンが反応しない

 重要度

 高:ユーザーがログインできない

 環境

 Windows 11、Chrome 122、本番環境

 再現手順

 1. 無効な認証情報を入力
 2. ログインをクリック
 3. エラーを確認
 4. 有効な認証情報を入力
 5. ログインをクリック(反応なし)

 期待結果

 有効な認証情報でログインに成功する

 実際の結果

 最初の失敗後、ログインボタンが反応しない

 動画

 [添付:bug-login-button-2026-03-09.mp4]

 コンソールエラー

 TypeError: Cannot read property 'submit' of undefined

よくある質問

1. バグ報告動画の長さはどのくらいが適切ですか?

30秒から2分が理想です。不要な手順を省き、バグを明確に映してください。準備に時間がかかる場合は、準備完了後から録画を始めるとよいでしょう。

2. 音声による説明を入れるべきですか?

必須ではありませんが、複雑なバグには有効です。「期待結果:成功メッセージ、実際:何も起きない」といった5秒ほどの説明で曖昧さを解消できます。簡潔で業務的な内容にしてください。

3. バグ管理ツールに添付する動画の上限は?

多くのバグ管理ツール(Jira、GitHub、Bugzilla)の上限は10~100MBです。50MB未満を目安にしてください。動画が大きい場合は次の方法を検討します。

  • 不要部分をトリミングする
  • ビットレートを下げる(8~10Mbpsでも十分鮮明)
  • フレームレートを下げる(UIのバグなら15fpsでも十分)
  • 動画サービスに置いてリンクを共有する

4. Webカメラも録画するべきですか?

必要ありません。バグ報告では画面だけに集中すべきです。Webカメラ映像は注意をそらし、この用途では情報価値を加えません。

5. モバイル端末のバグはどう録画しますか?

  • iOS:標準の画面収録(コントロールセンター→画面収録)
  • Android:標準の画面録画(クイック設定→画面録画)またはADB
  • エミュレーター:エミュレートした端末をPCの録画ソフトで記録

6. バグが時々しか起きない場合は?

テスト中は録画を続けてください。断続的なバグを捉えられれば、5分の動画でも価値があります。バグ報告には発生時刻を記載しましょう。

7. 顔やWebカメラ映像を重ねるべきですか?

バグ報告では不要です。Webカメラの重ね表示はチュートリアルやプレゼンには有効ですが、バグ報告では注意をそらし、ファイルサイズを増やすだけです。画面だけに集中してください。



著者について

AikeはLosslessAIの編集長です。10年以上の経験を持ち、AIの動向、動画・音声編集、変換、トラブル解決、ソフトウェアレビューに関する実用的な情報を発信しています。その専門知識を生かし、ユーザーのデジタル体験向上を支援しています。

ホーム > LosslessRec > 画面録画ガイド > バグ報告用に画面録画する方法