概要 #
フォームデザインにおいて「デザインビルダー」を使用することで、質問ページや登録ページの外観を一括でカスタマイズすることが可能です。フォーム全体に統一されたデザインを適用したい場合や、ブランドカラーに合わせたビジュアル調整を行いたい場面に有効です。
デザインビルダーでデザインできる主な対象は以下の通りです。
① フォーム内のセクションデザインを一括設定
・セクションの背景、枠、マージン、フォントなどを一括で設定可能です。
・特定のセクションのみ個別にデザインしたい場合は「セクション編集」から
「個別デザイン」をONにすることで、セクション単位での独立編集も可能です。
② セクション内に設置された質問群の入力項目デザイン
・テキスト入力欄、テキストエリア、チェックボックス、ラジオボタンなど、質問で使用する
すべての入力パーツに対し、サイズや枠線、色、フォント等のデザインが可能です。
③ 登録ページに表示される入力項目のデザイン
・メールアドレスや氏名などの登録フォーム項目についても、質問ページと同様に
共通スタイルで設定が反映されます。
これらの設定により、フォーム利用者にとって見やすく整ったフォームデザインを構築でき、
ユーザー体験の向上やブランド印象の統一につながります。
デザインビルダー使用時のフォームデザインの適用個所について #
① 共通のセクションスタイル(ページ幅や画像、テキストを含めたデザイン)の設定
画面左側に表示される赤枠内が「質問郡を含めたセクションエリア」です。
右側の「フォームデザイン」パネルから、背景カラー(例:#FFE2E2)を指定することで、
フォーム全体に一括で背景色やスタイルを適用できます。
② 各質問項目の入力エリアのスタイル設定
「質問No.」「質問文」「説明文」「選択肢」といったテキストに対して、それぞれフォント種類、
サイズ、文字色、背景色を個別に指定できます。さらに、ラジオボタンやチェックボックスなどの
入力パーツにもデザインが適用され、フォーム全体の統一感を高めることが可能です。
この画面は、フォームデザインを「デザインビルダー」で作成・保存したスタイルが、実際のフォーム画面上にどのように反映されるかを示しています。
● 適用範囲
・フォームデザインで設定した背景色やスタイルが、セクション単位で一括反映されています。
・各質問(Q1~Q4)のラジオボタン、チェックボックス、ボタンスタイルなどの入力UIにも、
指定した配色とスタイルが適用されています。
・背景グラデーション、選択肢のハイライト、角丸処理など、ユーザーの視認性を高める
視覚的要素が統一されています。
● 補足
このようにデザインビルダーで一括設計を行うことで、フォーム全体の印象やブランドトーンを統一でき、回答者にとっても「見やすく・わかりやすい」回答体験を提供できます。
⚠ 注意事項
セクションを「個別デザイン」を「ON」に設定した場合でも、質問郡(設問の入力パーツ)についてはフォームデザインで設定されたスタイルが引き続き適用されます。
セクションごとに背景や枠線などの装飾を変更することは可能ですが、チェックボックスや
テキストエリア、ラジオボタンなどのインプット項目の見た目を変更したい場合は、
フォームデザイン側で再度調整を行ってください。
※入力パーツ単位でセクションごとに完全に独立したデザインを行うことはできませんので、全体のデザイン設計時にご注意ください。
この画面は、登録ページに対してフォームデザインで設定したスタイルがどのように反映されるかを示したものです。
● 適用される範囲
デザインビルダーで作成したスタイルや配色は、登録ページに含まれる入力パーツ(テキストボックス、プレースホルダー、ボーダーなど)に対してのみ適用されます。
● 適用されない範囲
登録ページの上部見出しエリアやアイキャッチ画像、登録ボタン、確認同意チェックエリアなどは、フォームデザインではカスタマイズされません。
● 注意点
登録ページの全体的なレイアウトを変更したい場合は、登録ページ自体のデザインビルダーを使用してください。フォームデザインはあくまで「入力パーツ」に限定されて適用される点にご留意ください。
⚠ 注意事項
フォームデザインで設定した内容は、あくまでフォーム内の「セクション」と「質問郡の入力パーツ」、および「登録ページの入力パーツ」にのみ適用されます。
スタートページ、登録ページ(入力パーツ以外)、ゴールページ、診断ページ、クラスページには適用されませんので、必要に応じてそれぞれのページごとにデザインビルダーやデフォルトビルダーを使用し、デザインを設定してください。