概要 #
この設定画面では、フォームの「各セクションページに共通して適用されるデザイン(レイアウト・フォントなど)」を一括で調整することができます。
「テンプレートから選択」または「自分でデザインする」から選択し、配色・背景画像・透明度・フォーム枠・フォントスタイルなどを統一設定することで、全体のビジュアル一貫性を高められます。
本設定は「セクション単位で表示される質問ページ全体」に反映され、フォームの印象やブランドイメージを視覚的に演出するために有効です。
※セクションの個別デザインをONにしていると、フォームデザインで設定したデザインは
反映されませんのでご注意ください。
■ 活用例
・ブランドカラーに合わせた背景色とフォント設定を反映し、企業らしい印象を演出
・ペット診断やイベント用フォームでは、可愛い背景画像を設定して親しみやすさを演出
・商品別キャンペーンでは、フォームの枠・文字サイズ・余白を調整して見やすさを強化
・医療や教育系のフォームでは、落ち着いた背景とシンプルなレイアウトで信頼感を表現
・アンケートや応募フォームで、特別な背景デザインを使って季節感やイベント感を出す
①エディターの切り替え #
■ エディター切り替えの説明
フォーム編集のstep3の画面で、「テンプレートから選択」または「自分でデザインする」のいずれかを選ぶことで、フォーム全体のデザイン編集方式を切り替えることができます。
・テンプレートから選択:
自身でカスタマイズした「フォームテンプレート」から、カラー・フォントなどの組み合わせから選ぶ方式、もしくは、デフォルトビルダーでの簡易設定のいずれかを選択できます。
※デザインビルダーを使用し、「フォームテンプレート」に保存したテンプレートは、すべてのフォームタイプで使用可能です。
・自分でデザインする:
背景画像や背景色、透明度、フォームの枠色・フォント、タイトルエリアの高さや表示内容などを、細かく自由に設定できる方式です。ブランドカラーやキャンペーンのテーマに応じた細かなカスタマイズが可能になります。
使用目的や運用レベルに応じて、手軽さを重視するか、自由度を重視するかを選択できます。
デザインページの編集方式として「デザインビルダー」が選択されている場合、中央に表示されるビジュアルプレビュー内の「編集」ボタンをクリックすることで、実際のビルダー編集画面が起動します。
②デザインビルダー起動画面 #
フォームデザインのデザインビルダーでは、
・フォームのセクション単位で適用される共通デザイン
・各質問のインプット要素やテキストエリアの要素など
・登録ページで使用される各入力項目のインプット要素など
上記を視覚的に編集できるデザインビルダーの編集画面です。
通常のデザインビルダーと同様、セクションに適用させたい統一デザインを設定することが可能です。
詳しくは「デザインビルダー:フォームデザインでデザインした内容の適用範囲」をご参照ください。
また、質問ページや登録ページで使用される入力項目(インプットエリア)に対して、共通のデザイン設定を反映させることができます。デザインビルダー上では実際の質問はダミーとして表示され、視覚的に仕上がりを確認しながら編集可能です。
デザインは下記のようなパーツ単位で個別に設定することも、一括でまとめて設定することも可能です:
- ① インプット項目などの各要素の一括設定
- ② テキスト入力欄(1行)のデザイン
- ③ チェックボックス(標準スタイル)のデザイン
- ④ ラジオボタン(標準スタイル)のデザイン
- ⑤ セレクトボックス(単一選択)のデザイン
- ⑥ リストボックス(複数選択)のデザイン
- ⑦ チェックボタン(ボタンスタイル)のデザイン
- ⑧ ラジオボタン(ボタンスタイル)のデザイン
※各リンク先で詳しい操作方法・作成マニュアルをご覧いただけます。
一括設定機能では、フォントサイズや文字色、背景色、角丸、マージン、パディングなどの見た目を統一的に適用することができるため、効率よく美しいフォームを仕上げることが可能です。
各パーツの見た目をさらに細かく調整したい場合は、個別設定をご活用ください。
注意事項 #
フォームデザインで設定した内容は、あくまでフォーム内の「セクション」と「質問郡の入力パーツ」、および「登録ページの入力パーツ」にのみ適用されます。
スタートページ、登録ページ(入力パーツ以外)、ゴールページ、診断ページ、クラスページには適用されませんので、必要に応じてそれぞれのページごとにデザインビルダーやデフォルトビルダーを使用し、デザインを設定してください。