ビフォー・アフター画像は、同じ構図・比率・拡大率で揃えると違いを正確に伝えられます。AllEditの画像結合ツールへ加工前、加工後の順に2枚を追加し、「横一列」を選択して表示範囲を整えれば、PNG・WebP・JPGの比較画像として保存できます。
インストール不要。ブラウザですぐに画像を処理できます。
先に2枚の構図とサイズを揃える
ビフォー・アフター画像では、加工前と加工後の違い以外の条件をできるだけ揃えることが大切です。撮影位置、カメラの向き、被写体の大きさ、明るさが大きく違うと、実際の変化より強く見えたり、比較しにくくなったりします。
同じ元画像から編集前後を比べる場合は、切り抜き範囲と縦横比を揃えて書き出します。別々に撮影する場合は、三脚や目印を使い、同じ距離と角度で撮影すると位置合わせが簡単です。作業前にファイル名を「before」「after」などへ変えておくと、並び順の間違いも防げます。
- ✓2枚を同じ縦横比にする
- ✓被写体の大きさと中心位置をできるだけ揃える
- ✓比較対象と関係のない明るさ・色の差を減らす
- ✓加工前の元画像を上書きせず別に保管する
- ✓どちらが加工前・加工後か分かるファイル名にする
美容、商品、施工、画質補正などの効果を示す場合は、加工後だけ構図を寄せる、明るくする、強く拡大するといった見せ方を避けます。比較条件や実施した加工を必要に応じて説明してください。
AllEditで2枚を左右に並べる手順
- 01加工前と加工後の2枚を追加する
画像結合ツールへ、加工前、加工後の順に画像を追加します。逆になった場合は画像一覧の上下ボタンで並べ替えられます。
- 02「横一列」を選ぶ
配置と保存のレイアウトから「横一列」を選びます。2枚が同じ幅の枠へ、1枚目は左、2枚目は右に配置されます。
- 03キャンバス比率を決める
横長の比較には16:9が使いやすい選択肢です。掲載場所に合わせて1:1、4:3、9:16も選べます。
- 04両方の表示範囲を揃える
プレビュー上の画像をダブルクリックし、ドラッグで位置を調整します。必要なら100～300％の拡大率を使い、2枚の被写体が同じ大きさに見えるよう揃えます。
- 05余白と背景色を整える
画像間の余白で境界を作り、外側の余白と背景色を掲載先に合わせます。隙間なく見せる場合は余白を0pxにします。
- 06形式と画質を選んで保存する
PNG・WebP・JPGから保存形式を選びます。WebPとJPGでは40～100％の画質も設定し、完成画像を保存します。
表示範囲と拡大率を左右で揃えるコツ
画像結合ツールは、各画像が枠を隙間なく埋めるように表示します。元画像と枠の縦横比が違う場合、上下または左右の一部が枠の外へ隠れます。元画像が削除されるわけではありませんが、比較に必要な部分が見切れていないか確認してください。
位置を調整するには、対象画像をダブルクリックして選択してからドラッグします。拡大率は100～300％です。公平な比較にするなら、左右へ同じ拡大率を使い、目、建物の角、商品の輪郭など共通する目印を同じ位置へ合わせます。合わなくなった場合は「位置と拡大率をリセット」してやり直せます。
- ✓先にキャンバス比率と横一列レイアウトを決める
- ✓左右とも同じ拡大率から調整を始める
- ✓顔、文字、商品の端が切れていないか確認する
- ✓片方だけを大きく見せる拡大は避ける
- ✓元の構図が大きく違う場合は、先に切り抜きツールで範囲を揃える
境界線とBefore・Afterの文字を加える
2枚の境界をはっきり見せたい場合は、画像間の余白を少し設け、白、黒、ブランドカラーなどの背景色を指定します。画像間の余白は0～80px、外側の余白は0～120pxで調整できます。境界だけを作りたい場合は、外側の余白を0pxにして画像間の余白だけを増やします。
画像結合ツールにはBefore・Afterの文字を直接入れる設定はありません。文字が必要な場合は、まず比較画像を保存し、簡易画像編集ツールで開いて「Before」「After」などのテキストを追加します。文字の位置、色、縁取りを左右で揃え、写真の重要部分へ重ならない位置に置いてください。
2枚の結合は2枚分として処理され、保存した結合画像を簡易画像編集で書き出すとさらに1枚分を使用します。ほかの処理をしていなければ、AllEdit全ツール合計1日3枚のFree上限内で一連の作業を1回行えます。
キャンバス比率と実際の出力サイズ
画像結合ツールは幅1600pxを基準にキャンバスを作り、選んだ比率に応じて高さを決めます。保存時はFreeの1280×720、Proの3840×2160というプラン上限を超える場合だけ縮小し、元のキャンバスを自動で拡大しません。
そのため、現在の画像結合ツールで16:9を選んだ場合、Freeは1280×720、Proは1600×900で保存されます。Proの最大3840×2160はプラン全体の出力上限であり、画像結合ツールが必ず4Kへ拡大するという意味ではありません。
| キャンバス比率 | Freeの実出力 | Proの実出力 |
|---|---|---|
| 16:9 | 1280×720 | 1600×900 |
| 1:1 | 720×720 | 1600×1600 |
| 4:3 | 960×720 | 1600×1200 |
| 9:16 | 405×720 | 1215×2160 |
元画像の解像度が高くても、結合画像は上表のキャンバスサイズで生成されます。印刷や大型表示など、これを超える解像度が必要な用途では現在の画像結合ツールだけでは対応できません。
比較画像に合う保存形式を選ぶ
WebPとJPGの画質は40～100％で調整できます。比較画像では左右の細部を見比べるため、まず90％前後の高めで保存し、容量を減らしたい場合に少しずつ下げます。保存後の画像を100％表示し、輪郭、肌、髪、文字、境界線に不自然な変化がないか確認してください。
| 形式 | 向いている内容 | 確認点 |
|---|---|---|
| PNG | スクリーンショット、文字、図、輪郭を見せる比較 | 写真では容量が大きくなりやすい |
| WebP | Webサイト、ブログ、SNSへ載せる比較 | 見た目と容量のバランスを取りやすい |
| JPG | 写真中心で幅広い環境へ共有する比較 | 圧縮で境界や文字がにじんでいないか確認する |
Free・Proの枚数制限と画像の処理場所
ビフォー・アフターの結合では、追加した2枚が利用枚数として数えられます。FreeはAllEdit全ツール合計で1日3枚、一度に最大3枚です。Proは1日の処理枚数が無制限で、一度に最大30枚まで追加できます。
画像の読み込み、配置、結合、保存用画像の生成はブラウザ内で行われ、選択した画像本体は画像結合のためにAllEditサーバーへアップロードされません。プラン確認や利用枚数管理など、画像本体以外の通信は発生します。
| 項目 | Free | AllEdit Pro |
|---|---|---|
| 1日の処理枚数 | AllEdit全ツール合計3枚 | 無制限 |
| 一度に追加できる画像 | 最大3枚 | 最大30枚 |
| 横一列・表示範囲調整 | 利用可能 | 利用可能 |
| PNG・WebP・JPG保存 | 利用可能 | 利用可能 |
公開前のチェックリスト
- ✓加工前が左、加工後が右に並んでいる
- ✓左右の縦横比、構図、被写体の大きさが揃っている
- ✓比較に必要な部分が枠から切れていない
- ✓左右へ同じ拡大率を使っている
- ✓境界と余白が見やすく、写真より目立ちすぎていない
- ✓Before・After表記が必要な場合は追加した
- ✓保存後の画像を100％表示して画質を確認した
- ✓加工内容や撮影条件を必要に応じて説明した
- ✓元画像を別に保管した
よくある質問
加工前と加工後はどちらを左に置きますか？
一般的には加工前を左、加工後を右に置くと、左から右へ自然に比較できます。画像結合ツールでは追加順が配置順になるため、加工前、加工後の順に追加するか、画像一覧の上下ボタンで並べ替えてください。
画像の上下や左右が切れるのはなぜですか？
各画像が枠を隙間なく埋めるよう表示されるため、元画像と枠の縦横比が違うと一部が枠の外へ隠れます。画像をダブルクリックしてドラッグし、必要な範囲が見える位置へ動かすか、先に切り抜きツールで2枚の比率を揃えてください。
Before・Afterの文字を直接追加できますか？
画像結合ツールには文字挿入機能がありません。比較画像を一度保存し、簡易画像編集ツールで開いてテキストを追加してください。
左右の画像を拡大して位置を合わせられますか？
はい。対象画像をダブルクリックして選択すると、ドラッグで表示位置を動かし、100～300％の拡大率を設定できます。比較では左右へ同じ拡大率を使うのが基本です。
Freeでビフォー・アフター画像を何回作れますか？
2枚を結合すると2枚分を使用します。FreeはAllEdit全ツール合計で1日3枚のため、ほかの処理をしていなければ2枚の結合を1回行えます。さらに簡易画像編集で文字を入れて保存すると、合計3枚分になります。
Proなら4Kのビフォー・アフター画像を保存できますか？
現在の画像結合ツールは幅1600pxを基準にキャンバスを生成するため、16:9の実出力はProでも1600×900です。3840×2160はProプラン全体の出力上限で、画像結合ツールが自動で4Kへ拡大するわけではありません。
画像はサーバーへアップロードされますか？
画像の読み込み、位置調整、結合、保存用画像の生成はブラウザ内で行われ、選択した画像本体は画像結合のためにAllEditサーバーへアップロードされません。
この記事の内容を、AllEditで実際に試してみましょう。