施工や清掃の記録、写真の補正例など、2枚の写真の違いを説明したい場面に向けた無料ツールを公開しました。写真の配置と表示方法を調整し、用途に合う比較画像・動画をブラウザで作れます。

ビフォーアフターツールを使う

使い方

  1. BEFOREとAFTERの写真を1枚ずつ読み込みます。同じ構図の写真を選ぶと、変化を比較しやすくなります。
  2. 写真の位置と拡大率を調整し、比較したい場所をそろえます。ラベルと画面比率も掲載先に合わせて設定します。
  3. スライダー、フェード、ルーペなどから表示方法を選び、プレビューで見え方を確認します。
  4. 静止画ならPNG、動きを見せるならGIFや動画を選んで保存します。動画形式はブラウザの対応状況を確認してください。
ビフォーアフター工房の操作画面

使う場面と調整のポイント

写真全体の仕上がりを並べたいときは左右・上下の比較、狭い範囲を拡大して説明したいときはルーペが便利です。自動ループなら、見る人が操作しなくても2枚の変化を追えます。SNSへの投稿前には、文字の大きさと切り替え速度を実際の表示サイズで確認してください。

外壁塗装の施工前後

保存・公開の前に確認したいこと

位置合わせは説明を読み取りやすくするために行い、比較の条件が変わるような加工は避けてください。人物写真や施工写真を公開する際は、写っている方の同意や画像の利用条件も確認しましょう。

ビフォーアフターツールを使う