テーマのカスタマイズ（新しいテーマビルダー）
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。
テーマビルダーを使用すると、ビジネスの雰囲気を反映し、対象ユーザーに響く魅力的なフォームを作成し、より魅力的な体験を提供できます。ブランドイメージに自然に合うレイアウトを設計し、目的の印象を伝えるフォントを選択し、ヘッダーやバナーからコンテナー、ボタンまで各要素をカスタマイズすることで、フォームを際立たせることができます。テーマビルダーを活用することで、美しく効果的なフォームを作成し、ビジネスでより良い成果につなげられます。
フォームのテーマをカスタマイズするには、
-
フォームを作成した後、［テーマ］タブに移動します。
-
［ゼロから作成］／［テーマのカスタマイズ］をクリックします。
-
以前のバージョンのテーマを使用している既存ユーザーの場合、新しいテーマビルダーに切り替えるためのオプションが表示されます。［最新バージョンに切り替え］をクリックします。
-
新しいテーマビルダーの概要を示すポップアップが表示されます。［今すぐ切り替え］をクリックします。
-
「テーマ変換-プレビュー」ページが表示されます。このページでは、以前のバージョンのテーマが新しいテーマにどのように変換されるかを確認できます。続行するには、［今すぐ切り替え］をクリックします。
-
［テーマのカスタマイズ］をクリックすると、新しいテーマビルダーを使用してテーマをさらに変更できます。
メモ：
1. 新しいテーマビルダーに切り替える前に、現在のテーマを保存してください。これにより、後で以前のテーマビルダーに戻す場合に、保存したテーマを再適用できます。
2. 新しいテーマビルダーに切り替えた後、以前のテーマビルダーに戻すと、以前適用していたテーマではなく、クラシックテーマがフォームに自動的に適用されます。 - フォームのカスタマイズでは、フォームの次の項目をカスタマイズできます。
全般
全般設定では、フォーム全体のレイアウトや見た目をカスタマイズできます。ここでは、フォームのスタイル、フォント、壁紙の外観を調整できます。
スタイル
スタイルでは、コンテナーのスタイル、コンテナーの背景、ポップアップの背景をカスタマイズできます。
コンテナー：コンテナーは、フォーム内の項目を囲む領域です。コンテナーの種類は、次の3つのスタイルから選択できます。
- 標準：このスタイルでは明確なコンテナーが表示され、フォームの範囲が視覚的に分かりやすくなります。
- 透明：このスタイルでは、フォーム要素用の透明なコンテナーが作成され、フォームを周囲の背景に自然になじませることができます。このデザインにより、フォームをページ全体のレイアウトにスムーズに統合できます。透明にすることで、周囲のコンテンツを妨げずにフォーム項目へ注意を向けやすくなります。
- デッキ：このスタイルでは、フォーム内の各項目に専用のコンテナーが用意されます。各項目に個別のスペースが割り当てられるため、ユーザーがフォームを操作して入力しやすくなります。
背景：背景では、フォームコンテナーの背景色を設定できます。背景には単色またはグラデーションの色を設定できます。
ポップアップの背景：サブフォームのポップアップ、保存ポップアップ、確認ポップアップなど、公開フォーム内に表示されるポップアップの背景色を設定できます。これらのポップアップの背景色をカスタマイズすることで、ユーザー体験を向上できます。ポップアップの背景色には、単色またはグラデーションを設定できます。
壁紙
壁紙セクションでは、オンラインフォームの背景を個別に設定できます。さまざまなカスタマイズオプションを使用して、視覚的に魅力的なフォームを作成できます。
背景：背景では、オンラインフォームの背景色を設定でき、フォーム全体の見た目やユーザー体験に影響します。背景は次の形式で設定できます。
- 単色の背景：単色の背景を適用するには、あらかじめ用意されたカラーパレットから色を選択するか、カラーピッカーを使用して既存のブランドカラーに正確に合う色を選択できます。
- グラデーションの背景：グラデーションでは、色が滑らかに移り変わる背景を作成できます。ここでは、グラデーションの開始点と終了点に使用する2つの異なる色を選択できます。
- 角度：グラデーション内の色の変化の角度を調整できるスライダーがあります。これにより、色の混ざり方の方向を制御できます。
背景画像：フォームの背景に画像を追加して、ユーザーの注目を集めたり、ブランドとの関連性を高めたりできます。ここでは、デバイスから画像をアップロードするか、壁紙ギャラリーを使用するか、PixabayまたはUnsplashから画像を追加できます。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（いいね／よくないね、チェックマーク／クロス）ではアイコンの色を設定します。
- 枠線：はい／いいえ項目の枠線の色を定義します。すべてのスタイルに適用されます。
フォームのテーマに合い、読みやすさとアクセシビリティのために十分なコントラストを確保できる背景色とテキスト色を選択してください。
区切り線
線の色：ここでは、フォーム全体のテーマに合わせて線の色を変更し、区切り線項目の外観をカスタマイズできます。
見出し
見出し項目では、次の内容をカスタマイズできます。
- 背景：見出し項目の背景色を設定します。
- 見出しテキスト：見出しテキストの色を設定します。
- 説明：見出しの下に表示される説明テキストの色を設定します。
- 角：角のスライダーを使用して、見出し項目の角を調整できます。
- 外側の余白：見出し項目とフォームの上端、左端、右端との間隔を調整できます。
- 内側の横方向の余白：見出し項目の左右端から見出しコンテンツまでの間隔を調整できます。
- 内側の縦方向の余白：フォームの見出し項目の上下の間隔を調整できます。
ボタン
ボタンセクションでは、オンラインフォーム用に視覚的に魅力的なボタンをデザインできます。利用可能なカスタマイズオプションは次のとおりです。
ボタンのスタイル
ボタンの形状と幅をカスタマイズできます。
形状
ボタンの形状を選択できます。
幅
ここでは、フォームに表示されるボタンのサイズを制御できます。
- 標準：ここでは、ボタンには事前定義されたサイズが適用されます。標準のボタンサイズを選択すると、コンテナー内でのボタンの配置位置を選択できます。ボタンの配置オプションで、ボタンの既定の配置を維持するか、左揃え、中央揃え、右揃えにするかを選択できます。
- 画面に合わせる：ボタンがコンテナーの幅に応じて自動的に拡大、調整されます。
送信ボタン
送信ボタンの背景色、テキスト色、枠線の色をカスタマイズして、視覚的に目立たせることができます。
ナビゲーション-次へ／前へボタン
［次へ］や［前へ］などのナビゲーションボタンは、ユーザーが複数ページのフォーム内を移動するのに役立ちます。フォームデザインとの視覚的な一貫性を保つために、これらのボタンの背景色、テキスト色、枠線の色をカスタマイズできます。
保存して確認ボタン
送信ボタンの背景色、テキスト色、枠線の色をカスタマイズして、他のボタンと視覚的に区別できます。
進行状況バー
フォーム内の進行状況バーの色とスタイルをカスタマイズできます。
進行状況バーのスタイル
レイアウトとスタイル
- 上部固定：進行状況バーは上部に固定され、スクロール中も表示されたままになります。
- フローティング：バーはフォームヘッダーから切り離された状態で表示され、ユーザーがページを下に移動すると表示範囲外へスクロールします。進行状況値の表示形式オプションを使用して、公開フォームで完了率、または完了済みの質問数と残りの質問数を表示するようにカスタマイズできます。
- インライン：バーはフォームヘッダーのすぐ上に配置され、ユーザーがスクロールするとフォームと一緒に移動します。
- 進行状況リング：フォームの右下隅に円形のインジケーターが表示されます。進行状況値の表示形式オプションを使用して、公開フォームで完了率または完了済み質問数を表示するように選択できます。
デフォルトの背景
プログレスバーの未入力部分の背景色を設定します。この色は、回答者がフォームへの入力を開始する前に初期状態で表示されます。
入力済み部分の背景
プログレスバーの完了部分の色を設定し、フォームの入力がどの程度完了しているかを視覚的に示します。
進捗値の表示形式
プログレスバーのスタイルとしてフローティングまたはプログレスリングを選択している場合に利用できます。このオプションでは、完了値を数値またはパーセントで表示できます。値を表示しない場合は、なしを選択します。