Macで社内の問い合わせ対応を効率化する方法 ─ 画面録画で「伝わる」バグ報告のコツ
Webサービスの開発チームでフロントエンドを担当しています。バグを見つけたらテキストで再現手順を書いて報告するのですが、これが地味に面倒でした。
「この画面でこういう操作をすると落ちる」と書いても、どの画面のどのボタンを押したのか伝わりにくいです。かといってMac標準の画面収録（⌘+Shift+5）で撮っても、結局「ここでCommand+Sを押しています」みたいな補足テキストを書く羽目になります。録画しているのにテキストで説明を足すのは二度手間です。
この問題、キー入力やクリック位置が映像に自動で表示される画面録画アプリを使うようにしたらほぼ解消されました。Macでの画面録画を使ったバグ報告のコツを書いてみます。
テキスト vs 画面録画
| テキストでの報告 | 画面録画での報告 | |
|---|---|---|
| 再現手順の正確さ | 報告者が無意識に省略しがち | 操作がそのまま映像に残る |
| 伝達スピード | 文章を書くのに時間がかかる | 操作しながら録画するだけ |
| 確認のやりとり | 「もう少し詳しく」が発生しやすい | 映像を見れば一目瞭然 |
| 環境情報 | 書き忘れることがある | 画面に映り込む |
なぜ文章だけのバグ報告は伝わりにくいのか
バグ報告で一番大事なのは「再現手順」です。ところが、文章で再現手順を書くのは思った以上に難しいものです。
たとえば「設定画面を開いて、通知のところをオフにすると固まる」という報告があったとします。でも実際には設定画面への行き方が複数あったり、「通知のところ」がどのトグルを指すのか曖昧だったりします。報告者は自分の操作が自明だと思っているので、細かいステップを省略してしまいます。受け取る側はそのギャップを埋めるために何度も質問することになります。
画面録画ならこの問題がほぼ解消されます。操作の順番、クリックした場所、入力した内容がすべて映像に残るからです。
画面録画でバグ報告するときのポイント
ただ画面を録画するだけでも十分効果はありますが、いくつかコツを押さえるとさらに伝わりやすくなります。
キー操作とクリック位置を見えるようにする
画面録画だけだと、マウスカーソルの動きは見えても「何をクリックしたか」「どのキーを押したか」がわかりにくいことがあります。特にキーボードショートカットで操作した場合、画面上には何の変化もないまま結果だけが変わります。
キー操作やクリック位置を映像上に表示してくれるツールを使うと、「ここをクリックした」「⌘+Sを押した」という情報が映像に残ります。これがあるだけで、録画を見る側の理解度がまったく違います。
不要な部分はトリミングする
バグの再現に関係ない部分が長々と映っていると、見る側は「どこを見ればいいのか」がわからなくなります。録画した後に前後をカットして、再現に必要な部分だけに絞るのがおすすめです。30秒以内に収まるのが理想的です。
注釈を入れる
「ここに注目してほしい」という箇所に矢印やテキストの注釈を入れると、さらに伝わりやすくなります。特にUIが複雑な画面では、どこを見るべきかを明示する効果が大きいです。
自分が使っているツール
僕がバグ報告の録画に使っているのは、Hydiという自分で開発したMac用の画面録画アプリです。
以前はScreenStudioを使っていたのですが、キー入力の可視化と注釈機能が物足りなくて、自分で作ることにしました。バグ報告では「何を押したか」「どこをクリックしたか」が伝わらないと意味がないので、この2つの機能は必須でした。
Mac標準の画面収録（⌘+Shift+5）でもバグの再現自体は録画できます。ただ、キー入力の表示や注釈追加は別ツールが必要になるので、一つのアプリで完結させたい場合はやはり専用アプリのほうが楽だと思います。
| Mac標準の画面収録 | Hydi | |
|---|---|---|
| キー入力表示 | なし | 自動で映像に表示 |
| クリック表示 | カーソル周囲に円を表示 | カーソル周囲に円を表示 |
| 注釈（テキスト・矢印・図形） | なし | アプリ内で追加可能 |
| トリミング | QuickTimeで簡易的に可能 | タイムライン上で直感的に操作 |
| GIF書き出し | なし | 品質を選んで書き出し可能 |
| 出力形式 | MOV | MP4 / GIF / PNG / JPEG |
バグ報告にはGIF形式が地味に便利で、SlackやGitHubのIssueに貼ると自動再生されるので、相手がファイルを開く手間がありません。
実際に変わったこと
自分がバグ報告を録画で送るようにしてから、一番変わったのはバグ報告にかかる手間です。以前はテキストで再現手順を書いて、スクリーンショットを貼って、キー操作の説明を足して……とやっていたのが、今は録画して必要なら注釈を足すだけで済みます。
バグ報告に限らず、「操作手順を共有する」場面全般で画面録画は効果的です。もし同じような課題を感じているなら、まずは一度試してみてください。