カードのカスタマイズ

概要

カード形式のフォームでは、カード専用に設計されたテーマの編集画面を使用して、見た目を整え、操作しやすいカードを作成できます。フォームの細部までゼロから自由にカスタマイズするか、テーマのギャラリーから無料で利用可能な標準のテーマを適用することができます。

カードの外観をカスタマイズするには：

カードを作成後、［テーマ］タブに移動します。
［テーマのカスタマイズ］タブをクリックします。
［フォームのカスタマイズ］では、以下の項目をカスタマイズできます。

一般
ボックス
ヘッダー
項目
特殊項目
進捗状況（棒グラフ）
ボタン

一般

［一般］セクションでは、カード全体のレイアウトや、スタイル、壁紙の背景、フォントなどの見た目をカスタマイズできます。

スタイル

［スタイル］では、カードの［レイアウトの種類］を選択できます。［レイアウトの種類］によって、フォーム上のバナー画像の配置が決まります。

バナーなし：フォームの項目は、左右どちらにもバナーが表示されない状態で表示されます。目立つ画像のない、シンプルなデザインが望ましい場合は、こちらを選択します。
左側：バナー画像は、カードの左側に表示されます。フォームの項目を右側に配置したまま、左側に目立つ画像やロゴを強調して表示する場合、魅力的な選択肢となります。
右側：このレイアウトの種類は左側のバナーと似ていますが、画像はカードの右側に配置されます。

Zoho Formsでは、カードのデザインに最適で、ブランドイメージに合ったレイアウトを柔軟に選択できます。

バナーは、自社製品を宣伝したり、回答者にブランドやサービスを紹介したりするための効果的なツールとなります。バナーが左側または右側に表示するように選択された場合は、以下の選択肢を使用してカスタマイズできます。

背景：バナー領域の背景色を選択します。
背景画像：バナー領域に表示する画像をアップロードするか、Pixabayから画像を選択します。
配置：バナー画像の横方向の位置（左、中央、右）を選択します。
画面に合わせる：画像がバナー領域内にどのように表示されるかを指定します。選択肢は「なし」、「タイル表示」、「拡大」の3つです。
透明度：バナー画像と背景の透明度を調整します。
バナーの幅：スライダーを左右に動かして、フォーム全体の幅に対するバナー部分の幅を設定します。

壁紙

［壁紙］セクションでは、要件に応じてカードの背景をカスタマイズできます。

背景：単色またはグラデーションを使用して、背景色を設定します。
背景画像：フォームの背景に画像を追加して注目を集めたり、ブランドイメージを演出したりすることが可能です。お使いの端末から画像をアップロードするか、壁紙のギャラリーを利用するか、PixabayやUnsplashから画像を追加するかを選択できます。Unsplashでは、写真、コレクション（写真のセット）、トピック（テーマごとに分類されたグループ）から画像を検索できます。また、画像の縦横比（すべて、横向き、縦向き、正方形に近い）、色による絞り込み、新しい順・古い順・人気順による並べ替えも可能です。要件に応じた背景画像を追加した後、配置、サイズ、透明度を調整できます。

フォームにサブフォームが含まれている場合、フォームで選択された背景色は、標準でサブフォームの背景色に適用されます。フォームの背景として画像を設定している場合、サブフォームがフォーム全体になじむよう、フォームの背景画像と調和する背景色を選択することを推奨します。

フォント

フォントの種類：フォーム全体で使用するフォントの種類を選択します。
フォントのサイズ：フォーム内に表示されるテキストのサイズを調整します。選択されたサイズは、ウェルカムページの内容を除くフォーム内のすべての文字（ボタンの文字も含む）に自動で適用されます。これにより、画面の大きさに応じて表示が自動で調整されます。

ボックス

［ボックス］セクションでは、各フォーム項目を囲む［ボックス］の見た目や、［ページ移動］および［フッター］の設定をカスタマイズできます。

スタイル

［スタイル］では、［ボックス］の2つのスタイルから選択することで、カード上の項目の表示方法を決定します。

ボックスなし：各項目はボックスなしで表示されるため、シンプルで洗練された印象になります。これにより、カード形式のフォームに一体感が生まれ、フォーム全体のデザインと調和します。
ボックスあり：各項目の周囲にボックスが配置され、フォームの背景と項目との間に明確な境界が設けられます。これにより、カード形式のフォームが整った印象になります。

ボックスを選択した状態で、さらに以下のカスタマイズが可能です。

角の形：ボックスの枠の形（四角形、角丸四角形、楕円形）を選択します。
罫線：ボックスの枠線の色を設定します。
背景：ボックスの背景色を選択します。
影の色：ボックスの背面に適用する影の色を選択します。
影のぼかし：ボックスの影が広がる範囲を調整します。

ページ移動

方向

カードを横方向（左から右）に移動するか、縦方向（上から下）に移動するかを選択します。

横方向のページ移動：横方向のページ移動では、ユーザーはカードを左から右へと順に移動します。
利点：

項目の順序が明確になります。
順序立てて内容を提示するのに適しています。
重要度が均等な内容に適しています。

縦方向のページ移動：縦方向のページ移動では、ユーザーはカードを上から下へと順に移動します。
利点：

長文や、長さが一定でない場合に適しています。
重要度の異なる内容に適しています。

メモ：［ページ移動の方向］が縦方向に設定されている場合、［ページ移動のスタイル］、［切り替え効果］、［フッター］は非表示となり、カスタマイズできません。

スタイル

［ページ移動の方向］を「横」に設定した場合、2つの［ページ移動のスタイル］からいずれかを選択して、カードフォーム上のページ移動ボタンの配置を設定します。

項目の下：ページ移動ボタンは、カードの各ページで項目の下に配置されます。関連する項目に近い場所にボタンを配置することで、コンパクトなレイアウトを作成できます。フォームの一番下までスクロールすることなく前後のページに移動できます。
フッター内：ページ移動ボタンは、各ページの下部にあるフッターに個別に配置されます。このレイアウトにより、フォームの項目とページ移動ボタンを明確に区別できます。

切り替え効果

切り替え効果では、ページ移動の際に魅力的なアニメーションを再生することで、インタラクティブなフォームを作成できます。ページ移動の際に再生する、切り替え／アニメーション効果を以下の効果から選択します。

標準：特別なアニメーションを使用しない、標準的な切り替えです。
スライド：ページ移動中にページが横からスライドして表示されます。
フェードアウト：カードの前後のページが表示される前に、現在のページが徐々に消えます。
回転：カード形式のページ移動の際に、特定の軸を中心に回転します。
後退：前後のカードが表示される前に、カードが押し戻されるような錯覚が生まれます。
タイプライター：ページが読み込まれる際、テキストがタイプライター風のアニメーションで表示されます。
反転：縦軸を中心にカードを裏返すことで、裏面にある前後のページを見ることができます。

フッター

フッターには、ページ移動ボタンや、［保存する］／［送信する］といった操作ボタンが表示されます。

背景：［フッター］セクションの背景色を選択します。

ヘッダー

フォーム上部の［ヘッダー］セクションには、フォームのタイトルと説明が表示されます。［ヘッダー］では、以下の項目をカスタマイズできます。

スタイル

［ヘッダー］セクションの背景や透明度をカスタマイズして、フォームのデザインを引き立てることができます。

背景：［ヘッダー］セクションの背景色を選択します。
透明度：［ヘッダー］と［背景］の透明度を調整します。

テキストとブランド

フォームの件名、説明文、ロゴなどの外観を、自社のブランドイメージに合わせてカスタマイズできます。

フォームの件名：フォームの件名に使用するフォントの書体（太字／斜体）や色を設定します。
フォームの説明：フォームの説明文に使用するフォントの書体や色を設定します。
ロゴ：ロゴとは、ブランドや企業を表すシンボルです。お使いのデバイスからロゴをアップロードするか、Pixabayからロゴを選択できます。また、視覚に障害のあるユーザーでも利用しやすいように、画像に代替テキストを追加することも可能です。詳細はこちら。
画像のサイズ：スライダーを使用して、ロゴに使用する画像のサイズを調整します。
画像の配置：フォームのヘッダー内でのロゴ、件名、説明の配置を設定できます。利用可能なスタイルに基づいて画像の配置を選択し、レイアウトを作成できます。
画面に合わせる：ロゴに使用する画像が画面の幅に合わせて拡大表示されます。
画像の形：ロゴの形を四角形、角丸四角形、円形から選択できます。

余白

［ヘッダー］セクションの内側の左右および上下の余白をカスタマイズします。

内側の余白（左右）：フォームのヘッダーの左右の端からヘッダーの内容までの間隔を調整します。
内側の余白（上下）：フォームのヘッダーの上下の間隔を調整します。

下線

［ヘッダー］セクションの下部に表示される枠線をカスタマイズします。

色：［ヘッダー］の下線の色を選択します。
幅：ピクセルスライダーを使用して、下線の太さを調整します。

影

［ヘッダー］内にある［ボックス］に影の効果を適用できます。

色：ヘッダーの下に適用する影の色を選択します。
影の広がり：スライダーをドラッグすると、影の効果の強さを調整できます。

項目

フォームの項目やエラーメッセージの表示形式をカスタマイズできます。

項目の画像

［項目］セクションでは、項目名、説明文、テキストの配置などについて、さまざまな色やスタイルを選択できます。

ラベル：項目名に使用するフォントの書体（太字／斜体）や色を設定します。
手順：各項目に関連付けられた説明文のフォントの書体と色を選択してください。
テキストの配置：項目名のテキストの配置（左寄せ／中央寄せ）を指定します。

入力内容

項目のボックスの枠線スタイルや色を選択できます。

値：ユーザーが項目に入力するテキストの色を設定できます。
角の形：ボックスの枠の形（四角形、角丸四角形、楕円形）を選択します。
罫線：項目の罫線の色をカスタマイズできます。
背景：入力欄の背景色を指定します。
透明度：入力内容と背景の透明度を調整します。

［値］、［罫線］、［背景］で選択された色は、［評価］、［スライダー］、［選択肢に応じた項目のルール］、［マウスのカーソルを重ねた時のテキスト］の［詳細情報］を含むすべての項目に適用されます。

選択画面

［選択画面］では、［背景］や、選択された値の色をカスタマイズできます。

背景：日付や時刻などを選択するための選択欄の背景色を設定できます。
選択：選択欄で選択された値を強調表示する色を選択します。

選択欄には、以下の項目が含まれます。

名前 - 敬称
住所 - 国
電話番号 - 国番号
ドロップダウン
複数選択
時間の項目
日付の項目の選択欄
日時の項目の選択欄
表形式の選択肢 - ドロップダウン
項目のパネル（質問間を移動）
Zoho CRMの項目
マウスのカーソルを重ねた時のテキスト

選択欄の背景色、選択状態、値には、読みやすい色を選択することをお勧めします。

エラーメッセージ

［エラーメッセージ］セクションでは、回答者に表示されるエラーメッセージの色を選択できます。

背景：エラーメッセージの背景色を選択します。
テキスト：エラーメッセージのテキストの色を選択します。

［名前］や［住所］などの項目を含むフォームの項目がある場合は、入力欄の枠線とエラーメッセージの背景色を明確に区別するようにします。両方に同じ色を使用すると、エラーのある項目の一部の枠線と、その他の項目の一部の枠線との区別がつかなくなってしまいます。

進捗状況（棒グラフ）

進捗状況（棒グラフ）には、ユーザーがフォームの質問に回答していくにつれて、その進捗状況が表示されます。進捗状況（棒グラフ）では、回答済みの設問と未回答の設問の色をカスタマイズできます。

標準の背景：進捗状況（棒グラフ）の未入力部分の色を設定します。
入力済みの背景：進捗状況（棒グラフ）の入力済み部分の色を設定します。

特殊項目

フォームに［評価］、［表形式の選択肢］、［はい／いいえ］などの特殊項目が追加されている場合、それらをカスタマイズできます。

評価

フォームに［評価］項目がある場合、枠線の色をカスタマイズできます。

表形式の選択肢

フォームに［表形式の選択肢］項目が含まれている場合、適切な表のスタイルを選択できるほか、カード形式のテーマに調和する色を［表形式の選択肢］項目の見出し色として設定できます。これにより、一貫性のある、魅力的なフォームを作成できます。

はい／いいえ

［はい／いいえ］項目では、以下の要素をカスタマイズできます。

ラベル1の背景：ラベル1の背景色を設定します。この設定は、3つのスタイルすべてに適用されます。
ラベル1のテキスト：標準のスタイル（切り替えボタン）の［ラベル1］の文字色と［スタイル2］および［スタイル3］（［like］いいね／［dislike］よくないね、および［checkmark］チェック／［cross］バツ）のアイコンの色を設定します。
ラベル2の背景：ラベル2の背景色を設定します。この設定は、3つのスタイルすべてに適用されます。
ラベル2のテキスト：標準のスタイル（切り替えボタン）の［ラベル2］の文字色と［スタイル2］および［スタイル3］（［like］いいね／［dislike］よくないね、および［checkmark］チェック／［cross］バツ）のアイコンの色を設定します。
罫線：「はい／いいえ」項目の枠線の色を設定できます。この設定は、すべてのスタイルに適用されます。