予約ページは埋め込みかリンクか スマホ表示と更新負担で選ぶ

ホームページの「予約する」を押したあと、お客さまはどこへ進むでしょうか。外部の予約ページへ移動する方法もあれば、サイト内にカレンダーを表示する方法もあります。

予約ページを埋め込むかリンクにするかは、使っているサイトで編集できる範囲と、スマホで予約を進められるかで考えると整理できます。見た目を一体化したくても、対象プランや表示方式が合わなければ、先に通常リンクを用意できます。

この記事は公式手順に基づく案内です。実際の予約送信や決済テストを済ませた記事ではありません。末尾のテスト表も、利用者が自分のサイトで記入するためのものです。

URLへのリンクと、ページ内の表示は別の方法

通常リンクは、文字やボタンに予約ページのURLを設定する方式です。ホームページ側では入口を管理し、空き枠や予約内容は移動先で案内します。

iframeは、外部ページをホームページ内の枠で表示する仕組み。予約ウィジェットには、専用コードでボタンや受付画面を表示するものもあります。製品が「埋め込み」と呼んでいても、押したあとに別タブを開く場合があるため、名称だけで動きを決めつけないようにしましょう。

任意の予約URLを自作iframeに入れれば動く、という説明はできません。提供元が案内するコードと、サイト側の対応条件を照合してください。

公式手順で確認できた3社の条件

空き枠を表示する場所が同じでも、メニューの絞り込みや撤去時の動きは違います。以下は2026年10月8日に整理した公式資料の記載です。未記載の料金を0円にはしていません。

Airリザーブは、発行コードの改変をしないよう案内しています。カレンダーを置く前に「料理教室だけ見せたい」など、表示したい範囲も確かめましょう。自社ホームページとの連携手順

STORESの機能紹介にある「無料から使える」というサービス全体の表現は、無料プランの埋め込み対応を示す根拠にはなりません。カレンダー埋め込みの操作・注意事項のプラン条件を確認します。

Squareはオンライン予約の設定手順で複数の設置方式を案内しています。「同じページ内で最後まで終わること」が必要なら、実際に使うコードでの遷移を確かめる必要があります。

RESERVA・SELECTTYPEについて、今回の取得資料だけでは現在の対象プランと設置条件を確定していません。競合記事に操作が載っていることを、そのまま現行の公式仕様とは扱っていません。

作成サービスでは、リンクと外部コードの許可を分けて調べる

ホームページ作成サービスで、URLを設定できることと、iframeやスクリプトを貼り付けられることは別です。自由入力欄があっても、外部コードが削除されたり、特定プランでのみ許可されたりする可能性があります。

自作の静的サイトでも、外部の予約受付をリンクで案内できます。予約データの保存や決済は提供元のサービスで行い、自社サイトに予約管理サーバーを用意する構成とは分けて考えます。ただし、埋め込みを設置した際の動作・計測・外部通信は、別途確認が必要です。

契約済みのサイトでは、編集画面の対応と契約プランを先に調べましょう。コードを貼れないなら、通常リンクでも「日時を選んで予約する」入口を作れます。

「予約する」の行き先を、メニューと一緒に決める

店全体の予約ページへ移動するボタンと、特定の講座を選んだ状態へ移動するボタンでは、必要な接続条件が違います。「この講座を予約する」と表示するなら、開いた先で別の講座を最初から探す必要があるかを確認します。製品が発行するメニュー別の正式URLがあるかも照合点です。

Airリザーブの埋め込みは全メニュー表示という条件なので、特定メニューの案内ページに置く場合は、表示内容とボタンの文言を合わせます。全サービスで同じように絞り込めると説明せず、実際に出る画面に沿って案内します。

ボタンを押すまでの説明と、押した後の画面を一組で読みます。ページ内へ表示できるかより先に、正しい受付へ進めるかを確認すると、設置方式を決めやすくなります。

埋め込みが表示されても、入力から先へ進めるかは別

小さい画面ではカレンダーが見えても、入力欄や確定ボタンが下へ隠れる場合があります。ページ全体と埋め込み枠の二つをスクロールする操作、キーボードを開いた後のボタン、文字を拡大したときの読みやすさを点検します。本稿はこれらの端末操作を実施した結果ではありません。

LINEやInstagramから開く人が多い場合は、アプリ内ブラウザも確認対象です。別画面でのログインや決済後に戻る操作が必要なら、戻った時点で申込みが済んでいるかを分かるようにします。途中で閉じた状態を、予約完了と数えないことも大切です。

外部サービスを切り替える日は、古い入口も一覧にする

トップの予約ボタンだけ変えても、過去のお知らせや画像のリンクに旧URLが残ることがあります。掲載ページ、メニューボタン、埋め込みコード、案内メールで使うURLを一覧にします。QRコードを印刷している店なら、その行き先も対象です。

新しいコードを置いたことと、旧サービスの予約を移したことは別です。既存予約の扱い、顧客への連絡、旧受付を閉じる時期を決めてから入口を切り替えます。静的なホームページ側は案内と接続を担当し、予約データや決済は予約提供元で管理する範囲を明確にします。

公開前に記入する、端末別のテスト表

予約画面が表示されたところで点検を終えると、入力欄や決済画面の問題を見落とします。想定する利用者の端末で、受付の各段階を確認する表です。

テスト予約を行う場合は、店舗の管理者が確認用の枠や取消方法を用意してから実施します。この記事の調査では、他店の予約枠を押さえる操作や送信をしていません。

表示が難しいときは、受付画面を開くリンクも添える

ページ内の予約枠と本文をそれぞれスクロールする必要があると、次のボタンを見つけにくくなる場合があります。表示高さだけでなく、入力中のキーボード、拡大表示、戻る操作も見てください。

枠内表示がうまく進まないときに備えて、公開用の予約ページを開く通常リンクを併記する設計も考えられます。表示方式による予約率の向上は、実測なしでは断定できません。

公開後は、予約側とサイト側の変更を両方点検する

予約メニューの変更は提供元の管理画面、ボタンの文言や掲載場所はホームページ側というように、更新箇所を分けて記録します。料金をサイトと予約ページの両方に載せるなら、変更時に両方を照合する担当者を決めておきましょう。

Squareではウィジェットを管理側で削除しても、貼り付けたコードは自動撤去されず、エラー表示が残る場合があります。サービス切替や閉店時は、サイト側のリンク・コードも見直します。

また、予約ボタンのクリックを数えられても、予約完了を数えたことにはなりません。外部画面の完了イベントを取得できる条件はサービスごとに確認が必要です。まずは「表示」「入力」「予約状態」「通知」を区別した点検結果を残し、使う入口を決めてください。