すでにホームページを運用している場合でも、サイトを作り直さずに予約機能を追加できます。
ホームページ内で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（オレンド）では、公式サイト・提供情報をもとに、複数の観点で評価しています。広告掲載の有無や広告内容が、評価結果に影響することはありません。
予約システムの評価観点
OREND（オレンド）では、公式サイト・提供情報をもとに、複数の観点で評価しています。広告掲載の有無や広告内容が、評価結果に影響することはありません。
- 料金重み：15%
- 無料プランまたは最安プランの月額料金を評価する。
- 予約機能重み：20%
- 予約枠、メニュー、スタッフ指名など予約受付に必要な機能を評価する。
- 使いやすさと業務効率重み：15%
- 初期設定、管理画面、予約者側の操作性と業務効率を評価する。
- 顧客管理重み：10%
- 顧客情報、予約履歴、来店履歴の管理機能を評価する。
- 決済機能重み：5%
- 事前決済、キャンセル料徴収などの決済機能を評価する。
- 外部連携重み：5%
- 外部サービス、集客サイト、業務システムとの連携を評価する。
- サポート体制重み：10%
- 導入支援、問い合わせ窓口、運用支援を評価する。
- セキュリティと信頼性重み：5%
- 権限管理と第三者認証による安全性と信頼性を評価する。
- 業種対応力重み：15%
- 幅広い業種の予約業務に対応できるかを評価する。
掲載情報は公式サイト・提供情報をもとにしています。料金や条件は変更される場合があります。
ここからは、ホームページへの埋め込みに対応している予約システムを詳しく紹介します。
埋め込み方法だけでなく、料金や無料プラン、予約ページの特徴なども異なります。ホームページへの設置方法とあわせて確認してください。
_01k9pepm0yk09jjbq2tmk0g5ae_20251110-083912.845751.png)
- 初期費用
- 0円～
- 月額費用
- 0円～
- 無料プラン
- ○
- LINE連携
- ◎
STORES予約は、顧客がメニュー、日時、スタッフを選び、1ページで予約を完了できるWeb予約システムです。複数人が参加する定員制レッスンと、1対1の施術・相談などの予約の両方に対応しています。
予約ページはLINE、InstagramなどのSNS、自社ホームページに掲載できます。事前決済の設定もでき、予約ページ内で支払いまで完了できます。
無料で2種類の予約ページを公開でき、月50件まで予約を受け付けられます。スタッフ指名、回数券・月謝による予約受付、Zoom連携などの機能もプランをアップすることで追加できます。
Web・SNSから予約を集め、レッスン予約と1対1の施術・相談予約を一つのサービスで管理する店舗におすすめです。
- 初期費用
- 33,000円～
- 月額費用
- 22,000円～
- 無料プラン
- ×
- LINE連携
- ○
ChoiceRESERVEは、来店予約、施設予約、スクール予約、イベント予約などに合わせて予約ページを構築できる法人向け予約システムです。顧客はメニューと日時を選び、設定した必要事項を入力して予約できます。
スタッフ、会議室、座席などを予約対象として登録することで、空き状況や定員に応じて予約を受け付けられます。予約ページを自社サイトに埋め込めるほか、予約時の事前アンケートも設定でき、業務ルールに合わせた予約受付が可能です。
スタッフ・設備・定員を細かく管理し、自社の運用に合わせた予約ページを構築したい法人におすすめです。
- 初期費用
- 0円～
- 月額費用
- 9,800円～
- 無料プラン
- ×
- LINE連携
- ◎
RE:REは、顧客がLINE上でメニュー、スタッフ、日時を選び、予約から変更・キャンセルまで完結できるサロン向け予約システムです。
メニューの所要時間は15分単位や30分単位で設定でき、複数スタッフの空き枠も自動表示します。予約確認やリマインドもLINEで届き、予約変更・キャンセルは管理画面へ即時反映されます。
店舗ホームページには予約フォームも設置できます。ホットペッパービューティーなど外部媒体との連携にも対応しています。
LINEを予約窓口の中心にして、顧客の予約操作とスタッフの空き枠管理をまとめたいサロンにおすすめです。
- 初期費用
- 0円
- 月額費用
- 0円〜29,800円（税抜）
- 無料プラン
- ○
- LINE連携
- ○
formrunは、申込フォームと日程調整ツールbookrunを連携し、顧客が空き日時を選べる予約フォームを作成できるサービスです。フォーム送信と同時に日程を確定し、カレンダーへ登録できます。
Googleカレンダーから空き時間を抽出してダブルブッキングを防ぎ、ZoomやGoogle MeetのURL、予約詳細、リマインドも自動通知できます。フォーム受付と日程調整を一つの流れにまとめられます。
商談、面談、相談予約など、一対一の日程調整におすすめのサービスです。
問い合わせや申込フォームから商談・面談の日程確定まで自動化したい事業者におすすめです。
- 初期費用
- 0円～
- 月額費用
- 0円～
- 無料プラン
- ○
- LINE連携
- ○
Square予約は、サービス、スタッフ、日時を選べる専用予約サイトを無料で公開できる予約システムです。店舗のロゴ、営業時間、キャンセルポリシーも設定できます。
予約サイトのリンクは自社サイト、Instagram、Googleに設置できます。顧客は予約確認メールから変更・キャンセルでき、スタッフのカレンダーにも即時反映されます。
フリープランは1店舗で月額0円です。複数店舗、キャンセル保証、高度なスタッフ管理はプラスまたはプレミアムの対象です。
無料の予約サイトをInstagramやGoogleへ掲載し、1店舗の予約受付をまとめたい事業者におすすめです。
- 初期費用
- 0円～
- 月額費用
- 0円～
- 無料プラン
- ○
- LINE連携
- ○
SELECT TYPEは、サロン、スクール、イベント、施設などのテンプレートから予約ページを作成できる予約システムです。空いている日時を選ぶ予約、定員制のイベント予約、施設・設備の予約、担当スタッフを選ぶ予約などに対応しています。
作成した予約ページは専用URLで公開でき、自社サイトへの埋め込みやLINE・Instagramなどから予約ページの案内もできます。顧客による予約変更・キャンセル、事前決済、会員限定メニューも設定できます。
フリープランは期間制限なく利用できますが、広告表示、予約フォーム数、予約を受け付けられる期間は7日後まで、予約データの保存件数などに上限があります。利用規模によっては有料のベーシック以上が必要です。
業種に合わせた予約ページを作成し、自社サイトやSNSから予約を受け付けたい事業者におすすめです。
- 初期費用
- 0円～
- 月額費用
- 0円～
- 無料プラン
- ○
- LINE連携
- ○
Airリザーブは、空いている時間から選ぶ予約と、あらかじめ設定したレッスン・イベント枠から選ぶ予約の両方に対応する予約システムです。
スタッフや設備の空き状況、定員に応じて予約を受け付けられます。予約ページの自社サイトへの埋め込みや、顧客によるWebキャンセルにも対応しています。
月間予約件数は全プラン無制限です。ただし、リマインドやGoogleカレンダー連携はベーシック以上、予約データの出力は有料のスタンダード以上の契約が必要です。
スタッフや設備の空き状況まで反映して予約を管理したい店舗・施設におすすめです。
掲載情報は公式サイト・提供情報をもとにしています。料金や条件は変更される場合があります。
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対応、スマートフォン表示、埋め込み機能の対象プラン、予約完了までの動作を確認してください。
特に無料プランでは、予約ページの作成は無料でも、ホームページへの埋め込みが有料プラン限定の場合があります。月額料金だけでなく、自社サイトへどの方法で設置できるかまで確認して選ぶことが重要です。
予約システム全体の機能や料金を確認する場合は、予約システム比較の記事をご覧ください。
