# 画像比較

#### エレメントについて

PageFlyの画像比較エレメント（Before/Afterスライダーとも呼ばれます）は、2つの画像を並べて表示し、インタラクティブなスライダーで比較できる機能です。訪問者はスライダーをドラッグして「Before」と「After」の画像を表示・比較できます。商品の変化、ビフォーアフター、リフォーム、その他あらゆるビジュアル比較に最適です。

このエレメントは、横方向および縦方向の比較モード、カスタマイズ可能なハンドルスタイル、さらに「Before」と「After」を明確に示すバッジラベルに対応しています。

#### 画像比較エレメントへのアクセス方法

PageFlyで**画像比較エレメント**にアクセスするには、以下の手順に従ってください：

* ステップ1：左メニューの「**Elements**」ボタンをクリックし、PageFlyタブを開きます。
* ステップ2：「**Media**」カテゴリ内の「**Image Comparison**」を探します。
* ステップ3：バリアントをページキャンバスにドラッグ＆ドロップして使用を開始します。

<figure><img src="https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2F0x2TQiLZOpyZ3j5AjWwB%2FCleanShot%202026-03-24%20at%2019.41.32.gif?alt=media&#x26;token=0a8ebdec-a095-4834-a4de-4c21e2f23d76" alt=""><figcaption></figcaption></figure>

> **注意：** 画像比較エレメントは現在、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画像のサイズに合わせて表示されます。

<figure><img src="https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2FIjkJKtBCLHvD1ziitLm2%2FCleanShot%202026-03-24%20at%2019.44.06%402x.png?alt=media&#x26;token=f72f7afb-fa22-4f3c-9386-4719641eb936" alt=""><figcaption></figcaption></figure>

**画像設定**

| 設定                | 説明                                                                                                      |
| ----------------- | ------------------------------------------------------------------------------------------------------- |
| **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）。                                    |

<figure><img src="https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2FD3TfY6Yd56MaRl3DBy8f%2Fimage.png?alt=media&#x26;token=62f8ee95-10fd-4e89-abe3-4d4eaf61b5a9" alt=""><figcaption></figcaption></figure>

**バッジ設定**

Page Outline内の**Comparison Badge**をクリックして設定します：

| 設定                 | 説明                                                               |
| ------------------ | ---------------------------------------------------------------- |
| **Before Text**    | Beforeラベルのテキスト（デフォルト："Before"）。                                  |
| **After Text**     | Afterラベルのテキスト（デフォルト："After"）。                                    |
| **Badge Position** | Horizontal：Top / Center / Bottom、Vertical：Left / Center / Right。 |

> バッジのフォント、色、背景、ボーダーは**Styling**タブでカスタマイズ可能です。

<figure><img src="https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2FNPJeZTL6yBXOsBBlzNc4%2Fimage.png?alt=media&#x26;token=1cfc177a-15a3-47c8-b037-3644f151322b" alt=""><figcaption></figcaption></figure>

**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%

<figure><img src="https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2FVF4avt5AMoQufFkhykGG%2FCleanShot%202026-03-24%20at%2019.48.29.gif?alt=media&#x26;token=9e800ae4-e693-49b6-81da-4827b938680c" alt=""><figcaption></figcaption></figure>

#### 主な使用例

**ビフォー・アフター表示**

スキンケア、リフォーム、写真編集、ダイエットなどの変化を表示

**機能比較**

製品のバージョン比較、色違い、旧パッケージ vs 新パッケージ

**季節・イベント比較**

季節、照明、イベントごとの見え方を比較

#### 最適化のポイント

1. 同じサイズの画像を使用する
2. 画像サイズを最適化（Auto推奨）
3. 下部表示はLazy Loadを使用
4. ファーストビューはPreload推奨
5. Alt Textを必ず設定

#### よくある質問

**1. サイズ違いの画像は使えますか？**\
可能ですが、同じ比率推奨。異なる場合はBefore画像がトリミングされます。

**2. モバイル対応していますか？**\
はい。タッチ操作対応済みです。

**3. 後から方向変更できますか？**\
はい。Generalタブで変更可能です。

**4. ラベルを非表示にできますか？**\
可能です（Badge Visibility → Hidden）。

**5. ラベルのデザイン変更はできますか？**\
可能です（Stylingタブ）。

***

#### 追加リソース

* [PageFly Element Styling | Ultimate Guide to Edit Effectively](https://help.pagefly.io/manual/elements-style-settings/)
* [General Settings for All Elements](https://help.pagefly.io/manual/elements-general-settings/)
* [Image Element Guide](https://help.pagefly.io/page-structure-and-elements/pagefly-elements/media/image-element)