画像比較スライダー

画像比較スライダーとは？

2つの画像を比較する方法

1. 1
   ビフォー画像をアップロード

   ビフォースロットにJPG、PNG、WebP、GIF、BMP、またはAVIFファイルをドロップするか、デバイスから選択するためにクリックします。画像はパネルにレンダリングされ、ワークスペースが下に表示されます。

2. 2
   アフター画像をアップロード

   アフタースロットに2番目の画像をドロップします。最良の結果を得るためには、両方の画像が同じ寸法である必要があります — 比較コンテナは、最初に読み込む画像のアスペクト比にロックされます。

3. 3
   比較モードを選択

   スライダーは2つの画像を重ねてドラッグ可能な区切り線を持ちます。並列は2つのカラムに配置します。フェードオーバーレイは不透明度スライダーで2つの間をアニメーションさせます — アライメントのドリフトを見つけるのに便利です。

4. 4
   区切り線またはスライダーをドラッグ

   スライダーモードでは、比較エリア内の任意の場所をドラッグして区切り線を移動します。画像が左から右ではなく、上から下で比較される場合は、区切り線を垂直に切り替えます。フェードモードでは、アフター不透明度スライダーをドラッグします。

5. 5
   入れ替え、リセット、または新しいファイルを読み込む

   入れ替えを使用して、再アップロードせずにAとBを入れ替えます。リセットは両方の画像をクリアし、ワークスペースをデフォルトに戻します。スロットに新しいファイルをドロップすることでいつでも新しいファイルを読み込むことができます — 最初にリセットする必要はありません。

スライダークリップの動作

1. 両方の画像は、アスペクトロックされたコンテナ内でobject-fit: containとしてレンダリングされます。
2. アフター画像は絶対位置のオーバーレイに配置されます。
3. CSS clip-path: inset(0 [100 - position]% 0 0)がオーバーレイの左側のみを表示します。
4. 垂直モードでは、inset軸が入れ替わります: clip-path: inset(0 0 [100 - position]% 0)。
5. ポインターイベントは、コンテナのバウンディング矩形内のカーソルのオフセットから位置を更新します。
6. フェードモードはclip-pathをスキップし、アフター画像の不透明度を0から1にアニメーションさせます。

参考: MDN — clip-path

一般的なビフォー/アフター比較

比較スライダーを使用するタイミング

• 写真レタッチレビュー — クライアントに何が変わったかを一度のドラッグで正確に示します。
• デザインレビュー — 2つのブラウザタブなしでヒーローセクションの古いレイアウトと新しいレイアウトを比較します。
• 3Dレンダリングの反復 — 2つの照明設定の間をフェードして微妙なグローバルイルミネーションの変化を確認します。
• カラーグレーディング — フレームを横切って区切り線をスイープしてLUTまたはグレーディングパスを評価します。
• バグレポート — 壊れたスクリーンショットを期待されるものとペアにして、トリアージャーがスクロールしなくて済むようにします。
• 不動産のビフォー/アフター — ステージング対未ステージングまたは改装前対改装後のショット。
• データビジュアライゼーション — 異なる時点で撮影された同じ地図またはチャートの2つのスナップショットを比較します。

関連ツール

よくある質問