JetAppointmentとJetEngineで相談予約サイトを作る考え方

相談予約サイトを作るとき、最初に決めるべきなのは「予約フォームをどこに置くか」ではありません。先に整理したいのは、誰が、どの相談メニューを、何分枠で、どの曜日に受けるのかというデータの関係です。

Elementorで固定ページを作るだけなら、「初回相談」「税務相談」「キャリア相談」のようなページはすぐ作れます。ただ、担当者ごとに対応メニューが違う、予約できる曜日が違う、空き枠が埋まったら選べないようにしたい、予約後にメールを送りたい、となると、静的なページの延長では管理が苦しくなります。

そこでJetEngineで担当者と相談メニューのデータを作り、JetAppointmentで時間枠の予約を扱う構成にします。この記事では、士業事務所やサロン、コーチング、個別相談サービスを例に、担当者・サービス・予約枠を分けて考える方法を解説します。

Crocoblock公式サイトを見てみる

この記事で作る相談予約の形

• 担当者データと相談メニューデータをJetEngineで作る
• 担当者が対応できる相談メニューを関連づける
• Elementor側では担当者カードと相談メニュー詳細を表示する
• JetAppointmentで予約枠、所要時間、休業日、予約不可枠を扱う
• JetFormBuilderで名前、メール、希望内容を受け取る

まず何を作るのか

今回の例では、個別相談の予約サイトを作ります。サイト訪問者は相談メニューを選び、担当者を選び、空いている日時を選んで申し込みます。たとえば、次のようなサービスです。

• 初回相談 30分
• 実務相談 60分
• オンライン継続相談 90分

担当者は2名いる想定にします。担当者Aは初回相談と実務相談に対応し、担当者Bは実務相談と継続相談に対応する。こういう関係が出てくると、単純な「フォームを1つ置く」だけでは足りません。サービス、担当者、予約枠の関係をデータとして持たせる必要があります。

JetAppointmentの公式ページでは、サービス、担当者、時間枠、カレンダー、支払い、Google Calendarやオンライン会議連携などが紹介されています。ただ、最初から全部を使う必要はありません。まずは相談メニュー、担当者、予約枠、通知までを小さく作るのが現実的です。

JetEngineで持たせるデータ

JetEngineでは、相談メニューと担当者を別々のデータの箱（CPT）として作ります。相談メニューだけで予約を受けるなら担当者CPTなしでも構成できますが、士業やサロンのように「誰が担当するか」が重要なサイトでは、担当者もデータ化しておいた方が運用しやすくなります。

相談メニューには、次のような入力項目を持たせます。

担当者には、専門分野、対応曜日、プロフィール写真、表示順、予約受付中かどうかを持たせます。対応曜日は実際の予約枠とは別に、一覧や説明文で「この担当者は水曜・金曜が中心です」と伝えるための項目です。予約できる正確な枠はJetAppointment側のスケジュールで管理します。

担当者と相談メニューの関係は、JetEngineの関連づけ（Relations）で考えると分かりやすいです。方向としては、相談メニューから担当者へ、または担当者から相談メニューへつなげます。実務では「この相談メニューを誰が担当できるか」を管理したいことが多いので、相談メニューを親、担当者を子として考えるか、担当者を親、相談メニューを子として考えるかを、管理画面で入力しやすい方に合わせて決めます。

どちらが正解というより、運用者が更新しやすい方を選ぶのが大事です。担当者ごとに対応メニューを頻繁に変えるなら担当者側から登録する。サービスごとに担当者を見直す運用ならサービス側から登録する。ここを曖昧にすると、予約枠より先に管理画面で迷います。

Elementor側ではどう表示するのか

Elementor側では、相談メニュー一覧、相談メニュー詳細、担当者一覧、担当者詳細を作ります。最初から4ページ全部を作り込まなくても構いません。まずは相談メニュー詳細に予約フォームを置く構成が分かりやすいです。

相談メニュー詳細では、サービス名、所要時間、料金、対象者、担当できる人、予約フォームを表示します。担当者カードには、写真、名前、専門分野、短い紹介文、予約できる曜日の目安を出します。JetEngineの一覧テンプレート（Listing Item）を使えば、担当者が増えても同じカードデザインで自動表示できます。

ここで表示条件（Dynamic Visibility）を使うと、受付停止中の担当者を隠したり、オンライン対応のサービスだけ「Zoom相談」と表示したりできます。ただし、表示条件は便利なぶん、作りすぎると後から読めなくなります。最初は「受付中なら予約フォームを表示」「受付停止中なら案内文を表示」くらいに抑えると、トラブル時に原因を追いやすいです。

予約フォームの置き場所も重要です。相談メニュー詳細に置く場合は、フォームが現在の相談メニューIDを受け取れるようにします。担当者詳細に置く場合は、現在の担当者IDを受け取り、サービスを選ばせる形になります。公式ドキュメントでも、固定ページに置くフォーム、サービス詳細に置くフォーム、担当者詳細に置くフォームで設定が変わることが説明されています。

JetAppointmentで決める予約ルール

JetAppointmentでは、サービスと担当者、予約枠、所要時間、休業日、時間帯、予約不可日などを扱います。公式ページでは、固定枠、時間範囲、バッファ時間、休業日、繰り返し予約、WooCommerce支払い、Google Calendar同期、ZoomやGoogle Meet連携なども紹介されています。

ただ、相談予約サイトを初めて作るなら、最初から外部連携まで入れずに、次のような基本設定から始めるのが分かりやすいです。

重要なのは、予約枠を「サイトの見た目」ではなく「業務の約束」として扱うことです。たとえば、30分相談のあとに10分の準備時間が必要なら、バッファ時間を考える必要があります。担当者Aと担当者Bが同じ相談メニューを担当する場合、同じ時間枠を共有するのか、担当者ごとに別枠として扱うのかも決めます。

この部分を曖昧にしたまま予約フォームを公開すると、ダブルブッキング、担当者への連絡漏れ、予約変更時の混乱が起きやすくなります。JetAppointmentの設定は便利ですが、業務ルールそのものを自動で考えてくれるわけではありません。

JetFormBuilderで受け取る入力項目

申し込みフォームでは、予約に必要な情報だけを集めます。名前、メールアドレス、希望内容、相談前のメモくらいから始めるのが安全です。電話番号や住所、詳細な個人情報を入れたくなるかもしれませんが、本当に必要かを先に確認してください。

サービス詳細に置くフォームなら、Hidden Fieldで現在の投稿IDを受け取り、Appointment ProviderフィールドとAppointment Dateフィールドで担当者と日時を選ばせる構成が考えられます。公式ドキュメントでは、JetFormBuilderでAppointment Provider、Appointment Date、Insert Appointmentアクションを設定する流れが紹介されています。

Post Submit Actionsでは、Insert Appointmentを使って予約を登録し、必要に応じてSend Emailで管理者と予約者へ通知します。WooCommerce支払いをつなげる場合は別途決済フローの確認が必要です。支払い、キャンセル、返金、本人確認まで扱うなら、フォーム設定だけで判断せず、運用ルールを先に文章で決めておきましょう。

登録順を間違えると予約フォームで迷いやすい

相談予約の設定は、いきなり完成形を作ろうとすると混乱します。おすすめは、まず相談メニューを1件、担当者を1人だけ作ることです。たとえば「初回相談 30分」と「担当者A」だけを用意します。次に、その担当者が初回相談を担当できるように関連づけ、最後に予約枠を平日10時と14時だけに絞ってテストします。

この小さな構成で、相談メニュー詳細に担当者が出るか、担当者を選ぶと予約日時が出るか、送信後に予約が登録されるかを確認します。最初から担当者5人、メニュー10個、複数曜日、オンラインと対面、決済ありで始めると、どこで設定がずれたのか分かりにくくなります。予約フォームは、データ、担当者、時間枠、通知が全部つながって初めて動くため、検証単位を小さくすることが大事です。

管理画面の命名も地味に重要です。サービス名を「A」「B」のようにしてしまうと、フォーム設定でどれを選んでいるのか分かりません。「初回相談30分」「実務相談60分」のように、実際の運用名に近い名前を使います。担当者も「担当者A」だけでなく、公開名、内部メモ、受付状態を分けておくと、後から人が増えたときに迷いにくくなります。

テスト送信では、実在する相談内容を入れないでください。氏名、メール、相談メモは確認用の仮データにします。通知メールには、必要最低限の情報だけを入れる方が安全です。相談内容をメール本文に長く含めると、転送や共有の管理が難しくなります。予約を受ける便利さと、個人情報を広げすぎない設計はセットで考える必要があります。

運用すると何が楽になるのか

この構成にすると、相談メニューや担当者が増えても、Elementorのページを毎回複製して作り直す必要が減ります。担当者プロフィールは担当者CPT、相談メニューはサービスCPT、予約枠はJetAppointment設定、フォーム入力はJetFormBuilder、という役割分担になります。

運用面では、担当者の受付停止、サービス料金の変更、所要時間の変更、担当者の追加が管理しやすくなります。予約フォームも、サービス詳細テンプレートに置いておけば、相談メニューが増えても同じ流れで予約を受けられます。

一方で、個人情報を扱うため、権限設計は避けて通れません。予約者名、メールアドレス、相談内容は、誰でも見られる場所に出してはいけません。管理者、担当者、外部スタッフの誰が予約情報を確認できるのか、予約内容をメールにどこまで書くのか、保存期間をどうするのかは、サイト制作とは別の運用ルールとして決めてください。

どこから複雑になりすぎるのか

相談予約は、担当者が1人、サービスが2〜3個、予約枠が固定なら比較的考えやすいです。複雑になり始めるのは、担当者ごとに料金が違う、サービスごとに所要時間が変わる、指名料がある、オンラインと対面で場所が変わる、ZoomやGoogle Calendarと同期する、リマインダーを自動で送る、支払いとキャンセルを連動する、という段階です。

JetAppointmentには、WooCommerce支払い、Google Calendar同期、オンライン会議、ワークフロー、リマインダーなどの機能があります。ただし、それらを入れれば予約業務の設計が不要になるわけではありません。特に医療、士業、カウンセリング、個人情報が多い相談では、予約時に集める情報の範囲、メール通知の内容、本人確認、キャンセル規定、免責事項を別途確認する必要があります。

また、予約枠や担当者が増えるほど、管理画面の確認も増えます。担当者が自分の予約だけ見られるようにしたい、顧客がマイページから変更できるようにしたい、会員限定で予約させたい、といった話は一気に会員サイト設計に近づきます。ここから先は、JetEngineのProfile Builderや権限設計、通知フローも絡むため、最初の記事の範囲としては欲張らない方が安全です。

この構成が向いている人、向いていない人

この構成が向いているのは、Elementorでページ制作ができ、相談メニューや担当者を管理画面で更新したい人です。士業、サロン、コーチング、オンライン相談、スクールの個別面談など、時間枠で予約を受けるサイトなら考え方を転用しやすいです。

向いていないのは、複雑な顧客管理、医療レベルの予約管理、大規模なスタッフシフト、外部システムとの厳密な在庫同期、独自決済や返金ルールまで一体で作りたいケースです。WordPressでできる範囲を超えている場合は、専用予約サービスや個別開発を含めて比較した方がいいです。

まとめ

JetAppointmentとJetEngineで相談予約サイトを作るときは、予約フォームからではなく、相談メニュー、担当者、予約枠の関係から考えるのが大事です。JetEngineでサービスCPTと担当者CPTを作り、必要なら関連づけを設定し、Elementorでカードや詳細ページとして表示します。その上でJetAppointmentの予約枠とJetFormBuilderの申し込みフォームを接続します。

最初は、担当者2名、相談メニュー3つ、固定枠、管理者通知、自動返信くらいの小さな構成で十分です。そこからWooCommerce支払い、Google Calendar同期、オンライン会議、リマインダーを足すかどうかを、実際の運用に合わせて判断します。

静的なElementorページから、予約できる動的サイトへ進みたいなら、JetEngineを土台にしてJetAppointmentを組み合わせる考え方はかなり実務的です。ただし、個人情報、権限、通知、キャンセルルールはプラグイン任せにせず、サイトごとに慎重に設計してください。

Crocoblock公式サイトを見てみる