*イベントリスト予約フォームのカスタマイズ

イベントリスト予約フォームのカスタマイズ方法

イベントリスト形式は、カレンダーの代わりにイベントを垂直方向のリストで表示します。これは、お客様が今後の日程やフィルタリングされた結果をより素早く確認したい場合に便利です。

お客様がリストからイベントを選択すると、予約フローは、イベントカレンダー形式と同じステップ（イベント詳細画面、同行者ポップアップ、お客様情報、支払い、最終確認）で進行します。

イベントリストは他のフォームと同じデザインシステムを使用しているため、「基本設定」タブで全体の外観を制御し、「詳細設定」タブで各ステップを微調整できます。

イベントリストのカスタマイズにはどこからアクセスしますか？

Amelia → カスタマイズ を開き、利用可能なフォームタイプから「イベントリスト」を選択します。右側にイベントリストのライブプレビューが表示され、左側には「基本設定」タブと「詳細設定」タブが表示されます。

ステップのドロップダウンを使用して、「イベントリスト」、「イベント情報」、「同行者ポップアップ」、「お客様情報」、「支払い」、「完了画面」を切り替えることができます。イベント情報画面とその後のステップはイベントカレンダー形式と同じように機能するため、カレンダーレイアウトをすでに設定している場合は、それらのステップのスタイリング変更も同様に行えます。

「基本設定」タブでは何を構成できますか？

「基本設定」タブでは、色、ボタン、フォント、レイアウト、サイドバーの表示非表示など、イベントリストフォーム全体のグローバルなスタイリングを定義します。これらの設定はイベントリストのフロー内のすべてのステップに適用されるため、ウェブサイトや予約日時の変更フォームと全体のデザインを素早く一致させることができます。

メインカラーとアクセントカラー、ボタンの外観、タイポグラフィを調整したり、追加のナビゲーション用にサイドバーを表示するか、よりコンパクトなレイアウトのために非表示にするかを決定したりできます。このタブは、ステップごとの詳細な設定を行う前に、核となる外観を設定するのに最適な場所です。

「詳細設定」タブでは何を構成できますか？

「詳細設定」タブでは、イベントリストのフローにおける各ステップをより詳細にカスタマイズできます。選択したステップに対して、「オプション」、「ラベル」、「カラー」の設定が用意されています。

「オプション」では項目の動作や表示要素を制御し、「ラベル」ではタイトル、サブタイトル、ボタンのテキストを変更できます。「カラー」では背景、境界線、テキスト、ハイライトの色を微調整できます。

「イベントリスト」ステップには、イベント行の外観、ホバー効果、バッジなど、リスト項目に特有のコントロールが含まれています。一方で、「イベント情報」、「お客様情報」、「支払い」、「完了画面」の各ステップは、イベントカレンダーや予約日時の変更フォームと同様の構造を共有しています。

イベントリストフォームではどのようなステップが利用可能ですか？

• イベントリスト – 各イベントが日付、時間、タイトル、主要な詳細とともに、行またはカードとして表示されるメインのイベントリストです。
• イベント情報 – イベントの詳細表示画面です。イベントカレンダー形式と構造が同一で、全文の説明、スケジュール、スタッフ、場所が表示されます。
• 同行者ポップアップ – イベントが複数の参加者をサポートしている場合に使用され、数量の制御と参加者の選択が含まれます。
• お客様情報 – 予約日時の変更フォームと同じ項目とレイアウトロジックを使用して、参加者の詳細を収集します。
• 支払い – 支払い方法、価格の内訳、確認要素が含まれるチェックアウトステップです。
• 完了画面 – 予約が正常に完了したときに表示される最終確認ステップです。

これらのステップのデザインは、他のフォームの動作に影響を与えることなく、「詳細設定」タブでステップごとに調整できます。

イベントリストフォームをカスタマイズする際の注意点は？

• イベント行の色とホバー状態が、現在どのイベントが選択されているか、またはクリック可能であるかを明確に示すようにしてください。
• 「詳細設定」タブの「ラベル」を使用して、リスト内のイベントタイトル、カテゴリーラベル、コールトゥアクションボタンを分かりやすくしてください。
• グローバルな色とフォントをイベントカレンダーや予約日時の変更フォームと一致させることで、すべての予約フローで統一感のある体験を提供できます。
• 長いイベントタイトルや説明が間隔や改行に影響を与える可能性があるため、モバイル端末で「イベントリスト」と「イベント情報」のステップをテストしてください。
• 「同行者ポップアップ」を確認し、デスクトップとモバイルの両方のデバイスで数量セレクターが使いやすいことを確認してください。
• デザインの変更を保存した後は、更新されたリストのスタイルやラベルが訪問者に正しく表示されるよう、サイトのキャッシュをクリアしてください。