ブログ

コードレビューやプルリクエストでスクリーンショットを使う方法

公開 2026年10月25日 · コードレビュー, プルリクエスト, スクリーンショット, ワークフロー

UI の変更は差分だけではレビューしにくいものです。変更前と変更後、注釈付き、重要な状態を揃えた小さなスクリーンショット一式があれば、プルリクエストはレビューしやすくなります。

ボタンの動作、フォームの検証、読み込み状態を変えるプルリクエストは、差分から判断するのが難しいものです。レビュアーは結局ブランチをチェックアウトし、再ビルドし、意図した画面を探すことになります。小さくよく作られたスクリーンショット一式が、その作業をなくします。

変更前と変更後をキャプチャする

見た目が変わる変更では、同じ画面を 2 回キャプチャします。

1. ベースブランチで、影響を受ける範囲をキャプチャします。
2. 自分のブランチで、同じウィンドウサイズとズームで同一の範囲をキャプチャします。
3. 両方のキャプチャを残します。片方だけをきつく切り抜かないでください。

ビューポート、ブラウザのズーム、ウィンドウサイズを揃えることが、比較を意味のあるものにします。レスポンシブなレイアウトなら、重要な幅（たとえば 1280 と 390）をキャプチャし、ラベルを付けます。

差分だけに注釈を付ける

レビュアーに必要なのは、どこを見るかであって、全体のツアーではありません。

• 1 枚のスクリーンショットに複数の変更があるときは 番号。1 が新しい空の状態、2 がエラーメッセージです。
• 変更された範囲を囲む 図形。
• 期待する動作を短く書いた テキスト。
• 顧客名、メールアドレス、トークン、内部 URL など、非公開のものには モザイクかぼかし。

画面全体に注釈を付けないでください。変更が 1 つのコントロールなら、矢印 1 本と 1 文で十分です。

静止画で足りないときは操作を記録する

変更によっては、動きの中でしか意味が分からないものがあります。以前は早すぎて閉じてしまったドロップダウン、今は解決するスピナー、ドラッグ操作などです。クイック録画 で 10〜20 秒録画し、MP4 を添付するか、インラインで見やすいレビューなら GIF（Pro）を添付します。

• 可能なら 1 本のクリップで、失敗する動作を先に、直った動作を後に見せます。
• ナレーションが何かを加えない限り、マイクはオフにします。無音のクリップは安全に自動再生されます。
• 2 回見られる長さに抑えます。

証拠をプルリクエストに入れる

予測できる構成はレビュアーの時間を節約します。

1. 何が変わったか を 1 文で。
2. 変更前 / 変更後 の画像。毎回同じ順番で並べるか重ねます。
3. 既定の画面でない場合、スクリーンショットの状態を 再現する方法。
4. 確認すること — 壊れる可能性のある 1〜2 点。
5. 重要なら 環境：OS、ブラウザ、ディスプレイのスケール。

画像は個人のドライブへのリンクではなく、プルリクエストに直接添付します。共有リンクを使う場合は、期限切れやパスワードが必要になる可能性を覚えておいてください。コードレビューには通常、添付のほうが適しています。

セットは小さく保つ

レビュアーは流し読みします。焦点の合った 3 枚は読まれ、15 枚はスクロールで飛ばされます。

• 見た目の変更ごとに 1 組。
• ブラウザの UI や無関係なパネルは切り抜きます。
• 文脈のためだけの画像は圧縮するか縮小します。ピクセル単位の変更にはフル解像度を保ちます。
• 少し違う角度から同じ状態を繰り返すスクリーンショットは削除します。

提出前のチェックリスト

よくある質問

スクリーンショットと画面収録のどちらを添付すべきですか？

状態には静止画、操作には短いクリップです。10〜20 秒の録画で遷移を示すには十分です。それより長いものはたいてい飛ばされます。

レビュー用のスクリーンショットで顧客データを隠すには？

名前や ID には強い設定のモザイク、秘密には塗りつぶし、またはその範囲を切り抜きます。ぼかしはモザイクより弱く、機密性のあるものには使うべきではありません。

レビュー用スクリーンショットに Pro は必要ですか？

キャプチャ、注釈、番号付け、モザイク、基本の MP4 録画には不要です。GIF の書き出し、スマート消去、ビデオ編集のエフェクトは Pro の機能ですが、静止画のセットと MP4 でほとんどのレビューは無料でまかなえます。

ブログのほかの記事