操作ガイド
予約フォームデザインをカスタマイズする
Ameliaのサイトページの予約フォームと入力フォームのデザインは、高度なカラーとスタイルの設定に依存しています。予約フォームのデザインを段階的にカスタマイズすることで、企業ブランディング、カラースタイル、WordPressテーマに合わせてAmeliaを調整できます。
カスタマイズ セクションにアクセスするには、WordPress メニューの「Amelia」＞「カスタマイズ」からアクセスします。
すべての新しいフォーム (ステップバイステップ予約フォーム 2.0、カタログ予約フォーム 2.0、イベントリスト予約フォーム 2.0、イベントカレンダー予約フォーム、お客様マイページ 2.0、スタッフマイページ 2.0) は、ステップバイステップ予約フォームの機能に基づいているため、最初にそれを確認してください。
読みたいところをタップ
ステップバイステップ予約フォーム 2.0
フォーム名の下にある「次へ進む」ボタンをクリックして「ステップバイステップ予約フォーム 2.0」を選択し、新しいカスタマイズセクションにアクセスします。
フォームをカスタマイズするために必要なものはすべて、右側のメニューにあります。
メニューは3つの部分に分かれています。
- 設定（グローバルフォントと色を設定する）
- セクション（現在は、サイドバーの表示とラベルのみを設定できます）
- ステップ (色、ラベル、フィールドの順序、翻訳、一部のフィールドが必須かどうかを個別に構成できます)。
一部の要素については、サイトページに表示するかどうかを選択できます。また、「場所」や「スタッフ」などの一部の項目については、予約プロセスで必須にするかどうかを選択できます。すべての変更はリアルタイムで反映されるため、変更を加えるとすぐにプレビューに表示されます。
各ステップのサイドメニューの右下隅で色の設定ができ、選択したステップのどのセクションにどのグローバルカラーが適用されるかを確認できます。例えば、「サービス」ステップでは以下のようになります。
ステップバイステップ予約フォームのレイアウトの選択
フォームプレビューの上には、ステップバイステップ予約フォームの 2 つのレイアウトを切り替えるオプションがあります。
- リストレイアウト (デフォルト):サービス、スタッフ、場所がすべて 1 つの手順で選択されます。
- ステップのレイアウト:最初のステップは 3 つの個別の画面に分かれています (サービスの選択/スタッフの選択/場所の選択)。
これにより、お客様の予約プロセスにおける柔軟性が向上します。
グローバル設定とフォームの色
カスタマイズ セクションのグローバル設定では、フォームで使用するフォント (デフォルトのフォントのいずれかを選択するか、独自のカスタム フォントを使用できます) を選択したり、フォーム全体に適用される色を変更したりできます。
利用可能なフォント:
- Roboto
- Lato
- Merriweather
- Montserrat
- Mulish
- Nunito
- Asap Condensed
- Open Sans
- Barlow
- Oswald
- Bitter
- Poppins
- Carme
カスタムフォントの設定
前述のように、Google Fonts の読み込みがお住まいの国の GDPR ポリシーに違反する場合は、フォントをダウンロードしてローカルに読み込むことができます。
まず、オンラインで使いたいフォントを探します。例えば、 Dafontを使って「Freshman」フォントをダウンロードします。.ttfファイルはローカルに保存する必要があるので、/wp-content/uploads/fonts/フォルダに追加し、フォントのURLを貼り付けます。
これにより、Amelia は Google のサーバーではなくローカルフォルダからフォントを読み込み 、フォームはフォントを正しく取得して次のように表示します。
色
ここでは、フォーム内のプライマリと状態の色、サイドバー、内容、入力項目、ドロップダウン、カレンダー、ボタンを設定できます。
前述したように、手順を進めていくときに一部の色が気に入らない場合は、サイド メニューの右下にある [色の変更] ボタンをクリックしてください。
プライマリと状態の色
このメニューは、フォーム全体に表示される「プライマリカラー」、「成功」、「警告」、「エラー」の色で構成されています。
このステップでは、「プライマリカラー」によって、サイドバーの現在のステップ サークル、「サービス」ドロップダウンをクリックしたときにマウスを移動しているカテゴリ、サービスの価格の色、および「スタッフ」ドロップダウンの各スタッフの価格の色が決まります (サービスの価格はスタッフごとに異なる場合があることに注意してください)。
「成功」の色 は、スタッフのサムネイルの色を設定します（スタッフにプロフィール写真がない場合は、その写真が「スタッフ」ドロップダウンに表示されます）。
「エラー」の色(このステップ) は、必須フィールドのアスタリスク ( * ) と、お客様が必須フィールド (この例ではサービス) を選択せずに続行しようとした場合に表示される警告に使用されます。
「プライマリカラーと状態カラー」セクションのデフォルトの色は 次のとおりです。
- プライマリ: rgba(18, 70, 214, 1)
- 成功: rgba(1, 151, 25, 1)
- 警告: rgba(204, 162, 12, 1)
- エラー: rgba(180, 25, 15, 1)
サイドバーと内容の色
「 サイドバー」と 「内容」の色はごく基本的なものです。ここでは、サイドバーとメインコンテンツの背景色、そしてサイドバー、メインコンテンツ、そして見出しテキスト内のテキスト色を設定します。
サイドバーステップの背景色は、 サイドバーの背景色の色合いになることに注意してください。
「サイドバー」と「内容」セクションのデフォルトの色は 次のとおりです。
- サイドバーの背景: rgba(23, 41, 90, 1)
- サイドバーテキスト: rgba(255, 255, 255, 1)
- 内容の背景: rgba(255, 255, 255, 1)
- 内容の見出しテキスト: rgba(51, 67, 76, 1)
- 内容のテキスト: rgba(26, 44, 55, 1)
入力項目の色
これにより、ドロップダウンの色、境界線の色、プレースホルダーのテキストの色、および選択した入力の色を設定します。
「入力項目」セクションのデフォルトの色は 次のとおりです。
- 背景: rgba(255, 255, 255, 1)
- 境界線: rgba(209, 213, 215, 1)
- テキスト: rgba(26, 44, 55, 1)
- プレースホルダー: rgba(128, 138, 144, 1)
ドロップダウンの色
このセクションでは、すべてのドロップダウン選択の背景、境界線、およびテキストの色を設定できます。
「ドロップダウン」セクションのデフォルトの色は 次のとおりです。
- 背景: rgba(255, 255, 255, 1)
- 境界線: rgba(255, 255, 255, 1)
- テキスト: rgba(14, 25, 32, 1)
カレンダーの色
最初のステップではカレンダーを表示できないため、「グローバル設定」の「色」セクションを離れ、「ステップ」に移動します（「日付と時刻」ステップにアクセスします）。
「日付と時間を選択」 ステップのデフォルトビューには 、カレンダーとこのステップで利用可能なオプションが表示されます。下のスクリーンショットでは、「プライマリと状態の色」の「成功」の色がサイドバーの円の背景に適用されており、このステップのすべての選択と入力が満たされていることを示しています。
これを有効にするには、「日付と時間を選択」 ステップにアクセスし、「オプション」サブメニューをクリックします。
前述のように、右側のメニューの右下で色設定にアクセスし、現在のステップ (日付と時間) に適用される色を確認できます。
「色を変更」ボタンをクリックすると、基本設定と同じメニューが開きます。ここで 「カレンダー」セクションに移動し、カレンダーの色を設定できます。
「カレンダー」ステップの色を変更すると、カレンダーセルの色を変更できます (これらの色はカレンダーと時間枠の両方に適用されるため、使用可能な時間スロットは「カスタマイズ」セクションのプレビューには表示されません)。
- 初期セルは 、使用可能なセルの背景色と境界線の色です。この色は、カレンダーの上にある「現在のタイムゾーン」フィールドにも適用されます。
- セルテキストの初期化では、使用可能な日付と「現在のタイム ゾーン」フィールドのテキストの色を設定します。
- 選択されたセルの背景は、選択されたセルの背景を定義します。
- 選択したセルのテキストは、 選択したセルのテキストの色を定義します。
- セル無効の背景は、利用できない日付 (休日、満席の日) に適用されます。
- セルの無効なテキストは、無効なセル内のテキストの色を設定します。
「カレンダー」セクションのデフォルトの色は 次のとおりです。
- 初期セル: rgba(38, 92, 242, 1)
- 初期セルテキスト: rgba(18, 70, 214, 1)
- 選択されたセルの背景: rgba(18, 70, 214, 1)
- 選択されたセルのテキスト: rgba(255, 255, 255, 1)
- セル無効背景: rgba(180, 25, 15, 0.05)
- セル無効テキスト: rgba(140, 149, 154, 1)
ボタンの色
「ボタンの色」の機能を確認するには、右側のサイドメニューのメインメニューに戻り、 「サービス」ステップにアクセスします。
ボタンの色を適切に設定するには、 「サービス」ステップでサブステップを1つ選択します。この例では、 「一緒に参加する人はいますか？」のサブステップを選択しました。
フォームのプレビューで「一緒に参加する人はいますか？」セクションが自動的に展開され、オプション、ラベル、色を設定できます。各ステップの色は、 右側のサイドメニューの右下にある「色を変更」ボタンをクリックすることで変更できます。
色の設定にアクセスしたら、 「ボタン」 セクションに移動してください。そこで、以下の色を設定できます。
- プライマリ背景は、すべてのプライマリ ボタン (すべてのステップの [続行] ボタンと [はい] ボタン) に適用されます。
- プライマリテキストは、プライマリボタン内のテキストの色を構成します。
- セカンダリ背景は、すべてのセカンダリ ボタン (すべてのステップの「いいえ」ボタン) の背景色を変更します。
- セカンダリテキストはセカンダリ ボタンのテキストに適用されます。
セカンダリボタンの色を変更し、背景色とテキスト色が切り替わる理由を理解するには 、1 つ前の手順に戻る必要があります。
そこで、「オプション」をクリックします。
ここでは、セカンダリーボタンの色が元に戻っている理由がわかります。ボタンの種類は デフォルトで「テキスト」に設定されています。
セカンダリボタンの色を前の手順の背景とテキストの色に適用するには、ボタンのタイプを「塗りつぶし」 に変更すると、前の手順の色が表示されます。
ボタンの 「プレーン」スタイル では、透明な背景のボタンが表示されます (「メインコンテンツの背景」は「プレーン」ボタンの背景になり、ボタンの「セカンダリ背景」の色は、セカンダリボタンの境界線とテキストに適用されます)。
「ボタン」セクションのデフォルトの色は 次のとおりです。
- プライマリ背景: rgba(38, 92, 242, 1)
- プライマリテキスト: rgba(255, 255, 255, 1)
- 二次背景: rgba(26, 44, 55, 1)
- セカンダリテキスト: rgba(255, 255, 255, 1)
「プライマリと状態の色」セクションの「警告」カラーは、皆様のおかげです 。警告カラーを確認するには 、右側のサイドメニューのメイン画面にアクセスし、「繰り返し予約の内容」セクションにアクセスしてください。
右下の 「色を変更」ボタンから色を変更できます。ここでは、お客様の注意が必要なメッセージに警告色が適用されていることがわかります。
既にお気づきのとおり、フォーム内の色は様々な場所に適用されます。ドキュメントの内容に迷うことのないよう、適用した色を確認できる例をいくつかご紹介します。ぜひフォームを操作して、複数のステップでどの色がどこに適用されるかをご確認ください。
セクション
セクションのカスタマイズ設定では、予約フォームの左側のサイドバーを非表示にしたり、見出し（「お問い合わせ」）を非表示にしたり、会社の電話番号を非表示にしたり、会社のメールを非表示にしたりできます（どちらも「設定」＞「会社」で設定できます）。
ラベル セクションにアクセスすると、「+さらに見る」、「お問い合わせ」、「サイドバー表示・非表示」のラベルを変更することもできます。
「さらに見る」の表示は、3 件を超える予約が入った後にお客様がコースを購入した場合にのみ表示されます。
手順とオプション
ステップバイステップ予約フォームの各ステップは、「カスタマイズ」セクションで個別に設定できます。利用可能なオプションは以下のとおりです。
- 「サービス」 と 「お客様の情報」の ステップ内での順序の変更
- フィールドを必須にするかしないかを設定する
- ボタンの種類の選択
- すべてのステップのデフォルトラベルを変更する
- サブステップにアクセスし、そのオプションとラベルを構成する（該当する場合）
各ステップ内のオプションは類似しているため、各ステップについては説明しません。
サービスステップ
「サービス」ステップにアクセスすると、「注文」、「オプション」、「ラベル」設定が表示され、その下には「一緒に参加する人はいますか？」と「コース」というサブステップにアクセスできます
「順序」セクションでは、フィールドの順序を変更できます (デフォルトでは、「サービス」ドロップダウンが最初のフィールド、「スタッフ」が 2 番目のフィールド、「場所」が 3 番目のフィールドです)。
簡単なドラッグ&ドロップ機能を使用してフィールドの順序を変更できます。
「オプション」セクション では、「次へ進む」ボタンのスタイルを変更したり、「スタッフ」と「場所」のドロップダウンを非表示にしたり、必須にしたりできます。
フィールドが必須に設定されている場合、それを非表示にすることはできません。
各ステップの「ラベル」設定では 、そのステップのすべてのデフォルトラベルを変更できるほか、Amelia に追加した他の言語用にそれらのラベルを翻訳することもできます。
提供される言語ラベルは Amelia の基本設定から取得されるため、日本語のみを追加した場合、各ラベルにアクセスしたときにその言語のみが表示されます。
次のスクリーンショットは、新しいカスタマイズ セクション全体でラベルの編集がどのように機能するかを示しています。
各セクションのタイトルはラベルフィールドの上に設定されます。以下の例では、「サービス選択」が変更するラベルのタイトルです。「デフォルトラベル」入力ボックスの横のフィールドが空の場合、ラベルのタイトルがラベルとして適用されます（この場合は「サービス選択」）。
ここでいくつかラベルを変更して、どのように適用されるか確認してみましょう。ラベルを変更すると、左側のプレビューウィンドウでリアルタイムに変更内容を確認できます。
コースのカスタマイズ
コースフォームの外観、ラベル、およびオプションを変更するには、まずフォームプレビューの左上にある手順を「サービス」から「コース」に 変更する必要があります。
右側のメニューでは、手順がサービス手順をカスタマイズするときの手順とは少し異なることがわかります。
サービスを選択した後、選択したサービスが含まれているコースがあることがフォームに表示されます。
そのメッセージのラベルを変更するには、フォーム プレビューの上にある「コース」フォームにアクセスし、「コース」＞「ステップ」＞「ラベル」＞ 「サブステップタイトル」にアクセスします。
フローはまったく同じです。サイドメニューに沿って、色、オプション、ボタンなどのセクションの順序を調整できます。各セクションを確認して、コース購入フォームのグローバルカラーが希望どおりであるかどうかを確認します。
カタログ予約フォーム 2.0
このページの冒頭で述べたように、すべての新しいフォームはステップバイステップ予約フォームに基づいているため、このセクションでは、日時の選択ポップアップが開く前にカタログ予約フォームを構成できます 。
日付/時刻 (カレンダー) が開くと、ステップバイステップ2.0 のカスタマイズ オプションが適用されます。
ステップバイステップ予約フォーム 2.0 の手順と同様に、カタログ予約フォームではフォントや色を編集したり、カレンダーが表示される前に各ステップを構成したりできます。
最初に表示される画面は次のようになります。
「サービスとコースの概要」では、このウィンドウに表示されるオプションを有効または無効にしたり、ボタンの種類を選択したり、このステップのラベルを変更したりできます。
「サービス詳細」または「コース詳細」は、お客様がサービスをクリックするとそのサービスの詳細が表示される画面です。このステップを編集することで、オプション（表示内容やボタンの外観）を変更したり、ステップのラベルを変更したりできます。
カタログ予約フォーム 2.0カスタマイズ セクションの最後のステップである 「予約フォーム」では、ステップバイステップの予約フォーム 2.0カスタマイズ セクションにリダイレクトされます 。
イベントリスト予約フォーム 2.0
「イベントリスト予約フォーム 2.0」のカスタマイズ セクションでは、イベントリストの手順を変更できます。
「イベントリスト」ステップでは 、最初の画面（上のスクリーンショット）で調整できるオプションとラベルが用意されています。フィルター、ステップのタイトル（利用可能なイベント数）、イベント画像、場所、定員、価格、ステータスを非表示にできます。また、このステップに表示されるすべてのボタンの種類を変更することもできます。
ラベル オプションを使用すると、リストに表示されるデフォルトのラベルを変更できます。
「イベント情報」は、お客様が「さらに詳しく」ボタンをクリックしたときにポップアップで開くものです。
オプションセクションでは 、ギャラリー、場所、予約枠、価格、ステータス、説明などを非表示にすることができます。また、ボタンのスタイルも設定できます。
「ラベル」セクションでは 、このステップに表示されるラベルを変更できます。
フォーム内の他の手順も同様なので、全てを説明することはしません。この記事で既にかなり詳しく説明しています。
カスタマイズ セクションのすべての手順を実行し、非表示、変更、並べ替える内容を構成するだけです。
お客様マイページ 2.0
ログイン
「お客様マイページ 2.0」フォームにアクセスすると、まずログイン画面のプレビューが表示されます。その上のドロップダウンメニューで、マイページのプレビューに切り替えることができます。
「ログイン」プレビューでは、次の手順を変更できます。
ログインでは、「ログイン」ボタンの種類と、このステップで表示されるラベルを変更できます。
アクセスリンクでは、「ログイン」ボタンの種類と、このステップで表示されるラベルを変更できます。
アクセスリンク成功では、 アクセス リンクがお客様に正常に送信されたときにページに表示されるラベルのみを編集できます。
「新規パスワードの設定」では、「パスワードの設定」ボタンのタイプを設定し、このステップのラベルを変更できます。
マイページ
「ログイン」プレビューの上にあるドロップダウン メニューで「マイページ」に切り替えると、カスタマイズ用の実際のお客様マイページが表示されます。
お客様マイページに含まれる手順により、マイページ内に次のページが提供されます。
プロフィール：フィールドの順序、このステップに含まれるラベルの変更、特定のフィールドの必須設定（必須でない場合は非表示）、「プロフィールを削除」、「変更を保存」、「パスワードを変更」ボタンのボタンタイプを選択できます。また、お客様がプロフィールを削除しようとすると、「プロフィールを削除」ポップアップサブステップが表示されます。このサブステップでは、ポップアップに表示されるボタンタイプとラベルを変更できます。
予約：マイページ内に別のページが開き、お客様が予約した予約をプレビューできます。デフォルトの「オプション」と「ラベル」オプションに加え、予約のキャンセルと変更のステップポップアップでは、ポップアップを変更するためのオプション（ボタンの種類やラベルの変更、カレンダーのタイムゾーンや「終了時間」の除外など）が提供されます。
イベント：「予約」ステップと同様に、「イベント」ページ（マイページ内）では、お客様が予約したイベントを確認できます。ここでは、オプション、ラベル、および「イベントをキャンセル」ポップアップを変更できます。
コース：「オプション」と「ラベル」を使用すると、このマイページから特定のフィールド (タイムゾーンと特定のフィルター) を非表示にしたり、このページの設定済みラベルを変更したりできます。
コース予約：コースで予約済みまたは予約可能な特定のコース関連の予約をカスタマイズできます。「オプション」と「ラベル」セクションでは、ボタンの種類を変更したり、スタッフと料金を非表示にしたり、このステップのラベルを変更したりできます。また、コース内で追加の予約をするためのポップアップや、コースのキャンセルを確認するためのポップアップも変更できます。
