カードフォームのカスタマイズ

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

概要

カードフォーム専用に設計されたテーマビルダーを使用して、インタラクティブなカードフォームの操作画面をより魅力的にできます。独自の背景、フォント、効果などでフォームをカスタマイズしたり、テーマギャラリーで利用できるデザイン済みテーマからテーマを選択したりできます。

カードフォームの外観を好みに合わせてカスタマイズするには、

カードフォームを作成したら、［テーマ］タブに移動します。
［一から作成］／［フォームのカスタマイズ］をクリックします。
［フォームのカスタマイズ］で、次の内容をカスタマイズできます。

全般
コンテナー
ヘッダー
項目
特殊項目
進捗バー
ボタン

全般

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

スタイル

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

［バナーなし］：フォーム項目は左右どちらにもバナーなしで表示されます。目立つ画像のないシンプルなデザインにしたい場合は、このオプションを選択できます。
［左バナー］：バナー画像がカードフォームの左側に表示されます。フォーム項目を右側に配置したまま、左側に目立つ画像やロゴを表示したい場合に、見栄えのよいオプションです。
［右バナー］：このレイアウトの種類は左バナーと似ていますが、画像はカードフォームの右側に配置されます。

Zoho Formsでは、カードフォームのデザインに最適で、ブランドや見た目の好みに合ったレイアウトを柔軟に選択できます。

バナーは、商品やサービスを宣伝し、回答者にブランドやサービスを紹介するための効果的なツールです。バナー（左または右）を使用する場合は、次のオプションでカスタマイズできます。

［背景］：バナー領域の背景色を選択します。
［背景画像］：バナー領域に表示する画像をアップロードするか、Pixabayから選択します。
［配置］：バナー画像の水平方向の配置（左、中央、右）を選択します。
［フィット］：画像をバナー領域内にどのように収めるかを指定します。オプションは、なし、タイル、拡大です。
［不透明度］：バナー画像と背景の透明度を調整します。
［バナーの幅］：スライダーをドラッグして、フォームコンテナーに対するバナーセクションの幅を設定します。

壁紙

壁紙セクションでは、カードフォームの背景をカスタマイズできます。

［背景］：単色またはグラデーション色を使用して背景色を設定します。
［背景画像］：フォームの背景に画像を追加して、利用者の注目を集め、ブランドとの関連性を持たせることができます。こちらでは、端末から画像をアップロードするか、［壁紙ギャラリー］を使用するか、PixabayまたはUnsplashから画像を追加できます。Unsplashでは、個別の写真、コレクション（画像セット）、トピック（テーマ別のグループ）を利用でき、画像の向き（すべて、横向き、縦向き、正方形に近い）、色、並べ替え（新しい順／古い順／人気順）で画像を絞り込めます。目的の背景画像を追加した後、配置、フィット、不透明度を調整できます。

フォームにサブフォームがある場合、フォームで選択した背景色が初期設定でサブフォームの背景に適用されます。フォームの背景に画像を設定している場合は、サブフォームの色がフォームになじむように、フォームの背景画像の色と調和する背景色を選択することをおすすめします。

フォント

［フォントファミリー］：フォーム全体で使用するフォントの種類を選択します。
［フォントサイズ］：フォーム内に表示されるテキストのサイズを制御します。選択したサイズは、ボタンのテキストを含むフォーム上のすべてのテキスト（ウェルカムページの内容を除く）に動的に調整され、フォームがレスポンシブになります。

コンテナー

コンテナーセクションでは、各フォーム項目の周囲の視覚的な枠線に加えて、ナビゲーションとフッターの設定をカスタマイズできます。

スタイル

［スタイル］では、カードフォーム上で項目をどのように表示するかを決めるため、2種類のコンテナースタイルから選択します。

［コンテナーなし］：項目は視覚的なコンテナーなしで表示され、ミニマルで洗練された見た目になります。カードフォームは、フォーム全体のデザインにより自然に統合され、なめらかにつながって表示されます。
［コンテナーあり］：各項目の周囲にコンテナーが配置され、フォームの背景と項目の間に明確な視覚的境界ができます。カードフォームは、より構造化され整理された見た目になります。

コンテナーを選択すると、さらに次の内容をカスタマイズできます。

［枠線の形状］：コンテナーの枠線の形状（四角、やや丸み、ピル型）を選択します。
［枠線］：コンテナーの枠線の色を設定します。
［背景］：コンテナーの背景色を選択します。
［影］：コンテナーの背後に適用する影の色を選択します。
［影の広がり］：コンテナーの影がどの程度広がるかを調整します。

［方向］

ユーザーがカード間を水平方向（左から右）に移動するか、垂直方向（上から下）に移動するかを選択します。

［水平ナビゲーション］：水平カードナビゲーションでは、ユーザーはカード間を左から右に移動します。
利点：

項目の順序が明確になります。
直線的な流れでコンテンツを表示する場合に適しています。
重要度が同じコンテンツに適しています。

［垂直ナビゲーション］：垂直カードナビゲーションでは、ユーザーはカード間を上から下に移動します。
利点：

長いコンテンツや長さが変動するコンテンツに適しています。
重要度が異なるコンテンツに適しています。

メモ：［ナビゲーション方向］が垂直に設定されている場合、［ナビゲーションスタイル］、［遷移効果］、［フッター］は非表示になり、カスタマイズできません。

スタイル

ナビゲーション方向に水平を選択した場合、カードフォーム上でナビゲーションボタンをどの位置に表示するかを決めるため、2種類のナビゲーションスタイルから選択します。

［項目の直下］：カードフォームの各ページで、ナビゲーションボタンがフォーム項目の直下に配置されます。このオプションでは、関連する項目の近くにボタンを配置でき、よりコンパクトなレイアウトになります。回答者はフォームの下部までスクロールしなくても次または前のページに簡単に移動できるため、スムーズなユーザー体験を提供できます。
［フッター］：ナビゲーションボタンは、各ページ下部のフッターに別途配置されます。このレイアウトでは、フォーム項目とナビゲーションボタンの間に明確な視覚的区切りを設けることができます。

遷移効果

カードフォームの遷移効果では、ページ間を移動する際に滑らかで魅力的なアニメーションを追加し、インタラクティブ性と見た目の魅力を高めます。カード間を移動するときに再生する遷移／アニメーション効果を選択します。

［標準］：特別なアニメーションのない標準の遷移です。
［スライド］：ナビゲーション時にページが横からスライドして表示されます。
［フェードアウト］：カードフォームの次または前のページが表示される前に、フェードアウト効果によってページを徐々に消します。
［回転］：カードフォームのページ間を移動する際に、特定の軸を中心に回転する効果です。
［プッシュバック］：フォームの次または前のカードが表示される前に、カードが奥に押し戻されるように見えるアニメーション効果です。
［タイプライター］：ページの読み込み時に、タイプライター風のアニメーションでテキストが表示されます。
［フリップ］：カードが垂直軸を中心に反転し、反対側に次／前のページを表示できます。

フッターには、ナビゲーションボタンと、保存や送信などの操作が含まれます。

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

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

スタイル

フォームのデザインを向上させるために、ヘッダーセクションの背景と透明度をカスタマイズできます。

［背景］：フォームヘッダーの背景色を選択します。
［不透明度］：ヘッダー背景の透明度を調整します。

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

ブランドイメージに合わせて、フォームタイトル、説明、ロゴの表示をカスタマイズできます。

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

間隔

ヘッダーセクション内側の横方向と縦方向の余白をカスタマイズします。

［内側の横方向の余白］：フォームヘッダーの左右端からヘッダーの内容までの余白を調整します。
［内側の縦方向の余白］：フォームヘッダーの上下方向の余白を調整します。

下部の枠線

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

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

影

ヘッダーコンテナーに影の効果を付けます。

［色］：ヘッダーの下に適用される影の色を設定します。
［広がり］：スライダーをドラッグして、影の効果の強さを調整します。

項目

こちらでは、フォームの項目とエラーメッセージのスタイルをカスタマイズできます。

項目

項目セクションでは、項目ラベルや説明の色とスタイル、テキストの配置を選択できます。

［ラベル］：項目ラベルのフォントスタイル（太字／斜体）と色を選択します。
［説明］：項目に関連付けられた説明文のフォントスタイルと色を選択します。
［テキストの配置］：項目ラベルのテキストの位置（左揃えまたは中央揃え）を設定します。

入力

入力セクションでは、項目の入力ボックスの枠線スタイルと色を選択できます。

［値］：ユーザーが項目に入力するテキストの色を選択します。
［枠線の形状］：項目の枠線スタイル（四角、やや角丸、ピル型、下線）を選択します。
［枠線］：項目の枠線の色をカスタマイズします。
［背景］：入力エリアの背景色を設定します。
［不透明度］：入力背景の透明度を調整します。

［入力値］、［枠線］、［背景］で選択した色は、評価、スライダー、選択式項目、ホバーテキスト項目のプロパティを含むすべての項目に適用されます。

ピッカー

ピッカー要素の背景色と、ピッカー要素で選択された値の色をカスタマイズできます。

［背景］：ピッカー要素の背景色を設定します。
［選択］：ピッカーで選択された値を強調表示する色を選択します。

ピッカー要素には次のものがあります。

名前-敬称
住所-国
電話番号-国番号
ドロップダウン
複数選択
時間項目
日付項目のピッカー
日時項目のピッカー
マトリックス選択-ドロップダウン
項目ペイン（質問間を移動するため）
Zoho CRM 項目
ホバーテキスト

ピッカーの背景、選択色、入力値の色には、互いに調和する色を使用することをお勧めします。

エラーメッセージ

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

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

名前、住所などの項目要素を含むフォーム項目がある場合は、［入力枠線］と［エラーメッセージの背景］の色が異なることを確認してください。同じ色を使用すると、エラーのある項目要素の枠線と他の項目要素の枠線を視覚的に区別できなくなります。

進捗バー

進捗バーには、回答者がフォームに入力する際の質問の進捗状況が表示されます。進捗バーで完了済みと未完了の質問の色をカスタマイズできます。

［標準背景］：進捗バーの未完了部分の色を設定します。
［完了済み背景］：進捗バーの完了済み部分の色を設定します。

特殊項目

このセクションでは、フォームに追加されている場合、評価、マトリックス選択、はい／いいえなどの特殊項目をカスタマイズできます。

評価

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

マトリックス選択

フォームにマトリックス選択項目がある場合、適切な表スタイルを選択し、マトリックス選択項目のヘッダーにカードフォームのテーマと調和する色を選択できます。これにより、フォーム全体に統一感があり、見栄えのよい外観を保てます。

はい／いいえ

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

［ラベル1の背景］：ラベル1の背景色を設定します。3つのスタイルすべてに適用されます。
［ラベル1のテキスト］：デフォルトスタイル（トグル）でのラベル1のテキスト色、およびスタイル2と3（いいね／よくないね、チェックマーク／×）でのアイコン色を設定します。
［ラベル2の背景］：ラベル2の背景色を設定します。3つのスタイルすべてに適用されます。
［ラベル2のテキスト］：デフォルトスタイル（トグル）でのラベル2のテキスト色、およびスタイル2と3（いいね／よくないね、チェックマーク／×）でのアイコン色を設定します。
［枠線］：はい／いいえ項目の枠線の色を定義します。すべてのスタイルに適用されます。