テーマのカスタマイズ（新しいテーマビルダー）
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。
テーマビルダーでは、ビジネスの特徴を反映し、ユーザーに響く魅力的なフォームを作成して、より高いエンゲージメントにつなげることができます。ブランドイメージに自然になじむレイアウトを設計し、伝えたい印象に合ったフォントを選択し、ヘッダーやバナーからコンテナー、ボタンまで各要素をカスタマイズすることで、フォームを際立たせることができます。テーマビルダーを活用すると、美しく効果的なフォームを作成でき、ビジネスの成果向上につながります。
フォームのテーマをカスタマイズするには、
-
フォームを作成した後、［テーマ］タブに移動します。
-
［最初から作成］／［テーマをカスタマイズ］をクリックします。
-
以前のバージョンのテーマを使用している既存ユーザーの場合、新しいテーマビルダーに切り替えるオプションが表示されます。［最新バージョンに切り替える］
をクリックします。 -
新しいテーマビルダーの概要を示すポップアップが表示されます。［今すぐ切り替える］をクリックします。
-
テーマ変換 - プレビュー ページが表示されます。このページでは、以前のバージョンのテーマが新しいテーマにどのように変換されるかを確認できます。続行するには、［今すぐ切り替える］をクリックします。
-
新しいテーマビルダーを使用してテーマをさらに変更するには、［テーマをカスタマイズ］をクリックします。
メモ：
1. 新しいテーマビルダーに切り替える前に、既存のテーマを保存してください。これにより、後で以前のテーマビルダーに戻す場合に、そのテーマを再適用できます。
2. 新しいテーマビルダーに切り替えた後に以前のテーマビルダーに戻すと、以前に適用していたテーマではなく、クラシックテーマがフォームに自動的に適用されます。 - フォームのカスタマイズでは、フォームの次の要素をカスタマイズできます。
全般設定
全般設定では、フォーム全体のレイアウトと表示デザインをカスタマイズできます。こちらでは、フォームのスタイル、フォント、壁紙の外観を調整できます。
スタイル設定
スタイルでは、コンテナーのスタイル、コンテナーの背景、ポップアップの背景をカスタマイズできます。
コンテナー：コンテナーは、フォーム内の項目を囲む領域です。コンテナーの種類は、次の3つのスタイルから選択できます。
- 標準：このスタイルではコンテナーの範囲が明確に定義され、フォームの表示上の境界が分かりやすくなります。
- 透明：このスタイルでは、フォーム要素のコンテナーが透明になり、フォームが周囲の背景に自然になじみます。これにより、フォームをページ全体のレイアウトに違和感なく組み込むことができます。透明にすることで、周囲のコンテンツを妨げずにフォーム項目へ注意を向けやすくなります。
- デッキ：このスタイルでは、フォーム内の各項目に専用のコンテナーが用意されます。各項目に独立したスペースが割り当てられるため、ユーザーがフォーム内を移動しやすく、入力しやすくなります。
背景：背景では、フォームコンテナーの背景色を設定できます。背景は単色またはグラデーションカラーで設定できます。
ポップアップの背景：サブフォームのポップアップ、保存ポップアップ、確認ポップアップなど、公開中のフォーム内に表示されるポップアップの背景色を設定できます。これらのポップアップの背景色をカスタマイズすることで、ユーザー体験を向上できます。ポップアップには、単色またはグラデーションの背景色を設定できます。
壁紙設定
壁紙セクションでは、オンラインフォームの背景をカスタマイズでき、視覚的に魅力的なフォームを作成するためのさまざまなカスタマイズオプションを利用できます。
背景：背景では、オンラインフォームの背景色を設定でき、フォーム全体の見た目やユーザー体験に影響します。背景は次の形式で設定できます。
- 単色の背景：単色の背景を適用するには、あらかじめ用意されたカラーパレットから色を選択するか、カラーピッカーを使用して既存のブランドカラーに正確に一致する色を選択できます。
- グラデーションカラーの背景：グラデーションカラーでは、なめらかに色が変化する背景を作成できます。こちらでは、グラデーションの開始点と終了点にそれぞれ異なる2色を選択できます。
- 角度：グラデーション内の色の変化角度を調整できるスライダーがあります。これにより、色のブレンド方向を制御できます。
背景画像：フォームの背景に画像を追加して、ユーザーの目を引き、ブランドとの関連性を高めることができます。こちらでは、デバイスから画像をアップロードしたり、用意された背景を使用したり、PixabayやUnsplashから画像を追加したりできます。背景画像を追加した後、配置、表示方法、不透明度を調整できます。
- 画像の配置：フォーム内で画像をどの位置に表示するかを制御できます。画像は左揃え、中央揃え、右揃えで配置できます。
- 画像の表示方法：画像が背景領域をどのように埋めるかを制御します。背景画像には3種類の表示方法があり、フォーム内での画像の見え方に影響します。
- 不透明度：背景画像の透明度を制御できます。不透明度を低くすると背景はより透明になり、高くするとよりはっきり表示されます。
フォント設定
フォントセクションでは、オンラインフォームのタイポグラフィを調整し、全体の見た目を整えることができます。
こちらでは、主に次の2点をカスタマイズできます。
フォントファミリー：フォントファミリーでは、フォームで使用するフォントの種類を選択できます。ブランドイメージに合った、明瞭で読みやすいフォントを選択してください。
フォントサイズ：この設定では、フォーム内に表示されるテキストのサイズを制御できます。さまざまな画面サイズやデバイスで最適な読みやすさを確保するには、適切なフォントサイズを選択することが重要です。
ヘッダー設定
ヘッダーはフォームの最上部にあるセクションで、通常はフォームのタイトル、説明、ロゴが表示されます。このセクションでは、フォームの目的を紹介し、必要な背景情報やブランド要素をユーザーに最初に提示できます。
スタイル設定
スタイルでは、ヘッダーのスタイルと背景をカスタマイズできます。
ヘッダー：次の2つのスタイルのいずれかを選択して、ヘッダーがコンテナーとどのように連動するかを制御できます。
- スクロール：このスタイルでは、ユーザーがフォームをスクロールすると、ヘッダーもフォームと一緒に移動します。ヘッダーが大きなスペースを占め、ユーザーの表示を妨げる可能性がある短めのフォームに適しています。
- 固定：このスタイルでは、ユーザーがフォームを下にスクロールしても、ヘッダーはコンテナー上部の固定位置に表示されます。ユーザーがヘッダーの情報を確認しながら入力する必要がある長めのフォームに便利です。
背景：背景では、フォームコンテナーの背景色を設定できます。背景は単色またはグラデーションカラーで設定できます。
テキストとブランド設定
テキストとブランド設定では、ヘッダーのタイトルと説明のフォント、配置、ロゴをカスタマイズできます。
フォントファミリー：フォントファミリーでは、フォームのヘッダーテキストに使用するフォントの種類を選択できます。ブランドイメージに合った、明瞭で読みやすいフォントを選択してください。
フォームタイトル：フォームのタイトルの色を選択できます。タイトルに目立つ色を設定すると、ヘッダーの中心要素として強調されます。これにより、ユーザーの注意を引き、フォームの目的を明確に伝えることができます。
フォームの説明：追加の説明がある場合は、タイトルと調和し、読みやすさを確保できる色を選択します。フォームの目的を簡潔に説明したり、必要な手順を記載したりします。
テキストの配置：ヘッダーテキストの配置を制御できます。左揃え、右揃え、中央揃えのいずれかで配置できます。
ロゴ：ロゴは、ブランドや会社を表すシンボルです。デバイスからロゴをアップロードするか、Pixabayから選択できます。また、視覚障がいのあるユーザーにも画像の内容が伝わるように、画像に代替テキストを追加することもできます。 詳細はこちら
- 画像サイズ：ロゴ画像のサイズを制御できます。必要に応じて、スライダーを使用してロゴのサイズを変更できます。
- 画像の配置：フォームヘッダー内でロゴ、タイトル、説明をどのように配置するかを制御します。用意されたスタイルに基づいて画像の配置を選択し、整理されたレイアウトを作成できます。
枠線設定
- 枠線の色：フォームヘッダーを囲む枠線の色を選択できます。
- 枠線の幅：フォームヘッダーの枠線の太さを制御できます。
角と余白の設定
- 角：角スライダーを使用すると、フォームのヘッダーの角を調整できます。
- 外側の間隔：フォームの上端、左端、右端からヘッダーまでの間隔を調整できます。
- 内側の横方向の間隔：フォームヘッダーの左端と右端からヘッダーの内容までの間隔を調整できます。
- 内側の縦方向の間隔：フォームヘッダーの上下の間隔を調整できます。
項目
［項目］セクションでは、フォーム内の各項目の外観を調整できます。
項目
- ラベル：項目ラベルの色を選択できます。
- 説明：項目に関連付けられた説明テキストの色を設定できます。
- フォーカス：ユーザーが項目をクリックしたり、その項目に移動したりしたときに、その項目を強調表示する色を選択できます。 これにより、現在有効な項目をユーザーが識別しやすくなり、操作性が向上します。
- 必須アスタリスク：必須項目を示す記号（*）の色を選択できます。
入力
- 値：ユーザーが項目に入力するテキストの色を設定します。
- 背景：項目内の背景部分の色を設定します。
- 枠線：項目の枠線の色をカスタマイズできます。
- 枠線の形状：ここでは、フォームに適した項目の枠線スタイルを選択できます。
ピッカーでは、ピッカーの背景色をカスタマイズできます
- 背景：複数選択項目、スライダー項目、ドロップダウン、日付ピッカー、ホバーテキストなどのピッカー項目の背景色を設定できます。
枠線と間隔
- 枠線の幅：入力項目の枠線の太さを調整できます。
- 横方向の間隔：フォームコンテナの左端と右端から項目までの間隔を調整できます。
- 縦方向の間隔-項目間：項目間の間隔を調整できます。
エラーメッセージ
- テキスト：ここでは、エラーメッセージのテキストの色を選択できます。
- アイコン：各項目内のアイコンの表示設定を管理できます。表示または非表示を選択できます。
コンテナ
コンテナには、フォーム内のすべての項目とボタンが含まれます。次の設定により、フォームのコンテナをカスタマイズできます。
レイアウト
コンテナの幅
フォーム幅では、フォームコンテナ全体の幅を指定できます。フォーム幅は次のように設定できます。
- カスタム：許可された範囲内で、コンテナの幅をピクセル値で設定できます。フォームサイズを細かく制御できます。
- 画面に合わせる：ユーザーの画面幅に合わせて、コンテナを自動的に拡張、調整できます。
配置
コンテナの配置方法を設定できます。コンテナを左揃え、右揃え、中央揃えに配置できます。
枠線
- 枠線：フォームコンテナを囲む枠線の色を選択できます。
- 枠線の幅：フォームコンテナを囲む枠線の太さを調整できます。
角、間隔、影
- 角：角スライダーを使用すると、フォームのコンテナの角を調整できます。
- 横方向の間隔：フォームコンテナの左端と右端の間隔を調整できます。
- 縦方向の間隔：フォームコンテナの上端と下端の間隔を調整できます。
- 影：フォームコンテナに影の効果を追加します。
- 影の広がり：スライダーをドラッグして、影の効果の強さを調整します。
- フォームのレスポンシブ対応
レスポンシブ表示：レスポンシブ表示では、480ピクセル未満を含むさまざまな画面サイズのデバイスで見やすく使いやすくなるように、フォームレイアウトが自動的に調整されます。
バナー
バナーは、商品を宣伝したり、回答者にブランドやサービスを紹介したりするための効果的なツールです。
画像
フォームコンテナ上部のスペースに、ビジネスに適したバナー画像を追加できます。デバイスから画像をアップロードするか、Pixabayから画像を追加できます。また、視覚に障がいのあるユーザーが利用しやすいように、画像に代替テキストを追加することもできます。詳細はこちら
スタイル
- スタイル1：このスタイルでは、バナーはフォームコンテナの上部に固定されます。
- スタイル2：このスタイルでは、バナーはフォームコンテナとは独立して配置されます。
画像サイズ：このオプションでは、バナー画像のサイズを調整できます。
画像の配置：バナー画像の配置方法を設定できます。バナー画像を左揃え、中央揃え、右揃えに配置できます。
画像を引き伸ばす：このオプションでは、バナー画像のサイズをコンテナサイズに合わせて拡大できます
ページ
フォームが複数ページで構成されている場合、わかりやすいナビゲーションバーを設計することで、ユーザーが入力完了までスムーズに進めるようになります。
ナビゲーションバー
ナビゲーションバーにより、ユーザーはフォーム内での進捗状況を明確に把握できます。
レイアウト
ナビゲーションバーの表示方法を選択します。
- 上：フォームの上部に進捗状況を横方向に表示します。
- 左：フォームの左側に進捗状況を縦方向に表示します。
- なし：ナビゲーションバーを非表示にします。
左レイアウトのプロパティ
左レイアウトを選択すると、次のカスタマイズオプションを利用できます。
- 幅：縦方向のナビゲーションバーの幅を調整します。
- 背景：ナビゲーションバーの背景色をカスタマイズします。
- 枠線：ナビゲーションバーの枠線の色をカスタマイズします。
- 縦方向の間隔：縦方向レイアウトでページインジケーター間の間隔を調整します。
メモ：ナビゲーションバーの左レイアウトは、新しいバージョンのテーマでのみサポートされています。
スタイル
フォームのデザインに最も適した表示スタイルを選択して、フォームの進捗状況を示し、わかりやすい進捗の目安を提供します。
位置
フォーム内でのナビゲーションバーの位置を選択できます。
フォーム内でのナビゲーションバーの位置を選択できます。
- フォームコンテナ内：ナビゲーションバーはフォームコンテナ内の上部に直接表示されます。
- フォームコンテナ外：ナビゲーションバーはフォームコンテナの外側に配置されます。
外側の横方向の間隔
フォームコンテナの左端と右端からページヘッダーの内容までの間隔を調整できます。
訪問済み／未訪問-ナビゲーションバー
ナビゲーションバー内の「訪問済み」ページと「未訪問」ページの背景色とテキスト色をカスタマイズできます。
ページヘッダー
ページタイトルの表示場所
- ナビゲーションバー：現在のページのタイトルをナビゲーションバー内に表示します。
- ページ：ページタイトルをページ上に直接表示します。ページ上にタイトルを表示する場合、ページタイトルの背景、テキスト色、テキスト配置、枠線、間隔をカスタマイズできます。
- なし：ページタイトルを完全に非表示にします。
特殊項目
特殊項目は、オンラインフォームの基本的なテキストボックスやドロップダウンを超える機能です。ユーザー入力を取得し、ユーザー体験を向上させる独自の方法を提供します。こちらでは、一般的な特殊項目とそのカスタマイズ方法について説明します。
グリッド
グリッド項目では、次のオプションをカスタマイズできます。
スタイル
- スタイル 1：このスタイルでは、グリッド項目に表示される枠線は適用されません。
- スタイル 2：このスタイルでは、グリッドコンテナー全体を囲む枠線と、グリッドのヘッダー下部の線が追加されます。このスタイルを選択すると、枠線の色とヘッダー下部の枠線をカスタマイズできます。
- スタイル 3：このスタイルでは、枠線に加えて、グリッドのヘッダーとコンテナーに背景色が適用されます。このスタイルを選択すると、枠線の色、ヘッダーの背景色、ヘッダー下部の枠線の色、コンテナーの背景をカスタマイズできます。
枠線：グリッドの枠線の色をカスタマイズできます。
ヘッダーでは、次の項目をカスタマイズできます。
- 背景：ヘッダーの背景色を設定できます。ヘッダーの背景には、単色またはグラデーションを選択できます。
- 下部の枠線：グリッドヘッダー下部の枠線の色を設定できます。
- 横方向の間隔：グリッドヘッダーの左右端からの距離を調整できます。
コンテナーでは、次の項目をカスタマイズできます。
- 背景：グリッドコンテナーの背景色を設定できます。コンテナーの背景には、単色またはグラデーションを選択できます。
- 横方向の間隔：グリッドコンテナーの左右端からの距離を調整できます。
- 列の間隔：列間の間隔を調整できます。
選択項目
ラジオボタンやチェックボックスなどの選択項目では、次の項目をカスタマイズできます。
- スタイル：各選択肢を含むボックスのスタイルを選択できます。
- 選択肢のスタイル：選択肢項目のスタイルを選択できます。
- ボックスの背景：ラジオボタン項目とチェックボックス項目の背景色を変更し、見た目を向上させるために使用します。
- テキスト：テキストでは、背景に対して読みやすくなるように、選択項目の選択肢に関連付けられたテキストの色を選択できます。
- 選択：ユーザーが選択肢を選択したときに、その選択肢を強調表示する色を定義し、ユーザーに視覚的な確認を提供します。
これは、ラジオボタン、チェックボックス、マトリックス選択項目、画像選択項目などに適用されます。
サブフォーム
背景オプションを使用すると、サブフォームの背景色を設定して、フォームの他の部分と視覚的に区別できます。これらのカスタマイズは、インライン形式と縦形式のサブフォーム、およびポップアップサブフォームのエントリーの追加カードに適用されます。ポップアップサブフォームのコンテナー背景をカスタマイズするには、［一般］→［スタイル］→［ポップアップの背景］に移動します。
スライダー
選択：こちらでは、ユーザーがスライダーを動かしたときに選択内容を示す、スライダーバーの塗りつぶし色を選択できます。
評価
- 評価の種類として記号を選択した場合、選択した評価の形（星、ハートなど）に応じて、記号の枠線の色と、ユーザーが評価レベルを選択したときに表示される塗りつぶし色をカスタマイズし、明確な視覚表現を提供できます。
- 評価の種類として数字を選択した場合、未選択時の数字のテキスト、枠線、背景色、および選択時のテキストと背景色をカスタマイズできます。
マトリックス選択
適切な表スタイルを選択して、マトリックス選択全体の外観をカスタマイズできます。質問と回答セクションと表の背景の背景色を選択するオプションも、それぞれ個別に用意されています。
はい／いいえ
はい／いいえ項目では、次の項目をカスタマイズできます。
- ラベル-1 の背景：ラベル-1 の背景色を設定します。これは3つのスタイルすべてに適用されます。
- ラベル-1 のテキスト：標準スタイル（切り替え）ではラベル-1 のテキスト色を、スタイル 2 と 3（いいね／よくないね、チェックマーク／×印）ではアイコンの色を設定します。
- ラベル-2 の背景：ラベル-2 の背景色を設定します。これは3つのスタイルすべてに適用されます。
- ラベル-2 のテキスト：標準スタイル（切り替え）ではラベル-2 のテキスト色を、スタイル 2 と 3（いいね／よくないね、チェックマーク／×印）ではアイコンの色を設定します。
- 枠線：はい／いいえ項目の枠線の色を定義します。すべてのスタイルに適用されます。
フォームのテーマに合い、読みやすさとアクセシビリティのために明確なコントラストを提供する背景色とテキスト色を選択してください。
区切り線
線の色：こちらでは、フォーム全体のテーマに合わせて線の色を変更し、区切り線項目の外観をカスタマイズできます。
見出し
見出し項目では、次の項目をカスタマイズできます。
- 背景：見出し項目の背景色を設定します。
- 見出しテキスト：見出しテキストの色を設定します。
- 説明：見出しの下に表示される説明テキストの色を設定します。
- 角：角のスライダーでは、見出し項目の角を調整できます。
- 外側の間隔：フォームの上端、左端、右端からの見出し項目の間隔を調整できます。
- 内側の横方向の間隔：見出し項目の左右端からの見出しコンテンツの間隔を調整できます。
- 内側の縦方向の間隔：フォームの見出し項目の上下の間隔を調整できます。
ボタン
ボタンセクションでは、オンラインフォーム用に視覚的に魅力的なボタンをデザインできます。こちらでは、利用可能なカスタマイズオプションについて説明します。
ボタンスタイル
ボタンの形状と幅をカスタマイズできます。
形状
ボタンの形状を選択できます。
幅
こちらでは、フォームに表示されるボタンのサイズを調整できます。
- 標準：こちらでは、ボタンに事前定義された寸法が適用されます。標準のボタンサイズを選択すると、コンテナー内でのボタンの配置位置を選択できます。ボタンの配置オプションで、ボタンの標準の配置を維持するか、左揃え、中央揃え、右揃えにできます。
- 画面に合わせる：ボタンはコンテナーの幅に合わせて拡大し、自動的に調整されます。
送信ボタン
送信ボタンの背景色、テキスト色、枠線の色をカスタマイズして、視覚的に目立たせることができます。
ナビゲーション：次へ／前へボタン
［次へ］や［前へ］などのナビゲーションボタンは、ユーザーが複数ページのフォーム内を移動するのに役立ちます。フォームデザインとの視覚的な一貫性を保つために、これらのボタンの背景色、テキスト色、枠線の色をカスタマイズできます。
保存して確認ボタン
送信ボタンの背景色、テキスト色、枠線の色をカスタマイズして、他のボタンと視覚的に区別できます。
進行状況バー
フォームの進行状況バーの色とスタイルをカスタマイズできます。
進行状況バーのスタイル
レイアウトとスタイル
- 上部に固定：進行状況バーは上部に固定され、スクロール中も表示されたままになります。
- フローティング：バーはフォームヘッダーから切り離され、ユーザーがページを下に移動すると表示範囲外にスクロールされます。進行状況の値の表示形式オプションを使用すると、公開フォームで完了率、または完了済みの質問数と残りの質問数のいずれかを表示するようにカスタマイズできます。
- インライン：バーはフォームヘッダーのすぐ上に配置され、ユーザーがスクロールするとフォームと一緒に移動します。
- 進行状況リング：フォームの右下に円形のインジケーターが表示されます。進行状況の値の表示形式オプションを使用すると、公開フォームに完了率または完了した質問数を表示するよう選択できます。
デフォルトの背景
進捗バーの未入力部分の背景色を設定します。この色は、回答者がフォームへの入力を開始する前に最初に表示されます。
入力済み部分の背景
進捗バーの完了部分の色を設定し、フォームの入力がどの程度完了しているかを視覚的に示します。
進捗値の表示形式
進捗バーのスタイルとしてフローティングまたは進捗リングを選択した場合に利用できます。このオプションでは、完了値を数値または割合として表示できます。値を表示しない場合は、なしを選択します。