# ポップアップ

#### PageFlyポップアップコンテンツ要素について

ポップアップコンテンツ要素を使用すると、PageFlyエディター内で直接ポップアップオーバーレイを作成および管理できます。ポップアップを使用して、ニュースレター登録フォーム、離脱インテント割引コード、サイズガイド表、フラッシュセールのお知らせ、年齢確認ゲート、ソーシャルプルーフ通知などを表示できます。

ポップアップは完全なPageFly要素であり、他の要素（見出し、画像、ボタン、フォーム、カウントダウンタイマーなど）をポップアップ内にドラッグし、ページの他のセクションと同じようにスタイルを設定できます。各ポップアップには独自のトリガー、頻度、表示設定があり、ライブストアフロントでいつどのように表示されるかを制御します。

> ポップアップコンテンツ要素は、この機能があなたのストアで有効になっている場合に使用できます。要素パネルに表示されない場合は、PageFlyサポートにお問い合わせください。

<figure><img src="https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2FrNRZJH95MYcgf5Ubl15o%2FCleanShot%202026-03-23%20at%2011.23.36.gif?alt=media&#x26;token=efca15e8-3207-4e58-ae75-61bba830ea79" alt=""><figcaption></figcaption></figure>

#### ポップアップコンテンツ要素の構造

ポップアップコンテンツ > 内部コンテンツ（見出し、段落、画像、ボタン、フォームなど）

各ポップアップは、子要素を保持するコンテナ要素です。ポップアップ自体がオーバーレイ、配置、アニメーション、および閉じる動作を制御し、内部コンテンツは完全にカスタマイズ可能です。

<figure><img src="https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2FiDMc762LWC3svld30cDR%2Fimage.png?alt=media&#x26;token=4ac3d7cc-ed38-4fea-9f19-08835630c259" alt=""><figcaption></figcaption></figure>

***

### 要素へのアクセス

PageFlyエディターで、左側のツールバーにある**要素**アイコンをクリックします。要素リストに移動し、**ポップアップコンテンツ**を選択します。6つの既製テンプレートから1つを選択するよう求められます。

エディターキャンバスの上部にある**ポップアップ管理バー**から\*\*「+」**ボタンをクリックするか、任意の要素の**クリックアクション\*\*設定から直接ポップアップを作成することもできます（下記の「改善されたクリックアクション — ポップアップを開く」セクションを参照）。

***

### ポップアップコンテンツテンプレートの種類

PageFlyは、特定のユースケースに合わせて設計された6つのポップアップテンプレートを提供しています。

| テンプレート        | トリガー        | 頻度         | 説明                                                                                           |
| ------------- | ----------- | ---------- | -------------------------------------------------------------------------------------------- |
| **ニュースレター登録** | 遅延 (5秒)     | セッションごとに1回 | 左側に暗い画像パネル、右側にメール登録フォームがある2列レイアウト。MailChimpやKlaviyoとの連携によるメール収集に最適です。                        |
| **離脱クーポン**    | 離脱インテント     | セッションごとに1回 | ギフトアイコンと点線枠のクーポンコード表示を備えた中央揃えの1列レイアウト。顧客のカーソルがページを離れようと移動したときに表示されます。                        |
| **サイズガイド**    | クリックのみ      | 常に         | サイズと寸法の列を示すHTMLテーブルを備えた中央揃えレイアウト。商品ページの「サイズガイド」リンクまたはボタンから開くように設計されています。                     |
| **フラッシュセール**  | スクロール (40%) | セッションごとに1回 | 上部にヒーロー画像、その下にコンテンツがあり、内蔵のカウントダウンタイマーとフラッシュセールバッジが特徴です。顧客がページを40%スクロールした後に表示されます。            |
| **年齢確認**      | 遅延 (0秒)     | セッションごとに1回 | アバター画像と2つのアクションボタン（「私は21歳以上です」/「私は21歳未満です」）ですぐに表示されます。オーバーレイは閉じることができず、顧客はオプションを選択する必要があります。 |
| **ソーシャルプルーフ** | スクロール (70%) | セッションごとに1回 | ビューポートの下部に固定された、商品画像、星評価、CTAボタンを備えたコンパクトな水平カード。オーバーレイはなく、フローティング通知カードとして表示されます。              |

テンプレートを選択した後、トリガーの変更、コンテンツの入れ替え、レイアウトの再スタイル、子要素の追加・削除など、あらゆる側面を完全にカスタマイズできます。

***

### 設定オプション

#### ポップアップコンテンツの一般設定

キャンバス上でポップアップコンテンツ要素を選択すると、インスペクターパネル（右サイドバー）に以下の設定が表示されます。

| 設定             | 説明                                                                                         |
| -------------- | ------------------------------------------------------------------------------------------ |
| **Popup Name** | このポップアップを管理バー、クリックアクションのドロップダウン、その他の画面で識別するためのフリーテキストのラベル。「Popup 1」、「Popup 2」のように自動生成されます。 |

#### トリガー設定

トリガーは、ライブストアフロントでポップアップが自動的に開くタイミングを決定します。

| 設定              | 説明                                                                                       |
| --------------- | ---------------------------------------------------------------------------------------- |
| **Delay**       | 指定した秒数の後に自動的に開きます。**Delay Seconds**の値（範囲：1–60、デフォルト：5）を設定します。                            |
| **Scroll**      | 顧客がページの指定したパーセンテージまでスクロールしたときに開きます。**Scroll Percentage**の値（範囲：5%–95%、デフォルト：50%）を設定します。   |
| **Exit-Intent** | 顧客のカーソルがブラウザータブを離れようと移動したとき（ビューポートの上端）に開きます。追加の設定は不要です。                                  |
| **Click-Only**  | 自動的には開きません。訪問者がページ上のリンクされた要素をクリックした場合にのみ開くことができます。「改善されたクリックアクション — ポップアップを開く」を参照してください。 |

#### 頻度設定

同じ訪問者にポップアップがどれくらいの頻度で表示されるかを制御します。

| 設定                   | 説明                                                            |
| -------------------- | ------------------------------------------------------------- |
| **Always**           | ページが読み込まれるたびにポップアップが表示されます。                                   |
| **Once per session** | ブラウザセッションごとに1回ポップアップが表示されます。                                  |
| **Every N days**     | 指定した日数ごとに1回ポップアップが表示されます。**Frequency Days**の値（範囲：1–90）を設定します。 |

<figure><img src="https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2FJVveDvLo0aPWtwE4SZaa%2Fimage.png?alt=media&#x26;token=302c1a4d-ea92-4461-aa66-cbc8219fc2b8" alt=""><figcaption></figcaption></figure>

#### リンクされた要素

クリックアクションによってこのポップアップを開くように設定されているページ上のすべての要素を示す読み取り専用のリスト。各エントリには要素のタイプと名前が表示され、キャンバス上のその要素に移動するための\*\*「Go to」\*\*ボタンがあります。

<figure><img src="https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2F942ry47T182qSV4TlDDs%2Fimage.png?alt=media&#x26;token=462fc22a-fe5d-4ab9-8c2b-7db3cffe3052" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2FlYplIvKJIHJmTX6eVxnW%2Fimage.png?alt=media&#x26;token=22213ac6-d0f4-4bee-bbca-07611de0ca2c" alt=""><figcaption></figcaption></figure>

#### 競合の検出

PageFlyは、2つ以上のポップアップが互いに干渉する可能性がある場合を自動的に検出し、管理バーの影響を受けるチップに警告アイコンを表示します。

ポップアップが以下の**3つの条件すべて**を共有する場合に競合がフラグ付けされます：

1. 同じトリガータイプ（遅延、スクロール、または離脱インテント）
2. 同じタイミングパラメータ（例：両方とも5秒の遅延に設定）
3. 頻度モードが「Always」に設定されている

クリックのみのポップアップは、明示的なユーザー操作が必要なため、競合を生成しません。

競合を解決するには、一方のポップアップのトリガータイミングを変更するか、頻度モードを「Once per session」または「Every N days」に切り替えるか、一方のポップアップのトリガータイプを完全に変更します。

***

### 改善されたクリックアクション — ポップアップを開く

クリックアクション機能が改善され、ポップアップコンテンツ要素を開くことができるようになりました。以前は、クリックアクションポップアップはメディアコンテンツ（画像、動画、iframe）しか表示できませんでした。今では、ページ上の任意の要素が、上記のトリガー、スタイリング、頻度オプションをすべて備えた完全なポップアップコンテンツ要素を開くことができます。

これは**クリックのみ**のポップアップをトリガーする主な方法ですが、自動トリガー（遅延、スクロール、離脱インテント）を持つポップアップでも機能し、顧客が手動で再表示する追加の方法を提供します。

#### 設定方法

PageFlyエディターで、キャンバス上の任意の要素（ボタン、テキスト、画像、アイコンなど）を選択します。インスペクターパネルを開き、**一般**タブに移動します。**アクション**セクションで、**クリックアクション**を\*\*「ポップアップを開く」\*\*に設定します。現在のページにあるすべてのポップアップコンテンツ要素が名前とトリガータイプでラベル付けされてドロップダウンに表示されます。ターゲットのポップアップを選択します。

#### クリックアクションからポップアップを作成する

ポップアップがまだ存在しない場合、または新しいものが必要な場合は、ドロップダウンの下にある\*\*「ポップアップを作成」**ボタンをクリックします。これにより、トリガータイプが**「クリックのみ」\*\*に事前設定され、自動生成された名前と6つの利用可能なバリエーションからテンプレートを選択できる「ポップアップを作成」モーダルが開きます。作成後、新しいポップアップは自動的に要素にリンクされます。

#### リンクの管理

既存のリンクを管理するための2つのオプションがあります：

* **編集** — リンクされたポップアップ要素にキャンバス上で移動し、設定を行うことができます。
* **リンク解除** — クリックアクションの関連付けを削除します。ポップアップはページに残りますが、この要素によってトリガーされなくなります。

リンクされたポップアップが削除されてもクリックアクションの参照が残っている場合、警告バナーが表示され、別のポップアップを選択するか、リンクを削除するよう促されます。

#### クリックアクションポップアップの表示オプション

「ポップアップを開く」クリックアクションを使用すると、インスペクターに追加のスタイリングコントロールが表示されます：

| 設定                     | 説明                             |
| ---------------------- | ------------------------------ |
| **Popup Padding**      | ポップアップコンテナの内部パディング。範囲：0–48px。  |
| **Close Button Size**  | X閉じるボタンのサイズ：16px、24px、または32px。 |
| **Close Button Color** | X閉じるボタンの色。デフォルト：白（#ffffff）。    |

クリックアクションポップアップを持つ要素は、ストアフロントで自動的に**ポインターカーソル**を表示し、顧客がクリック可能であることを示します。

クリックアクション設定の\*\*「ポップアップをプレビュー」\*\*ボタンを使用して、エディターで直接クリックアクションポップアップがどのように見えるかを確認できます。

<figure><img src="https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2FNdxMNRXGQRUBBqP4YzZU%2Fimage.png?alt=media&#x26;token=706cc492-2f04-47e5-aed6-0ff1c01d2184" alt=""><figcaption></figcaption></figure>

***

### ストアフロントでの動作

#### ライブストアでのポップアップの動作

顧客があなたのページを訪れると、ポップアップは次の実行順序に従います：

1. **ページの読み込み** — 自動トリガー（遅延、スクロール、離脱インテント）を持つすべてのポップアップがリスナーを登録します。
2. **頻度チェック** — 表示する前に、システムは訪問者が頻度設定に基づいてすでにポップアップを見たかどうかを確認します。すでに表示されている場合、ポップアップはスキップされます。
3. **トリガーの発火** — 条件が満たされると（タイマーが切れる、スクロールのしきい値に達する、カーソルがビューポートを離れる）、ポップアップは設定されたアニメーションで開きます。
4. **一度に1つ** — 一度に開くことができるポップアップは1つだけです。ポップアップがすでに開いているときに別のトリガーが発火した場合、新しいポップアップは待機します。
5. **クリックアクションポップアップ** — 訪問者がリンクされた要素をクリックすると、ターゲットのポップアップがすぐに開きます。別のポップアップがすでに開いている場合は、短いトランジションで最初に閉じます。

#### 閉じる動作

訪問者は、**X閉じるボタン**（有効な場合）をクリックするか、ポップアップの外側の**オーバーレイ領域**（「Close on Overlay Click」が有効な場合）をクリックするか、キーボードの**Escapeキー**を押すことでポップアップを閉じることができます。

#### アクセシビリティ

ポップアップには、スクリーンリーダーの互換性のための`role="dialog"`および`aria-modal="true"`、開いている間のポップアップ内でのフォーカストラップ、閉じるためのEscapeキーのサポートなどのアクセシビリティ機能が含まれています。

#### テーマの互換性

ポップアップは、すべてのShopifyテーマで確実に動作するように設計されています。ポップアップコンテナは、一部のテーマが作成するCSSスタッキングコンテキストの問題を回避するために、実行時にドキュメントのbodyに再配置されます。CSS保護により、ポップアップがすべてのテーマコンテンツの上にレンダリングされることが保証されます。

テスト済みのテーマには、Dawn、Spotlight、Horizon、Senseが含まれます。

> Shopifyテーマエディターのプレビューでは、テーマのカスタマイズ中に干渉を防ぐためにポップアップが自動的に無効になります。

***

### ベストプラクティス

#### 離脱インテントで緊急性を演出

**離脱クーポン**テンプレートを使用して、離れようとしている顧客を獲得します。頻度を「7日ごと」に設定すると、戻ってきた訪問者が1週間後に圧倒されることなく再びオファーを見ることができます。

#### 参照コンテンツにはクリックのみを使用

サイズガイド、配送ポリシー、返品情報などのコンテンツには、**クリックのみ**トリガーを使用します。テキスト要素またはボタンをポップアップにリンクして、顧客が自動トリガーに邪魔されることなくオンデマンドで開くことができるようにします。

#### 必須のアクションでは閉じられないようにする

年齢確認や法的同意の場合、\*\*「Show Close Button」**と**「Close on Overlay Click」\*\*の両方を無効にします。強力なオーバーレイの不透明度（0.85）を設定し、訪問者が先に進むためにポップアップボタンを操作する必要があるようにします。

#### 邪魔にならないようにする

**ソーシャルプルーフ**テンプレートを**Bottom**の位置で使用し、オーバーレイなしで表示することで、ページコンテンツをブロックしないフローティング通知を表示します。これは、商品レビュー、期間限定オファー、信頼のシグナルに効果的です。

#### トリガーの競合を避ける

同じページに複数の自動トリガーポップアップがある場合は、タイミングをずらす（例：3秒の遅延 vs. 8秒の遅延）か、異なる頻度モードを使用します。PageFlyの競合検出は、ポップアップが同じトリガー、タイミング、頻度を共有している場合に警告します。

***

### よくある質問

**1. ボタンがクリックされたときにのみ開くポップアップを作成するにはどうすればよいですか？**

ポップアップのトリガータイプを「クリックのみ」に設定します。次に、ボタン要素を選択し、そのクリックアクション設定に移動し、「ポップアップを開く」を選択し、ドロップダウンからポップアップを選択します。

**2. 同じページに複数のポップアップを設置できますか？**

はい。必要なだけポップアップを追加できます。管理バーにはすべてのポップアップが表示され、潜在的な競合について警告します。ストアフロントでは、一度に1つのポップアップしか開けません。

**3. ストアフロントでポップアップが表示されないのはなぜですか？**

次の一般的な原因を確認してください：ポップアップの頻度設定が訪問者に対してすでにトリガーされている可能性があります（ブラウザのクッキーを消去するか、一時的に「常に」に切り替えてみてください）。スクロールトリガーを使用している場合、ページがスクロールパーセンテージに達するほど長くない可能性があります。クリックのみトリガーを使用している場合、要素がクリックアクションを介してポップアップにリンクされていることを確認してください。ポップアップはShopifyテーマエディターでは無効になっています — 実際のストアフロントURLでページを表示してください。

**4. 「セッションごとに1回」に設定したのに、ポップアップが表示され続けるのはなぜですか？**

頻度の保存は、Shopify Customer Privacy APIに依存します。顧客がクッキーに同意していない場合、ストレージが持続せず、ポップアップが再び表示されることがあります。これはGDPR要件に準拠するための仕様です。

**5. 訪問者がポップアップを閉じるのを防ぐことはできますか？**

はい。表示設定で「Show Close Button」と「Close on Overlay Click」の両方を無効にします。訪問者は、先に進むためにポップアップ内のボタンまたはリンクを操作する必要があります。年齢確認テンプレートはこのパターンを使用しています。

**6. 2つのポップアップが同じトリガーを持っている場合はどうなりますか？**

両方のポップアップが同じトリガータイプ、タイミングを共有し、頻度が「常に」に設定されている場合、PageFlyは管理バーに競合警告を表示します。ストアフロントでは、一度に1つのポップアップしか開けません — 最初にトリガーされた方が表示されます。これを避けるために、トリガーのタイミングをずらすか、頻度モードを変更してください。

**7. ポップアップはモバイルデバイスで動作しますか？**

はい。ポップアップはレスポンシブであり、ビューポートサイズに適応します。既製のテンプレートは、小さな画面ではサイド画像を自動的に非表示にします。離脱インテントトリガーはモバイルでは発火しない（マウスカーソルがないため）ので、モバイル訪問者には遅延またはスクロールトリガーを使用することを検討してください。

**8. ポップアップの入場をアニメーションさせることはできますか？**

はい。表示設定で、アニメーションプリセットを選択します。アニメーションはポップアップが開くときに再生されます。利用可能なアニメーションには、フェード、スライド、スケール効果があります。

**9. 特定のポップアップを開くように要素をリンクするにはどうすればよいですか？**

要素を選択し、インスペクターパネルを開き、一般 > アクションに移動し、クリックアクションを「ポップアップを開く」に設定し、ドロップダウンからターゲットのポップアップを選択します。このドロップダウンから直接新しいポップアップを作成することもできます。

**10. ポップアップの背後にあるオーバーレイのスタイルを設定できますか？**

はい。表示設定で、オーバーレイの色（不透明度を含む）とオーバーレイのぼかしをカスタマイズできます。例えば、すりガラス効果のために4pxのぼかしを持つ暗いオーバーレイを設定したり、最小限のフローティングカードスタイルのために透明なオーバーレイを使用したりできます。

***

### 関連リソース

* [Click Action Settings](https://help.pagefly.io)
* [PageFly Elements Overview](https://help.pagefly.io)
* [Styling Elements](https://help.pagefly.io)