画像比較要素
画像比較（ビフォーアフター）要素について
PageFlyの画像比較要素（ビフォーアフタースライダーとも呼ばれます）を使用すると、インタラクティブなスライダーで2つの画像を並べて表示できます。訪問者はスライダーをドラッグして「ビフォー」と「アフター」の画像を明らかにし、比較することができます。製品の変化、イメージチェンジ、リノベーション、またはあらゆる視覚的な比較に最適です。
この要素は、水平および垂直の比較モード、カスタマイズ可能なハンドルスタイル、そしてどちらが「ビフォー」でどちらが「アフター」かを明確に示すためのバッジラベルをサポートしています。
画像比較要素へのアクセス方法
PageFlyで画像比較要素にアクセスするには、以下の簡単な手順に従ってください：
ステップ1：左のメニューにある「要素」ボタンをクリックし、PageFlyタブに留まります。
ステップ2：メディアカテゴリーの下にある「画像比較」を見つけます。
ステップ3：バリアントをページキャンバスにドラッグ＆ドロップして使用を開始します。
注： 画像比較要素は現在、Flex (Gen 2) ページでのみ利用可能です。
画像比較要素には、ビフォー/アフターのバッジラベルが付いた水平スライダーを含むデフォルトのバリアントが1つ付属しています。
画像比較要素の設定方法
画像比較要素には、「一般」タブと「スタイリング」タブに設定があります。以下に設定方法を説明します：
一般設定
画像比較要素を選択し、「一般」タブに移動します。以下の設定グループがあります：
コンテンツ
ビフォー画像
「ビフォー」画像をアップロードまたは選択します。画像エリアをクリックしてメディアマネージャーを開き、デバイスからアップロード、URLを使用、Shopifyの無料画像を閲覧、またはメディアライブラリから選択できます。
代替テキスト（ビフォー）
ビフォー画像の代替テキストを追加します。これはSEOとアクセシビリティに役立ちます。スクリーンリーダーはこのテキストを使用して画像を説明します。
画像タイトル（ビフォー）
ビフォー画像のタイトルを追加します。このテキストは、画像にカーソルを合わせるとツールチップとして表示されます。
アフター画像
ビフォー画像と同じオプションを使用して「アフター」画像をアップロードまたは選択します。
代替テキスト（アフター）
アフター画像の代替テキストを追加します。
画像タイトル（アフター）
アフター画像のタイトルを追加します。
ヒント： 最適な視覚的結果を得るためには、ビフォーとアフターの画像に同じ寸法のものを使用してください。画像のアスペクト比が異なる場合、ビフォー画像はアフター画像のコンテナサイズに合わせて
object-fit: coverを使用して表示されます。
画像設定
画像品質
両方の画像の解像度を制御します。オプションは自動（推奨）からオリジナル、サムネイル、低、中、高、最高、超高まであります。品質が低いほど読み込みが速く、品質が高いほど画像が鮮明になります。
画像の読み込み
画像がいつ読み込まれるかを制御します。遅延読み込み（デフォルト）：画像が表示されるときにのみ読み込まれ、ページの速度が向上します。プリロード：画像がすぐに読み込まれ、ファーストビューコンテンツのLCPが向上します。標準：ブラウザのデフォルトの動作です。
スライダー設定
方向
水平（左右分割）または垂直（上下分割）を選択します。
開始位置
スライダーの初期位置をパーセンテージ（0%–100%）で設定します。デフォルトは50%で、スライダーが中央から始まることを意味します。
ハンドルスタイル
スライダーハンドルの外観を選択します：円（矢印付きの丸いボタン）、矢印（方向を示す矢印のみ）、または線（シンプルな分割線）。
バッジの表示設定
ビフォー/アフターのバッジラベルを表示または非表示にします。表示または非表示に設定します。
バッジ設定
ページアウトラインで比較バッジの子要素をクリックして、バッジ固有の設定にアクセスします：
ビフォーテキスト
ビフォーバッジに表示されるテキストをカスタマイズします。デフォルト：「Before」。
アフターテキスト
アフターバッジに表示されるテキストをカスタマイズします。デフォルト：「After」。
バッジの位置
水平モードの場合：上、中央、または下。垂直モードの場合：左、中央、または右。
バッジが選択されている場合、「スタイリング」タブでバッジの外観（フォント、色、背景、枠線）をスタイル設定することもできます。
スタイリング設定
画像比較要素を選択し、「スタイリング」タブに切り替えてスタイリングオプションにアクセスします：
幅：要素の幅を制御します（フィルまたはカスタム）。
高さ：要素の高さを調整します。
間隔：要素の周りにパディングとマージンを追加します。
背景：比較スライダーの背後に背景色を設定します。
枠線：枠線や角丸を追加します。
エフェクト：ボックスシャドウや不透明度を適用します。
カスタムCSS：高度なスタイリングのためにカスタムCSSを記述します。
スタイリングタブの詳細については、要素のスタイリングガイドを参照してください。
ストアフロントでの動作
公開されると、画像比較要素はライブストアで完全にインタラクティブになります：
マウスドラッグ：スライダーハンドルをクリックして左右（または垂直モードでは上下）にドラッグして画像を比較します。
タッチドラッグ：モバイルデバイスでは、スライダーをスワイプして比較します。
キーボード：スライダーにフォーカスを合わせ、矢印キーで移動させます。Home/Endキーで0%/100%にジャンプします。
一般的な使用例
製品のビフォー＆アフター
スキンケアの結果、家のリノベーション、写真の編集、減量の道のりなど、製品の変貌や視覚的な改善を示します。
機能比較
製品の2つのバージョン、2つのカラーオプション、または新旧のパッケージを比較します。
季節やイベントのショーケース
異なる季節、照明条件、またはイベントの設営でのスペースや製品を表示します。
最適な結果を得るためのヒント
同じサイズの画像を使用する：ビフォーとアフターの両方の画像は、ピクセルパーフェクトな配置のために、理想的には同じ寸法であるべきです。
ファイルサイズを小さく保つ：画像品質設定を使用して、品質と読み込み速度のバランスを取ります。ほとんどの場合、「自動」が推奨されます。
遅延読み込みを使用する：ページの折りたたみより下にある画像比較要素には、デフォルトの「遅延読み込み」設定を維持して、ページの速度を向上させます。
プリロードを使用する：ヒーロー/ファーストビューの比較には、「プリロード」に切り替えてLCPスコアを向上させます。
代替テキストを追加する：より良いSEOとアクセシビリティのために、常に両方の画像に説明的な代替テキストを追加してください。
よくある質問
1. ビフォーとアフターに異なるサイズの画像を使用できますか？
はい、できますが、最適な結果を得るためには、同じアスペクト比の画像を使用してください。画像が異なる場合、ビフォー画像はアフター画像の寸法に合わせて（object-fit: cover を使用して）トリミングされます。
2. スライダーはモバイルデバイスで動作しますか？
はい。スライダーはタッチとマウスの両方のインタラクションをサポートしており、ドラッグ中に誤ってスクロールするのを防ぐための方向ロック機能も備わっています。
3. 画像を追加した後にスライダーの方向を変更できますか？
はい。「一般」タブでいつでも水平と垂直を切り替えることができます。スライダーとバッジの位置は自動的に更新されます。
4. ビフォー/アフターのラベルを非表示にするにはどうすればよいですか？
画像比較要素を選択し、「一般」タブに移動して、バッジの表示設定を非表示に設定します。
5. バッジラベルをスタイル設定できますか？
はい。ページアウトラインで比較バッジをクリックし、「スタイリング」タブを使用してフォント、色、背景、枠線などをカスタマイズします。
追加リソース
Last updated
Was this helpful?