ウィジェットデザイン紹介 vol.4 〜コンバージョン獲得（ポップアップ）〜

OPTIOでどのようなウィジェットを作成したら良いのか、とお悩みではございませんか？

今回はOPTIOで作成できる、おすすめウィジェットデザインとその作成方法の紹介ブログ第4弾です！

コンバージョン獲得（ポップアップ）の特徴

ポップアップタイプには以下のような特徴があります。

説明：画面の横に表示されるウィジェットの種類。画面の最前面に表示されます。
特徴：形やサイズに変化を加えることでユーザーによりよい体験を提供することができます。不要の場合は、×印をクリック（タップ）することで閉じることができます。
おすすめのデバイス：SP・PC

これらの特徴を活かしたウィジェットとして、コンバージョン獲得（ポップアップ）ウィジェットがあります。

コンバージョン獲得（ポップアップ）は、ユーザー熱量の低下を防ぎ、新規お問合せ・資料請求・購入数を増やすことに適しています。

ウィジェット作成手順

ステップ①：表示タイプの選択

新規作成選択後、表示タイプの中から「ポップアップ表示タイプ」の「カードタイプ」を選択します。

ステップ②：カード全体設定

「横幅の上限」・「高さ」・「カードの高さを固定する」など、カード全体の設定を行います。

ステップ③：アイテムの挿入

アイテムの挿入から「テキスト」を選択します。

プレビュー画面内の「テキスト」アイテムをクリックし、任意のテキストを入力します。

アイテムの挿入から「画像 + テキスト」を選択します。

プレビュー画面内の「画像 + テキスト」アイテムをクリックし、任意のテキストを入力します。

「サイズ割合」を調整します。

プレビュー画面内の画像アイテムをクリックし、画面左の画像設定から挿入したい画像を選択します。

アイテムの挿入から「ボタン」を選択します。

ボタンを選択し、ボタンテキストに任意のテキストを入力します。

また、「ボタン設定」からボタンの「上下余白」・「背景色」・「文字色」・「アイテムの高さ(余白)」等を変更します。

アイテムの挿入から「テキスト」を選択します。

プレビュー画面内の「テキスト」アイテムをクリックし、「小さくする」と入力します。

＊小さくする挙動の設定を行うため。

ステップ④：小さくするカードの設定

作成画面のタブ横のプラスマークから、カードを作成します。

＊タブクリックで、タブの任意の名前を変更することができます。

アイテムの挿入から「画像」を選択します。

プレビュー画面内の画像アイテムをクリックし、画面左の画像設定から挿入したい画像を選択します。

画面左のカード全体設定から、「幅」・「枠線の太さ」・「シャドウ」・「背景色」の設定を行います。

ステップ⑤：スライドアイテムの挿入と編集

作成画面のタブ上部の複製マークから、「TOP」カードを複製します。

アイテムの挿入から「スライド」を選択します。

「画像 + テキスト」アイテムを削除し、「スライド」アイテムの位置を「画像 + テキスト」アイテムがあった位置に移動させます。

プレビュー画面内の「スライド」アイテムをクリックし、スライド設定からPDFの設定をする。

ステップ⑥：フォームアイテムの挿入と編集

作成画面のタブ上部の複製マークから、「資料」カードを複製します。

アイテムの挿入から「フォーム」を選択します。

フォーム以外のアイテムを削除し、画面左のフォーム設定からフォームの項目を設定します。

ステップ⑦：サンクスカードの設定

作成画面のタブ上部の複製マークから、「資料」カードを複製します。

複製したカード内のスライドアイテムを削除し、画面左のテキスト設定・ボタン設定から書式の設定を行います。

ステップ⑧：カードのリンク設定

全てのカードの作成・編集が完了したら、最後にアイテムクリック後のリンク先の設定を行います。

TOPカードの各ボタン右上のリンクマークをクリックし、リンクの設定画面を表示させます。

表示をURLからカードに切り替え、プルダウンからクリック後遷移させたいカード先を選択します。

他のボタンも同様にリンク先を設定します。

ステップ⑨：最初に表示するカードの確認

「TOP」のカードの「このカードを最初に表示する」にチェックが入っているか確認します。

これにて作成完了です！！

参考：動画での作成手順紹介

動画でもポップアップウィジェットの作成方法を紹介しておりますので、よろしければご参考ください。

まとめ

OPTIOで作成できるおすすめデザインとして、ポップアップウィジェットを紹介いたしました。

ウィジェットの表示タイプによってユーザーに与える印象は大きく変わります。

サイトデザイン、表示するコンテンツ、取得したいデータに合わせてウィジェットの表示タイプを変化させることが重要です。

ぜひ皆様もポップアップウィジェットを活用してみてください。