ポップアップとは、Webブラウザ上で表示されるページの上に重なるようにして表示されるウィンドウのことを指します。

ポップアップを設定することで、UXやコンバージョンの向上を見込めるというメリットがあります。

この記事では、ポップアップを表示するメリットと作成〜設定までを解説します。

ポップアップにより、ユーザーの購買率を高められます。

たとえば、次のようなタイミングでポップアップを表示することで、購入を促進できます。

おすすめの商品を広告で紹介したり、クーポンを配布したりして、商品購入を後押しできるでしょう。

ユーザーにポップアップを通じて気付いてもらいたいことがある場合は、目が行きやすくなる効果も働くので見てもらいやすくなります。

ユーザーはページ内のコンテンツの全て見ているわけではないため、こうしたUIを採用することで通常のブラウジングだけでは気づきにくい情報への接点を作れます。

以上のように、表示する内容とタイミングを改善することで、ユーザー目線で自然かつ有用に感じられるポップアップの設置が顧客満足、そしてコンバージョンや売上の向上へと繋がります。
​

では、実際にポップアップの作成からスタイルの編集、公開までの手順を解説します。

プロジェクト画面のポップアップを選択し、右上の新規作成からポップアップ作成画面へ遷移します。

0から作成することはもちろん、テンプレートを選択して自由にカスタマイズできます。

テンプレートを利用する際は、カーソルを合わせて選択を押下して任意の名前を設定します。

サイドバーの追加＞エレメントより、配置したいエレメントを選択します。

エレメントを追加した状態で、画面右のスタイルでエレメントのレイアウトやサイズ、アニメーションなどに関する設定を行います。

ユーザーがポップアップを閉じるためのボタンを設置していきます。

サイドバーの追加＞エレメントより、新たにポップアップ内にボックスとボタンを配置します。

次に、スタイル＞ボジションでボックスのポジションをabusoluteに指定し、topの値を0に変更します。

また、ボックスのオーバーフローもX・Y共にvisibleに設定します。

スタイル＞バックグラウンドより、ボックスとボタンの背景を透過の状態に設定します。

次に、ボタンを選択した状態で、スペースで値を調整して左上に配置し、設定＞リンク＞ライトボックスより閉じるに設定します。

最後に、レイアウトで位置調整を行います。

最後に、ボタンの文字をアイコンに変更します。

ボタン内のテキストを削除し、スタイルパネルのアイコンを押下するとpopperが表示されます。

popper内より任意のアイコンを設定します。（閉じるボタンの場合は"cancel"と入力）

アイコン選択後はタイポグラフィでアイコンのカラー・サイズ、スペースで余白を調整します。

スタイルの編集後に右上の公開するを選択すると、ポップアップを公開するための設定ウィンドウが表示されます。

表示トリガーはどちらかを必ず設定する必要があり、選択した項目に数値を入力します。

また、どちらも設定した場合は、先に行われた動作に応じてポップアップが表示されます。

サイドバーのポップアップ設定より、ポップアップの基本設定とスタイル、フォントの追加に関する設定が可能です。

スタイルでフォントやサイズ、カラーなどを設定すると、ポップアップ内に一括で適用されます。