ブログ

スクリーンショットのビフォーアフター比較画像を作る方法

公開 2026年10月25日 · ビフォーアフター, 比較, 結合, ワークフロー

1 枚の画像は 2 つの添付より伝わります。同じサイズで 2 つの状態をキャプチャし、横に並べて結合し、ラベルを付ければ、読み手が一目で比べられる比較画像になります。

ビフォーアフターのスクリーンショットは変化を示す最速の方法ですが、2 つのバラバラの添付は、読み手に行き来させ、見たものを覚えさせます。横に並べた 1 枚の画像なら、その手間がなくなります。

2 つの状態を同じ方法でキャプチャする

比較は、2 枚の画像が比較可能なときだけ公平になります。

• 同じビューポートとズーム。 前が 100%、後が 80% だと、余白や文字サイズが嘘をつきます。
• 同じ切り抜き。 変わった部分だけをきつく切り抜くのではなく、同じ領域をキャプチャします。
• 同じウィンドウサイズとテーマ。 ダークモードの後とライトモードの前を並べると、2 つの変化を一度に比べることになります。
• 同じ状態。 ページにホバーやフォーカスの効果がある場合は、どちらのキャプチャにもポインターを入れないようにします。

レスポンシブなレイアウトでは、幅を混ぜるのではなく、ブレークポイントごとに 1 組作ります。

同じアスペクト比に切り抜く

最初のキャプチャを InSnap の画像エディタで開き、比較したい領域に切り抜きます。2 枚目にも同じ切り抜きを適用し、サイズ表示を使ってピクセルを合わせます。レイアウトの高さが違う場合は、空白で埋めるのではなく、短いほうに合わせて切り抜きます。

横に並べて結合する

画像エディタの 結合 パネルは、複数の画像を 1 つのキャンバスに配置します（Pro）。

1. 左のサイドバーで 結合 を選びます。
2. 前の画像、次に後の画像を読み込みます。
3. 順番にドラッグして、上端を揃えます。
4. 2 つの間に一定の間隔を空けます。数ピクセルの余白があると、意図した 1 組に見えます。
5. 配置が決まったら統合し、ラベルを付けます。

2 枚のサイズが違う場合は、大きいほうを合わせてサイズ変更するか、結合前に両方を同じアスペクト比に切り抜きます。スケールの不一致が、比較が「ずれて」見える最もよくある原因です。

細部ではなく、左右にラベルを付ける

テキスト を使って、それぞれの同じ隅に「ビフォー」「アフター」、または「現状」「提案」と入れます。ラベルは短く、スタイルを揃えます。

次に、重要な違いだけを注釈します。

• 変更が複数ある場合は番号：1 が余白、2 が新しいボタン。
• 変わった領域を囲む図形。
• 方向が明らかでない場合だけ矢印。
• どちらの画像でも、名前、メールアドレス、社内 URL にはモザイクやぼかし。

同じ細部を両側に注釈しないでください。変わった側に 1 回だけ印を付けます。

送り先に合わせて書き出す

• チャットやメール： 1 枚の PNG が最も読みやすく、ほとんどのクライアントで表示されます。
• スライド： デッキのアスペクト比に合わせ、画像が暗い場合は背景を付けます。
• ドキュメント： 一連の比較画像すべてで幅を揃えます。

ファイルが大きい場合は、保存時に Retina のキャプチャを 1x に縮小します。比較画像は通常、フルピクセル密度を必要としません。

比較画像のチェックリスト

よくある質問

2 つのスクリーンショットを結合するには Pro が必要ですか？

はい、結合は Pro の機能です。無料の代替としては、自分で見比べるために 2 枚を画面上で並べてピン留めできますが、1 枚の画像として書き出すにはエディタの結合パネルが必要です。

2 つのスクリーンショットのサイズが違う場合は？

両方を同じアスペクト比に切り抜くか、結合前に大きい画像を小さいほうに合わせてサイズ変更します。すべてのピクセルを保つことより、スケールを揃えることのほうが重要です。

3 つのバージョンを比較できますか？

はい。たとえば旧、現行、提案のように、同じ間隔とラベルのスタイルで順に結合します。違いが微妙な場合は、1 本の横長の帯より、変更ごとに 2 枚 1 組にしたほうが読みやすくなります。

ブログのほかの記事