すでにホームページを運用している場合でも、サイトを作り直さずに予約機能を追加できます。
ホームページ内でiframeなどの埋め込みコードを使用することで、予約カレンダーや予約フォームを表示できます。
ただし、すべての予約システムが埋め込みに対応しているわけではありません。
この記事では、ホームページへの埋め込み方法を解説した上で、ホームページ内に予約カレンダーや予約フォームを表示できる予約システムと、導入前に確認するポイントを紹介します。
予約フォーム自体の作り方を詳しく知りたい場合は、予約フォームの作り方とツールの記事をご覧ください。
ホームページに予約システムを設置する方法は5つ
ホームページに予約システムを追加する方法は、主に5つあります。ホームページ内に予約カレンダーや予約フォームを表示する場合は、iframeによる埋め込みが基本です。そのほか、ポップアップ表示、予約ページへのリンク、WordPressプラグイン、API連携や個別開発といった方法があります。
| 方法 | 予約画面の表示 | 設置方法 | 特徴 |
| iframe等でインライン埋め込み | ページ内に常時表示 | 埋め込みコードをHTMLへ貼付 | 予約カレンダーやフォームをページ内に表示できる |
| ポップアップ型ボタン | クリック時にページ上へ表示 | 専用コードをHTMLへ貼付 | 必要なときだけ予約画面を開ける |
| 予約ページへのリンク・ボタン | 別ページ | 予約ページのURLを設定 | 最も簡単に追加できる |
| WordPressプラグイン | ページ内に表示 | プラグインをインストール | WordPress自体に予約機能を追加できる |
| 個別開発・API連携 | 自由に設計 | API連携や独自開発 | 独自の予約画面やシステム連携を構築できる |
1. iframeなどのコードで予約画面を埋め込む
ホームページ内に予約カレンダーや予約フォームを表示する場合は、iframeなどの埋め込みコードを使用します。
予約システムから発行されたコードをホームページのHTMLへ貼り付けることで、予約画面をページ内にそのまま表示できます。利用者は別ページへ移動せず、ホームページ上で空き日時の確認や予約情報の入力を進められます。
基本的な設置手順は次のとおりです。
- 予約システムの管理画面から埋め込みコードを取得する
- ホームページのHTML編集画面を開く
- 予約画面を表示する位置へコードを貼り付ける
予約システムによって、埋め込みできる画面や対応プランは異なります。また、ホームページ側もiframeやカスタムHTMLに対応している必要があります。
2. ポップアップ型の予約ボタンを設置する
ポップアップ型は、専用コードをホームページへ埋め込み、ボタンを押したときだけ予約画面を表示する方法です。
iframeによるインライン埋め込みでは、予約カレンダーやフォームをページ内に常時表示します。一方、ポップアップ型では通常は予約ボタンだけを表示し、クリックすると同じページ上に予約画面が開きます。
予約画面を常時表示する必要がないため、サービス内容や料金などを掲載するページでも、ページ構成を大きく変えずに予約導線を追加できます。
Googleカレンダーの予約スケジュールでは、ウェブサイトにポップアップ型の予約ボタンを設置できます。詳しい設定方法は、Googleカレンダーを予約システムとして使う方法で確認してください。
3. 予約ページへのリンク・ボタンを設置する
予約システムが発行する予約ページのURLを、ホームページのボタンやメニューに設定する方法です。
利用者が「予約する」などのボタンを押すと、予約システム側のページへ移動し、そこで日時の選択や予約情報の入力を行います。
iframeなどの埋め込みコードを使わないため、HTMLを編集できないホームページでも導入できます。設置も簡単ですが、予約時には自社ホームページから外部の予約ページへ移動します。
4. WordPressプラグインで予約機能を追加する
WordPressでホームページを運用している場合は、予約用プラグインをインストールして予約機能を追加できます。こちらも1と同じようにホームページ内に予約フォームを表示できます。
プラグインを導入して予約メニューや受付時間を設定し、固定ページや投稿へ専用ブロックやショートコードを設置すると、予約カレンダーやフォームを表示できます。
ただし、WordPress本体やテーマ、ほかのプラグインとの互換性やアップデート管理が必要です。具体的なプラグインや設定方法は、WordPress予約システムの記事で確認してください。
5. 個別開発・API連携で組み込む
既存の予約システムだけでは対応できない機能が必要な場合は、API連携や個別開発で予約機能を組み込みます。
APIを使うと、予約システムの空き枠や予約情報を取得し、自社ホームページ側に独自の予約画面を構築できます。会員データベース、在庫管理、基幹システム、独自決済などとの連携も可能です。
iframeのように発行されたコードを貼り付ける方法とは異なり、システム開発が必要です。そのため、開発費や保守費は予約フローや連携するシステムによって変わります。
独自開発を検討する場合は、予約システムの開発費用の解説で費用の考え方を確認してください。
- 【初期/月額0円】美容室・エステ・サロン向け
- 集客サイト・インスタ・SNSの予約を自動連携
- POS連携で顧客・売上データも全部一つで管理
ホームページに予約カレンダーを埋め込みできる予約システム
ホームページ内に予約カレンダーや予約フォームを表示する場合は、HP埋め込みに対応した予約システムを選ぶ必要があります。
対応しているサービスであれば、予約ページへ移動させずに、ホームページ上で空き日時の確認や予約受付を行えます。まずは、ホームページへの埋め込みに対応している予約システムを比較します。
[orend-reservation-system-explorer]
{
“category”: “general”,
“sort”: “recommended”,
“supportsWebsiteEmbedding”: true,
“initialDisplayMode”: “table”,
“tableOrientation”: “horizontal”,
“tableRows”: “rating,initialCost,monthlyCost,freePlan,websiteEmbedding”,
“showFilterBar”: false,
“showCompareButton”: false
}
[/orend-reservation-system-explorer]
ここからは、ホームページへの埋め込みに対応している予約システムを詳しく紹介します。
埋め込み方法だけでなく、料金や無料プラン、予約ページの特徴なども異なります。ホームページへの設置方法とあわせて確認してください。
[orend-reservation-system-explorer]
{
“category”: “general”,
“sort”: “recommended”,
“initialDisplayMode”: “detail”,
“supportsWebsiteEmbedding”: true,
“detailContentVariant”: “reservation-page”,
“showFilterBar”: false,
“showCompareButton”: false
}
[/orend-reservation-system-explorer]
Googleカレンダーでも無料で予約受付ができる
専用の予約システムを導入しなくても、Googleカレンダーの予約スケジュールを使って予約受付ができます。
作成した予約ページは、リンクで共有できるほか、ホームページ内にインラインで表示したり、ポップアップ型の予約ボタンとして設置したりできます。
一方で、複数メニューの管理や詳細な顧客管理、業種ごとの予約管理などは、専用の予約システムの方が機能が充実しています。シンプルな予約受付で十分な場合は、Googleカレンダーも選択肢になります。
無料でホームページに埋め込みできる予約システム
無料プランがある予約システムでも、ホームページへの埋め込みまで無料で使えるとは限りません。サービスごとに、埋め込み機能を利用できる料金プランが異なります。
たとえば、STORES予約にはフリープランがありますが、予約カレンダーの埋め込みはビジネスプラン以上が対象です。
一方、SELECT TYPEはフリープランでも予約フォームをホームページへ埋め込めます。ただし、フリープランでは広告が表示されるほか、予約受付期間などに制限があります。
無料で導入する場合は、埋め込み機能の有無だけでなく、広告表示、予約件数、予約受付期間などの制限も含めて確認することが重要です。
無料で使える予約システムを比較する場合は、無料の予約システムを比較の記事をご覧ください。
ホームページに埋め込む予約システムの選び方5つ
ホームページに埋め込む予約システムは、埋め込みに対応しているだけでは十分ではありません。表示方法、ホームページ側の仕様、スマートフォン表示、予約機能、料金プランの5点から選びます。
1. ホームページへの埋め込み方法を確認する
予約システムによって、ホームページへの表示方法は異なります。
主な方法は、予約カレンダーやフォームを常時表示するiframeと、ボタンを押したときに予約画面を開くポップアップです。外部の予約ページへ移動するリンク方式では、ホームページ内に予約画面は表示されません。
予約カレンダーをページ内に常時表示するなら「iframe」、必要なときだけ予約画面を開くなら「ポップアップ」を選びます。
2. 利用中のホームページに設置できるか確認する
予約システム側がiframeに対応していても、利用中のホームページで外部コードを埋め込めなければ設置できません。
WordPressなどカスタムHTMLを使って簡単に追加できるますが、ホームページ作成サービスによって、iframeの設置方法や利用できるコードなどは異なります。
そのため、予約システムの仕様だけでなく、現在利用しているホームページ作成サービスがどの埋め込み方法に対応しているかまで確認しておく必要があります。
3. スマートフォンで予約しやすいか確認する
予約画面は、PCだけでなくスマートフォンでの表示も確認します。
iframeの横幅や高さが固定されていると、予約カレンダーが画面からはみ出したり、フォーム内にスクロールが発生したりする場合があります。
スマートフォンでも日時選択から情報入力、予約完了まで操作しやすいサービスがおすすめです。
4. 必要な予約機能がそろっているか確認する
埋め込み機能だけでなく、実際の予約業務に必要な機能も重要です。
予約メニュー、スタッフ選択、設備管理、リマインド、事前決済、顧客管理など、必要な機能は業種によって異なります。
実際の予約受付から顧客管理まで必要な業務を一つのシステムで管理できるかが選定のポイントです。
5. 必要な機能を使える料金プランを確認する
予約システムは、プランによって埋め込み機能や予約件数、スタッフ数、事前決済などの利用条件が異なります。
月額料金だけを比べるのではなく、必要な機能を使うためにどのプランを契約する必要があるのかを確認します。無料プランを検討する場合は、広告表示や予約件数、受付期間などの上限も含めて判断が必要です。
実際に利用する条件・機能を決めたで、必要なプランの料金を比較することが重要です。
ホームページに予約システムを設置する位置
予約システムは、利用者がいつでも簡単に見つけられる位置に設置します。
- ヘッダーやメニューには、どのページからでも予約へ進めるように予約ボタンを設置する
- サービス詳細ページや料金ページには、予約カレンダーや予約フォームを設置する
- ページ下部には、内容を確認した利用者がそのまま予約へ進めるように予約ボタンや予約フォームを設置する
また、ヘッダーやフッターに「予約する」ボタンを固定表示しておくと、ページを読み進めている途中でも予約画面へ移動できます。
ホームページに予約システムを埋め込むときの注意点
予約システムを決めた後は、埋め込みコードを貼り付けるだけで公開せず、表示から予約完了まで一連の動作を確認します。
1. 埋め込みコードを正しい位置に設置する
予約システムから発行されたコードは、予約カレンダーやフォームを表示するページのHTML編集エリアへ貼り付けます。
WordPressではカスタムHTMLブロックなどを使用します。通常のテキスト入力欄へ貼り付けると、コードがそのまま文字として表示されたり、正しく読み込ません。
2. 予約フォームが画面に収まるように調整する
ホームページに予約フォームを埋め込む場合は、パソコンやスマートフォンの画面に合わせて、フォームの横幅や高さを調整します。
サイズが合っていないと、フォームの一部が画面からはみ出したり、下部の予約ボタンが見えなくなったりします。また、フォーム内とホームページの両方でスクロールが発生し、操作しにくくなることもあります。
反対に高さを大きくしすぎると、フォームの下に大きな余白ができます。
埋め込み後はパソコンとスマートフォンの両方で、予約日時の選択から入力フォームの送信まで操作し、フォーム全体が画面内に収まり、不要なスクロールが発生していないか確認してください。
3. 予約完了を計測できるか確認する
広告やアクセス解析をしたい場合は、予約完了を正しく計測できるか確認します。
iframe内で予約が完了する場合、ホームページ側に設置したGoogle Analyticsや広告タグだけでは、予約システム内の操作や完了画面を計測できないことがあります。
予約システム側のGoogle Analytics連携やコンバージョン計測機能を使い、予約完了まで計測できる状態になっているかを公開前に確認します。
まとめ 既存ホームページなら「リンク」か「埋め込み」から決める
既存ホームページへ予約機能を追加する場合、最初に決めるのは「予約ページへ移動させるか」「自社ページ内に予約画面を表示するか」です。
最短で導入するなら予約ページへのリンクやボタンを設置します。ホームページ内で予約操作を完結させる場合は、iframeなどの埋め込みコードを使用します。
その後、ホームページ側のiframe対応、スマートフォン表示、埋め込み機能の対象プラン、予約完了までの動作を確認してください。
特に無料プランでは、予約ページの作成は無料でも、ホームページへの埋め込みが有料プラン限定の場合があります。月額料金だけでなく、自社サイトへどの方法で設置できるかまで確認して選ぶことが重要です。
予約システム全体の機能や料金を確認する場合は、予約システム比較の記事をご覧ください。