PageSenseのポップアップ画面のテンプレートの設計画面を使用すると、訪問者のメールアドレスからWebサイトのアドレスまで、顧客へのアプローチやビジネスのコンバージョン向上に必要なすべての情報を収集できます。また、使いやすいドラッグ＆ドロップ形式のエディターでは、ポップアップ画面にカスタム要素（たとえば、テキスト、画像、動画、入力欄、SNS、ラジオボタンなど）を挿入するのに、HTMLやCSSの知識は必要ありません。さらに、各要素の外観（背景色、影効果、または枠線のスタイルなど）は、さまざまな設定を使用して左ペインでカスタマイズできます。

この記事では、PageSenseのテンプレートの設計画面を使用して、ポップアップ画面にさまざまな種類の要素を追加し、カスタマイズする方法について説明します。

ポップアップ画面に新しい要素を挿入するには。

グリッドの挿入

グリッドは、行と列のコンテナーで構成され、ポップアップ画面の初期構造を作成するために使用します。その後、必要なコンテンツ要素を追加できます。コンセプトに最適な場所にコンテンツを整理して配置できます。グリッド構造を選択するたびに、テンプレートの設計画面によって1つ以上の空の列と行がポップアップ画面上に自動的に配置されます。

グリッドを挿入するには。
1. 左ペインから［グリッド］要素をドラッグ＆ドロップし、ポップアップ画面にカーソルを合わせて、オブジェクトを挿入するコンテナーを確認します。

2. 要件に合ったグリッドのスタイルを選択し、ポップアップ画面に追加する行数と列数を入力します。

3. 各コンテナーに、使用するコンテンツ要素（テキスト、画像、動画など）を挿入し、要素の外観を左ペインのさまざまな形式設定でカスタマイズします。

テキストの挿入

2. ポップアップ画面のテキストボックスに必要なテキストを入力します。

3. エディター画面に表示されるさまざまなテキスト形式の設定を使用して、フォントスタイル、フォントサイズ、文字装飾（太字、斜体、下線）、テキストの配置（左、右、中央）、文字間隔などを変更できます。リンクアイコンをクリックして、テキストにリンクを追加することもできます。

さらに、左ペインでテキストボックスの外観を次のようにカスタマイズできます。

• 左ペインの［背景］セクションで、テキストボックスに使用する背景色または画像を選択します。
  メモ：左ペインで［透明］を選択すると、ポップアップ画面から背景色または画像を削除できます。

• 左ペインの［テキストの影］セクションで、カラーピッカーからテキストの影の色を選択し、スライダーを使用して、垂直位置、水平位置、ぼかしなどのプロパティを個別指定します。設定例は画像をご参照ください。
  
  
  

• ［間隔］セクションで、［上］、［右］、［下］、［左］の各スライダーを使用して、テキストボックスの罫線とテキストの間隔を広げたり狭めたりします。目的の値をピクセル単位で直接入力し、Enterキーを押すこともできます。
  
  
  

• ［余白］セクションで、［上］、［右］、［下］、［左］の各スライダーを使用し、ポップアップ画面のデザインに合わせて、テキストボックスの周囲全体または特定の辺に余白を追加して調整します。目的の値をピクセル単位で直接入力し、Enterキーを押すこともできます。
  
  
  

• ［罫線と影］セクションで、［罫線のスタイル］のドロップダウンをクリックし、点線、破線、二重線など、適用する罫線の種類を選択します。
  画像のように、［罫線の色］、［罫線の幅］、［罫線の角丸］の各設定を使用して、罫線のプロパティを個別指定できます。
  
  
  

• カラーピッカーからテキストボックスの影の色を選択し、位置やぼかしなどのプロパティを、［罫線と影］セクションで個別指定します。設定例は画像をご参照ください。
  
  
  

入力欄の挿入

訪問者から入力内容や情報を収集する場合は、入力欄を使用します。入力欄は、ポップアップ画面上の対話型の項目として機能し、訪問者が入力した個別の回答を通じて、顧客の多様なニーズを把握できます。この情報は、Webサイトで今後実施するプロモーションや特典を最適化するために活用できます。年齢、氏名、国、関心のある分野などについて、ユーザーに質問できます。

入力欄を挿入するには

2. 左ペインの［プレースホルダー］項目に、訪問者に入力欄へ入力してもらう内容を示すテキストを入力します。

3. 左ペインにある各種書式設定を使用して、入力欄のプロパティを個別指定できます。ポップアップ画面の要素に適用できる各種書式設定の詳細はこちら。

ボタンの挿入

ポップアップ画面のボタンは、訪問者をWebサイト内のさまざまなページへ誘導し、Webページ全体のエンゲージメント率を高めるのに効果的です。PageSenseでは、ポップアップ画面にCTAを簡単に追加し、訪問者がボタンをクリックしたときの動作を個別指定できます。訪問者を別のWebページにリダイレクトする、別のポップアップ画面に移動する、ポップアップ画面のCTAをクリックした後にその画面を閉じる、といった処理を設定できます。さらに、テンプレートの設計画面では、ポップアップ画面上で成功したボタンのクリックをコンバージョンとして、失敗したクリックを拒否として追跡できます。これにより、ポップアップ画面が十分な成果を上げているか、または変更や改善が必要かを把握できます。

ボタンを挿入するには
1. 左ペインの［ボタン］要素を、新規ボタンを追加するポップアップ画面上の場所にドラッグ＆ドロップし、ボタン名を編集します。


2. 左ペインの［クリック時の動作］ドロップダウンで、訪問者がこのボタンをクリックしたときの動作を選択します。次のいずれかを選択できます。

1. 訪問者を新しいWebページのURLに移動するには、［移動する］を選択します。左ペインの［プレースホルダー］欄に、訪問者がこのボタンをクリックしたときに開くWebページのURLを入力します。
   
   たとえば、ECサイト（オンラインストア、ネットショップ）を運営している場合、この移動オプションを使用して、新商品のキャンペーン情報を掲載したWebページに顧客を誘導したり、ECサイト（オンラインストア、ネットショップ）での注文確定後に顧客満足度フォームを開いたりできます。
   
   
   
2. URLのクエリパラメーターとともに訪問者をWebページへ移動するには、［クエリパラメーターを使用して移動する］をオンにします（任意）。ボタン名やID、ポップアップキャンペーン名、メインのランディングページなどのクエリパラメーター文字列をURLに表示すると、Webサイト上でより多くアクセスされているポップアップ画面のボタンやページ、および移動先ページへ実際にトラフィックを送っているランディングページを把握できます。
   
   
   
3. 移動先のリンクをブラウザーの新しいタブで開くには、［リンクを新しいタブで開く］をオンにします（任意）。
   
   
   
4. 訪問者をキャンペーン内の次の画面、お礼画面、または特定の画面へ移動するには、［画面に移動］を選択します。この選択肢は、訪問者の前の回答に基づいて、ポップアップ画面内の適切な表示順へ移動させる場合に使用できます。
   
   たとえば、ポップアップ画面の前の画面で［コードを取得］や［特典を受け取る］など、処理を促すCTAをクリックした顧客にクーポンコードや追加のショッピング割引を表示するには、［画面に移動］を使用できます。
   
   
   
5. 他のページへ移動せずにポップアップ画面を閉じるには、［閉じる］を選択します。
   

1. ［独自のJavaScript］：独自のJavaScriptを使用すると、必要な処理を実行するコードを埋め込むことができます。
   
   たとえば、訪問者がボタンをクリックしたときに、Webサイトのチャットボットを開く、歓迎特典として顧客のアカウントにクレジットを追加するなど、任意の処理を実行できます。
   

1. ［コンバージョン］：ポップアップ画面でのボタンのクリックをコンバージョンとして記録するには、この選択肢を選択します。
   
   たとえば、ブログ内に設置したメールマガジンの登録ポップアップ画面に入力して送信した訪問者を追跡することがキャンペーンの目的である場合、ポップアップ画面の［はい、登録する］ボタンのクリックをコンバージョンとして記録すると、ポップアップ画面からメールマガジンに正常に登録した訪問者の件数を把握できます。
   
   
   
2. ［却下］：ポップアップ画面でのボタンのクリックを却下として記録するには、この選択肢を選択します。訪問者がポップアップ画面のメッセージを却下する理由としては、提供内容に関心がない、メッセージが自分に関係ない、またはその時点では質問に回答したくないなどが考えられます。
   
   たとえば、ブログ内にメールマガジンの登録フォームを設置し、［はい、登録する］と［いいえ、結構です］の2つのCTAボタンを配置しているとします。この場合、ポップアップ画面の［いいえ、結構です］ボタンのクリックを却下として記録できます。
   
   
   
   
3. ［なし］：ボタンのクリックをコンバージョンにも却下にも記録せず、訪問者をポップアップ画面間またはWebサイト上の他のページへ移動させるためだけに使用する場合は、この選択肢を選択します。
   

画像の挿入

画像を挿入するには
1. 左側のペインにある次の［画像］要素を、画像を追加するポップアップ画面上の目的の場所にドラッグ＆ドロップします。

1. ［サイズ］のスライダーを使用して、画像のサイズを拡大または縮小します。
   

2. ［画像のフィット］のドロップダウンをクリックし、ポップアップ画面のプレースホルダー内で画像をどのように縮小または引き伸ばすかを調整します。
   

3. プレースホルダー内で複数の画像を互いに揃えるには、［左］、［右］、［中央］、［両端揃え］のいずれかの配置を選択します。
   

4. 左側のペインで、画像の［余白］、［パディング］、［罫線］、［影］の設定を編集できます。
   

   
   

動画の挿入

動画は今も、世界中で最も人気の高いコンテンツマーケティング形式の1つであり、ポップアップ画面に追加することで大きな効果が期待できます。動画を使用すると、メッセージを視覚的に伝え、Webサイトでの訪問者の滞在時間を延ばすことができます。PageSenseのテンプレートの設計画面では、YouTube動画を簡単に埋め込み（ローカルの動画を直接アップロードすることはできません）、ポップアップ画面上で動画を直接プレビューできます。また、罫線や影の効果を追加したり、余白の位置を調整したり、動画を自動再生するよう設定したりできます。

動画を挿入してカスタマイズするには
1. 左側のペインにある次の［動画］要素を、動画を挿入するポップアップ画面上の場所にドラッグ＆ドロップします。

1. ［自動再生］ボタンを有効にすると、訪問者にポップアップ画面が表示された時点で動画が自動的に再生されます。
   

2. ［左］、［右］、［中央］、［両端揃え］のいずれかをクリックし、プレースホルダーやポップアップ画面内のその他の要素に対する動画の配置を設定します。
   

3. ［サイズ］のスライダーを使用して、ポップアップ画面内の動画欄のサイズを拡大または縮小します。さらに、左側のペインで動画の［余白］、［罫線］、［影］の設定を編集できます。
   
   

テキスト（複数行）の挿入

テキスト（複数行）は、訪問者がポップアップ画面に短い文章を入力できる入力欄です。この要素は、訪問者から詳しい情報を収集する場合に適しています。テンプレートの設計画面では、背景色、影の効果、角丸を設定して、テキスト（複数行）の外観を調整できます。たとえば、次のような質問を設定できます。「週末の予定は何ですか？」、「希望する旅行先はどこですか？」、「製品やサービスをどのように改善すべきですか？」

テキスト（複数行）を挿入してカスタマイズするには

2. 左側のペインにある［プレースホルダー］欄に、訪問者にテキスト（複数行）への入力を促すテキストを入力します。

3. 左側のペインにある各種書式設定を使用して、テキスト（複数行）のプロパティをカスタマイズできます。ポップアップ画面の要素に適用できる各種書式設定の詳細はこちら。

ラジオボタンの挿入

ポップアップ画面にラジオボタンを追加すると、訪問者は表示された一覧から1つの選択肢を選択できます。ラジオボタンは、フォームやアンケートでよく使用されます。テンプレートの設計画面では、ラジオボタンの選択肢を簡単に追加、編集、並べ替えることができます。さらに、背景色や影の効果、その他のカスタマイズを適用し、Webサイト上で訪問者の注目を集めることができます。

ラジオボタンを挿入してカスタマイズするには
1. 左ペインから［ラジオボタン］要素を、ラジオボタンを挿入したいポップアップ画面内の場所にドラッグ＆ドロップします。

2. ［項目設定］（左ペイン）で、ポップアップ画面の訪問者に表示する質問と回答を入力します。［新しい選択肢を追加する］をクリックすると、ラジオボタンに新しい選択肢を追加できます。

1. ［表示］セクションで、ラジオボタンの選択肢一覧とボタンに色を設定できます。また、スクリーンショットに示すように、ラジオボタンのスタイルも選択できます。
   
   

2. ［フォント］セクションで、ラジオボタンの内容に適用するフォントの種類と色を選択します。
   

   さらに、左ペインからラジオボタンにさまざまな書式設定を適用できます。余白や枠線、影など、多様な設定が可能です。ポップアップ画面内の要素に適用できる各種書式設定の詳細はこちら。
   
   
   

   
   

チェックボックスの挿入

チェックボックスを挿入してカスタマイズするには
1. 左ペインから［チェックボックス］要素を、チェックボックスを挿入したいポップアップ画面内の場所にドラッグ＆ドロップします。

2. ［項目設定］（左ペイン）で、ポップアップ画面の訪問者に表示する質問と回答を入力します。［新しい選択肢を追加する］をクリックすると、チェックボックスに新しい選択肢を追加できます。

3. 必要に応じて、次の操作を行います。

• ［表示］セクションで、チェックボックスの選択肢一覧とボタンに色を設定できます。また、チェックボックスのボタンに適用するスタイルも選択できます。
  

• ［フォント］セクションで、チェックボックスの項目に適用するフォントの種類と色を選択します。
  

  さらに、左ペインからチェックボックスにさまざまな書式設定を適用できます。余白や枠線、影など、多様な設定が可能です。ポップアップ画面内の要素に適用できる各種書式設定の詳細はこちら。
  

ソーシャルメディアアイコンの挿入

ソーシャルメディアアイコンは、今日のマーケティングにおいて有効なツールです。Webサイトの認知度を向上させるのに役立ちます。ポップアップ画面にFacebook、X（旧Twitter）、Instagramなどのソーシャルメディアアイコンを追加すると、訪問者は簡単にWebサイトのコンテンツを共有したりフォローしたりできます。これにより、世界中でWebサイトのリーチを拡大し、訪問者がページに「いいね！」できるようになります。

ソーシャルメディアアイコンを挿入してカスタマイズするには
1. 左ペインから［ソーシャル］要素を、ソーシャルメディアアイコンを挿入したいポップアップ画面内の場所にドラッグ＆ドロップします。

1. ［スタイル］セクションで、テキストに適用するフォントの種類と色を選択します。
   

2. ソーシャルメディアアイコンの高さ、アイコンの種類（円または四角）、スタイル（カラー、白黒、ビンテージ）も選択できます。設定例はスクリーンショットのとおりです。