ポップアップの追加

公開日: 2024年11月12日更新日: 2026年10月20日

ClickFunnels のページには、ページごとにポップアップモーダルを表示できるポップアップ機能が組み込まれています。ポップアップモーダルは、訪問者がページを離れようとしたときに自動的に表示することも、ボタン、画像、テキストがクリックされたときに手動で表示することもできます。これにより、見込み客の獲得、オファーの宣伝、重要なメッセージの共有を最適なタイミングで簡単に行えます。この記事では、エンゲージメントを最大化するために、ページ上のポップアップを設定、カスタマイズ、制御する方法を説明します。

必要条件

アクティブなClickFunnelsアカウント
ワークスペースで作成されたページ

ポップアップとは

ポップアップは、メインのページコンテンツの上に表示される小さなウィンドウで、注意を引き、特定のアクションを促します。ポップアップは、訪問者が閲覧中のページから離れることなく、見込み客の収集、期間限定オファーの宣伝、重要なメッセージの配信などによく使用されます。

例：
ライブウェビナーの登録ページを運営しているとします。訪問者がタブを閉じようとマウスを動かすと、メールアドレスと引き換えに無料のチェックリストをダウンロードできるポップアップモーダルが表示され、訪問者が離脱する前に関わる最後のチャンスが得られます。

ポップアップコンテンツの編集

ステップ 1: ポップアップエディターにアクセスする

エディターでページを開きます。
ナビゲーションバーで カスタマイズ（歯車）アイコンをクリックします。ファネル外のページでは、代わりに ポップアップ をクリックします。
ポップアップを表示 を選択して、ポップアップエディターを開きます。

ステップ 2: ポップアップにコンテンツを追加する

選択したページテンプレートによって、ポップアップは空白で表示されるか、テンプレートのコンテンツがあらかじめ入った状態で表示されます。ポップアップへのコンテンツの追加は、メインページの編集と同じように行えます。セクション、行、フレックス、要素を使用して、ポップアップをデザインし構成します。見出し、画像、フォーム、ボタンなどの要素をドラッグして、希望するスタイルと機能に合ったポップアップを作成できます。

セクションを追加: 新しいセクションを追加をクリックして、ポップアップコンテンツのメイン領域を作成します。
行を追加: 行を追加をクリックしてセクションに行を挿入し、個々のコンテンツ要素を配置します。
要素を追加: 行の各列内で新しい要素を追加をクリックして、見出し、画像、フォーム、ボタンなどのコンテンツを追加します。

ポップアップのカスタマイズ

ポップアップメニューにカーソルを合わせるか、モーダルが開いているときに、設定を編集 または ポップアップ設定を編集 をクリックしてポップアップ設定にアクセスします。

上マージンと下部の余白

上マージン と 下部の余白 の設定では、ポップアップモーダルと ブラウザの端（上と下） との間のスペースを制御できます。スライダーを使用するか、値（px またはパーセンテージ %）を手動で入力して余白を調整し、デザインに合った一貫した間隔にできます。

デバイスアイコン（🖥️ & 📱）を使用して、デスクトップとモバイルの 上マージン を個別に設定できます。モバイルの値が指定されていない場合は、デフォルトでデスクトップの設定が引き継がれます。

ポップアップ設定

ポップアップ設定 では、ポップアップがページに表示されるタイミングと方法を制御できます。

エグジット時にトリガー: ユーザーがページを離れようとしたときにポップアップを表示するかどうかを選択します。
- エグジット時に表示しない: ユーザーがページを離れようとしても、ポップアップは表示されません。
- ユーザーがエグジットしようとしたときに表示: ユーザーのカーソルがブラウザの端（アドレスバー、ブックマーク、タブなど）に移動するとポップアップが表示され、ページを離れる前に関わる最後のチャンスを提供します。
ページロード時にトリガー: ページが読み込まれるとすぐにポップアップを表示するかどうかを設定します。
- ロード時に表示しない: ページの読み込み時にポップアップは自動的に表示されません。
- ページがロードされたときに表示: ページが読み込まれるとすぐにポップアップが表示されます。優先度の高いメッセージに最適です。
要素が表示されているときに開く: 表示されたときにポップアップを表示させる特定のページコンテナ（セクション、行、フレックス、要素など）を選択します。この機能は、ユーザーのスクロールに応じて表示するポップアップに便利です。
バックドロップの色: バックドロップの色は、ポップアップモーダルの背後に表示されるレイヤーで、ポップアップをページの他のコンテンツから視覚的に分離するのに役立ちます。単色または半透明の色を選択して、下にあるコンテンツがどの程度見えるかを制御できます。ブランドの一貫性を保つにはスタイルガイドから色を選択し、カスタムの色合いを使う場合はカスタムタブで選択します。不透明度 スライダーを調整して、バックドロップの透明度を目的の効果に合わせて微調整します。
左 + 右の余白: ブラウザの端とポップアップモーダルとの間の左右の余白を調整します。

サイズ

ポップアップモーダルの幅を調整して、各デバイスでポップアップが占めるスペースを制御します。

スライダーを使用するか、特定の値（パーセンテージ % またはピクセル px）を入力して、デスクトップユーザー向けのポップアップの幅を設定します。これにより、デスクトップでの表示に適したサイズになります。

デバイスアイコン（🖥️ & 📱）を切り替えてモバイルデバイス向けのモーダルの幅をカスタマイズし、小さな画面に適したサイズにすることで、スムーズなモバイル体験を提供できます。たとえば、デスクトップで幅を 60% に設定している場合、モバイル表示でコンテンツが崩れないように、モバイルでは 95% に設定することを検討してください。

パディング

パディング 設定では、コンテンツとそのコンテナ（セクション、行、列、要素など）の内側の端との間のスペースを制御します。この内側の余白により、コンテンツにゆとりが生まれ、視覚的なバランスが整います。スライダーを使用するか、ピクセル（px）またはパーセンテージ（%）で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

パディングのオプション:

上: 要素コンテナの上端とコンテンツとの間にスペースを追加します。
下: 要素コンテナの下端とコンテンツとの間にスペースを追加します。
左 + 右: 要素コンテナとコンテンツとの間の水平方向の間隔を調整します。
ギャップ: アコーディオン などの特定の要素では、コンテナ内のアイテム間の間隔を設定するためにギャップのプロパティが追加されています。たとえば、上下のパディングを定義しなくても、アコーディオン要素内の各アコーディオンアイテム間のギャップを調整できます。

デスクトップとモバイル（🖥️ & 📱）のカスタマイズ:

パディング設定では、デスクトップ 表示と モバイル 表示で別々の値を定義できます。パディングコントロールの上部にある デバイス切り替え を使用して画面モードを切り替え、それぞれに合わせて間隔を調整します。モバイルの値が指定されていない場合は、デフォルトでデスクトップの設定が引き継がれます。

この機能により、さまざまな画面サイズに最適化されたレイアウトを維持し、モバイルとデスクトップの両方で体験を向上させることができます。

背景

背景プロパティを使用すると、セクション、行、列、フレックスコンテナなどのさまざまなコンテナや、動画などの個々の要素に背景画像を追加してカスタマイズできます。背景オプションをオンにすると設定が有効になり、背景画像のソース、スタイル、フィット、色のオプションを設定できます。

画像URL: 背景画像の URL を入力するか、ClickFunnels の画像ギャラリーに直接アップロードします。
画像スタイル: コンテナ内での背景画像の表示方法を制御します。
- なし: 追加のスタイル設定を行わずに、背景画像を元のサイズと位置で表示します。画像がコンテナより小さい場合は隙間が残ることがあります。
- フルセンター: サイズを変更せずに画像をコンテナの中央に配置します。画像がコンテナより小さい場合は空白が残ることがあります。
- フルセンター（パララックス）: 画像を中央に配置し、パララックススクロール効果を適用します。画像がメインコンテンツとは独立して動くことで、奥行きのある見た目になります。
  
  注:
  
  iOS の制限により、Apple のモバイルデバイスではパララックス効果が自動的に無効になります。iOS デバイス（Safari およびその他の WebKit ブラウザ）は、CSS でパララックススクロールを実装するうえで中心となる background-attachment: fixed をサポートしていないか、サポートが限定的です。レイアウトを維持するため、背景は静的なスタイル（例: フルセンター）で表示されます。
- 幅100%にフィル: 縦横比を維持したまま画像を拡大してコンテナの幅全体をカバーします。縦方向がトリミングされる場合があります。
- 幅と高さ100%にフィル: 画像を引き伸ばしてコンテナの幅と高さの両方を埋めます。縦横比を維持するため、画像の一部がトリミングされます。
- 繰り返さない: 画像を繰り返さずに 1 回だけ表示します。余ったスペースは空白のままになります。
- 繰り返す: 画像をタイル状に並べて、コンテナの幅と高さの両方をカバーします。
- 水平に繰り返す: コンテナの幅方向にのみ画像を繰り返します。
- 垂直に繰り返す: コンテナの高さ方向に画像を縦に並べます。
画像フィット: 配置を整えるために、コンテナ内での画像の位置（中央、左上、右下など）を指定します。
色: このオプションでは、背景と前景の色を設定できます。
- 背景色: 背景画像を使用しない場合は、単色またはグラデーションの色を背景として直接適用できます。カラーピッカーからカスタムの色を選択するか、一貫性を保つためにスタイルガイドから色を選択します。背景画像を使用している場合、通常は背景色は表示されませんが、画像の読み込み中に一時的に表示されたり、画像の読み込みに失敗した場合のフォールバックとして表示されたりすることがあります。
- 前景色: 背景画像の上にオーバーレイを追加します。不透明度を調整して、画像に色味を付けたり柔らかい印象にしたりできます。このレイヤーにより、読みやすさを高めたり、画像にスタイリッシュな色味を加えたりできます。

ボーダー

ボーダー 設定では、要素の周囲にボーダーを追加してスタイルを設定し、ページ上での視覚的な輪郭や区切りを強調できます。

スタイルプリセット（1、2、3）: スタイルガイドで定義済みのボーダースタイルから選択します。これらのプリセットにより、ページ全体で一貫したボーダースタイルを要素にすばやく適用できます。
スタイルを編集: スタイルガイドのプリセットボーダースタイル（そのスタイルを使用するすべての要素に影響します）を変更するには、スタイルを編集 を選択してグローバル設定でデザインを調整します。
上書き: 上書き オプションを使用すると、グローバルなスタイルガイドの設定に影響を与えずに、この要素だけのボーダー設定をカスタマイズできます。
ボーダー: 要素のどの辺にボーダーを表示するかを選択します。上、下、左、右のボーダーを自由に組み合わせられます。
ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などのボーダーの線のスタイルを選択します。
カラー: カラーピッカーを使用してボーダーの色を選択します。スタイルガイドの色またはカスタムの色を選択でき、ボーダーの色をデザインの配色に合わせられます。
ストロークサイズ: ストロークサイズ スライダーを使用するか、特定のピクセル値を入力してボーダーの太さを調整し、細い輪郭線から太いフレームまで作成できます。

シャドウ

シャドウ 設定では、要素にシャドウ効果を適用して奥行きや強調を加え、見た目を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。

スタイル: ページのスタイルガイドで定義済みのシャドウスタイルから 1 つを選択します。番号付きのスタイル（1、2、3）をクリックすると、スタイルガイドで定義されたプリセットのシャドウ設定が適用されます。
シャドウスタイル: インセット（要素の内側のシャドウ）と アウトセット（要素の外側のシャドウ）から選択して、目的のシャドウ効果を作成します。
X方向: シャドウの水平方向の位置を調整します。正の値ではシャドウが右に、負の値では左に移動します。
Y方向: シャドウの垂直方向の位置を制御します。正の値ではシャドウが下に、負の値では上に移動します。
ブラー: シャドウの端のぼかし具合を制御します。値を大きくすると拡散した柔らかいシャドウになり、値を小さくするとシャドウがくっきりします。
スプレッド: シャドウのサイズを調整します。正の値ではシャドウが広がり、負の値では狭くなります。
カラー: カラーピッカーを使用してシャドウの色を設定します。

コーナー

コーナー 設定では、要素の角の丸み（border-radius）を調整し、丸みのある角やシャープな角を自由に作成できます。

スタイルプリセット（1、2、3）: スタイルガイドで定義済みのコーナースタイルから選択します。これらのプリセット（1、2、3）により、ページ全体のデザインに合ったスタイルをすばやく適用できます。
スタイルを編集: スタイルガイドのスタイル（そのスタイルを使用するすべての要素に影響します）を直接変更するには、スタイルを編集 をクリックしてグローバル設定でプリセットを調整します。
上書き: スタイルガイドを変更せずにカスタムのコーナー設定を適用するには、上書き をクリックします。これにより、この要素だけの角の丸みを調整できます。
すべての角: スライダーを調整するか、ピクセルまたはパーセンテージで特定の値を入力して、4 つの角すべてに同じ丸みを設定します。
エッジを分ける: エッジを分ける を有効にすると、各角を個別に調整できます。左上、右上、左下、右下の角にそれぞれ異なる値を設定して、独自の形状を作成できます。

高度な設定

ポップアップの 高度な 設定では、スタイルを調整したり、カスタム属性を追加したりできます。ポップアップには、アニメーションやレンダリング条件の設定はありません。詳細については、次のリソースを参照してください。

詳細設定 - スタイルのカスタマイズ: コンテナを配置し、z-index を適用する方法を説明します。
詳細設定 - ロジックのカスタマイズ: カスタム属性を追加する方法を説明します。

ポップアップを表示する方法

ページでポップアップを表示する一般的な方法は次のとおりです。

ボタンのクリックでポップアップを表示する

ページエディターで、使用する ボタン を選択します。
ボタンの設定で、ボタンのクリック時のアクション セクションを見つけます。
ドロップダウンで ポップアップを開く… を選択します。
変更を保存します。これで、訪問者がボタンをクリックするとポップアップが表示されます。

画像、リンク、テキストのクリックでポップアップを表示する

使用する要素（画像、ナビゲーションリンク、テキスト要素など）を選択します。
設定またはハイパーリンクのオプションで、リンクアクションを #open-popup に設定します。
変更を保存します。訪問者が要素をクリックすると、ポップアップが開きます。

ユーザーがページを離れようとしたとき（離脱意図）

ポップアップ設定の エグジット時にトリガー オプションを使用すると、ユーザーのマウスカーソルがブラウザウィンドウの上部（アドレスバーやタブを閉じる方向など）に移動したときにポップアップを表示できます。この「離脱意図」ポップアップは、ページを離れようとしている訪問者と関わる最後のチャンスとなり、見込み客の獲得や土壇場でのオファーの提示に最適です。

エディターでページを開きます。
ポップアップ メニュー（ファネルのページでは カスタマイズ の歯車アイコンの中にあります）を開き、設定を編集 をクリックします。
エグジット時にトリガー を ユーザーがエグジットしようとしたときに表示 に設定します。

ページの読み込みが完了したとき

ページロード時にトリガー 設定を使用すると、ページの読み込みが完了するとすぐにポップアップを自動的に表示できます。優先度の高いお知らせや期間限定のオファーに最適で、すべての訪問者にすぐにメッセージを見てもらえます。

エディターでページを開きます。
ポップアップ メニュー（ファネルのページでは カスタマイズ の歯車アイコンの中にあります）を開き、設定を編集 をクリックします。
ページロード時にトリガー を ページがロードされたときに表示 に設定します。
必要に応じて、ページロードの遅延 をミリ秒単位で設定できます。たとえば、遅延を 1000ms に設定すると、ページの読み込みから 1000ms（1 秒）後にポップアップが表示されます。

コンテナが表示されたとき（スクロール時）

要素が表示されているときに開く オプションを使用すると、ユーザーがページを下にスクロールして、特定のセクションや要素（見出しや注目のオファーなど）がユーザーの ビューポート に表示されたときにポップアップを表示できます。この手法は、訪問者が重要な情報を読んだ後や、セールスページの特定の部分に到達したときなど、コンテンツの戦略的なポイントで注意を引くのに役立ちます。

エディターでページを開きます。
ポップアップ メニュー（ファネルのページでは カスタマイズ の歯車アイコンの中にあります）を開き、設定を編集 をクリックします。
要素が表示されているときに開く オプションで、コンテナ（セクション、行、フレックス、要素）を選択します。識別しやすくするために、コンテナの設定で選択したコンテナのタイトルを変更することも検討してください。