# ポップアップ作成のコツ
{% hint style="success" %}
本記事では、昨今の大手広告プラットフォームによる規制の動きを踏まえたランディングページにおけるポップアップ作成のポイントをまとめました。
{% endhint %}
### 前置き
まず、ポップアップが広告運用に与える影響について確認するために 2 大広告プラットフォームである Google と Facebook の広告ポリシーを参照しましょう。
両社のポリシーの本質は、「ユーザー体験を阻害しないこと」にあると考えられます。
#### Google
Google 広告ポリシーは、ヘルプセンターのターゲットページの要件に関するセクションで明確な規定を確認できます。ここでは、ユーザーのページ体験において、広告のランディングページのコンテンツが複雑すぎたり、閲覧しにくいものであってはならないことを明確に述べています
#### Facebook
Facebook の広告ポリシーには、ランディングページの体験に関する特定の要件もありますが、核心は、ユーザー体験が極端に悪いページに誘導されないようにすることです。
つまり、ランディングページやポップアップがサイト訪問者の目的を阻害するものであれば、その広告運用に影響が出る可能性がありますが、ユーザーが適切な製品をより迅速に見つけることを支援するためや、ユーザーが必要な割引を受けられるようにするなどの場合、上記の規制には該当せず、広告が禁止されたり、その効果が無効になったりすることはないと言えます。
### ポップアップ作成の6つのコツ
もちろん、広告プラットフォームの要件を満たすだけではポップアップを効果的に活用しコンバージョン率を最大化することはできません。
以下では、ポップアップを通じてランディングページのユーザー体験を向上させるための 6 つのヒントをご紹介しますので順番に見ていきましょう！
### 1. 表示・停止タイミング
ユーザーが Web ページに到着した直後にポップアップを表示したり、過度な頻度、または閉じにくいポップアップを出したりすることは避けましょう。
ポップアップは製品とブランドをユーザーによく理解してもらった後に出すことを心がけるべきです。\
また、閉じるボタンを設置することも忘れないようにしましょう。
Ptengineでは、表示・停止のタイミングを下記のように調整できます。
#### 1-1. 「X」秒間滞在した後
Ptengine では「ユーザーがページに訪問して "X" 秒経過した」ことをポップアップの表示条件として設定することができます。こうして、ユーザーが Web ページのコンテンツを理解するのに十分な時間を確保できるようにしましょう。
#### 1-2. ページの「X%」の位置までスクロールした時
ランディングページをスクロールしたユーザーはあなたの製品またはブランドに興味を持っている可能性が高いため、この設定を使うことも効果的です。
その他、ユーザーがページを離れようとしたときや、"X" 秒間静止した時なども選択できます。
このようにポップアップを特定のタイミングで表示することで、ユーザー体験を向上させましょう。
{% hint style="success" %}
**Note：**表示・停止条件の定義や詳細は[こちらの記事](/experience/campaign/create-new-1/display-timing.md)をご確認ください。
{% endhint %}
### 2. 位置やサイズ
ユーザーのブラウジングを妨げるような大きさのポップアップは、離脱に繋がりかねません。
ポップアップは下記のサイズを目安に設定すると良いでしょう。
**・ポップアップ：画面の 60% 以上を占めないこと**\
\&#xNAN;**・固定バー：画面の 10% 未満であること**
また、表示位置はユーザーの行動を中断させないような位置に設定しましょう。
Ptengineでは、ポップアップ編集画面の「位置とサイズ」より位置やサイズを調整できます。
### 3. ビジュアル
ポップアップが適切なタイミング、サイズで表示されても、ビジュアルが魅力的でなければ、その目的を達成することは困難です。
より良いユーザー体験を提供する魅力的なポップアップの要件は以下です。
・明確なテーマがあり、内容が明確である
・コピーテキストが正確である
・CTAが分かりやすい
・目を引く均一な色
・フォームがある場合は、入力欄が簡潔であり、送信を促す工夫がある
・必要に応じて関連性のある興味深い画像があること
### 4. 対象ユーザー
ユーザーのタイプが異なれば求めるものも異なります。全てのユーザーに同じポップアップを出すことは控え、ユーザーグループごとに出し分けましょう。
例：\
・新規訪問者：割引を提示してアプリのダウンロードを誘導\
・既存顧客：割引を表示して注文を誘導
Ptengineでは、体験の条件設定画面 > 対象ユーザー より、体験を表示する対象ユーザーを指定できます。
{% hint style="success" %}
**Note：**
ユーザーセグメントの作り方は[こちらの記事](https://ptmind-1.gitbook.io/ptengine-helpcenter/experience/user-group/create)をご確認ください。
ユーザーセグメントとはは[こちらの記事](https://ptmind-1.gitbook.io/ptengine-helpcenter/experience/user-group)ご確認ください。
{% endhint %}
### 5. 表示ページ
1 ページの中でポップアップが 2 回以上表示されると、ユーザー体験が低下する可能性があります。
ポップアップの表示に関して一言アドバイスするならば、自粛、自粛、自粛に尽きます。
Ptengineでは、下記の画面で体験を表示するページ条件を特定できます。
### 6. ゴール設定
ポップアップがユーザー体験の向上に貢献しているかを確認するには、各要素がデータを通じて検証可能である必要があります。
CTAボタンの[イベント計測の有効化](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/ja/experience/campaign/inline_gudie/editor.md#ibentono)や、[体験のゴール設定](/experience/goal/setting.md)を行いましょう。
### チェックリスト
ポップアップを表示する目的はさまざまですが、ポップアップを作成するための簡易的なチェックリストを下記にまとめましたので、ご活用ください。
* [ ] ポップアップが広告プラットフォームのポリシーに違反していないか(ページを開くのをブロックする、ガイドファイルの自動ダウンロードなど)。
* [ ] ポップアップの目的が明確であるか（広告宣伝、ブランドコミュニケーション、ユーザー行動の誘導、フィードバックの取得など）
* [ ] ポップアップの表示タイミングや頻度は妥当か（ポップアップが表示される前にユーザーが商品やブランドをある程度認知していること）
* [ ] ポップアップのサイズがページ閲覧の妨げになっていないか（ポップの面積は画面の60％未満、固定バーの面積は画面の10％未満）
* [ ] ポップアップの位置が合理的か
* [ ] ポップアップのメインコンテンツが明確か
* [ ] コピーテキストが正確か
* [ ] CTAがわかりやすいか
* [ ] ポップアップ全体の色が人目を引き、ブランドのトーンと一致しているか
* [ ] フォームがある場合は、入力欄が簡潔であり、送信を促す工夫がある
* [ ] 必要に応じて関連性のある興味深い画像があること
* [ ] ユーザータイプに合ったポップアップを出し分けできているか
* [ ] ページに複数のポップアップが同時に表示されてないか
* [ ] ポップアップの各要素がデータを通じてテストおよび最適化できるかどうか
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://helps.ptengine.com/experience/campaign/create-new-1/tips.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.