🖼️
before & after,
ビフォーアフター
画像比較スライダー
2枚の画像をスライダーでリアルタイム比較。
スライダー位置のままPNG出力で記録・共有も簡単。
↔️
インタラクティブスライダー
マウス・タッチ操作で自在に比較位置を調整
📸
PNG一発出力
現在の比較位置のまま画像をダウンロード
🔒
完全ローカル処理
画像データはサーバーに送信されません
📷 Before（加工前）
クリックまたはドロップ
✨ After（加工後）
クリックまたはドロップ
👆 BeforeとAfterの画像をアップロードしてください
🔒アップロードされた画像はサーバーに送信されません。すべてブラウザ内で処理されます。
about,
概要
ビフォーアフター画像比較スライダーは、2枚の画像をインタラクティブなスライダーでリアルタイムに比較できる無料ツールです。写真レタッチ・工事前後・ダイエット比較など、幅広い用途に活用できます。
スライダーの現在位置のままPNG画像としてダウンロードでき、比較状態を記録・共有するのに最適です。すべての処理はCanvas APIによりブラウザ内で完結し、画像データはサーバーに一切送信されません。
how to,
使い方
STEP 1
画像をアップロード
BeforeとAfterそれぞれの画像をドロップまたはクリックして選択します。
STEP 2
スライダーを操作
比較エリアのスライダーを左右にドラッグして比較位置を調整します。
STEP 3
PNG出力
現在の比較位置のまま「PNGダウンロード」ボタンで画像を保存します。
glossary,
用語集
- ビフォーアフター
- 処置・施工・加工などの前後の状態を比較して見せる視覚的表現。Before（前）とAfter（後）の2枚の画像を使用する。
- スライダー比較
- 1本のスライダーを左右に動かすことで、2枚の画像を同一フレーム内で切り替えて見せるインタラクティブなUI。
- Canvas API
- HTMLの2D描画API。2枚の画像をCanvas上に描画し、スライダー位置でクリッピングして比較UIを実装する。
- Pointer Events API
- マウス・タッチ・ペンの入力を統一的に処理するWeb API。スライダーのドラッグ操作をデバイス問わず実装できる。
- クリッピング
- 描画領域を特定の図形や領域に制限すること。ビフォーアフタースライダーでは、スライダー位置を基準に左を「Before画像」、右を「After画像」で描画する。
- 透かし（ウォーターマーク）
- 画像上に重ねて表示する半透明のテキストや画像。Before/Afterラベルの位置がウォーターマーク的に機能する。
- アスペクト比
- 画像の幅と高さの比率。比較UIでは両画像を同一比率に揃えることが重要。
- PNG（ポータブルネットワークグラフィックス）
- 可逆圧縮の画像フォーマット。画質の劣化なく保存でき、透過も表現できる。本ツールの出力形式。
faq,
FAQ
- Q.2枚の画像サイズが異なる場合は？
- 両画像は自動的に同一サイズにリサイズされて比較表示されます（アスペクト比維持）。
- Q.スライダーの位置でPNG出力できる？
- はい。「PNG出力」ボタンを押すと現在のスライダー位置のまま画像が保存されます。
- Q.ラベル（BEFORE/AFTER）は非表示にできる？
- はい。「ラベル表示」のチェックを外すことで非表示にできます。
- Q.縦向き・横向きの画像に対応している？
- はい。縦横どちらの画像にも対応しており、比較方向も縦/横から選択できます。
- Q.画像はサーバーに送信される？
- いいえ。すべてブラウザ内のCanvas APIで処理されます。画像データは外部に一切送信されません。
- Q.対応している画像フォーマットは？
- JPEG・PNG・WebP・GIF（静止画）など、ブラウザがサポートする主要フォーマットに対応しています。
- Q.スマートフォンでスライダーを操作できる？
- はい。タッチ操作に完全対応しています。指でスライダーを左右にドラッグしてください。
- Q.複数の比較を同時に表示できる？
- 現在は1組の比較のみ対応しています。複数の比較が必要な場合は、都度画像を入れ替えてPNG出力してください。
use cases,
活用シーン
🎨
写真レタッチ確認
Photoshop等の補正前後を比較してクライアントに提示。
🏗️
工事・リフォーム前後
施工前後の変化をひと目で確認し、実績紹介に活用。
⚖️
ダイエット・美容
ダイエットや美容施術の効果を視覚的に比較。
🌿
ガーデニング・DIY
庭の整備前後や部屋の模様替え前後を記録・共有。