バグ報告用に2枚のスクリーンショットを横に並べる

期待と実際、修正前と修正後。1枚にまとめた画像は2個の添付より確認しやすいものです。手早く作る方法をまとめます。

このガイドで使う道具

やりたいこと

「期待どおり」と「実際の画面」が1枚の画像に並んでいると、2つのファイルを行き来するよりレビューが速くなります。

並べる

画像結合を開いて2枚のスクリーンショットをドロップし、矢印ボタンで「期待・実際」の順にします。向きは横並び、高さが違う場合は位置を中央に。隙間は既定の16pxのままにすると境目が分かりやすく残ります。

  • 順番は大切です。左=期待・右=実際と読者は想定します。
  • 出力はPNGを選んでください。スクリーンショットの文字はJPEGだと滲みます。

具体例

1440×900のスクリーンショット2枚を16pxの隙間で横に結合すると、2896×900のPNGが1枚できます。片方が切り抜いたエラーダイアログのように背が低い場合でも、中央揃えなら上に張り付かずバランスよく置かれます。

先に整える

結合の前に、関係ない部分は画像切り抜きで削り、氏名・メールアドレス・社内ホスト名などは画像ピクセル化でモザイクをかけます。先に済ませておくと、元画像ごとに正しい位置へ処理できます。

  • 制限: 2〜12枚、1枚あたり25MiBまで、間隔は400pxまで。
  • 横に長すぎる結果はブラウザのcanvas上限に達することがあります。その場合は縦積みにしてください。