MENU

料金プラン

機能一覧

デモ

ご利用の流れ

お役立ちコラム



*カスタマイズ

Ameliaの予約フォームをカスタマイズする方法

Ameliaの「カスタマイズ」セクションでは、各予約フォームやスタッフマイページ、お客様マイページのデザインを調整できるため、お客様画面をブランドカラーやウェブサイトのテーマ、提供したいユーザー体験に合わせることができます。

すべてのフォームには独自のデザイン設定があり、ステップバイステップ予約フォームを支えるのと同じデザインシステムを利用しながら、レイアウト、色、ラベル、視覚的要素を個別に調整できます。

例えば、メインの予約フォームには鮮やかなパレットを使用し、お客様マイページにはよりコンパクトなレイアウトを採用したい場合、他のフォームに影響を与えることなく、Amelia → カスタマイズ から各フォームを個別に設定できます。

カスタマイズ設定にはどこからアクセスできますか?

WordPressメニューの Amelia → カスタマイズ を開くことで、すべてのデザインオプションにアクセスできます。このページには、利用可能なすべてのお客様画面用フォームが個別のカードとして表示されます。いずれかを選択すると専用のエディターが開き、タイポグラフィ、フォームの色、ボタン、間隔、ラベルを調整できます。

各フォームには独自のプレビューが読み込まれるため、変更をリアルタイムで確認できます。デザイン設定を保存した後は、更新されたスタイルがお客様画面に正しく表示されるよう、ウェブサイトのキャッシュをクリアすることをお勧めします。

Ameliaの管理画面インターフェースのライトモードまたはダークモードは、お客様画面のスタイルには影響しません。なぜなら、各フォームはカスタマイズセクションに独自のデザインコントロールを持っているからです。

すべての利用可能なフォームタイプが表示されているAmeliaのカスタマイズセクション

Ameliaの予約フォームでは何をカスタマイズできますか?

すべてのデザイン設定はステップバイステップフォームのレイアウトエンジンに基づいて構築されているため、どのフォームでも予約体験の外観を調整するための同じツールセットを使用できます。

グローバルカラー、アクセントカラー、タイポグラフィ、ボタンスタイル、ステップのタイトル、ラベルを変更でき、各変更をリアルタイムでプレビューできます。

一部のフォームには、そのレイアウトにのみ適用される特定のデザイン要素も含まれています。例えば、繰り返しイベントカレンダーの色や、カタログ予約フォームのカードスタイルなどです。これらの設定により、カスタムCSSを使用することなく、Ameliaをウェブサイトのテーマに合わせることができます。

どのフォームをカスタマイズできますか?

  • ステップバイステップ予約 – 他のすべてのレイアウトのデザイン基盤を定義するコアフォームです。
  • カタログ予約 – カード、カテゴリー、スタッフマイページタイルなどのデザインコントロールを備えた、カードベースのサービス閲覧フォームです。
  • 繰り返しイベントカレンダー予約 – カレンダーの色、アクティブ状態、ハイライトなどのオプションを備えた、カレンダーベースの繰り返しイベント閲覧フォームです。
  • 繰り返しイベントリスト予約 – アイテムの間隔、ラベル、繰り返しイベントバッジなどのコントロールを備えた、リストベースの繰り返しイベントレイアウトです。
  • お客様マイページ – お客様が予約、支払い、コース、プロフィールを管理できるカスタマイズ可能なマイページです。
  • スタッフマイページ – スケジュール、予約、繰り返しイベントを管理するために使用される、スタッフのワークスペース用デザイン設定です。

すべてのフォームは同じデザイン構造を使用しているため、他のフォームに進む前に、ステップバイステップフォームでカラーシステムやレイアウトオプションがどのように機能するかを学ぶのが最善です。

フォームをカスタマイズする際に注意すべきことは何ですか?

  • 異なる背景の上でもすべてのラベルやボタンが読み取れるよう、コントラストの高い色の組み合わせを使用してください。
  • 小さな画面では間隔やボタンのレイアウトが異なって見える場合があるため、モバイルやタブレットのサイズでデザインをテストしてください。
  • 変更を保存した後は、更新されたデザインがお客様画面に正しく読み込まれるよう、キャッシュをクリアしてください。
  • デザインの変更は、手動で再現しない限りフォーム間で引き継がれないため、各フォームタイプを個別に確認してください。
  • カスタマイズ設定でカバーできない高度な調整が必要な場合を除き、カスタムCSSの追加は避けてください。
  • 大幅な変更を加えた後はプレビュー領域をチェックし、テキスト、アイコン、ステップが整列しており、アクセス可能であることを確認してください。