ウィジェットデザイン紹介 vol.3 〜クイズ・診断〜

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

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

クイズ・診断（サイト内埋め込みタイプ）の特徴

埋め込みタイプには以下のような特徴があります。

説明：サイトのレイアウトの一部として、ページコンテンツ内に挿入できるウィジェットの種類。
特徴：コンテンツとウィジェットは重複しないため、訪問者の体験を妨げることはありません。WordPressでいえば「ショートコード」ブロックに設定することで、サイトのどこにでも設置ができます。
おすすめのデバイス：PC

これらの特徴を活かしたウィジェットとして、クイズ・診断ウィジェットがあります。

クイズ・診断ウィジェットは、製品・サービスを活用するメリットをわかりやすくユーザーに伝えることに適しており、ユーザーの熱量を高める効果があります。

ウィジェット作成手順

ステップ①：クイズ・診断の座組み整理

まずはどのようにカードを切り替えていくか、座組みを整理します。

座組みを整理しておくことで、カード作成がスムーズになります。

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

新規作成選択後、表示タイプの中から「サイト内埋め込み」の「カードタイプ」を選択します。

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

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

背景画像を入れたい場合は、カード全体設定の「背景画像」に挿入したい画像を選択します。

「背景色」や「透明度」を変更することも可能です。

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

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

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

画面左のテキスト設定から、文字の色を変更できます。

テキスト上部の複製アイコンから、「テキスト」アイテムを複製します。

「テキスト」アイテムをクリックし、任意のテキストを入力、文字の大きさ等を調整します。

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

ボタン設定から、「上下余白」・「左右余白」・「アイテムの高さ」・「テキスト」・「ボタン背景色」など、お好みのデザインに調整する。

これでトップのカードウィジェットの作成は完了です。

次にボタンクリック後のリンク先用カードを作成します。

ステップ④：カードの複製

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

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

ステップ⑤：テキストの変更とボタン設定変更

「テキスト」アイテム上部のゴミ箱アイコンをクリックし、不要な「テキスト」アイテムを削除します。

残った「テキスト」アイテムの「上下余白」を調整し、ステップ①で考えた座組みに合わせテキストを変更します。

「ボタン」アイテムを選択し、画面左のボタン設定から「アイテム数」を変更します。

増やした「ボタン」アイテムの設定を、既存のボタンの設定に合わせます。

またボタンテキストを変更し、ボタンの「左右余白」を調整します。

残りの設問数に応じて、ステップ④の手順で「１」のカードを複製し、ステップ⑤の手順でテキストやボタンのカラーなどを変更します。

ステップ⑥：クイズ・診断結果のカード作成

設問のカード作成が完了したら、診断結果のカードを作成するため設問カードを複製する。

＊カード全体設定から、「カードの高さ」のチェックを外す。

「テキスト」アイテム上部の複製アイコンをクリックし、「テキスト」アイテムを複製します。

「テキスト」アイテムの配置を変更し、任意のアイテムを追加・編集します。

作成した診断結果カードを複製し、残りの診断結果のカードも作成する。

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

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

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

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

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

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

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

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

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

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

まとめ

OPTIOで作成できるおすすめデザインとして、クイズ・診断ウィジェットを紹介いたしました。

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

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

ぜひ皆様もクイズ・診断ウィジェットを活用してみてください。