ホームページに予約システム・予約カレンダーを埋め込む｜無料5選【2026】

「自社のホームページから、そのまま予約を受け付けたい」。店舗やクリニック、サロン、教室を運営していると、電話やDMだけの予約管理に限界を感じる場面が増えてきます。とはいえ、最初から高い費用はかけたくない、というのも正直なところだと思います。

結論から言うと、予約システムを無料でホームページに埋め込むには「iframe埋め込み」「予約ボタン設置」「別ウィンドウ表示」の3つの型があります。Airリザーブ・STORES 予約・RESERVA・Square 予約などは月額0円の無料プランから始められ、多くの主要サービスの無料枠は月50件前後が目安です（2026年7月時点／無料枠や料金は変わりやすいため、導入前に必ず公式サイトで最新条件をご確認ください）。この記事では、無料で使える予約システムの選び方と、iframeコードの実際の貼り方までを、Web制作の実務目線で整理します。

予約システムをホームページに埋め込む3つの方法

予約システムを自社サイトに載せる方法は、大きく次の3つに分かれます。実装の手軽さと、サイト内の回遊（ユーザーがページを離れずに予約まで進めるか）はトレードオフの関係にあります。まずは全体像を表で押さえてから、それぞれの特徴を見ていきましょう。

iframe埋め込みは、予約システムが発行する埋め込みコードを自社サイトのHTMLに貼り付ける方法です。ページ内にそのまま予約画面が表示されるため、ユーザーが他サイトへ移動せずに予約まで進めます。回遊を切らない分だけ離脱が起きにくく、予約完了率（CV率）を保ちやすいのが利点です。ただしスマホでは高さやレスポンシブの調整がひと手間必要になります。

予約ボタン設置は、予約システムの公開URLにボタンやリンクを張るだけの方法で、実装は最もかんたんです。クリックすると別ページや別ウィンドウの予約画面へ遷移します。まずは最短で予約導線を用意したい、という場合に向いています。別ウィンドウ／新規タブ表示は、公開URLをそのまま新しいタブで開く方法で、元のページを残したまま予約ページを案内できます。

無料で使える予約システム5選（無料枠と埋め込み対応で比較）

ここでは、無料プランから始められて自社サイトへの埋め込みにも対応する代表的な5サービスを比較します。まず一覧で全体像をつかんでください（すべて2026年7月時点。料金・無料枠は各社とも変更されやすいため、申し込み前に公式サイトで最新の条件をご確認ください）。

Airリザーブ（リクルート）

Airリザーブは、リクルートが運営する予約管理サービスです。フリープランは月額0円・初期費用0円で、しかも予約件数が無制限という点が大きな強みです（2026年7月時点）。予約数が読みにくい飲食店やクリニックでも、件数上限を気にせず無料で始められます。

有料プランはベーシックが5,500円/月、スタンダードが11,000円/月（いずれも税込）、プレミアムは要問い合わせです（2026年7月時点）。オンライン決済を使う場合の決済手数料は3.24%です。埋め込みは「カレンダー設定」で発行される埋め込みコード（iframe方式）を自社サイトに貼るか、公開用URLをボタン／リンクにして別ウィンドウ表示する形になります。

STORES 予約

STORES 予約は、ネットショップ作成でも知られるSTORES株式会社の予約サービスです。フリープランは月額0円・初期費用0円で、月間予約は50件まで、予約ページは2ページまで作成できます（2026年7月時点）。2026年3月にプラン体系が刷新され、フリー／スタンダードの加入対象が全企業規模へ拡大されました。

埋め込みについては注意が必要で、フリープランでも「予約ボタンの埋め込み」は可能ですが、ページ内に予約画面を表示する「予約カレンダーの埋め込み」はビジネスプラン以上の機能です。有料プランはスモールが月額9,790円（年間契約時・税込）からとなります（2026年7月時点）。まずはボタン設置で導線を作り、必要になったらカレンダー埋め込みへ、という段階的な使い方に向いています。

RESERVA（レゼルバ）

RESERVA（レゼルバ）は、幅広い業種の予約に対応するサービスで、無料でも機能が多いのが特徴です。フリープランは月額0円で、月間予約50件・登録顧客250件まで、そして43機能が利用できます（2026年7月時点）。最短3分で予約サイトを開設できる手軽さもあります。

埋め込みは、公式案内では「予約カレンダーの外部埋め込み」と「予約サイト埋め込み（インラインフレーム）」の2つに分かれます。前者はスクール・アクティビティタイプ／イベント・セミナータイプならすべての料金プランで使え、後者（予約サイト全体をiframeで貼る機能）はエンタープライズプラン以上です。無料でページ内にカレンダーを出したい場合は、予約タイプの選択が実質の条件になります。有料プランはブルー／シルバー／ゴールド／エンタープライズ／スイートなど、規模や必要機能に応じて選べます（2026年7月時点）。無料のうちから多機能を試したい店舗・施設に向いています。

Square 予約

Square 予約（Square Appointments）は、決済サービスのSquareが提供する予約システムです。無料プランは月額0円・初期費用0円で、1店舗（1ロケーション）まで利用できます（2026年7月時点）。1店舗で運営するサロンや個人店が始めやすい構成です。

埋め込みは、ボタン埋め込みまたはフレーム（iframe）埋め込みで、既存サイトに予約導線を追加できます。有料プランはプラスが3,000円/月、プレミアムが8,000円/月（いずれも店舗ごと）で、最低契約期間はありません（2026年7月時点）。店舗が増えたときに店舗単位で拡張できる料金体系です。

Googleフォーム＋Googleカレンダー

コストを一切かけずに受付を始めたいなら、Googleフォームとカレンダーの組み合わせが最も手軽です。完全無料で使え、Googleフォームの編集画面から「送信」→「<>」アイコンでiframe埋め込みコードを取得し、HTMLに貼り付けるだけでフォームをサイト内に表示できます。幅・高さも調整可能です。

ただし正直な制約として、Googleフォームは予約の空き状況をリアルタイムに管理できません。あくまで「申込フォーム＝受付」であり、ダブルブッキングの防止や確定連絡は手動運用が前提になります。少人数の予約、単発イベント、教室の体験申込のように、後から人が確認して確定する運用に向いています。

なお、より柔軟に設定したい場合はSuperSaaSという選択肢もありますが、無料版は非商用利用のみで（商用は登録後1ヶ月間の試用）、無料版には広告表示や機能制限があり、設定にも一定の技術知識が必要です（2026年7月時点）。まず試すなら、上記の国内SaaSやGoogleフォームのほうが導入しやすいでしょう。

ホームページへの埋め込み手順（iframeコードの貼り方）

どのサービスでも、iframe埋め込みの基本の流れは共通しています。難しいプログラミングは不要で、発行されたコードを正しい位置に貼るのが要点です。次の4ステップで進めてください。

1. 予約システムの管理画面で、埋め込みコード（または公開URL）を発行する。
2. ホームページのHTMLで、予約フォームを表示したい位置にそのコードを貼り付ける。
3. iframeの幅（width）・高さ（height）を指定し、画面幅に合わせてレスポンシブに整える。
4. 公開後、スマホの実機で予約完了まで通しで表示・操作を確認する。

スマホ最適化の注意点

実務でつまずきやすいのが、スマホ表示です。iframeは高さを固定で書きがちですが、現場で多いのは「予約カレンダーの下部が見切れて、確定ボタンまでスクロールできない」というトラブルです。予約画面の縦の長さはステップによって変わるため、高さは余裕をもって取り、幅は100%で親要素に追従させるのが基本になります。

また、実務では「予約ボタンをファーストビュー（最初に見える範囲）に置けているか」で予約数が変わります。ページ上部にわかりやすい予約ボタンを1つ用意し、詳しい予約カレンダーは下部にiframeで置く、という二段構えにすると、迷わせずに予約へ進んでもらえます。公開前には必ず自分のスマホで最後まで操作し、途中で止まる箇所がないかを確認してください。予約だけでなく、よくある質問への一次対応まで自動化したい場合は、AIチャットボットをホームページに埋め込む方法もあわせて検討すると、問い合わせ対応の負担を減らせます。

私たちMihataは、こうした予約フォームや予約ボタンを既存サイトへきれいに組み込むホームページ制作も行っています。記事の途中で恐縮ですが、もし「自分でiframeを調整するのは不安」「スマホでの見え方まで含めて任せたい」という場合は、よろしければあわせてご覧いただけたら嬉しいです。

そのまま貼れるiframe埋め込みコード（レスポンシブ対応）

手順だけだと詰まりやすいので、実際に貼るコードの形をそのまま置いておきます。src の中身を、各予約システムの管理画面で発行された公開URL（または発行された埋め込みコードのsrc）に置き換えてください。

<div class="booking-embed">
  <iframe
    src="https://example.com/あなたの予約ページURL"
    title="オンライン予約"
    width="100%"
    height="1200"
    loading="lazy"
    style="border:0;">
  </iframe>
</div>

CSSは次のようにして、幅は画面に追従・高さは実測で決めるのが実務では確実です。

.booking-embed {
  width: 100%;
  max-width: 900px;   /* PCで横に伸びすぎないよう上限を決める */
  margin: 0 auto;
}
.booking-embed iframe {
  display: block;
  width: 100%;
  height: 1200px;     /* 予約画面がいちばん長くなるステップに合わせる */
  border: 0;
}
@media (max-width: 768px) {
  .booking-embed iframe { height: 1500px; } /* スマホは縦に伸びるので余裕を足す */
}

なぜ aspect-ratio や height:100% ではうまくいかないのか

画像や動画の埋め込みで使う「比率で高さを決める」やり方は、予約カレンダーには向きません。予約画面はステップ（日付選択→時間選択→情報入力→確認）ごとに縦の長さが変わるためで、比率で固定すると、どこかのステップで必ず見切れます。height:100% も、親に明示的な高さが無ければ解決されず0になります。

そこで、いちばん長くなるステップの高さを実測して固定するのが現実的な解になります。面倒に見えますが、iframeの中は別サイト（クロスオリジン）なので、外側のJavaScriptから中身の高さを読み取ることは仕様上できません。自動リサイズができるのは、予約サービス側が高さを通知するスクリプト（postMessage方式）を公式に配っている場合だけです。ここは「工夫でどうにかなる」部分ではないので、最初から余裕を持った固定値で組んでください。

貼ったあとに必ず確認する4点

• スマホ実機で予約完了まで通す：確定ボタンが見切れないか。エミュレータではスクロール挙動が違うことがあります。
• iframe内スクロールの二重化：外側と内側の両方にスクロールバーが出ると操作しづらいので、高さを足して内側スクロールを消すのが基本です。
• 読み込みの遅さ：loading="lazy" を付け、ページ上部にはボタンだけ置いて、iframeは下部に配置すると表示が軽くなります。
• レイアウトのガタつき（CLS）：高さを指定しないと読み込み後に本文が飛びます。高さは必ず書いてください。

WordPress・Wix・STUDIO・ペライチなどのツールを使っている場合は、「カスタムHTML」「HTMLコード埋め込み」に相当するブロックを置いて、そこへ上記のコードを貼ります。テキストエディタに直接貼るとタグがエスケープされて表示されないことがあるので、必ずHTML用のブロック／モードで貼るのがポイントです。

「予約カレンダーを無料で埋め込みたい」ときの現実解

検索でいちばん多いのは「ボタンではなくカレンダー（予約画面そのもの）をページ内に出したい」という要望です。ここは無料枠の差が出やすいところなので、先に整理しておきます（本記事の比較と同じく2026年7月時点の調査。条件は変わるため公式サイトで最新をご確認ください）。

つまり「無料 × ページ内カレンダー」を最優先するなら、Airリザーブ・RESERVA・Square 予約の3択になります。STORES 予約を無料で使いたい場合は、ページ内カレンダーをあきらめてボタン設置にする——という判断になります。

正直なところ、ボタン設置でも予約数はそこまで落ちません。影響が大きいのは「埋め込みかボタンか」よりも、予約ボタンがファーストビューにあるかとスマホで最後まで操作できるかのほうです。カレンダー埋め込みのために有料プランへ上げるのは、その2つを直してからでも遅くありません。

Mihataの実測：「埋め込み」で探す人は、比較ではなく手順を探している

Mihataは自社サイトに届く検索語をSearch Consoleで毎日見ています。2026年7月14日〜8月10日の28日間、このページには「ホームページ 予約システム 埋め込み」が55回、「予約カレンダー 埋め込み 無料」が35回、「予約システム カレンダー埋め込み」が24回表示されていました。「おすすめ」「比較」より「埋め込み」を含む語のほうが多いのが実測の結果です。

nが大きい数字ではないので傾向としての話ですが、この記事に上のコード例とカレンダー可否の表を足したのは、比較記事を読みに来ているのではなく、いま手元のサイトに貼りたい人が多いと判断したためです。

予約カレンダーの埋め込み手順（月表示・時間枠表示の選び方まで）

予約ボタンではなく予約カレンダーそのものをページ内に出したい場合、作業は次の3工程になります。①カレンダーの表示形式を決める → ②管理画面で埋め込みコードを発行する → ③iframeの高さを実測して貼る。表示形式を先に決めるのは、形式によってページ内での縦の長さが変わり、後回しにすると高さを取り直すことになるからです。

月表示（カレンダー型）と時間枠表示（タイムテーブル型）の違い

予約システムのカレンダー表示は、おおむね次の3形式に分かれます。呼び方はサービスごとに違いますが、選ぶ基準は共通です。

迷ったときの目安はシンプルです。「今日か明日の予約が中心」なら時間枠表示、「先の日程から選んでもらう」なら月表示。埋め込みで失敗が起きやすいのは時間枠表示のほうで、営業10時間×30分刻みなら20枠が縦に並ぶため、ボタン設置のつもりで高さを短く取ると確定ボタンまで届かなくなります。

Airリザーブで予約カレンダーを埋め込む手順

Airリザーブは、初期設定で選ぶ「カレンダータイプ」によって表示形式が決まります。公式FAQでは、お客様が開始時間を自由に選ぶ自由受付タイプと、店舗が決めた枠に申し込んでもらう事前設定タイプの2種類が案内されており、自由受付タイプは時間帯ごとの空き状況を記号で、事前設定タイプは登録した予約枠をリスト形式で表示します。

1. 予約メニュー（または予約枠）を登録し、営業時間を設定する。
2. 「カレンダー設定」のカレンダー情報で、公開用URLと埋め込みコードを確認する（公開用URLを登録している場合に利用できます）。
3. 発行された埋め込みコードを、自社サイトのHTML用ブロックに貼り付ける。
4. 実際の予約画面でいちばん縦に長くなるステップの高さを測り、iframeのheightに反映する。

実務上いちばん重要な注意点は、カレンダータイプは初期設定で登録したあと、管理画面からは変更できないと公式FAQに明記されていることです。「月ごとに選ばせたかったのに時間枠になった」と後から気づいても、管理画面の設定変更では戻せません。埋め込む前に、テスト用の公開URLをスマホで開いて表示形式を必ず確認してください。

RESERVAは「カレンダーの埋め込み」と「予約サイトまるごとの埋め込み」で条件が違う

RESERVAでよく混同されるのが、名前の似た2つの機能です。無料で埋め込めるかどうかはここで分かれます（2026年8月時点の公式案内。条件は変わるため申し込み前に公式サイトでご確認ください）。

• 予約カレンダーの外部埋め込み：スクール・アクティビティタイプ／イベント・セミナータイプで利用している場合は、すべての料金プラン（フリー含む）で使えると案内されています。
• 予約サイト埋め込み（インラインフレーム）：予約サイト全体をiframeで貼る機能で、エンタープライズプラン以上。管理画面の「設定 > 高度な設定 > 集客・販促 > サイト埋め込み」でフレームサイズを指定するとHTMLコードが発行されます。

つまりRESERVAで「無料でページ内にカレンダーを出したい」なら、予約タイプの選び方が実質の条件になります。スクール・イベント系であればフリープランのままカレンダーを埋め込めますが、店舗型の予約タイプで予約サイトごと貼りたい場合は上位プランが前提です。スクール・イベントタイプでは予約サイトの表示方法として、カレンダー表示・日別のリスト・タイムテーブル表示を切り替えられる案内もあり、前掲の3形式をここで選ぶことになります。

形式を変えたら高さも測り直す

表示形式を切り替えると、iframeに必要な高さは変わります。月表示から時間枠表示に変えた場合はほぼ確実に縦に伸びるため、形式変更＝高さの実測やり直しとセットで覚えてください。前述のとおりクロスオリジンのiframeは外側のJavaScriptから高さを読めないので、ここは自動化できない部分です。

「表示形式の判断もiframeの調整も自社では手が回らない」という場合は、既存サイトへ予約カレンダーを組み込むところまで含めて、Mihataのホームページ制作・改修サービスでお引き受けしています。スマホでの見え方まで確認したうえで公開します。

業種別の選び方（飲食店・サロン・クリニック・教室）

同じ「無料の予約システム」でも、業種によって相性は変わります。判断の軸になるのは、予約件数の多さ・店舗数・受付の運用スタイルです。検証済みの無料枠をもとに、業種ごとの選び方を整理しました。

飲食店やクリニックのように予約件数が多い業種では、月50件の上限があるサービスだと繁忙期に足りなくなることがあります。この場合はフリープランでも件数無制限のAirリザーブが有力です。一方、教室や単発イベントの受付だけなら、Googleフォームで十分間に合うケースも多くあります。飲食店・美容室で「予約できるサイト」をどう作るかは、飲食店・美容室の予約できるHPの作り方で具体的に解説しているので、あわせてご覧ください。

予約システムを入れたあとに次に効いてくるのが、無断キャンセルへの備えです。リマインドの自動送信やキャンセルポリシーの置き場所については、予約の無断キャンセル対策｜No showを減らすリマインドと事前決済の仕組みで3層に分けて整理しています。

無料の限界と、有料化を判断するタイミング

無料プランは始めやすい一方で、事業が伸びると必ずどこかで上限に当たります。有料化を検討する目安を、あらかじめ知っておくと判断がスムーズです。次のようなサインが出たら、有料プランへの切り替えを考えるタイミングです。

• 予約件数の上限：月50件前後（STORES 予約・RESERVAなど）を超えて予約を取りこぼしそうになったとき。
• 予約ページ数の上限：STORES 予約のフリーは2ページまで。店舗・メニューが増えて足りなくなったとき。
• カレンダー埋め込み・スタッフ指名などの上位機能：ページ内に予約カレンダーを表示したい／指名予約を受けたいなど、上位機能は有料プランに限られることが多い。
• 決済手数料・ブランド表記：オンライン決済の手数料（例：Airリザーブは3.24%）や、無料版の広告・ブランド表記（例：SuperSaaSの無料版）が気になり始めたとき。

ここで注意したいのは、予約システムの有料化とは別に、ホームページ制作側でも「初期費用無料」をうたって月額や総額で回収する料金設計があることです。予約システムと制作費の両方を合わせて総額で見比べる考え方は、ホームページ制作費用の「初期費用無料」の罠を総額で見抜く方法で詳しく説明しています。無料枠の範囲と、必要になる有料機能を早めに見積もっておくと、後悔のない選択ができます。

さらに、フォームからの予約だけでなく電話予約の取りこぼしまで含めて対応を整えたい場合は、応答や一次対応そのものを自動化する方法もあります。営業時間外の予約や折り返しの手間を減らす仕組みは、AIで予約受付を自動化する方法で具体的に紹介しています。予約の入り口だけでなく、その後の応対まで含めて設計すると、機会損失をぐっと減らせます。

どの予約システムが自社に合うか、既存サイトへの埋め込みや予約の自動応答まで含めてどう組むか迷う場合は、現状に合わせてご提案しますので、お気軽にご相談ください。

サイトごと作り直したい場合は、初期費用を抑えるやり方としてサブスク型のホームページ制作という選び方もあります。