カード型・吹き出し型を設定する

ポップアップには「カード型」と「吹き出し型」の2種類があります。ここではそれぞれの特徴と設定方法を解説します。

目次

• カード型とは
  • カード型の設定
• 吹き出し型とは
  • 吹き出し型の設定

カード型とは

カード型は、ブラウザーの画面内のどこにポップアップを表示するかを指定する形式です。例えば右下にカード型のポップアップを表示した場合は、画面をスクロールしてもポップアップは移動せず、同じ位置に残り続けます。

ポップアップのサイズや表示位置を工夫してユーザーのページ閲覧をじゃましないように設定することで、ポップアップが表示されたままユーザーがページを閲覧して、好きなタイミングでポップアップをクリックするといったストーリーも考えられます。

ポップアップが出現する際、画面の端からふわっとせり出してくるような動きを付けることも可能です。

カード型の設定

［ステップ編集］画面の［ポップアップの種類と出し方］で［カード型］をクリックします。

［ポップアップの位置］で、ポップアップを表示したい位置をクリックします。

カード型では、表示位置を9か所から選択できます。スマートフォンの場合は［中央上］［中央］［中央下］のいずれかを選択するのがおすすめです。

吹き出し型とは

吹き出し型は、ボタンやメニューなどページ内の特定の要素を起点にポップアップを表示する形式です。ページ内の要素に吸着するため、例えばあるボタンに吸着している場合、画面をスクロールするとそのボタンと一緒にスクロールします。

ページ内で注目してほしい要素から吹き出し型のポップアップを表示することで、ユーザーの目を引きつけたり、ユーザーをページ内の特定の要素まで誘導したりすることが可能になります。

［表示時に要素の位置までスクロールする］にチェックを付けると、吸着している位置まで自動的にスクロールさせることも可能です。

吹き出し型の設定

［ステップ編集］画面の［ポップアップの種類と出し方］で［吹き出し型］をクリックします。

［要素の指定］に、吸着させたい要素を表すCSSセレクタを入力します。CSSセレクタを調べるには、Chromeデベロッパーツールなどを利用します。

CSSセレクタでポップアップを吸着する要素を指定したら、［ポップアップの位置］でその要素から上下左右のどちらにポップアップを表示するかの向きを指定します。

吹き出し型では、4か所から表示位置を選択できます。