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

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

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

テーマビルダーを使用すると、ブランドイメージを反映し、閲覧者の共感を得られる、視覚的に魅力的なフォームを作成でき、より高いエンゲージメントを実現できます。ブランドアイデンティティとシームレスに連動するレイアウトを設計し、目的に合ったトーンを伝えるフォントを選択し、ヘッダーやバナーからコンテナーやボタンに至るまで、あらゆる要素を自由にカスタマイズして、フォームを際立たせることができます。テーマビルダーを活用することで、美しく効果的なフォームを作成でき、最終的に組織の成果向上につなげることができます。

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

  1. フォームの作成後、テーマタブに移動します。

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

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

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

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

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

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

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

一般

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

Style

Styleでは、コンテナーのスタイル、コンテナーの背景、ポップアップの背景をカスタマイズできます。
Form general style
Container: コンテナーは、フォーム内の項目を囲む領域です。コンテナーの種類は、次の 3 つのスタイルから選択できます。
  1. 初期設定:コンテナーが明確に区切られ、フォームの視覚的な境界線がはっきりと表示されるスタイルです。
  2. Transparent:フォーム要素のコンテナーを透過させるスタイルです。フォームが周囲の背景と自然になじみ、ページレイアウト全体にスムーズに統合されます。透明にすることで、周囲のコンテンツに気を取られず、フォーム項目に意識を集中させることができます。
  3. Deck:このスタイルでは、フォーム内の各項目に専用のコンテナーが割り当てられます。各項目に独立したスペースが確保されるため、閲覧者がフォームを確認・入力しやすくなります。
Background: Backgroundでは、フォームコンテナーの背景色を設定できます。背景は、単色またはグラデーションから選択できます。
Popup Background: サブフォームのポップアップ、保存ポップアップ、確認ポップアップなど、フォーム内に表示されるポップアップの背景色を設定できます。これらのポップアップの背景色をカスタマイズすることで、ユーザーエクスペリエンスを向上できます。背景色は、単色またはグラデーションから選択できます。

Wallpaper

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

フォント

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

フォントファミリー: フォームで使用するフォントの種類を選択できます。ブランドイメージに合い、読みやすく視認性の高いフォントを選択してください。

フォントサイズ:フォーム内に表示されるテキストの大きさを制御できます。適切なフォントサイズを選択することで、さまざまな画面サイズやデバイスでの読みやすさを確保できます。
ヘッダーはフォームの最上部に表示されるセクションで、通常、フォームの件名、説明、ロゴが表示されます。このセクションはフォームの目的を紹介し、ユーザーに対して、冒頭で必要な情報とブランド要素を提示する役割を果たします。

Style

Styleでは、ヘッダーのスタイルと背景をカスタマイズできます。
Header Style
Header: ヘッダーがコンテナーとどのように連動するかを、次の 2 つのスタイルから選択して制御できます。
  1. スクロール:このスタイルでは、ユーザーがフォームをスクロールするとヘッダーも一緒に移動します。ヘッダーが大きく、短いフォームで表示領域を圧迫してしまう場合に適しています。
  2. 固定:このスタイルでは、ユーザーがフォームをスクロールしても、ヘッダーはコンテナーの上部に固定されたまま表示されます。長いフォームで、ユーザーがヘッダーの情報を随時参照する必要がある場合に便利です。
Background: Backgroundでは、フォームコンテナーの背景色を設定できます。背景は、単色またはグラデーションから選択できます。

Text & Branding

Text & Branding では、ヘッダーの件名・説明のフォント、配置、ロゴをカスタマイズできます。
Text & Branding
フォントファミリー: フォームヘッダーのテキストに使用するフォントの種類を選択できます。ブランドイメージに合い、読みやすく視認性の高いフォントを選択してください。

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

フォーム説明: 補足説明を表示する場合は、件名と調和し、読みやすさを損なわない色を選択してください。フォームの目的や入力時の注意事項などを簡潔に記載します。

テキストの配置: ヘッダーテキストの配置を制御できます。左寄せ、右寄せ、中央寄せのいずれかを選択できます。

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

Border

  1. 枠線の色: フォームヘッダーを囲む枠線の色を選択できます。
  2. 枠線の太さ: フォームヘッダーの枠線の太さを調整できます。

角丸 & 余白
Edges & Spacing

  1. Edges:Edges スライダーでは、フォームヘッダーの角の丸みを調整できます。
  2. Outer Spacing:フォームの上端・左端・右端からヘッダーまでの余白を調整できます。
  3. Inner Horizontal Spacing:フォームヘッダー内で、ヘッダーコンテンツと左右の端との間隔を調整できます。
  4. Inner Vertical Spacing: フォームヘッダー内で、上端から下端までの余白を調整できます。

項目

「項目」セクションでは、フォーム内の各項目の見た目を個別に調整できます。

項目

Fields
  1. ラベル: 項目ラベルの色を選択できます。
  2. Instruction:項目に関連付けられた説明テキストの色を設定できます。
  3. Focus: ユーザーがクリックまたは移動したときに、その項目を強調表示する色を選択できます。 これにより、ユーザーは現在アクティブな項目を識別しやすくなり、ユーザーエクスペリエンスが向上します。
  4. Mandatory Asterisk:必須項目を示す記号 (*) の色を選択できます。

Input
Input

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

Border & Spacing
Border & Spacing

  1. Border Width:入力項目の枠線の太さを調整できます。
  2. Horizontal Spacing:フォームコンテナの左右の枠線から項目までの余白を調整できます。
  3. Vertical Spacing - が次の間 項目:項目同士の上下の間隔を調整できます。

エラー メッセージ
Error Message

  1. Text:エラーメッセージのテキスト色を選択できます。
  2. Icon:各項目内に表示されるアイコンの表示設定を制御できます。表示するか非表示にするかを選択できます。

Container

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

Layout
Layout

Container Width
フォーム幅では、フォームコンテナ全体の幅を指定できます。フォーム幅は次のいずれかで設定できます。
  1. カスタム:許可された範囲内で、コンテナの幅をピクセル値で指定できます。フォームサイズを細かく制御したい場合に便利です。
  2. Fit to Screen:ユーザーの画面幅に合わせて、コンテナが自動的に拡大・調整されます。
Alignment
コンテナの配置位置を制御できます。左寄せ、右寄せ、中央揃えのいずれかに配置を選択できます。

Border
Border

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

Edges, Spacing & Shadow
Edges, Spacing & Shadow

  1. Edges: Edges スライダーでは、フォームコンテナの角の丸みを調整できます。
  2. Horizontal Spacing:フォームコンテナの左右の端とコンテンツとの距離を調整できます。
  3. Vertical Spacing: フォームコンテナの上下の端とコンテンツとの距離を調整できます。
  4. Shadow:フォームコンテナに影の効果を付けます。
  5. Shadow Spread:スライダーをドラッグして、影の濃さを調整します。
  6. Form Responsiveness
    Responsive 表示する:    Responsive 表示では、画面サイズが 480 ピクセル未満のデバイスを含む、さまざまな画面サイズで最適な表示と操作性を確保するために、フォームレイアウトが自動的に調整されます。
バナーは、商品を宣伝し、ブランドやサービスを回答者に紹介するための効果的な手段です。

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

Style
  1. Style 1: バナーがフォームコンテナの上部に固定されます。
  2. Style 2: バナーがフォームコンテナとは独立した位置に配置されます。
画像 Size: バナー画像のサイズを調整できます。
画像 Alignment: バナー画像の配置位置を制御できます。左寄せ、中央揃え、右寄せから選択できます。
Stretch 画像: バナー画像をコンテナサイズに合わせて拡大表示できます。

Pages

フォームが複数ページで構成されている場合は、わかりやすいナビゲーションバーをデザインすることで、ユーザーがスムーズに入力を完了できるように案内できます。
Navigation 棒グラフは、フォーム内での進捗状況をユーザーにわかりやすく示します。
Navigation Bar
Styles: フォームのデザインに最も適したビジュアルスタイルを選択し、進捗状況を示す明確なインジケーターとして表示できます。

Position: フォーム内でのナビゲーションバーの表示位置を選択できます。
  1. Inside Form Container: ナビゲーションバーがフォームコンテナ内の上部に表示されます。
  2. Outside Form Container:ナビゲーションバーがフォームコンテナの外側に表示されます。

Visited/Unvisited - Navigation 棒グラフ

ナビゲーションバー内の「Visited」「Unvisited」ページそれぞれの背景色とテキスト色をカスタマイズできます。

Page Header
Page Header

表示 ページのタイトル in
  1. Navigation 棒グラフ:現在のページの件名を、ナビゲーションバー内に表示します。
  2. Page:ページ自体にページタイトルを直接表示します。件名をページ上に表示する場合、ページタイトルの背景色、テキスト色、テキストの配置、枠線、余白をカスタマイズできます。
  3. なし: ページタイトルを非表示にします。
Outer Horizontal Spacing
ページヘッダーのコンテンツとフォームコンテナの左右の端との間隔を調整できます。

Special 項目

特殊フィールドは、オンラインフォームの基本的なテキストボックスやドロップダウンを超えた入力方法を提供します。ユーザー入力を取得し、ユーザーエクスペリエンスを向上させるユニークな手段です。ここでは、代表的な特殊フィールドの種類と、そのカスタマイズ方法について説明します。

グリッド
Grid

グリッドフィールドでは、次のカスタマイズ可能な設定を利用できます。

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

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

選択フィールド
Choice Fields

ラジオボタンやチェックボックスなどの選択フィールドでは、次の項目をカスタマイズできます。
  1. スタイル: 各選択肢を囲むボックスのスタイルを選択できます。
  2. オプションスタイル: オプションフィールド自体のスタイルを選択できます。
  3. ボックスの背景: ラジオボタンおよびチェックボックスフィールドの背景色を変更し、視認性を高めることができます。
  4. テキスト: 選択フィールドに関連付けられたテキストの色を選択し、背景とのコントラストを確保できます。
  5. 選択色: ユーザーがオプションを選択した際に、そのオプションを強調表示する色を定義し、視覚的な確認を提供します。
これらの設定は、ラジオボタン、チェックボックス、マトリックス選択フィールド、画像選択フィールドなどに適用されます。

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

インラインサブフォームは、メインフォーム内に直接表示されます。背景 オプションを使用して、インラインサブフォーム専用の背景色を設定し、フォーム本体と視覚的に区別できます。サブフォームがポップアップ形式の場合は、一般 > ポップアップの背景 から背景色をカスタマイズできます。
これらの設定は、インラインサブフォームおよび「エントリーを追加」カードに適用されます。

スライダー
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. スタンダード: あらかじめ定義されたサイズのボタンです。スタンダードサイズを選択した場合、コンテナ内でのボタンの配置位置を選択できます。ボタン配置 オプションで、ボタンの配置をデフォルトのままにするか、左寄せ・中央寄せ・右寄せから選択できます。
  2. 画面幅に合わせる: ユーザーの画面幅に合わせて、ボタンが自動的に横幅を広げて調整されます。

送信ボタン
Submit Button

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

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

「次へ」「前へ」などのナビゲーションボタンは、複数ページのフォームを移動する際にユーザーをサポートします。これらのボタンの背景色、テキスト色、枠線色をカスタマイズして、フォームデザインとの一貫性を保つことができます。

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

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

    Zoho CRM 管理者向けトレーニング

    「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。

    日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。

    Zoho CRM Training



              Zoho Campaigns Resources

                Zoho WorkDrive Resources




                  • Desk Community Learning Series


                  • Digest


                  • Functions


                  • Meetups


                  • Kbase


                  • Resources


                  • Glossary


                  • Desk Marketplace


                  • MVP Corner


                  • Word of the Day


                  • Ask the Experts






                          Latest Feature Updates



                                  • Related Articles

                                  • テーマのカスタマイズ（旧テーマビルダー）

                                    お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 目次 フォーム フォーム背景のカスタマイズ 壁紙の追加 バナーの追加 フォーム要素のカスタマイズ コンテナ ヘッダー 本文 項目 ドロップダウンリスト フッター フォームボタンのカスタマイズ サブフォーム サブフォームコンテナ サブフォーム項目 ポップアップサブフォーム ページ ...

                                  • Zoho Formsへようこそ！

                                    ペーパーレスのデータ収集ツールであるZoho Formsを使用すると、従来の紙ベースでの煩わしいやりとりから脱却できます。データ収集の手間を削減し、業務を効率化することが可能です。 Zoho Formsの魅力 Zoho ...

                                  Resources

                                  Videos

                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                  eBooks

                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                  Webinars

                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                  CRM Tips

                                  Make the most of Zoho CRM with these useful tips.