テーマカスタマイズ（新テーマビルダー）

テーマカスタマイズ（新テーマビルダー）

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

テーマビルダーを使用すると、法人のイメージを反映し、対象ユーザーに響く魅力的なフォームを視覚的に作成できます。ブランドアイデンティティーと自然に調和するレイアウトを設計し、意図した印象を伝えるフォントを選択し、差出人ヘッダーやバナーからコンテナー、ボタンまで各要素をカスタマイズして、フォームを際立たせることができます。テーマビルダーを活用することで、見た目の美しさと効果を両立したフォームを作成でき、最終的に法人の成果向上につながります。

フォームのテーマをカスタマイズするには、次の手順に従います。

  1. フォームを作成したら、［テーマ］タブに移動します。

  2. ［最初から作成］／［テーマをカスタマイズ］をクリックします。

    1. 従来のテーマバージョンを使用している既存ユーザーの場合は、新しいテーマビルダーに切り替えるオプションが表示されます。［最新バージョンに切り替える］をクリックします。
      Themes- Old Version

    2. 新しいテーマビルダーの概要を示すポップアップが表示されます。［今すぐ切り替える］をクリックします。

    3. ［Theme Conversion - プレビューする］ページが表示されます。このページでは、従来のテーマが新しいテーマにどのように変換されるかを確認できます。続行するには、［今すぐ切り替える］をクリックします。

    4. 新しいテーマビルダーでテーマをさらに変更するには、［テーマをカスタマイズ］をクリックします。
      メモ。
      1. 新しいテーマビルダーに切り替える前に、既存のテーマを保存してください。後で従来のテーマビルダーに戻す場合に、再適用できます。
      2. 新しいテーマビルダーに切り替えた後に従来のテーマビルダーへ戻すと、以前に適用していたテーマではなく、フォームにClassicテーマが自動的に適用されます。

  3. フォームのカスタマイズでは、フォームの次の項目をカスタマイズできます。

    1. 一般スタイル
    2. ヘッダー
    3. 項目
    4. コンテナー
    5. バナー
    6. ページ
    7. 特殊項目
    8. ボタン

一般

一般設定では、フォーム全体のレイアウトと見た目をカスタマイズできます。ここでは、フォームのスタイル、フォント、壁紙の外観を調整できます。

スタイル

スタイルでは、コンテナーのスタイル、コンテナーの背景、ポップアップの背景をカスタマイズできます。
Form general style
コンテナー：コンテナーは、フォーム内の項目を囲む領域です。コンテナーの種類は、次の3つのスタイルから選択できます。
  1. 初期設定：コンテナーが明確に定義され、フォームの境界が分かりやすく表示されます。
  2. Transparent：フォーム要素のコンテナーを透明にし、周囲の背景と自然に馴染ませます。これにより、ページ全体のレイアウトにスムーズに統合されます。透明化によって周囲のコンテンツに気を取られにくくなり、フォーム項目に集中できます。
  3. Deck：フォーム内の各項目に専用のコンテナーが割り当てられます。各項目の表示領域が明確になるため、対象ユーザーがフォーム内を移動しやすく、入力もしやすくなります。
背景：背景では、フォームコンテナーの背景色を設定できます。背景は単色またはグラデーションで設定できます。
ポップアップの背景：サブフォームのポップアップ、保存ポップアップ、確認ポップアップなど、フォーム内に表示されるポップアップの背景色を設定できます。これらのポップアップの背景色をカスタマイズすることで、ユーザー体験を向上できます。背景は単色またはグラデーションで設定できます。

壁紙

壁紙セクションでは、オンラインフォームの背景をパーソナライズできます。さまざまなカスタマイズ設定を使用して、視覚的に魅力的なフォームを作成できます。
Wallpaper
背景：背景では、オンラインフォームの背景色を設定できます。フォーム全体の見た目やユーザー体験に影響します。背景は次のように設定できます。
  1. 単色の背景：単色の背景を適用するには、定義済みのカラーパレットまたはカラーピッカーから色を選択し、既存のブランドカラーに正確に合わせることができます。
  2. グラデーションの背景：グラデーションでは、色が滑らかに変化する背景を作成できます。開始色と終了色の2色を選択します。
    1. 角度：スライダーでグラデーション内の色の遷移角度を調整できます。これにより、色の混ざり方の方向を制御できます。
背景画像：フォームの背景に画像を追加して、対象ユーザーの注意を引き、ブランドとの関連性を高めることができます。デバイスから画像をアップロードするか、用意された背景を使用するか、Pixabayから画像を追加できます。背景画像を追加した後は、配置、フィット、透明度を調整できます。
  1. 画像の配置：フォーム内で画像をどの位置に表示するかを制御します。左寄せ、中央寄せ、右寄せから選択できます。
  2. 画像のフィット：背景領域に対して画像をどのように表示するかを制御します。背景画像には3種類のフィット設定があり、フォームでの見え方に影響します。
  3. 透明度：背景画像の透明度を制御します。透明度を低くするとより透明になり、高くするとより不透明になります。

フォント

フォントセクションでは、オンラインフォームのタイポグラフィーを調整し、全体の見た目を整えることができます。
Font
ここでは、次の2つの主要項目をカスタマイズできます。

フォントファミリー：フォームで使用するフォントの種類を選択できます。ブランドアイデンティティーに合う、読みやすいフォントを選択してください。

フォントサイズ：フォーム内に表示されるテキストのサイズを制御します。適切なフォントサイズを選択することは、さまざまな画面サイズやデバイスで最適な可読性を確保するうえで重要です。
ヘッダーはフォームの最上部のセクションで、通常はフォームの件名、説明、ロゴが表示されます。このセクションはフォームの目的を示し、開始時点でユーザーに必要な背景情報とブランディング要素を提供します。

スタイル

スタイルでは、ヘッダーのスタイルと背景をカスタマイズできます。
Header Style
ヘッダー：次の2つのスタイルのいずれかを選択して、ヘッダーとコンテナーの連動方法を制御できます。
  1. Scrollable：ユーザーがフォームをスクロールすると、ヘッダーもフォームと一緒に移動します。ヘッダーが表示領域を占有してユーザーの表示を妨げやすい短いフォームに適しています。
  2. Fixed：ユーザーがフォームを下にスクロールしても、ヘッダーはコンテナー上部に固定表示されます。ユーザーが情報を確認するためにヘッダーへ戻る必要がある長いフォームに便利です。
背景：背景では、フォームコンテナーの背景色を設定できます。背景は単色またはグラデーションで設定できます。

テキストとブランディング

［テキストとブランディング］では、ヘッダーの件名と説明のフォント、配置、ロゴをカスタマイズできます。
Text & Branding
フォントファミリー：フォームのヘッダーテキストで使用するフォントの種類を選択できます。ブランドアイデンティティーに合う、読みやすいフォントを選択してください。

フォーム件名：フォームの件名の色を選択できます。件名に目立つ色を設定して、ヘッダーの中心要素として強調します。これによりユーザーの注意を引き、フォームの目的を明確に伝えられます。

フォーム説明：追加の説明がある場合は、件名と調和し、読みやすさを確保できる色を選択します。フォームの目的を簡潔に説明するか、必要な手順を記載してください。

テキストの配置：ヘッダーテキストの位置を制御します。左寄せ、右寄せ、中央寄せから選択できます。

ロゴ：ロゴは、ブランドや会社を表すシンボルです。デバイスからロゴをアップロードするか、Pixabayから選択できます。また、視覚に障がいのあるユーザー向けに、画像に代替テキストを追加することもできます。参照 その他
  1. 画像サイズ：ロゴ画像のサイズを制御します。必要に応じてスライダーでロゴのサイズを変更できます。
  2. 画像の配置：フォームヘッダー内で、ロゴと件名、説明をどのように配置するかを制御します。用意されたスタイルに基づいて画像の配置を選択し、整ったレイアウトを作成します。

枠線

  1. 枠線の色：フォームヘッダーを囲む枠線の色を選択できます。
  2. 枠線の幅：フォームヘッダーの枠線の太さを制御できます。

角丸と余白
Edges & Spacing

  1. 角丸:［角丸］スライダーで、フォームヘッダーの角の丸みを調整できます。
  2. 外側の余白:フォームの上端、左端、右端に対するヘッダーの余白を調整できます。
  3. 内側の横余白:フォームヘッダーの左端と右端に対するヘッダー内容の余白を調整できます。
  4. 内側の縦余白: フォームヘッダーの上下の余白を調整できます。

項目

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

項目

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

入力
Input

  1. 値:ユーザーが項目に入力するテキストの色を設定します。
  2. 背景:項目内の背景色を設定します。
  3. 枠線: 項目の枠線の色をカスタマイズできます。
  4. 枠線の形状:フォームに合った項目の枠線スタイルを選択できます。
ピッカーでは、ピッカーの背景色をカスタマイズできます。
  1. 背景:複数選択項目、スライダー項目、ドロップダウン、日付ピッカー、ホバーテキストなどのピッカー項目の背景色を設定できます。

枠線と余白
Border & Spacing

  1. 枠線の太さ:入力項目の枠線の太さを調整できます。
  2. 横余白:フォームコンテナーの左右の枠線に対する項目の余白を調整できます。
  3. 縦余白（項目間）:項目間の余白を調整できます。

エラーメッセージ
Error Message

  1. テキスト:エラーメッセージのテキスト色を選択できます。
  2. アイコン:各項目内のアイコンの表示を設定できます。表示または非表示を選択できます。

コンテナー

コンテナーは、フォーム内のすべての項目とボタンを囲む領域です。次の設定でフォームのコンテナーをカスタマイズできます。

レイアウト
Layout

コンテナーの幅
フォームの幅では、フォームコンテナー全体の幅を設定できます。フォームの幅は次のように設定できます。
  1. カスタム:許容範囲内で、コンテナーの幅をピクセル値で設定できます。フォームサイズを細かく調整できます。
  2. 画面に合わせる:ユーザーの画面幅に合わせてコンテナーが自動的に拡張され、調整されます。
配置
コンテナーの配置を設定できます。左寄せ、右寄せ、中央寄せから選択できます。

枠線
Border

  1. 枠線:フォームコンテナーを囲む枠線の色を選択できます。
  2. 枠線の太さ:フォームコンテナーを囲む枠線の太さを調整できます。

角丸、余白、影
Edges, Spacing & Shadow

  1. 角丸: ［角丸］スライダーで、フォームコンテナーの角の丸みを調整できます。
  2. 横余白:フォームコンテナーの左右端の間隔を調整できます。
  3. 縦余白: フォームコンテナーの上端と下端の間隔を調整できます。
  4. 影:フォームコンテナーに影を付けます。
  5. 影の広がり:スライダーをドラッグして、影の強さを調整します。
  6. フォームのレスポンシブ表示
    レスポンシブ表示:    レスポンシブ表示を有効にすると、480px未満を含むさまざまな画面サイズのデバイスで最適に表示され、使いやすくなるようにフォームレイアウトが自動調整されます。
バナーは、商品を宣伝し、回答者にブランドやサービスを紹介するための効果的な手段です。

Banner
画像
フォームコンテナー上部のスペースに、組織に合ったバナー画像を追加できます。デバイスから画像をアップロードするか、Pixabayから画像を追加できます。また、視覚に障がいのあるユーザーが利用できるように、画像に代替テキストを追加することもできます。 参照 その他

スタイル
  1. スタイル1: バナーはフォームコンテナー上部に固定されます。
  2. スタイル2: バナーはフォームコンテナーとは独立して配置されます。
画像サイズ: バナー画像のサイズを調整できます。
画像の配置: バナー画像の配置を設定できます。左寄せ、中央寄せ、右寄せから選択できます。
画像を拡大: バナー画像をコンテナーサイズに合わせて拡大できます。

ページ

フォームが複数ページで構成されている場合、分かりやすいナビゲーションバーを設計することで、ユーザーがスムーズに入力を完了できるようになります。
ナビゲーションバーにより、フォーム内での進捗をユーザーが分かりやすく把握できます。
Navigation Bar Top Layout
レイアウト
ナビゲーションバーの表示方法を選択します。
  1. 上: フォーム上部に進捗を横方向に表示します。
  2. 左: フォーム左側に進捗を縦方向に表示します。
  3. なし: ナビゲーションバーを非表示にします。
Navigation Bar Left Layout
左レイアウトのプロパティー
［左］レイアウトを選択すると、次のカスタマイズ設定を利用できます。
  1. 幅: 縦型ナビゲーションバーの幅を調整します。
  2. 背景: ナビゲーションバーの背景色をカスタマイズします。
  3. 枠線: ナビゲーションバーの枠線色をカスタマイズします。
  4. 縦余白: 縦レイアウトでのページインジケーター間の余白を調整します。
Notesメモ: ナビゲーションバーの左レイアウトは、テーマの新しいバージョンでのみサポートされています。

スタイル
フォームの進捗を示し、分かりやすい進捗の目印を提供できる、フォームのデザインに合った表示スタイルを選択します。

位置
フォーム内でのナビゲーションバーの位置を選択できます。
  1. フォームコンテナー内: ナビゲーションバーはフォームコンテナー内の上部に表示されます。
  2. フォームコンテナー外:ナビゲーションバーはフォームコンテナーの外側に配置されます。
外側の横余白
フォームコンテナーの左右端に対するページヘッダー内容の余白を調整できます。

訪問済み／未訪問（ナビゲーションバー）


ナビゲーションバー内の［訪問済み］ページと［未訪問］ページの背景色と文字色をカスタマイズできます。

ページヘッダー


ページタイトルの表示位置
  1. ナビゲーションバー:現在のページのタイトルをナビゲーションバー内に表示します。
  2. ページ:ページ自体にページタイトルを表示します。タイトルをページに表示する場合、ページタイトルの背景、文字色、文字の配置、枠線、余白をカスタマイズできます。
  3. なし: ページタイトルを完全に非表示にします。

特殊項目

特殊項目は、オンラインフォームの基本的なテキストボックスやドロップダウンを超える項目です。ユーザー入力を独自の方法で収集でき、ユーザー体験の向上に役立ちます。ここでは、一般的な特殊項目の内訳とカスタマイズ方法を紹介します。

グリッド
Grid

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

スタイル
  1. スタイル1：グリッド項目に表示枠線を適用しません。
  2. スタイル2：グリッド全体を囲む表示枠線を追加し、グリッドのヘッダーの下に区切り線を表示します。このスタイルを選択すると、枠線の色とヘッダー下部の枠線のカスタマイズ設定が表示されます。
  3. スタイル3：枠線に加えて、グリッドのヘッダーとコンテナーに背景色を設定します。このスタイルを選択すると、枠線の色、ヘッダーの背景色、ヘッダー下部の枠線の色、コンテナーの背景のカスタマイズ設定が表示されます。
枠線：グリッドの枠線の色をカスタマイズできます。

ヘッダーでは、次をカスタマイズできます。
  1. 背景：ヘッダーの背景色を設定できます。ヘッダー背景は単色またはグラデーションを選択できます。
  2. 下部枠線：グリッドヘッダー下部の枠線の色を設定できます。
  3. 水平余白：グリッドヘッダーの左右端の余白を調整できます。
コンテナーでは、次をカスタマイズできます。
  1. 背景：グリッドコンテナーの背景色を設定できます。コンテナー背景は単色またはグラデーションを選択できます。
  2. 水平余白：グリッドコンテナーの左右端の余白を調整できます。
  3. 列間隔：列間の間隔を調整できます。

選択項目
Choice Fields

ラジオボタンやチェックボックスなどの選択項目では、次をカスタマイズできます。
  1. スタイル：各選択肢を含むボックスのスタイルを選択できます。
  2. オプションスタイル：オプション項目のスタイルを選択できます。
  3. ボックス背景：ラジオボタンとチェックボックス項目の背景色を変更し、見た目を整えます。
  4. テキスト：選択項目設定に関連付けられたテキストの色を選択し、背景に対する可読性を確保します。
  5. 選択：ユーザーがオプションを選択した際に強調表示される色を定義し、選択状態を視覚的に示します。
これは、ラジオボタン、チェックボックス、マトリクス選択項目、画像選択項目、その他に適用されます。

サブフォーム

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


スライダー
Slider

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

評価
Rating

  1. 評価タイプに記号を選択した場合、選択した評価の形状（星、ハートなど）に応じて、記号の枠線の色と、ユーザーが評価レベルを選択したときに表示される塗りつぶし色をカスタマイズでき、視覚的に分かりやすく表示できます。
  2. 評価タイプに数字を選択した場合、未選択時の数字のテキスト色、枠線色、背景色と、選択時のテキスト色と背景色をカスタマイズできます。

マトリクス選択
Matrix Choice

適切な表スタイルを選択して、マトリクス選択の全体的な見た目をカスタマイズできます。さらに、質問と回答セクションと表の背景の背景色を選択する設定も個別に用意されています。

はい／いいえ


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

ラベル-1背景：ラベル-1の背景色を設定します。これは3つのスタイルすべてに適用されます。
ラベル-1テキスト：初期設定スタイル（トグル）ではラベル-1のテキスト色を設定し、スタイル2と3（いいね／よくないね、チェックマーク／バツ）ではアイコンの色を設定します。
ラベル-2背景：ラベル-2の背景色を設定します。これは3つのスタイルすべてに適用されます。
ラベル-2テキスト：初期設定スタイル（トグル）ではラベル-2のテキスト色を設定し、スタイル2と3（いいね／よくないね、チェックマーク／バツ）ではアイコンの色を設定します。
枠線：はい／いいえ項目の枠線の色を定義します。すべてのスタイルに適用されます。
フォームのテーマに合い、可読性とアクセシビリティのために十分なコントラストが得られる背景色とテキスト色を選択してください。

区切り線

Divider field Line Color

線の色：区切り線項目の線の色を変更して、フォーム全体のテーマに合わせた見た目にできます。

ボタン

ボタンセクションでは、オンラインフォーム用に見た目のよいボタンをデザインできます。利用可能なカスタマイズ設定の内訳は次のとおりです。

ボタンのスタイル

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

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

幅
フォームに表示されるボタンのサイズを制御できます。
  1. スタンダード：ボタンのサイズはあらかじめ定義されています。スタンダードのボタンサイズを選択すると、コンテナー内でのボタン配置の位置を選択できます。［Button Alignment］オプションで、ボタンの初期設定の配置を維持するか、左寄せ、中央寄せ、右寄せにできます。
  2. Fit to Screen： ボタンがユーザーの画面幅に合わせて拡張され、自動的に調整されます。

送信ボタン
Submit Button

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

ナビゲーション次／前へボタン

［次］や［前へ］などのナビゲーションボタンは、ユーザーが複数ページのフォーム内を移動するのに役立ちます。フォームデザインとの一貫性を保つために、これらのボタンの背景色、テキスト色、枠線色をカスタマイズできます。

保存と確認ボタン
Save & Review Button

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