STORES 予約のカレンダーを埋め込む｜対応プランとiframeの壁

stores 予約 カレンダー 埋め込み、と調べている人の多くは、自分のホームページに空き状況の表をそのまま出したいと思っています。お客様に別サイトへ飛んでもらうのではなく、店のページを見ている流れのまま日付を選んでほしい。その気持ちは正しいのですが、実際に管理画面を探すと設定項目が見つからない、あるいはコードを貼っても何も表示されない、というところで止まります。結論から書くと、つまずく理由はほぼ2つに絞られます。契約しているプランが対応していないか、貼り付け先のサイトがiframeに対応していないかです。以下では、公式に確認できる仕様だけを並べて、いま何を確かめれば先に進めるのかを整理します。

予約カレンダーと予約ボタンは、まったく別の機能

最初に押さえておきたいのは、ホームページに置ける部品が2種類あることです。ひとつが予約ボタンの埋め込み、もうひとつが予約カレンダーの埋め込みです。名前が似ているので同じものだと思われがちですが、提供条件がまるで違います。

予約ボタンの埋め込みは、自分のサイトに「ご予約はこちら」のようなボタンやバナーを置いて、押すと予約サイトへ移動する仕組みです。移動先は別ページなので、貼り付けるのはリンク用のHTMLだけで済みます。この機能は料金表の比較で全プランに丸が付いており、月額0円のフリープランでも使えます。

予約カレンダーの埋め込みは、空き状況の表そのものを自分のサイトの中に表示する仕組みです。お客様はページを離れずに日付と時間を選び、そのまま申し込みまで進めます。こちらは料金表の比較でフリー、スモール、チームには横棒が付き、ビジネスとエンタープライズにだけ丸が付いています。つまり上位2プランの機能です。

公式FAQには、埋め込みの方法がこう書かれています。

STORES 予約のカレンダーは、ホームページやブログに埋め込むことができます。この設定により、外部サイト上でも予約受付が可能になり、利便性が向上します。予約カレンダーの埋め込みには、HTMLコード（iframeタグ）を使用します。 出典: reserve-faq.stores.jp

この一文に、後で効いてくる要素が2つ入っています。ひとつは「外部サイト上でも予約受付が可能になる」という点で、単なるリンクではなく申し込みまで完結する部品だということ。もうひとつは「iframeタグを使用します」という点で、貼り付け先の作りに依存するということです。どちらも、あとで詰まったときの原因になります。

なお、公式の案内では、カレンダーの設置はレッスン・イベントタイプの予約ページを使っている場合に向いていると説明されています。日付ごとの開催枠が並ぶ形なので、表として見せる意味が出るからです。メニュータイプで所要時間ごとに枠を切っている業態では、ボタンで予約サイトに送るほうが素直に収まることもあります。自分の予約ページの型がどちらなのかを先に確認しておくと、無駄な契約変更を避けられます。

埋め込みたいだけで月額がいくら変わるか

カレンダーの埋め込みがビジネスプラン以上ということは、そこに到達するまでの金額を知っておく必要があります。公式の料金ページに掲載されている金額は、いずれも税込表記で、初期費用は全プラン0円です。2026年9月4日時点で公開されている、年間契約を一括払いした場合の月額は次のとおりです。

・フリー: 0円（月間予約件数50件、予約ページ公開数2） ・スモール: 9,790円（200件、10ページ） ・チーム: 19,690円（300件、10ページ、スタッフ3名） ・ビジネス: 28,600円（2,000件、50ページ、スタッフ20名） ・エンタープライズ: 66,000円（5,000件、100ページ、スタッフ無制限）

複数月契約を選ぶと同じプランでも金額が上がります。複数月契約・一括払いの場合、ビジネスプランは月額31,790円です。複数月契約は最短3か月以上からで、単月での契約はできないと明記されています。

ここで冷静に見たいのは、カレンダーを貼るためだけにスモールからビジネスへ上げると、年間契約でも月額の差が18,810円、1年で225,720円増えるという事実です。予約件数が月200件に収まっていて、スタッフ管理も要らない店にとって、この差額の大半は使わない上限に対する支払いになります。

もちろん、ビジネスプランには他にも上位機能が含まれています。グループ予約受付、キャンセル待ち設定、シークレットページの作成、予約回数の制限設定、予約と顧客情報のCSVダウンロードなどが、いずれもビジネス以上の区分です。カレンダー埋め込みを入口にして上げるのなら、これらのうち実際に使うものがいくつあるかを数えてから決めるほうが納得できます。ひとつも使わないのであれば、予約ボタンで足りないかをもう一度検討する価値があります。プランごとの上限や機能の線引きは料金のページで自分の使い方に当てはめて確認できます。

埋め込みコードの取り方と、貼っても表示されないとき

対応プランを契約している前提で、実際の手順を追います。公式FAQに記載されている操作は、管理画面のデザインによって2通りに分かれています。ホーム画面の中央にサービス名が表示されている画面では、予約から入って、サイト設定、自社サイトとの予約カレンダー連携、と進みます。画面の左側にメニューが並んでいるデザインでは、サイト、予約サイト、予約システムへの埋め込み、自社サイトとの予約カレンダー連携、という順です。

そこから先の流れは共通で、予約対象となる予約ページを選び、挿入する際の表示方法を指定し、表示されたHTMLコードをコピーして、自分のホームページやブログの編集画面に貼り付けます。スマートフォンからも同じ操作ができます。管理者向けアプリを使っている場合は、画面右下の設定からWeb管理画面へ移動してから同じ手順に入ります。

問題は、貼ったのに何も出ないときです。公式FAQには理由がはっきり書かれています。

予約カレンダーの埋め込む場合は、iframeというタグを利用しHPなどへ埋め込む方式となっております。ご利用中のHP作成サービスなどがiframeに対応していない場合、埋め込むことができませんのでご注意ください。 出典: reserve-faq.stores.jp

ホームページ作成サービスの中には、安全のためにiframeタグを自動で取り除く作りのものがあります。編集画面では貼り付けられたように見えても、公開された画面ではタグごと消えている、という状態です。この場合、プランを上げてもカレンダーは表示されません。先にサービス側のヘルプで、外部サイトのiframe埋め込みが許可されているかを確かめてください。公式の案内でも、各サービスでの具体的な貼り付け方法が不明な場合は、そのサービスのサポート窓口へ問い合わせるよう促しています。

貼れたあとに確認したいのは、スマートフォンでの見え方です。iframeは指定した幅と高さで固定されるため、パソコンの画面幅を前提に置いたコードは、スマートフォンでは横にはみ出すか、中身が縦に潰れます。予約の大半がスマートフォンから入る業態では、公開前に必ず実機で開いて、日付が指で押せる大きさになっているかを確認してください。ここを飛ばすと、埋め込んだことで逆に予約が減ります。

カレンダーを貼るとお客様の動きはどう変わるか

埋め込みを検討している店主が本当に気にしているのは、コードの貼り方ではなく、貼ったら予約が増えるのかどうかです。ここは断定できる話とできない話が混じるので、分けて考えます。

断定できるのは、押す回数が減ることです。ボタン方式では、ホームページを見る、ボタンを押す、別サイトが開く、日付を探す、という4つの動きが要ります。カレンダー方式では、ホームページを見る、空いている日を選ぶ、で始まります。特に「そもそも今週空いているのか」を知りたいだけの人にとって、別サイトへ移動しないと空き状況が分からないという段差は、思っているより高いものです。

断定できないのは、その差が売上にいくら効くかです。業種、単価、指名の有無、来店頻度で結果は変わります。導入した店の数字を並べて何割増えると書く記事もありますが、条件が揃わない比較には意味がありません。判断材料にするなら、自分の店の数字で見るほうが確かです。ホームページの予約ボタンが月に何回押され、そのうち何件が予約になっているか。この2つが分かれば、途中で離脱している人数が見えます。離脱が少ないなら、カレンダーに替えても伸びしろは小さいという読み方ができます。

もうひとつ現場でよく起きるのは、埋め込みそのものよりも、埋め込んだ先の情報が古いという問題です。ホームページに営業時間や休みの案内を手書きで置いたまま、予約カレンダーだけを貼ると、2つの情報が食い違います。お客様は目の前のカレンダーではなく、ページ上部に書かれた古い営業時間を信じて電話をかけてきます。貼るときは、同じページの中に矛盾する記述が残っていないかを併せて点検してください。

予約ページの型によって、埋め込みの向き不向きが変わる

同じ埋め込みでも、どの型の予約ページを使っているかで手応えが変わります。予約ページのタイプは4種類あり、レッスン・イベントタイプとメニュータイプは全プラン、メニュータイプの複数スタッフ登録はチームプラン以上、スクールタイプはビジネスプラン以上という区分です。

レッスン・イベントタイプは、日時と定員が決まった枠を並べる形です。ヨガ、料理教室、体験会、セミナーのように、開催日が先に決まっている商売がここに当たります。公式の案内でカレンダーの設置を勧めているのもこの型で、理由ははっきりしています。日付ごとに残席が並ぶので、表として見せた瞬間に情報量が増えるからです。「今週の土曜が残り2席」という状態が一目で伝われば、それだけで申し込みの理由になります。

メニュータイプは、施術やカットのように所要時間で枠を切る形です。この型では、お客様がまずメニューを選び、そのあとで空き時間を探します。カレンダーだけをホームページに置いても、メニューを選ぶ手順が先に来るため、結局は予約サイトの画面に移ることになります。この型なら予約ボタンで送るほうが動きが素直で、しかもボタンは全プランで使えます。上位プランに上げる前に、自分の予約ページがどちらの型かを確かめる価値があるのは、この差があるからです。

スクールタイプは、曜日と時間が固定の在籍者を管理する形で、振替の予約が中心になります。すでに通っている人が使う画面なので、ホームページの一番目立つ場所にカレンダーを置く意味は薄くなります。この型を使っている場合は、ホームページより、在籍者向けの案内やアプリからの動線を整えるほうが効きます。

型を確かめずに埋め込みだけを先に決めると、月額を上げたのに動きが変わらないという結果になりがちです。順番としては、型の確認、ボタンで足りるかの確認、それでも表を見せたいかの確認、という3段で判断してください。

埋め込む前に決めておきたい5つのこと

コードを取りに行く前に決めておくと、あとの貼り替えが減る項目があります。順に挙げます。

1つ目は、どの予約ページを貼るかです。埋め込みコードは予約ページ単位で発行されるため、メニューが5つあるからといって5つのカレンダーをホームページに並べると、見る側は選べません。初回のお客様に一番選んでほしい入口を1つ決めて、そこだけを貼るほうが迷いは減ります。残りは予約サイト側の一覧に任せるという分け方が現実的です。

2つ目は、貼る位置です。ホームページの一番下に置いても、そこまでスクロールする人は多くありません。かといって最上部に置くと、店の雰囲気や料金を確かめる前に予約を求めることになり、初めての人には重く映ります。料金とメニューの説明が終わった直後、という位置が収まりやすいところです。決めた位置は記録に残しておいてください。ホームページを作り直したときに、同じ位置に戻せます。

3つ目は、表示方法の指定です。コードを取得する画面で挿入する際の表示方法を選ぶ手順があります。ここで選んだ形がそのまま来店前のお客様が見る画面になるため、パソコンとスマートフォンの両方で確認してから決めてください。あとから変えるにはコードを取り直して貼り替える必要があります。

4つ目は、受付の締め切りです。カレンダーを貼ると、これまで電話でしか入らなかった直前の予約がそのまま入ってきます。当日の1時間前に予約が入っても困らないのか、前日の何時で締めたいのか。この線引きは予約受付・キャンセル・変更期限の設定で決められて、この設定自体は全プランで使えます。カレンダーを貼る前に締め切りを決めておかないと、貼った翌日から想定外の時間に予約が入ります。

5つ目は、予約が入ったときに誰が気付くかです。ホームページから直接申し込みが入るようになると、電話のように音で気付くことがなくなります。通知メールの宛先を確認し、営業中に見る端末に届く状態にしておいてください。管理者向けアプリは全プランで使えるので、店の端末に入れておくのが手堅い運用です。

この5つは、どれもプランの契約とは関係なく、決めるだけで済むものです。埋め込みが上位プランでしか使えないと分かって落胆した場合でも、この5つを整えるだけで電話の本数はかなり減ります。

電話を減らしたいだけなら、先に効く設定がある

カレンダーを貼りたいという相談の背景には、電話対応を減らしたいという目的が隠れていることがよくあります。目的がそこにあるなら、上位プランへ上げる前に効く手が3つあります。

1つ目は、予約通知メールの中身を整えることです。予約が確定したときに自動で送られるメールに、道順、駐車場の有無、持ち物、当日の連絡先を書いておけば、その4つについての電話は減ります。予約通知メールのカスタマイズはスモールプラン以上の機能ですが、署名の設定と併せて一度書けば以後は自動で載ります。

2つ目は、リマインドの自動配信です。予約日時の前に自動でメッセージを送る機能があり、送信のタイミングは何時間前という形で指定できます。前日の何時に送るかを決めておけば、当日の連絡なしの一部は防げます。ただし公式FAQには、設定した配信日を経過した後に入った予約に対しては配信されないという注意が書かれています。前日の締め切りをきちんと引いておかないと、直前予約の人だけリマインドが届かないという偏りが出ます。メルマガとリマインドの自動配信はスモールプラン以上の区分です。

3つ目は、よくある質問を予約ページ側に書いておくことです。予約サイトには店の説明を載せる欄があります。ここが空欄のまま埋め込みだけを進めると、カレンダーで日付を選ぶ直前に疑問が湧いた人が、結局電話をかけます。予約の画面に来た人が最後に迷う点は、店ごとにだいたい決まっています。過去1か月にかかってきた電話の内容を3つ思い出して、それを書いておくだけで違います。

この3つを終えたうえで、それでもホームページ上で空き状況を見せたいと判断できたなら、そのときが上位プランを検討する時機です。順番を逆にすると、月額を上げたのに電話は減らないという結果になりやすくなります。

貼ったあとに起きる、3つの手戻り

埋め込みは一度やって終わりに見えますが、あとから作業が発生する場面があります。公式資料で確認できるものを3つ挙げます。

1つ目は、予約ページのURLやIDを変更したときです。公式FAQには、タグを埋め込んでいる場合はID変更によりタグ修正が必要で、これは有償対応になると記載されています。同じ記事では、予約ボタンのURLは書き換えまたは再取得が必要で、LINEミニアプリと連携中の場合は審査中のID変更には再審査が必要とも書かれています。店名を変えたい、URLを短くしたい、といった理由でIDを触ると、貼り付け済みの部品が一斉に壊れる可能性があるということです。

2つ目は、予約ページを増やしたときです。埋め込みコードは予約ページを選んで発行する形なので、新しい予約ページを作ってもホームページ側は自動では増えません。コースやメニューを季節ごとに入れ替える運用をしているなら、その都度コードを取り直して貼り替える作業が残ります。予約ページ公開数の上限がスモールとチームで10ページ、ビジネスで50ページという違いも、この運用の設計に効いてきます。

3つ目は、計測タグを入れているときです。予約完了数を広告やアクセス解析で数えたい場合、タグの埋め込みは申し込みが必要な仕組みで、一部の予約ページにだけ設置したい場合は埋め込み先のURLを指定します。新しく予約ページを作った場合も、都度タグ埋め込みの依頼が必要になると公式FAQに明記されています。ページを増やすたびに依頼を出す前提で運用を組んでおかないと、いつの間にか一部のページだけ計測から抜け落ちます。

この3つに共通しているのは、ホームページと予約システムを別々に触っていると、片方の変更がもう片方を静かに壊すということです。貼り替えの作業を誰がやるのかを決めていない店では、担当者が変わった時点で更新が止まります。しかも壊れ方が静かなのが厄介で、エラー画面が出るわけではなく、ただカレンダーの部分が空白になるだけです。自分のホームページを毎日見ている店主はほとんどいないので、気付いたときには数週間分の申し込みを取り逃がしていた、という話になります。予防としては、埋め込んだページのURLを控えておき、月に一度、スマートフォンで開いて表示を確かめる習慣を作るのが確実です。作業としては1分で終わります。

埋め込み以外に、入口を増やす手はいくつある

カレンダーの埋め込みは選択肢のひとつであって、唯一の正解ではありません。公式の案内では、予約を案内する方法として複数の経路が並べられています。店頭やチラシに予約サイトのQRコードを貼る、LINE公式アカウントのあいさつメッセージやリッチメニューに予約サイトのリンクを置く、ホームページに予約ボタンを設置する、SNSのプロフィールや固定の投稿にリンクを置く、Googleビジネスプロフィールから予約できるようにする、といった手です。

このうち、費用をかけずに今日できるのがQRコードとSNSのリンクです。会計のときに次回予約を促す動線を作りたいなら、レジ横のチラシにQRコードを置くほうが、ホームページのカレンダーより効きます。すでに来ているお客様は、そもそもホームページを見に行かないからです。

Googleビジネスプロフィールからの予約は、検索結果やマップから直接入ってくる新規のお客様に効きます。公式資料では、この機能は全プランで利用できる区分になっています。ホームページを持っていない、あるいは更新が止まっている店にとっては、カレンダー埋め込みより先に手を付ける価値がある入口です。

LINEについては、LINEミニアプリ連携という別の仕組みがあります。こちらは月額4,400円の機能追加オプションで、スモールプラン以上の契約が前提です。予約完了時と前日のリマインドをLINEで通知でき、予約のときにLINE公式アカウントを友だち追加してもらえます。ホームページよりLINEでお客様と繋がっている店なら、カレンダー埋め込みに18,810円を足すより、こちらのほうが釣り合うことがあります。どの入口が自分の業態に合うのかは業種ごとの使い方にまとまっているので、業態の近い例から逆算するのが早道です。

予約の受け方を並べ直すときの見取り図

ここまでの話を、道具選びの視点に置き直します。カレンダーを埋め込みたいという要望の裏には、たいてい「予約のために電話を受けたくない」「空き状況を何度も説明したくない」という本音があります。その目的から逆算すると、確認する軸は4つに絞れます。

1つ目は、やりたいことが上位プランに紐づいていないかです。予約カレンダーの埋め込みのように、機能そのものは単純でも上位プランでしか使えない区分がある道具では、ひとつの要望のために全体の月額が跳ね上がります。自分が使う機能が、どのプランのどの位置にあるのかを一覧で見比べるところから始めてください。何ができて何ができないのかの粒度をそろえて確認したいときはできることに一覧があります。

2つ目は、決済が前提になっているかどうかです。事前決済を軸に設計された道具では、決済手数料と入金サイクルが運用のリズムを決めます。当日その場で受け取る商売にとって、その前提は重石になります。決済が必須でない業態に合わせて、予約の受付から次の来店までを一続きにしている作りであれば、手数料の話と予約の話を切り離して考えられます。どちらが優れているという話ではなく、自分の会計がどちらに寄っているかで決まります。

3つ目は、他の道具と並べたときの位置です。同じ予約システムでも、教室やレッスンに強いもの、サロンの指名に強いもの、面談の日程調整に寄せたもので設計が違います。埋め込みが標準機能なのか上位機能なのかも道具によって分かれます。どこが同じでどこが違うのかを見比べるには他社との比較が使えます。移行するかどうかは別として、いま払っている金額が妥当かを測る物差しにはなります。

4つ目は、貼ったあとに誰が面倒を見るかです。予約ページを増やしたらコードを取り直す、URLを変えたら貼り替える、といった作業が残ることは前の節で見たとおりです。画面の動きを先に確かめておくと、その手間の量を見積もれます。デモを見るで操作の流れを追い、契約や運用の細かい疑問はよくある質問で潰しておくと、契約してから知る事実が減ります。

最後に、埋め込みという作業が本当に効くのは、予約が入ったあとの流れが整っている店だけだという点を書いておきます。カレンダーを貼れば申し込みは入りやすくなりますが、前日のリマインドが手作業のままなら当日の連絡なしは減りません。来店の御礼が誰かの手に依存していれば、忙しい週は止まります。3か月来ていないお客様に気付く仕組みが無ければ、新規で埋めた分だけ既存が抜けていきます。ホームページに表を貼るという作業は、その全体の入口を1段だけ広げるものです。入口を広げる前に、受けたあとの流れが自動で回っているかを一度点検しておくと、同じ手間でも戻ってくるものが変わります。

Q1. 予約カレンダーの埋め込みはどのプランから使えますか？

公式の料金比較では、HPやブログへの予約カレンダーの埋め込みはビジネスプランとエンタープライズプランにのみ丸が付いています。フリー、スモール、チームでは利用できません。ビジネスプランは年間契約・一括払いで月額28,600円（税込）です。一方、予約ボタンの埋め込みは全プランで利用でき、月額0円のフリープランでも設置できます。

Q2. コードを貼っても何も表示されないのはなぜですか？

埋め込みはiframeタグを使う方式のため、利用しているホームページ作成サービスがiframeに対応していないと表示されません。安全のためにタグを自動で取り除く作りのサービスがあり、編集画面では貼れたように見えても公開画面では消えています。まず利用中のサービスのヘルプで外部サイトの埋め込みが許可されているかを確認してください。

Q3. 埋め込みコードはどこから取得しますか？

管理画面から予約ページを選んで発行します。ホーム画面中央にサービス名が出るデザインでは、予約、サイト設定、自社サイトとの予約カレンダー連携の順に進みます。左側にメニューが並ぶデザインでは、サイト、予約サイト、予約システムへの埋め込み、自社サイトとの予約カレンダー連携の順です。表示方法を指定するとHTMLコードが表示されます。

Q4. 予約ページのURLを変えると埋め込みはどうなりますか？

公式FAQには、タグを埋め込んでいる場合はID変更によりタグ修正が必要で、これは有償対応になると記載されています。予約ボタンのURLも書き換えまたは再取得が必要です。LINEミニアプリと連携中で審査中の場合は再審査が必要になります。URLやIDの変更は、貼り付け済みの部品をまとめて作り直す作業を伴うと考えてください。