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

スタイル

Styleではフォーム全体のレイアウトやビジュアルをカスタマイズできます。ここでは、フォームのコンテナやヘッダーの外観を調整できます。

1. 初期設定:明確なコンテナが表示され、フォームにクリアな境界線が設けられます。
2. Transparent:フォーム要素のコンテナが透明になり、フォームが背景と自然に一体化します。このデザインにより、ページ全体のレイアウトと調和し、美しい外観を保つことができます。透明化によってフォーム項目への集中が高まり、周囲のコンテンツによる妨げを最小限にします。
3. Deck:各項目ごとに専用のコンテナが割り当てられます。これにより、各項目に独自のスペースが確保され、フォームの入力やナビゲーションが簡単になります。項目同士が重なって混乱やストレスが生じることはありません。

1. スクロール可能:ユーザーがフォームをスクロールする際に、ヘッダーも一緒に移動します。短いフォームでヘッダーがスペースを取りすぎたり、ユーザーの表示を妨げたりする場合に最適です。
2. 固定:ユーザーがフォームをスクロールしても、ヘッダーはコンテナの上部に固定されたまま表示されます。長いフォームで、ユーザーがヘッダーの情報を何度も参照したい場合に便利です。

フォント

壁紙

1. 単色背景
   単色背景を適用するには、あらかじめ用意されたカラーパレットやカラーピッカーから色を選択し、ご自身のブランドカラーに正確に合わせることができます。
   
2. グラデーション背景
   グラデーションカラーでは、滑らかな色の移り変わりを持つ背景を作成できます。開始点と終了点に2つの異なる色を選ぶことができます。
   
1. 角度：スライダーを使ってグラデーション内の色の移行角度を調整できます。これにより、色の混ざる方向を自由に設定できます。
   
   
   

フォームの背景に画像を追加することで、閲覧者の注目を集めたり、ブランドイメージを強調したりできます。デバイスから画像をアップロードしたり、あらかじめ用意された背景やPixabayから画像を追加することが可能です。背景画像を追加した後は、位置合わせやフィット感の調整、透過度の設定も行えます。

バナー

画像

1. スタイル1：バナーがフォームコンテナの上部に固定されます。
   
2. スタイル2：バナーがフォームコンテナから独立して配置されます。

ヘッダー

フォーム上部のヘッダー部分には、フォームの件名、説明、ロゴが含まれます。以下の項目をカスタマイズして調整できます。

Form 件名

フォームの件名に色を選択できます。件名を際立たせ、ヘッダーの中心的な要素として設定しましょう。ユーザーの注意を引き、フォームの目的を明確に伝えます。

Form 説明

補足説明がある場合は、件名と調和し読みやすい色を選択してください。フォームの目的や必要な指示を簡潔に記載しましょう。

背景

ヘッダーの背景色を設定できます。単色またはグラデーションから選択可能です。

フォント Family

この設定では、フォームのヘッダーで使用するフォントの種類を選択できます。ブランドイメージに合った、見やすく読みやすいフォントを選びましょう。

ロゴ

ロゴはブランドや会社を象徴するシンボルです。端末からロゴをアップロードするか、Pixabayから選択してください。視覚障がいのあるユーザー向けに画像の代替テキストも追加できます。詳細はこちら

画像サイズ

ロゴ画像のサイズを調整できます。必要に応じてスライダーを使ってロゴのサイズ変更が可能です。

画像の配置

ロゴ、件名、説明のフォームヘッダー内での配置を管理します。提供されているスタイルから画像の配置を選び、整理されたレイアウトを作成しましょう。

追加のヘッダーカスタマイズ設定を確認するには、その他をクリックしてください。

1. 枠線：フォームヘッダーを囲む枠線の色を選択できます。
2. 枠線の太さ：フォームヘッダー枠線の太さを調整できます。
3. 角の丸み：スライダーでフォームヘッダーの角の丸みを調整できます。
4. 外側の余白：フォームの上部、左側、右側からヘッダーまでの余白を調整します。
5. 内側左右の余白：フォームヘッダー内で、ヘッダーコンテンツと左右端との余白を調整できます。
6. 内側上下の余白：フォームヘッダー内の上下方向の余白を調整します。
   

ページ

フォームが複数ページにわたる場合は、クリアなナビゲーション棒グラフをデザインすることで、ユーザーがスムーズに入力を完了できるよう案内できます。

ナビゲーション棒グラフ

ナビゲーション棒グラフは、フォーム内での進捗状況をユーザーに分かりやすく提示します。

1. スタイル: フォームのデザインに最適なビジュアルスタイルを選択し、進捗を示して明確なガイドを提供しましょう。
2. 位置: ナビゲーション棒グラフの表示位置をフォーム内で選択できます。

1. フォームコンテナ内: ナビゲーション棒グラフがフォームコンテナの上部に直接表示されます。
   
2. フォームコンテナ外: ナビゲーション棒グラフがフォームコンテナの外側に配置されます。
   

Visited/Unvisited - ナビゲーション棒グラフ

ナビゲーション棒グラフ内の「Visited」および「Unvisited」ページごとに、背景色やテキストカラーをカスタマイズできます。

ページヘッダー

ページタイトルの表示方法:

1. ナビゲーション棒グラフ: 現在のページの件名をナビゲーション棒グラフ内に表示します。
   
2. ページ: ページ自体にページタイトルを直接表示します。ページタイトルの背景・テキストカラー、配置をカスタマイズできます。
3. なし: ページタイトルを完全に非表示にします。

さらにカスタマイズ設定を確認するには、その他をクリックしてください。

コンテナ

1. カスタム: 許容範囲内のピクセル値でコンテナ幅を指定できます。フォームサイズを細かく調整したい場合に便利です。
2. 画面に合わせる: ユーザーの画面幅に合わせて自動でコンテナが拡大・調整されます。
   

以下は追加のコンテナカスタマイズ設定です：

1. 枠線：フォームコンテナを囲む枠線の色を選択できます。
2. 枠線の太さ：フォームコンテナを囲む枠線の太さを調整できます。
   
3. 角の丸み：スライダーでフォームコンテナの角の丸みを調整できます。
   
4. 横の余白： フォームコンテナの左右端との距離を調整できます。
5. 縦の余白：フォームコンテナの上下端との距離を調整できます。
6. 影：フォームコンテナに影の効果を付けることができます。
   
7. 影の広がり：スライダーをドラッグして影の強さを調整できます。
   
8. フォームのレスポンシブ表示
   Responsive 表示する：Responsive 表示するを有効にすると、フォームのレイアウトが異なる画面サイズ（480ピクセル未満も含む）のデバイスに合わせて最適な表示・操作性となるよう自動で調整されます。

項目

項目セクションでは、フォーム内の各項目の見た目を個別にカスタマイズできます。

1. ラベル：項目ラベルの色を選択できます。
   
2. 説明文：項目に関連付けられている説明文の色を設定できます。
3. フォーカス：ユーザーがクリックまたは項目に移動した際に、対象項目を目立たせる色を選択できます。 ユーザーが現在アクティブな項目を識別しやすくなり、ユーザー体験が向上します。
   
4. 必須アスタリスク：必須項目であることを示す記号（*）の色を選択できます。
   

1. 値：ユーザーが項目に入力したテキストの色を指定します。
2. 背景：項目の入力エリアの背景色を設定します。
3. 枠線：項目の枠線の色をカスタマイズできます。
4. 枠線の形状：項目の枠線スタイルを選択できます。

1. 背景：ピッカー項目（複数選択項目、スライダー項目、ドロップダウン、日付ピッカー、ホバーテキストなど）の背景色を設定できます。

ここでは、以下のカスタマイズが可能です：

1. ボーダー幅:入力項目の枠線の太さを調整できます。
   
2. 横スペース:フォームコンテナの左右の枠との間隔を調整できます。
   
3. 縦スペース - 項目間:項目同士の間隔を調整できます。

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

グリッド

1. スタイル1:グリッド項目に枠線を表示しないスタイルです。
   
2. スタイル2:グリッド全体を囲む枠線と、ヘッダー下部に折れ線グラフを表示するスタイルです。このスタイルを選択すると、枠線カラーやヘッダー下部の枠線色などのカスタマイズ設定が利用可能になります。
   
3. スタイル3:枠線に加え、グリッドのヘッダーやコンテナに背景色を設定できるスタイルです。このスタイルを選択すると、枠線カラー、ヘッダーの背景色、ヘッダー下部の枠線色、コンテナ背景色などのカスタマイズ設定が利用可能になります。
   

1. 背景:ヘッダーの背景色を設定できます。単色またはグラデーションを選択できます。
   
2. 下枠線:グリッドヘッダーの下枠線の色を設定できます。
   
3. 横スペース:グリッドヘッダーの左右端との距離を調整できます。
   

1. 背景:グリッドコンテナの背景色を設定できます。単色またはグラデーションを選択できます。
   
2. 横スペース:グリッドコンテナの左右端との距離を調整できます。
   
3. 列間スペース:列同士の間隔を調整できます。
   

Special 項目

Special 項目は、基本的なテキストボックスやドロップダウン以外にも対応しています。ユーザーからの入力を収集し、ユーザー体験を向上させる独自の方法を提供します。よく使われるSpecial 項目の内訳と、それぞれのカスタマイズ方法をご紹介します。

サブフォーム - インライン

サブフォームは、メインフォーム内に直接表示されます。インラインサブフォーム専用に背景色を設定し、背景オプションで他の部分と区別することができます。サブフォームがポップアップタイプの場合は、Container>Popup Backgroundで背景色をカスタマイズできます。
この設定はインラインサブフォームおよび追加エントリーカードに適用されます。

選択項目

ラジオボタンやチェックボックスなどの選択項目では、以下のカスタマイズが可能です。

1. ボックススタイル：各選択肢を含むボックスのスタイルを選択できます。
   
2. オプションスタイル：選択項目のオプションスタイルを選択できます。
3. ボックス背景：これを使ってラジオボタンやチェックボックス項目の背景色を変更し、視覚的な魅力を高めます。
4. テキスト：選択項目の設定に関連するテキストの色を選択でき、背景とのコントラストを確保します。
5. 選択状態：ユーザーが選択したオプションを強調表示する色を定義し、ユーザーに視覚的な確認を提供します。

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

スライダー

選択状態：ここでは、ユーザーがスライダーを動かした際に棒グラフ部分を塗りつぶす色を選択できます。これにより、選択内容が視覚的に示されます。

評価

選択した評価の形状（星、ハートなど）に応じて、ユーザーが評価レベルを選択した際に形状を塗りつぶす色をカスタマイズできます。選択した評価を視覚的に表現できます。

マトリックス選択

適切なテーブルスタイルを選択することで、マトリックス選択項目全体の外観をカスタマイズできます。設問・回答セクションとテーブル背景の背景色も個別に設定できます。

ボタン

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