画像比較スライダーシステム
目的
画像比較スライダーシステムは、インタラクティブな「ビフォー・アフター」視覚比較コンポーネントを構築するための体系的な設計および空間的手法を提供します。このシステムは、2つの画像状態（例：写真修復、カラーグレーディング、デザインモックアップ、環境変化、医療結果）を重ねて表示し、ユーザーが動的にスライド、表示、詳細を比較できるようにするという設計上の課題に対処します。これにより、視覚的な方向感覚の喪失を防ぎ、レイアウトの安定性を維持し、モバイル向けにタッチターゲットを最適化し、構造化されたキーボードインタラクションとスクリーンリーダー通知を通じてWCAG AAアクセシビリティ基準を満たします。
ユースケース
- クリエイティブ＆編集ソフトウェアのショーケース: 未編集のRAWファイルと最終編集済み写真、カラーグレーディングプリセット、またはレタッチ作業の比較。
- 建築＆デザインポートフォリオ: 建設前後のフェーズ、リノベーションプロジェクト、インテリアスタイリング、またはWebデザインシステムの大規模リニューアルの展示。
- Eコマース＆製品デモ: さまざまな条件下での製品提示（例：防水ファブリックテスト、スクリーンプロテクター、洗浄製品、または経年劣化の比較）。
- 環境＆科学ビジュアライゼーション: 氷河の後退、都市拡大、または植林プロジェクトの衛星マッピングなど、経時変化の提示。
- 化粧品＆医療ケーススタディ: 同一の照明と空間条件下での高忠実度な治療結果の提示。
使用すべきでない場合
- 複数アイテムの発見: 2～5個の異なる製品の個別属性を比較する必要がある場合は、
comparison-matrix-systemを使用します。 - 一般的な画像グリッド: 標準的な画像表示、メディアカルーセル、またはギャラリーの場合は、
imagery-and-media-systemまたはcarousel-and-slider-systemを使用します。 - テキスト主体の比較: 主なコンテンツがテキストや表形式データ（例：ソフトウェアバージョンの機能）の場合は、
data-table-ui-systemまたは<dl>リスト要素を使用します。 - 低コントラストで微妙な変化: 2つの画像間の視覚的な違いが最小限で、容易に知覚できない場合は、明確なキャプションを付けたサイドバイサイドまたはスタックレイアウトの方が役立ちます。
入力
- デュアルコアアセット: まったく同じ空間的視点、フレーム、解像度から撮影された2つの高品質画像（「ビフォー」と「アフター」）。
- コンポーネント寸法: アスペクト比（例：16:9、4:3、1:1）とビューポート境界（
imagery-and-media-systemから取得）。 - タイポグラフィとブランドトークン: ラベル、ハンドル、説明テキストのフォントサイズと色（
fluid-typography-systemから取得）。 - タッチとモーションの設定: タッチジェスチャーとシステムレベルのモーション軽減状態に関するユーザーの選択。
出力
- スライダーアナトミーブループリント: コンテナ、背景トラック、クリップパスオーバーレイ、ハンドルバー、グラブサム、状態ラベルを指定するレイアウト定義。
- キーボード操作仕様:
ArrowLeft、ArrowRight、Home、Endなどのキーを相対的なクリップパスパーセンテージにマッピングするアクセシブルな座標追跡。 - モバイル＆タッチ動作ガイド: タッチターゲット寸法、ジェスチャードラッグしきい値、サムスペーシングの正確な仕様。
- レイアウト保持ルール: レイアウトシフト（CLS）を防ぐための構造ルール（例：アスペクト比の保持、絶対サイジング）。
ワークフロー
1. 空間トラックとコンテナの確立
アスペクト比と構造的配置を保持します。
- アスペクト比のロック: コンテナには明示的なアスペクト比（例：
aspect-ratio: 16 / 9またはaspect-ratio: 1 / 1）を設定し、レイアウトスペースを確保して累積レイアウトシフト（CLS）を防ぎます。 - 絶対配置オーバーレイ: コンテナを
position: relative; overflow: hidden;に設定します。「アフター」画像を標準の背景画像ブロック（width: 100%; height: 100%; object-fit: cover;）として配置します。 - クリッピングオーバーレイブロック: 「ビフォー」画像を絶対配置のオーバーレイラッパー（
position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;）内に配置します。 - 画像同期: 背景画像とオーバーレイ画像の両方が同一の寸法、スケーリングプロパティ（
object-fit: cover）、配置（object-position: center）を持つようにし、正確に重なるようにします。
2. 表示クリップパスの実装
視覚的な歪みを防ぐために、デュアルイメージのリサイズではなく最新のCSSクリッピングを使用します。
- クリップパス値: オーバーレイラッパーに
clip-path: inset(0 calc(100% - var(--exposure-ratio)) 0 0);を適用します。ここで--exposure-ratioはスライダー位置を表すCSSカスタムプロパティ（例：50%）です。 - 動的変数バインド: マウス、タッチ、またはキーボード入力によって
--exposure-ratioを動的に更新します。 - 画像歪みの回避: スライド操作時に画像自体をリサイズせず、ラッパーコンテナのみをクリッピングします。画像は互いに静止したままである必要があります。
3. ハンドルとタッチサムの設計
ハンドルは、インタラクションの主要な視覚的アフォーダンスとして機能します。
- 垂直分割線:
left: var(--exposure-ratio);に絶対配置された垂直バーをスタイリングします。幅はハイコントラストな細い線（例：2pxから4px）に設定し、ドロップシャドウを付けて多様な画像背景に対しても目立つようにします。 - グラブサムターゲット: 垂直線の中央に配置された円形または角丸のグラブサムを配置します。
- 視覚インジケーター: グラブサム内に双方向の水平矢印（← →）またはコントラストのあるテクスチャを埋め込み、水平方向のドラッグ機能を示します。
- タッチターゲットサイズ（WCAG 2.2 SC 2.5.8）: インタラクティブなグラブサムは、視覚的なサイズに関係なく、モバイル/タッチインターフェース上で少なくとも
44px x 44pxの物理的なタッチターゲットを持つ必要があります。これは、透明な疑似要素（::after）またはパディングを使用して実現します。
4. アクセシブルなテキストラベルの構築
ユーザーのコンテキストと方向性を維持します。
- テキストラベル配置: ラベル（例：「BEFORE」「AFTER」）をコンテナの対角に配置します（例：「Before」は左上、「After」は右上）。
- ハイコントラスト設計: 白いテキストラベルの背後に半透明の暗い背景（スクリム）を使用し、画像コンテンツに関係なく最小コントラスト比
4.5:1（WCAG AA）を確保します。 - インタラクティブ状態フィードバック: スライダーがアクティブなときにテキストラベルをフェードアウトして視覚的な邪魔を減らし、インタラクション終了時に復元するオプション。
5. キーボードナビゲーションとARIA統合の定義
インターフェースはキーボードだけで完全にナビゲート可能でなければなりません。
- レンジスライダーバッキング: 視覚比較を、ネイティブで視覚的に隠された `<input type=