デザインビルダー：フォーム内のクラスページでの使用について – LSEED

クラスページは、作成したクイズの結果に応じて分類された「ランク」や「グレード」などの評価結果を表示する画面です。デザインビルダーを使用することで、クラスごとの結果ページに対して画像・解説・リンクなどを自由にレイアウトでき、より魅力的で印象的な表現が可能になります。

各クラスに対して個別のデザインを設定できるため、結果に応じた演出や次の行動への導線を強化することができます。スコア評価型のフォームやランク付け診断に最適な構成です。

■ 活用例

・各クラスに対してバッジ風デザインを使い、達成感を演出する
・スコアに応じた具体的なアドバイスやメッセージを記載して行動喚起を促す
・上位クラスには特典情報や申込みリンクを表示し、マーケティング導線に活用
・SNSシェアボタンや次のフォーム誘導ボタンを設置し、エンゲージメントを強化

クラスごとの結果ページに個性を持たせることで、ユーザーに印象を残しやすくなり、コンテンツ全体の価値向上や体験満足度アップにつながります。

①エディターの切り替え

フォーム構成内に追加された「クラスページ」の編集を行うには、ゴールページの編集から進みます。
①該当行の右端に表示されている縦3点のサブメニューアイコン（︙）をクリックします。
②サブメニューが展開されたら「編集」をクリックし、ゴールページの詳細設定画面に遷移します。

③編集したいクラスの行右端にある編集アイコン（✎）をクリックします。

④ デザインビルダーへの切り替え
クラス設定画面右上に表示されている「デザインビルダーを使用」ボタンをクリックすると、現在の「標準エディター」から「デザインビルダー」に切り替えることができます。
切り替え後は、レイアウトプレビューが表示されるようになります。

⑤ 編集画面への遷移
デザインビルダーに切り替わると、プレビュー内の中央に「編集」ボタンが表示されます。
この「編集」ボタンをクリックすることで、実際のビルダー画面に入り、テキスト・画像・セクションなどを自由に追加・調整することができます。

クラスごとに異なる内容や演出を用意することで、達成感や満足度の高いゴールページを構築することが可能になります。

②デザインビルダーの起動画面

クラスページにおいてデザインビルダーを使用すると、各クラスごとの得点・評価結果に加えて、ビジュアルや補足説明を自由にカスタマイズすることが可能です。
初期表示では以下のシステムフィールドが表示されています。

クラス名（%[YOURCLASS]%）
得点（%[YOURSCORE]%）
単位（%[YOURUNIT]%）
最高得点（%[TOTALSCORE]%）

上記はテキストオブジェクトとして表示されているため、自由に編集・削除・移動が可能です。
尚、このシステムフィールドは回答者の表示画面では実際の得点やクラス名に置換されます。

続くエリアでテキスト・画像・装飾などを自由にレイアウトできます。

【注意事項】
クラスページのデザインビルダーでは、フォーム作成時に設定された「採点結果の表示」オプションに関わらず、回答者の解答とその採点結果（正誤）エリアが編集不可オブジェクトとして常に表示されます。

このエリアは削除・編集することはできませんが、ページ内での配置位置の移動は可能です。
本エリアを含めた上でページを構成する必要があるため、周囲のスペースに装飾や補足解説を加える形式でページ全体を構築してください。

採点結果エリアの下や上に、解説・リンク・表彰画像・ボタンなどを挿入することで、学習完了後の印象付けや次のアクションにつなげる構成が可能です。

①エディターの切り替え

②デザインビルダーの起動画面

関連記事