画像比較
エレメントについて
PageFlyの画像比較エレメント（Before/Afterスライダーとも呼ばれます）は、2つの画像を並べて表示し、インタラクティブなスライダーで比較できる機能です。訪問者はスライダーをドラッグして「Before」と「After」の画像を表示・比較できます。商品の変化、ビフォーアフター、リフォーム、その他あらゆるビジュアル比較に最適です。
このエレメントは、横方向および縦方向の比較モード、カスタマイズ可能なハンドルスタイル、さらに「Before」と「After」を明確に示すバッジラベルに対応しています。
画像比較エレメントへのアクセス方法
PageFlyで画像比較エレメントにアクセスするには、以下の手順に従ってください：
ステップ1：左メニューの「Elements」ボタンをクリックし、PageFlyタブを開きます。
ステップ2：「Media」カテゴリ内の「Image Comparison」を探します。
ステップ3：バリアントをページキャンバスにドラッグ＆ドロップして使用を開始します。
注意： 画像比較エレメントは現在、Flex（Gen 2）ページでのみ利用可能です。
画像比較エレメントには、Before/Afterバッジ付きの横スライダーを含むデフォルトバリアントが1つ用意されています。
画像比較エレメントの設定方法
画像比較エレメントは、GeneralタブとStylingタブで設定できます。設定方法は以下の通りです：
General設定
画像比較エレメントを選択し、Generalタブに移動します。以下の設定グループがあります：
コンテンツ
Before Image
「Before」画像をアップロードまたは選択します。画像エリアをクリックするとメディアマネージャーが開き、デバイスからのアップロード、URLの使用、無料のShopify画像の参照、またはメディアライブラリからの選択が可能です。
Alt Text（Before）
Before画像の代替テキストを追加します。SEOやアクセシビリティ向上に役立ち、スクリーンリーダーが画像を説明するために使用します。
Image Title（Before）
Before画像のタイトルを追加します。画像にホバーした際にツールチップとして表示されます。
After Image
Before画像と同様の方法で「After」画像をアップロードまたは選択します。
Alt Text（After）
After画像の代替テキストを追加します。
Image Title（After）
After画像のタイトルを追加します。
ヒント： 最適な表示のため、BeforeとAfterの画像は同じサイズを使用してください。アスペクト比が異なる場合、Before画像は
object-fit: coverによりAfter画像のサイズに合わせて表示されます。
画像設定
Image Quality
画像の解像度を設定します。Auto（推奨）、Original、Thumbnail、Low、Medium、High、Very High、Ultraから選択可能。低品質＝読み込み高速、高品質＝より鮮明。
Image Loading
画像の読み込みタイミングを制御します。Lazy Load（デフォルト）：表示時に読み込み（高速化）。Preload：即時読み込み（LCP改善）。Standard：ブラウザ標準動作。
スライダー設定
Direction
**Horizontal（左右）またはVertical（上下）**を選択。
Start Position
初期位置を0%〜100%で設定（デフォルト50%）。
Handle Style
ハンドルの見た目を選択：Circle（丸＋矢印）、Arrow（矢印のみ）、Line（シンプルな線）。
Badge Visibility
バッジ表示の有無（Visible / Hidden）。
バッジ設定
Page Outline内のComparison Badgeをクリックして設定します：
Before Text
Beforeラベルのテキスト（デフォルト："Before"）。
After Text
Afterラベルのテキスト（デフォルト："After"）。
Badge Position
Horizontal：Top / Center / Bottom、Vertical：Left / Center / Right。
バッジのフォント、色、背景、ボーダーはStylingタブでカスタマイズ可能です。
Styling設定
画像比較エレメントを選択し、Stylingタブで以下を設定できます：
Width：幅（Fill または Custom）
Height：高さ
Spacing：余白（padding / margin）
Background：背景色
Border：枠線・角丸
Effects：シャドウ・透明度
Custom CSS：カスタムCSS
詳細は以下をご参照ください： https://help.pagefly.io/manual/elements-style-settings/
ストアフロントでの動作
公開後、以下の操作が可能になります：
マウス操作：スライダーをドラッグして比較
タッチ操作：モバイルでスワイプ
キーボード操作：矢印キーで移動、Home/Endで0%/100%
主な使用例
ビフォー・アフター表示
スキンケア、リフォーム、写真編集、ダイエットなどの変化を表示
機能比較
製品のバージョン比較、色違い、旧パッケージ vs 新パッケージ
季節・イベント比較
季節、照明、イベントごとの見え方を比較
最適化のポイント
同じサイズの画像を使用する
画像サイズを最適化（Auto推奨）
下部表示はLazy Loadを使用
ファーストビューはPreload推奨
Alt Textを必ず設定
よくある質問
1. サイズ違いの画像は使えますか？ 可能ですが、同じ比率推奨。異なる場合はBefore画像がトリミングされます。
2. モバイル対応していますか？ はい。タッチ操作対応済みです。
3. 後から方向変更できますか？ はい。Generalタブで変更可能です。
4. ラベルを非表示にできますか？ 可能です（Badge Visibility → Hidden）。
5. ラベルのデザイン変更はできますか？ 可能です（Stylingタブ）。
追加リソース
Last updated
Was this helpful?