スポットライトフォームのカスタマイズ

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

テーマビルダーでは、ブランドに合わせてSpotlightフォームの外観をカスタマイズできます。背景、フォント、その他の視覚要素を調整し、洗練された統一感のあるデザインを作成できます。

フォームのテーマをカスタマイズするには、

フォームを作成したら、［テーマ］タブに移動します。
［ゼロから作成］をクリックします。
［フォームのカスタマイズ］では、フォームの以下の項目をカスタマイズできます。

全般

全般設定では、フォーム全体のレイアウトや外観をカスタマイズできます。こちらでは、フォームのフォント、バナー、壁紙の外観を調整できます。

全般

このセクションでは、フォームコンテナーとポップアップの背景をカスタマイズできます。

［背景］：フォームコンテナーの背景色を設定できます。背景には単色またはグラデーションを設定できます。

［ポップアップの背景］：サブフォーム、保存、確認など、公開中のフォーム内に表示されるポップアップの背景色を設定できます。ポップアップの背景色をカスタマイズすることで、操作性を向上できます。背景色には単色またはグラデーションを設定できます。

壁紙

壁紙セクションでは、さまざまなカスタマイズオプションを使用してオンラインフォームの背景を調整し、視覚的に魅力的なフォームを作成できます。

［背景］：オンラインフォームの背景色を設定し、フォーム全体の外観や操作性を調整できます。背景には次のいずれかを設定できます。

［単色の背景］：あらかじめ用意されたカラーパレットから色を選択するか、カラーピッカーを使用して既存のブランドカラーに正確に合う色を選択できます。
［グラデーションの背景］：滑らかに色が変化する背景を作成できます。こちらでは、グラデーションの開始点と終了点に異なる2色を指定できます。

［角度］：スライダーを使用して、グラデーション内の色が変化する角度を調整できます。これにより、色が混ざり合う方向を設定できます。

［背景画像］：フォームの背景に画像を追加してユーザーの注目を集め、ブランドを印象付けることができます。こちらでは、端末から画像をアップロードするか、壁紙ギャラリー、Pixabay、Unsplash、Pexelsの画像を使用できます。

［画像の配置］：フォーム内での画像の配置を設定できます。左揃え、中央揃え、右揃えから選択できます。
［画像のフィット］：画像が背景領域をどのように埋めるかを設定できます。背景画像には3つのフィット方法があり、フォーム内での画像の表示方法を調整できます。
［不透明度］：背景画像の透明度を調整できます。不透明度を低くすると背景が透明になり、高くすると不透明になります。

フォント

フォントセクションでは、オンラインフォームの書体を調整し、全体的な外観を整えることができます。
Font

こちらでは、次の2つの主要な項目をカスタマイズできます。

［フォントファミリー］：フォームで使用するフォントの種類を選択できます。ブランドイメージに合った、明瞭で読みやすいフォントを選択してください。

［フォントサイズ］：フォーム内に表示される文字のサイズを設定できます。さまざまな画面サイズや端末で読みやすく表示するには、適切なフォントサイズを選択することが重要です。

ヘッダーはフォームの最上部にあるセクションで、通常はフォームのタイトル、説明、ロゴが表示されます。フォームの目的を示し、必要な情報やブランド要素を最初にユーザーへ伝えるためのセクションです。

スタイル

ヘッダーのスタイルと背景をカスタマイズできます。

［ヘッダー］：次の2つのスタイルから選択し、ヘッダーとコンテナーの連動方法を設定できます。

［スクロール］：ユーザーがフォームをスクロールすると、ヘッダーも一緒に移動します。ヘッダーが多くのスペースを占有してユーザーの表示を妨げる可能性がある、短いフォームに適しています。
［固定］：ユーザーがフォームを下にスクロールしても、ヘッダーはコンテナー上部の固定位置に表示されます。ユーザーがヘッダーの情報を再確認する必要がある長いフォームに適しています。

［背景］：フォームコンテナーの背景色を設定できます。背景には単色またはグラデーションを設定できます。

テキスト

テキストでは、フォントファミリーを選択し、ヘッダーのタイトルと説明をカスタマイズできます。

［フォントファミリー］：フォームのヘッダーテキストで使用するフォントの種類を選択できます。ブランドイメージに合った、明瞭で読みやすいフォントを選択してください。

［フォームのタイトル］：フォームのタイトルの色を選択できます。タイトルがヘッダーの中心として目立つように、他とは異なる色を設定します。これによりユーザーの注目を集め、フォームの目的を明確に伝えることができます。

［フォームの説明］：追加の説明がある場合は、タイトルを引き立て、読みやすさを保てる色を選択します。フォームの目的を簡潔に説明するか、必要な手順を記載します。

［テキストの配置］：ヘッダーテキストの配置を設定できます。左揃え、右揃え、中央揃えから選択できます。

ブランド設定

ブランド設定では、ロゴとヘッダー画像をカスタマイズできます。

ロゴ

ロゴは、ブランドや会社を表すシンボルです。端末からロゴをアップロードするか、Noun Project（無料でカスタマイズ可能な多数のアイコンを利用できる専用のアイコン素材サイト）、Pixabay、Unsplash、Pexelsから選択できます。また、視覚障がいのあるユーザーが画像の内容を把握できるように、代替テキストを追加できます。詳細はこちら

［画像サイズ］：ロゴ画像のサイズを設定できます。必要に応じて、スライダーを使用してロゴのサイズを変更できます。
［画像の配置］：フォームのヘッダー内で、ロゴ、タイトル、説明をどのように配置するかを設定できます。整ったレイアウトになるように、用意されているスタイルから画像の配置を選択します。

ヘッダー画像

フォームコンテナー上部のスペースに、ビジネスに合ったヘッダー画像を追加できます。Pixabay、Unsplash、Pexelsから選択するか、端末から画像をアップロードします。画像をアップロードした後、右上にある編集アイコンをクリックすると、フォームのバナー画像に適用する前に、画像の切り抜き、回転、反転を行えます。また、視覚障がいのあるユーザーが画像の内容を把握できるように、代替テキストを追加できます。詳細はこちら

スタイル。

［スタイル1］：ヘッダー画像がフォームコンテナーの上部に接した状態で表示されます。
［スタイル2］：ヘッダー画像がフォームコンテナーとは独立して配置されます。

［画像サイズ］：ヘッダー画像のサイズを設定できます。

［画像の配置］：ヘッダー画像の配置を設定できます。バナー画像を左揃え、中央揃え、右揃えから選択できます。

［画像を引き伸ばす］：コンテナーのサイズに合わせて、ヘッダー画像を拡大できます。

メモ：［フォームレイアウト］が［左バナー］または［右バナー］に設定されている場合、［ヘッダー画像］は設定できません。［ヘッダー画像］を追加するには、最初に［フォームレイアウト］を［プレーン］に設定します。

枠線

［枠線の色］：フォームのヘッダーを囲む枠線の色を選択できます。
［枠線の幅］：フォームのヘッダーの枠線の太さを設定できます。

角と間隔

［角］：角のスライダーを使用して、フォームのヘッダーの角を調整できます。
［外側の間隔］：フォームの上端、左端、右端からヘッダーまでの間隔を調整できます。
［内側の横方向の間隔］：フォームのヘッダーの左右の端からヘッダーの内容までの間隔を調整できます。
［内側の縦方向の間隔］：フォームのヘッダーの上下の間隔を調整できます。

項目

［項目］セクションでは、フォーム内の各項目の外観を調整できます。

項目

［ラベル］：項目ラベルの色を選択できます。
［説明］：項目に関連付けられた説明テキストの色を設定できます。
［フォーカス］：ユーザーが項目をクリックしたとき、または項目に移動したときに強調表示する色を選択できます。これにより、現在有効な項目を識別しやすくなり、操作性が向上します。
［必須を示すアスタリスク］：必須項目を示す記号（*）の色を選択できます。

入力

［値］：ユーザーが項目に入力するテキストの色を設定できます。
［背景］：項目内の背景領域の色を設定できます。
［枠線］：項目の枠線の色をカスタマイズできます。
［枠線の形状］：こちらでは、フォームに適した項目の枠線スタイルを選択できます。

ピッカーでは、ピッカーの背景色をカスタマイズできます。

［背景］：選択式項目、スライダー項目、ドロップダウン、日付選択、マウスオーバーテキストなど、ピッカー項目の背景色を設定できます。

枠線と間隔

［枠線の幅］：入力項目の枠線の太さを調整できます。
［横方向の間隔］：フォームコンテナーの左右の枠線から項目までの間隔を調整できます。
［縦方向の間隔 - 項目間］：項目間の間隔を調整できます。

エラーメッセージ

［テキスト］：こちらでは、エラーメッセージのテキストの色を選択できます。
［アイコン］：各項目内のアイコンの表示設定を変更できます。表示または非表示を選択できます。

コンテナー

コンテナーには、フォーム内のすべての項目とボタンが含まれます。次の設定を使用して、フォームのコンテナーをカスタマイズできます。

コンテナー

［幅］

コンテナーの幅では、フォームコンテナー全体の幅を指定できます。コンテナーの幅は、次のいずれかに設定できます。

［カスタム］：許容範囲内でコンテナーの幅をピクセル単位で設定できます。フォームのサイズを正確に調整できます。
［幅に合わせる］：コンテナーを画面全体の幅まで広げることなく、背景領域の幅に合わせて拡大、調整できます。

［配置］

コンテナーの配置を設定できます。コンテナーの配置を左揃え、右揃え、中央揃えから選択できます。

枠線

［枠線］：フォームコンテナーを囲む枠線の色を選択できます。
［枠線の幅］：フォームコンテナーを囲む枠線の太さを調整できます。

角、間隔、影

［角］：角のスライダーを使用して、フォームコンテナーの角を調整できます。
［横方向の間隔］：フォームコンテナーの左端と右端の間隔を調整できます。
［縦方向の間隔］：フォームコンテナーの上端と下端の間隔を調整できます。
［影］：フォームコンテナーに影の効果を適用できます。
［影の広がり］：スライダーをドラッグして、影の効果の強さを調整します。

フォームのレスポンシブ対応

［レスポンシブ表示］：レスポンシブ表示では、480ピクセル未満の画面を含むさまざまな画面サイズのデバイスで最適な表示と操作性を確保できるように、フォームのレイアウトが自動的に調整されます。

特殊項目

特殊項目は、オンラインフォームの基本的なテキストボックスやドロップダウンを超える機能を備えています。ユーザーの入力を独自の方法で取得し、ユーザー体験を向上させることができます。ここでは、一般的な特殊項目とそのカスタマイズ方法について説明します。

グリッド

グリッド項目では、次の項目をカスタマイズできます。

［スタイル］

［スタイル1］：グリッド項目に枠線を表示しないスタイルです。
［スタイル2］：グリッドコンテナー全体を囲む枠線と、グリッドのヘッダー下部に線を表示するスタイルです。このスタイルを選択すると、枠線の色とヘッダーの下枠線をカスタマイズできます。
［スタイル3］：枠線に加えて、グリッドのヘッダーとコンテナーに背景色を設定するスタイルです。このスタイルを選択すると、枠線の色、ヘッダーの背景色、ヘッダーの下枠線の色、コンテナーの背景をカスタマイズできます。

［枠線］：グリッドの枠線の色をカスタマイズできます。

［ヘッダー］では、次の項目をカスタマイズできます。

［背景］：ヘッダーの背景色を設定できます。ヘッダーの背景には、単色またはグラデーションを選択できます。
［下枠線］：グリッドヘッダーの下枠線の色を設定できます。
［水平方向の間隔］：グリッドヘッダーの左右端からの間隔を調整できます。

［コンテナー］では、次の項目をカスタマイズできます。

［背景］：グリッドコンテナーの背景色を設定できます。コンテナーの背景には、単色またはグラデーションを選択できます。
［水平方向の間隔］：グリッドコンテナーの左右端からの間隔を調整できます。
［列の間隔］：列間の間隔を調整できます。

選択項目

ラジオボタンやチェックボックスなどの選択項目では、次の項目をカスタマイズできます。

［スタイル］：各選択肢を囲むボックスのスタイルを選択できます。
［選択肢のスタイル］：選択肢項目のスタイルを選択できます。
［ボックスの背景］：ラジオボタン項目とチェックボックス項目の背景色を変更し、外観を整えることができます。
［テキスト］：選択項目の選択肢に表示されるテキストの色を選択し、背景に対する視認性を確保できます。
［選択］：ユーザーが選択肢を選んだときに強調表示される色を指定し、選択されたことを視覚的に示します。

この設定は、ラジオボタン、チェックボックス、マトリックス選択項目、画像選択項目などに適用されます。

サブフォーム

［背景］オプションを使用してサブフォームの背景色を指定し、フォームの他の部分と視覚的に区別できます。このカスタマイズは、インライン形式と縦型のサブフォーム、およびポップアップ形式のサブフォームにあるエントリー追加カードに適用されます。ポップアップ形式のサブフォームのコンテナー背景をカスタマイズするには、［一般］→［スタイル］→［ポップアップの背景］に移動します。

スライダー

［選択］：ユーザーがスライダーを動かしたときにスライダーバーを塗りつぶし、選択値を示す色を選択できます。

評価

評価の種類として［記号］を選択した場合、選択した評価の形（星やハートなど）に応じて、記号の枠線の色と、ユーザーが評価レベルを選択したときの塗りつぶし色をカスタマイズし、評価を視覚的にわかりやすく表示できます。
評価の種類として［数字］を選択した場合、未選択時の数字のテキスト、枠線、背景の色と、選択時のテキストおよび背景の色をカスタマイズできます。

マトリックス選択

適切な表スタイルを選択して、マトリックス選択項目全体の外観をカスタマイズできます。［質問と回答］セクションおよび［表の背景］の背景色も、それぞれ個別に選択できます。

はい／いいえ

はい／いいえ項目では、次の項目をカスタマイズできます。

［ラベル1の背景］：ラベル1の背景色を設定します。3つのスタイルすべてに適用されます。
［ラベル1のテキスト］：標準スタイル（切り替え）ではラベル1のテキスト色を、スタイル2と3（高評価／低評価、チェック／バツ）ではアイコンの色を設定します。
［ラベル2の背景］：ラベル2の背景色を設定します。3つのスタイルすべてに適用されます。
［ラベル2のテキスト］：標準スタイル（切り替え）ではラベル2のテキスト色を、スタイル2と3（高評価／低評価、チェック／バツ）ではアイコンの色を設定します。
［枠線］：はい／いいえ項目の枠線の色を指定します。すべてのスタイルに適用されます。

フォームのテーマに合い、十分なコントラストによって視認性とアクセシビリティを確保できる背景色とテキスト色を選択してください。

区切り線

［線の色］：フォーム全体のテーマに合うように線の色を変更し、区切り線項目の外観をカスタマイズできます。

見出し

見出し項目では、次の項目をカスタマイズできます。

［背景］：見出し項目の背景色を設定します。
［見出しのテキスト］：見出しのテキスト色を設定します。
［説明］：見出しの下に表示される説明文の色を設定します。
［角］：角のスライダーを使用して、見出し項目の角の丸みを調整できます。
［外側の間隔］：見出し項目とフォームの上端、左端、右端との間隔を調整できます。
［内側の水平方向の間隔］：見出しの内容と見出し項目の左右端との間隔を調整できます。
［内側の垂直方向の間隔］：フォームの見出し項目内の上下の間隔を調整できます。

ボタン

ボタンセクションでは、オンラインフォーム用に見栄えのよいボタンをデザインできます。カスタマイズできる項目は次のとおりです。

ボタンのスタイル

ボタンの形状と幅をカスタマイズできます。

［形状］

ボタンの形状を選択できます。

［幅］

フォームに表示するボタンのサイズを調整できます。

［標準］：ボタンにはあらかじめ定義されたサイズが適用されます。標準のボタンサイズを選択した場合、コンテナー内でのボタンの位置を選択できます。［ボタンの配置］オプションで、標準の配置を使用するか、左揃え、中央揃え、右揃えに変更できます。

［画面に合わせる］：コンテナーの幅に合わせてボタンが拡張および調整されます。

送信ボタン

送信ボタンの背景色、テキスト色、枠線の色をカスタマイズし、視覚的に目立たせることができます。

保存して確認ボタン

保存して確認ボタンの背景色、テキスト色、枠線の色をカスタマイズし、他のボタンと視覚的に区別できます。

進捗バー

フォーム内の進捗バーの色とスタイルをカスタマイズできます。

進捗バーのスタイル

［レイアウトとスタイル］

［上部に固定］：進捗バーは上部に固定され、スクロール中も表示されます。
［フローティング］：進捗バーはフォームのヘッダーから離れた位置に表示され、ユーザーがページを下にスクロールすると画面外に移動します。［進捗値の表示形式］オプションを使用すると、公開フォームに完了率、または回答済みと未回答の質問数を表示できます。
［インライン］：進捗バーはフォームのヘッダーのすぐ上に配置され、ユーザーのスクロールに合わせてフォームと一緒に移動します。
［進捗リング］：フォームの右下に円形のインジケーターが表示されます。［進捗値の表示形式］オプションを使用すると、公開フォームに完了率または回答済みの質問数を表示できます。

［標準の背景］

進捗バーの未完了部分の背景色を設定します。この色は、回答者がフォームへの入力を開始する前に表示されます。

［完了部分の背景］

進捗バーの完了部分の色を設定し、フォームへの入力がどの程度完了しているかを視覚的に示します。

［進捗値の表示形式］

進捗バーのスタイルとして［フローティング］または［進捗リング］を選択した場合に使用できます。このオプションでは、完了値を［数値］または［割合］で表示できます。値を表示しない場合は、［なし］を選択します。