【サロン向け・時間枠予約】WordPressの予約システム「Booking Package」の使い方

サロンやスクールなどを運営していて、Web上で「何時から何時まで」のように予約を受け付けられるようにしたい場合、WordPressを利用しているなら「Booking Package」がおすすめです。

Booking Packageは無料から利用でき、月額660円（税込）の有料版ではStripeやPayPalを使ったオンライン決済にも対応しています。

今回は、WordPressで使える予約システム「Booking Package」を使って、時間枠予約ができる予約カレンダーを作成する方法を解説します。

Booking Packageとは？

Booking Packageは無料から使えて、予約システムが作成できるWordPressプラグインです。

宿泊施設に最適な「日ごと予約」や、ヘアサロンなどにおすすめの「時間枠予約」など、幅広い予約スタイルに対応しているのが特徴です。

また、iframeを使わずにHTML内へ直接要素（フォームやカレンダーなど）が挿入される仕組みのため、同一のWebサイト上で予約手続きを完結でき、デザインもCSSで調整できます。

さらに、有料版（税込660円 / 月）に契約すればオンライン決済（Stripe・PayPal）が利用できるほか、時間枠予約カレンダーではゲストの属性ごとに標準価格を調整したり、有効期限付きでクーポンを発行したりといった、より高度な機能が追加されます。

Booking Packageのインストール方法

Booking PackageはWordPressのダッシュボード上からダウンロードできます。

「プラグイン＞新規プラグインを追加」から「Booking Package」と検索し、出てきたこちらのプラグインをインストール＆有効化します。

Booking Packageが正しくインストール＆有効化できていると、左サイドバー上に「Booking Package」と書かれた項目が追加されます。

Booking Packageを使って時間枠で予約できるカレンダーを作成する方法

Booking Packageを使って時間枠で予約できるカレンダーを作成する流れは以下の通りです。

ここでは、以下のような予約カレンダーを作成しながらBooking Packageの使い方を解説していきます。

STEP. 1：Booking Packageの初期設定

まずは、Booking Packageの初期設定を行いましょう。

ここで設定した内容は、これから新規で作成するカレンダーに初期設定として適用されます。

「Booking Package＞一般設定」をクリックします。

そうすると、複数のタブに分かれた設定画面が表示されます。

設定

設定タブでは、予約カレンダーからフォームが送信された際に通知を受け取るメールアドレスや、送信者名などの設定を行います。

設定項目がたくさんありますが、多くの方にとって編集が必要になる（または編集する可能性がある）項目は以下の通りです。

項目名		説明
一般	サイト名	サイト名を記載します。
	メールアドレス	【受信用のメールアドレス】 受信用のメールアドレスを指定します。 【送信者名】 メールの送信者名の箇所に表示される「送信者名」を指定します。「○○旅館」など、受信者にわかりやすい名称を設定します。 【送信用メールアドレス】 自動返信メールの送信用メールアドレスを指定します。 基本的にはサイトのドメインと同じドメインのメールアドレスを設定することをおすすめします。（迷惑メールに振り分けられる可能性を低減できるため。） あわせてレンタルサーバー側でもそのメールアドレスを発行しておきましょう。 例）◯△◯△◯.com ・・・ info@◯△◯△◯.comなど。
	国	国を設定します。
	通貨	通貨を設定します。
	タイムゾーンの初期値	タイムゾーンを設定します。
	日付フォーマット	日付フォーマットを設定します。
	時刻フォーマット	時刻フォーマットを設定します。
	日付と時間のポジション	予約時に表示される日付と時間の位置関係（時間 – 日付 or 日付 – 時間）を指定します。
	曜日の位置	予約時に表示される曜日の位置関係（日付の前 or 日付の後）を指定します。
	予約の自動承認	予約時に自動承認するかどうかを設定します。（デフォルト自動承認オフ） 宿泊施設など、予約が行われた後に管理者が内容を確認してから承認するフローを採用したい場合はオフのままにしておきましょう。 本例では、自動承認を「有効」にチェックを入れておきます。

なお、有料版を利用されている場合は、StripeやPayPalとの連携設定もこのタブで行います。

定休日

定休日タブでは、定休日を設定します。

ここで設定した日は、カレンダー上で赤色で表示され、ユーザー画面で予約を受け付けない日として扱われます。

特定の日を定休日にしたい場合は、カレンダー上で定休日にしたい日をクリックします。

祝日

祝日タブでは、祝日を設定します。

有料版をご利用の場合、ここで設定した祝日およびその前日に限り、料金を変更できるようになります。

ブロックリスト（有料機能）

ブロックリストタブでは、繰り返しスパム目的で予約を行うユーザーのメールアドレスを登録し、以後そのユーザーからの予約を自動的に拒否することができます。

ユーザー（有料機能）

ユーザータブでは、ユーザー登録を有効にして未登録ユーザーからの予約を拒否したり、登録ユーザーに関する各種設定を行うことができます。

Sync

Syncタブでは、iCalendarの有効化設定を行うことができます。

この機能を利用すると、Booking Packageで管理している予約情報をGoogleカレンダーなどの外部カレンダーと同期させることが可能になります。

CSS / JavaScript（有料機能）

CSS / JavaScriptタブでは、Booking Packageの管理画面からCSS、JavaScriptコードを編集できます。

なお、JavaScriptコードの編集機能は有料版ユーザーのみが利用可能です。

STEP. 2：時間枠予約カレンダーの新規作成・初期設定

Booking Packageの初期設定ができたら、時間枠予約カレンダーを作成していきます。

「Booking Package＞カレンダーアカウント」をクリックします。

「予約カレンダーを追加」をクリックします。

今回は、時間枠予約ができるカレンダーを作成したいので、「時間枠の予約」をクリックします。

そうすると、カレンダーの設定画面が表示されるので、下記の項目を一つずつ入力して「保存」をクリックします。

項目	説明
名前	カレンダーの名前を設定します。 本例では、「セミナー予約カレンダー」と名前を付けておきます。
メールアドレス	【受信用のメールアドレス】 受信用のメールアドレスを指定します。 【送信者名】 メールの送信者名の箇所に表示される「送信者名」を指定します。 【送信用メールアドレス】 自動返信メールの送信用メールアドレスを指定します。 基本的にはサイトのドメインと同じドメインのメールアドレスを設定することをおすすめします。（迷惑メールに振り分けられる可能性を低減できるため。） あわせてレンタルサーバー側でもそのメールアドレスを発行しておきましょう。 例）◯△◯△◯.com ・・・ info@◯△◯△◯.comなど。
カレンダーのステータス	カレンダーのステータスを設定します。 「有効」にチェックを入れましょう。
本日からの予約可能日数	本日からの予約可能日数を設定します。
本日から予約不可にする日数	本日から予約不可にする日数を設定します。 「1」と設定すると、前日まで予約が可能になります。
他のカレンダーの利用可能な時間枠を共有（有料機能）	Booking Packageで作成した他の予約カレンダーと時間枠を共有できます。
タイムゾーン	タイムゾーンを設定します。
週の始まり	カレンダーの週の始まりとなる曜日を指定します。
予約認証コードを送信（有料機能）	予約を確定する前に認証コードが送信され、そのコードを入力して手続きを完了させる機能です。 不正な予約を防ぎ、実際に本人が予約を行っていることを確認できるようになります。
支払い方法	支払い方法を設定します。無料版では、「現地で支払う」のみ利用できます。
準備時間（有料機能）	予約前後の準備時間（予約不可）を設定できます。
サービス	作業内容と、その所要時間・料金をセットで定義する予約メニューを作成できます。 「有効」にチェックを入れ、「日付の選択から開始する」にチェックを入れます。 （具体的なサービスの追加は、後ほど設定）
カレンダーに残りの枠数を表示	カレンダーに残りの枠数を表示するかどうかを設定します。 「数字で表示」とすると、残りの利用可能な部屋数が表示されます。 「テキスト／記号で表示」を選択すると、残り枠数がしきい値で設定した数値を超えたり下回った場合に、指定したテキストや記号が設定した色で表示されます。 本例では、「テキスト／記号で表示」を選択し、以下のように設定しておきましょう。 【しきい値を超える場合】テキスト：〇 カラーコード：#dd3333 【しきい値を下回る場合】テキスト：△ カラーコード：#eeee22 【空き枠がない場合】テキスト：× カラーコード：#666666
予約時間枠内に残りの枠数を表示（有料機能）	予約時間枠内に残りの枠数を表示するかどうかを設定できます。
カレンダーの固定	選択した年・月のカレンダーを固定表示したい場合は、「有効化」にチェックを入れます。 通常の運用ではチェックを入れる必要はありません。
完了ページの前に予約確認ページを挿入（有料機能）	完了ページの前に予約確認ページを挿入できます。
同じ時間枠での重複予約を防ぐ（有料機能）	同じ時間枠で、同一メールアドレスでの重複予約をブロックできます。
リマインダー通知時間（有料機能）	設定した時間前に、予約者へリマインダー通知を送信できます。
「予約済み顧客」画面にキャンセルされた予約の詳細を残す	予約がキャンセルされた場合に、そのキャンセルに関する情報を「予約済みの顧客」画面に残すかどうか設定できます。
顧客によるキャンセル（有料機能）	予約客が、自動返信メール内に設置されたキャンセルリンクから自身の予約をキャンセルできるように設定できます。
各ステップにカスタムページを挿入	予約ステップにおいて独自のカスタムページを表示することができます。
予約完了後に任意のページに移動	予約完了時に独自の予約完了ページを表示することができます。 本例では、予約完了後に任意のページにジャンプさせたいので、後から専用の予約完了ページを用意してから設定を行います。

これで、新たにカレンダーが追加されました。

追加されたカレンダーをクリックすると、「Booking Package ＞ 一般設定」画面と同様に、複数のタブに分かれた設定画面が表示されます。

スケジュール

スケジュールタブでは、予約を受け付けたい時間枠を設定できます。

設定の仕方には、「週間スケジュールテンプレート」（曜日ごとに同一の設定）か「複数の日を選択」の2パターンがありますが、無料版では「週間スケジュールテンプレート」のみ利用できます。

予約時間枠の追加方法は、後ほどの「STEP. 3：スケジュールの追加」で解説します。

定休日

定休日タブでは、現在編集中のカレンダーにのみ適用される定休日を設定できます。

なお、「Booking Package ＞ 一般設定」で設定した定休日は、すべてのカレンダーに共通して適用されます。

入力フィールド

入力フィールドタブでは、実際にユーザーがカレンダー上で予約を行う際に表示される、個人情報入力フォームの各項目を設定できます。

詳しい設定方法は、後ほどの「STEP. 4：入力フィールドを編集する」で解説します。

サービス

サービスタブでは、サービスを追加できます。

例えば、ヘアーサロンであれば「ヘアーカット（30分）」「ヘアーカット＋カラー（120分）」といった具合でサービスを登録していきます。

実際のサービス追加方法は、「STEP. 5：サービスの追加」で解説します。

ゲスト

ゲストタブでは、ゲストの人数ごとに追加料金を調整（有料機能）したり、ゲストの属性ごとに標準価格を調整（有料機能）したりできます。

予約枠を1名のみとし、またゲストの属性ごとに標準価格を変更する必要がない場合は、「OFF」に設定します。

クーポン

クーポンタブでは、独自のクーポンを発行できます。

クーポンは、「固定額割引」と「割引率」の2つの割引タイプから選択でき、有料版では有効期限を設定することも可能です。

追加料金 | 税金（有料機能）

「追加料金 | 税金」タブでは、合計金額に対して追加費用を設定したりできます。

通知

通知タブでは、予約時や予約承認時などのタイミングで送信される自動返信メールの内容を設定できます。

詳しい設定方法は、「STEP. 6：自動返信メールの編集」にて解説します。

Sync

Syncタブでは、現在編集中のカレンダーに対して、iCalendarの有効化設定を行うことができます。

この機能を利用すると、Booking Packageで管理している予約情報をGoogleカレンダーなどの外部カレンダーと同期させることが可能になります。

カスタマイズ

カスタマイズタブでは、予約フォームに表示されるラベルの文字列や、各種ボタンのデザインをコードで変更できます。

今回は、どちらもデフォルトのままにしておきます。

設定

設定タブでは、カレンダーの新規作成時に設定した設定項目の変更等が行えます。

STEP. 3：予約時間枠の追加

予約時間枠の追加方法は以下の通りです。

カレンダーアカウントの編集画面の「スケジュール」タブを開きます。

「週間スケジュールテンプレート」をクリックします。

「週間スケジュールテンプレート」をクリックすると、「時間枠」「時間」「間隔」「予約締め切り」「予約可能な枠」を設定する画面が表示されます。

初期状態では日曜日が選択されているため、別の曜日を設定したい場合は、画面右上の「×」をクリックして一度閉じ、対象の曜日を選択したうえで、「時間枠」「時間」「間隔」「予約締め切り」「予約可能な枠」を設定します。

例として、火曜日の18:00〜21:00の間に1レッスン30分間隔、1人までのレッスンを予約できるように設定します。

STEP. 4：入力フィールドの編集

続いて、入力フィールドの編集方法です。

入力フィールドの編集は「入力フィールド」タブから変更できます。

デフォルトでは、「名」「姓」「メール」「電話」「住所」「利用規約」の6項目が表示されるようになっていますが、本例では「名前」「名前（カナ）」「メール」「電話」「キャンセルポリシー」の5項目が表示されるように変更します。

まずは、「名」「姓」「郵便番号」「住所」「利用規約」は必要ないので、削除しておきます。

続いて、「新規項目を追加」をクリックします。

そうすると、いくつか設定項目が表示されます。

今回は、名前入力欄を追加したいので、それぞれ以下のように設定します。

項目	内容
ユニークID	固有の値を半角英数字で入力します。 この値は、後ほど自動返信メール内で入力内容を取得する際に使用されます。 本例の設定値：name_kanji
名前	入力フォームのラベル名を入力します。 本例の設定値：名前
URL	URLを設定すると、項目名がクリック可能なリンクとして表示されます。 本例の設定値：空欄
プレースホルダーテキスト	記載例として表示されるプレースホルダーテキストを設定します。 ここで設定したテキストは、実際にユーザーが入力を開始すると自動的に消えます。 本例の設定値：空欄
説明	項目に関する説明を表示したい場合に入力します。 本例の設定値：空欄
状態	「有効」にチェックを入れると、入力フォームに表示されます。 本例の設定値：有効
必須	必須項目にするかを設定します。 本例の設定値：はい-フロントエイドとダッシュボード
名前フィールドとして使用	本例の設定値：はい
メールフィールドとして使用	本例の設定値：いいえ
SMSフィールドとして使用	本例の設定値：いいえ
場所フィールドとして使用	本例の設定値：いいえ
合意 (利用規約/プライバシーポリシー)フィールドとして使用	本例の設定値：いいえ
ユーザーが入力した値を保存	本例の設定値：はい
ターゲット	本例の設定値：顧客とユーザー
タイプ	入力項目の種類を「TEXT」「SELECT」「CHECK」「RADIO」「TEXTAREA」から選択します。 本例の設定値：TEXT
オプション	タイプフィールドでSELECT・CHECK・RADIOのいずれかを選択した場合、対応する値をオプションフィールドに設定します。

同様に名前（カナ）入力欄を作成します。

ユニークIDと名前のみをそれぞれ「name_kana」「名前（カナ）」とし、その他の設定は名前入力欄と同様の設定で追加します。

最後に、キャンセルポリシーの入力欄を作成します。

キャンセルポリシーでは、「合意 (利用規約/プライバシーポリシー)フィールドとして使用」を「はい」とし、タイプを「SELECT」、オプションに「内容を確認しました」と設定します。

また、キャンセルポリシーをクリックすると、キャンセルポリシーページに飛ぶように設定したいため、「URL」にキャンセルポリシーページへのURLを入力します。

最後に、入力フィールドの順番だけ「名前」「名前（カナ）」「メール」「電話」「キャンセルポリシー」と並ぶように調整しておきます。

以上で、入力フィールドの設定ができました。

STEP. 5：サービスの追加

続いて、サービスの追加方法です。

サービスの追加は「サービス」タブから変更できます。

今回は、「【オンライン開催】WordPress 1day セミナー」というサービスを1つ追加します

「新規項目を追加」をクリックします。

そうすると、いくつか設定項目が表示されますが、以下のように追加します。

項目	内容
名前	サービスの名前を追加します。 今回は「【オンライン開催】WordPress 1day セミナー」と設定します。
説明	項目に関する説明を表示したい場合に入力します。
状態	「有効」にチェックを入れると、サービスが表示されます。 「有効」にチェックを入れましょう。
ターゲット	「顧客とユーザー」にチェックを入れます。
料金	サービスの料金を設定します。 今回は「6,000円」と設定します。
有効期限	サービスの有効期限を設定できます。
所要時間	サービスの所要時間を設定できます。 今回は「30分」としておきます。
曜日ごとに時間帯を指定（有料機能）	曜日ごとに時間帯を指定できます。
複数オプションの選択を許可（有料機能）	複数オプションの選択を有効化できます。
オプション（有料機能）	1つのサービスに複数のオプションを追加できます。

これでサービスの追加ができました。

STEP. 6：自動返信メールの編集

次に、自動返信メールの内容を編集しましょう。

自動返信メールは「通知」タブから変更できます。

カレンダーからの新規予約があった際のメール本文は、「新規」から設定します。

「新規」をクリックすると、以下の画面が表示されます。

「顧客向け」「管理者向け」のメール本文は、それぞれ上のタブから切り替えられます。

本例では、顧客向けには以下のメールを送信することとします。

顧客向けメールは、入力フィールド作成時に「メールフィールドとして使用」を選択した項目に入力されたメールアドレス宛てに送信されます。

本文内で[name_kanji]や[name_kana]といったショートコードを使用していますが、これは「STEP. 4：入力フィールドの編集」の入力フィールド作成時に設定したユニークIDの値です。

その他、使用できるショートコードは画面の右側で確認できます。

続けて、管理者向けには以下のメールを送信することとします。

STEP. 7：予約完了後に任意のページに移動させる設定

デフォルトでは予約完了後は、Booking Packageであらかじめ用意されている予約完了画面が表示されます。

これを独自に用意した固定ページに変えたい場合は、「設定」タブを開きます。

下にスクロールしたところにある「予約完了後に任意のページに移動」箇所で、「URL」にチェックを入れ、予約完了後に表示させたい固定ページのURLを入力します。

これで、予約完了時に設定した固定ページを表示させることができます。

STEP. 8：任意のページへのカレンダーの埋め込み

ここまでできたら最後に、任意のページへカレンダーを埋め込みます。

カレンダーの埋め込みには「Booking Package＞カレンダーアカウント」画面に記載のショートコードを使用します。

予約カレンダーを表示したい固定ページを開き、ショートコードブロックを使ってカレンダー用ショートコードを貼り付けます。

これでカレンダーを表示させることができました。

カレンダーが表示できたら、テスト予約を行なってうまく動作しているか確認してみましょう。

フォームを送信して、以下のように顧客と管理者の両方にメールが送信されればOKです。

予約をキャンセルする方法

予約者から連絡があり予約をキャンセルしたい場合は、「Booking Package ＞ 予約済みの顧客」をクリックします。

カレンダーの予約があった日程を見ると数字が記載されているので、こちらをクリックします。

予約者の名前をクリックします。

「キャンセル済み」をクリックします。

これで予約がキャンセルされ、同じ日程をほかの顧客が予約できるようになります。

まとめ

今回は、無料で使えるWordPressの予約システム「Booking Package」を使って、サロン・スクール向けの時間枠予約カレンダーを作成する方法を解説しました。

無料版では、StripeやPayPalを利用したオンライン決済ができないなど一部の機能に制限がありますが、基本的な予約受付や管理を行うには十分に活用できます。

また、有料版を導入した場合でも月額660円（税込）と手頃な価格で利用できます。

WordPressで作ったサイトに、コストを抑えてオンライン予約機能を導入したい場合にはおすすめなので、ご興味を持たれた方はぜひBooking Packageの導入をご検討ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。