*ステップバイステップ予約フォームのカスタマイズ

ステップバイステップ予約フォームのカスタマイズ方法

ステップバイステップ予約フォームは、Ameliaの主要な予約レイアウトであり、他のすべての予約デザインの基盤となります。これはお客様を予約フローの各段階へと導き、専用のデザインツールを備えているため、色、ラベル、レイアウト、項目の動作を調整できます。

このフォームはコアとなるユーザー体験をコントロールするため、ここで行った変更は、コース予約、イベント予約、およびお客様マイページとスタッフマイページの両方に引き継がれる一貫した外観を確立するのに役立ちます。

例えば、基本設定タブで明るいメインカラーを選択したり、ボタンのスタイリングを更新したりすると、予約フロー全体の外観が即座に刷新されます。

ステップバイステップフォームのカスタマイズにはどこからアクセスできますか？

Amelia → カスタム項目 を開き、利用可能なフォームタイプのリストから「ステップバイステップ」を選択します。カスタマイズ画面の右側にはプレビューが表示され、左側には「基本設定」と「詳細設定」の2つの編集タブがあります。

「ステップ」ドロップダウンを使用して、サービス、エクストラ、日別＆時間、カート、お客様情報、支払いなど、さまざまな予約ステージを切り替えます。変更を保存するとデザインが即座に更新されますが、Webサイトのキャッシュをクリアすることで、新しいスタイルがお客様画面で正しく読み込まれるようになります。

基本設定タブでは何を設定できますか？

基本設定タブには、現在どのステップが選択されているかに関わらず、フォーム全体に適用されるグローバルなデザイン設定が含まれています。全体のカラー、ボタン、フォントを調整でき、これらの変更はすべての予約ステップに自動的に適用されるため、フローの視覚的な一貫性が保たれます。

レイアウトはリスト形式とグリッド形式を切り替えることができ、好みのレイアウトに応じてサイドバーの表示・非表示を切り替えることも可能です。これらの設定は、ステップごとのカスタマイズに進む前に、フォームの全体的な外観を定義するのに最適な場所です。

詳細設定タブでは何を設定できますか？

詳細設定タブでは、予約フロー内の各ステップに対して詳細なコントロールを提供します。基本設定が全体的な外観を定義するのに対し、詳細設定では特定のステップの動作や表示方法を調整できます。

各ステップには、「オプション」「ラベル」「カラー」の3つの構成グループが含まれています。オプションでは、項目の並べ替え、表示要素の切り替え、項目の動作定義が可能です。ラベルでは、そのステップ内で使用されるテキストの名前変更や言い換えができます。

カラーでは、サイドバーエリアの色、コンテンツエリアの色、入力項目の色、および日付選択が含まれるステップのカレンダーのスタイリングなど、より深いコントロールが可能です。

オプションでは各ステップの何を変更できますか？

オプションは、選択したステップ上の項目の機能的な動作をコントロールします。

例えば、サービスステップでは、項目の並べ替え、特定の項目で検索を許可するかどうかの選択、必須項目としてのマーク付け、または非表示設定が可能です。各項目の横にあるアイコンは、その項目が検索をサポートしているか、必須であるか、またはフォーム上に表示されているかを示します。

次へ進むボタンのスタイルもステップごとに選択できるため、予約プロセスの段階に応じて強調レベルを変えたい場合に便利です。

ラベルでは何を編集できますか？

ラベルを使用すると、タイトル、入力項目のラベル、ドロップダウンのラベル、ボタンのテキスト、案内メッセージなど、現在のステップに表示されるあらゆるテキスト要素の名前を変更できます。

これにより、ターゲット層に合わせて予約フローのトーンや分かりやすさを整えることができます。また、他のステップに影響を与えることなく、スタッフの解説ポップアップなどのポップアップ内で使用されるラベルを調整することも可能です。

カラーでは何を調整できますか？

詳細設定タブのカラーは、基本設定タブで設定された全体のカラーを拡張するものです。基本設定のカラーがフォーム全体の主要な外観を定義するのに対し、詳細設定のカラーでは選択したステップの特定のエリアを微調整できます。

サイドバーのカラー、コンテンツエリアのカラー、入力項目のカラー、ドロップダウンのカラー、カレンダーのカラー、およびボタンのカラーを調整できます。これらのステップ固有の調整により、重要なステップを強調したり、複数のインタラクティブな要素を含むフォームの使いやすさを向上させたりすることができます。

ステップバイステップフォームをカスタマイズする際の注意点は何ですか？

• 詳細なステップごとの調整に入る前に、まずは基本設定タブを使用して全体の視覚的スタイルを定義してください。
• 小さな画面ではボタンのサイズや間隔が異なって見えるため、ウィンドウサイズを小さくしてモバイルやタブレットでの表示を確認してください。
• 特定のステップ、特に項目の動作やラベルの編集を完全にコントロールする必要がある場合は、詳細設定オプションを使用してください。
• 項目のアイコンは、その項目が検索に対応しているか、必須か、あるいは表示されているかを示していることを忘れないでください。
• 変更を保存した後は、新しいデザインがすべてのページで正しく読み込まれるよう、Webサイトのキャッシュをクリアしてください。
• カレンダー関連のステップには他のステップにはない追加のカラー設定が含まれているため、個別に確認してください。