Studioのサイトから、ネットで予約を受けたい。予約システムって埋め込めるの？
サロンや教室、クリニックなど、予約を受けるお店やサービスでは、サイトから直接予約できると便利です。Studioには予約の機能はありませんが、外部の予約サービスと組み合わせれば、サイトから予約を受けられます。
この記事では、Studioでのサイト制作を手がける新ゆりデザイン事務所が、Studioのサイトに予約システムをつなぐ方法と、埋め込むときの注意点を解説します。
先に結論をお伝えすると、次のとおりです。
- Studioには予約の機能はないので、外部の予約サービスと組み合わせる
- 方法は、予約ページへリンクするか、Embedボックスで埋め込むかの2つ
- 迷ったら、確実に動くリンクから始めるのがおすすめ
以下で、予約をつなぐ2つの方法、埋め込みの手順、予約サービスの選び方、注意点を順に紹介します。
目次
Studioのサイトで予約を受ける2つの方法
Studioのサイトで予約を受ける方法は、次の2つです。
| 方法 | メリット | 注意点 |
|---|---|---|
| 予約サービスのページへリンクする | 設定がかんたんで、確実に動く。どの予約サービスでも使える | 予約のときに、別のページに移る |
| 予約の画面を埋め込む | サイトの中で予約の画面を表示できる | 予約サービスが埋め込みのコードを用意している必要がある。うまく動かないことがある |
どちらの方法でも、予約の受付や管理は、予約サービスの側で行います。
予約サービスのページへリンクする
いちばん手軽で確実なのは、予約サービスのページへのリンクです。次のように置くと、予約につながりやすくなります。
- ボタンの文字は、「ネット予約はこちら」のように分かりやすくする
- ボタンは、ページの上の方と、メニューや料金の近くに置く
- スマホでは、画面の下に固定しておく方法もある
- 電話でも予約を受けるなら、電話番号も並べて載せる
予約の画面を埋め込む手順
予約サービスが、予約の画面をサイトに表示するためのコード（埋め込みのコード）を用意している場合は、StudioのEmbedボックスで埋め込めます。
1. 予約サービスで埋め込みのコードをコピーする
予約サービスの管理画面で、サイトに埋め込むためのコードを探してコピーします。「ウィジェット」「埋め込み」などの名前で用意されていることが多いです。
2. StudioにEmbedボックスを置く
Studioのエディタで、追加のメニューから「埋め込み」の「Blank」を選び、予約の画面を表示したい場所に置きます。
3. コードを貼り付けて保存する
Embedボックスを選び、右のパネルの「埋め込み」から「エディタを開く」を押して、コピーしたコードを貼り付けて保存します。
4. 公開中のサイトで動きを確かめる
公開しているサイトの場合は「更新」を押し、公開中のサイトで、実際に予約の画面が動くかを確かめます。スマホでの見え方も確認しましょう。詳しくは、Studioのヘルプ（Embed（埋め込み）ボックス）で確認してください。
予約サービスを選ぶときのポイント
これから予約サービスを選ぶ場合は、次の点を比べてみましょう。
- 業種に合っているか：サロン、教室、病院など、業種向けの機能があるか
- 埋め込みのコードがあるか：サイトの中に表示したい場合
- 予約の通知：お客様と自分に、予約の確認のメールが届くか
- 料金：無料のプランでどこまで使えるか、予約の数で料金が変わるか
- Googleとの連携：Googleマップなどから予約できるか
Googleマップから見つけてもらう方法は、Googleビジネスプロフィールの登録方法で紹介しています。
予約をつなぐときの注意点
Studioのサイトに予約をつなぐときは、次の点に注意しましょう。
- 埋め込んだコードは、内容によって一部の機能が制限されることがある
- 埋め込みの中のリンクは、設定しないと枠の中で開くことがある
- 独自のコードや外部のサービスのコードは、Studioのサポートの対象外になることがある
- 予約の画面が動かないと予約を取りこぼすので、公開後も定期的に確かめる
Studioの標準の機能でできないことは、次の記事にまとめています。
Studioでできないこと
まずは無料相談から
「予約の画面をサイトに入れたい」「どの予約サービスが合うか知りたい」といったご相談だけでも大丈夫です。新ゆりデザイン事務所の無料相談でお気軽にお聞かせください。
Studioの予約システムでよくある質問
Studioのサイトに予約システムをつなぐときに、よくいただく質問をまとめました。
Q1. Studioに予約の機能はありますか？
Studioには、予約を受け付ける機能はありません（2026年10月時点）。外部の予約サービスと組み合わせて使います。予約サービスのページへリンクする方法と、予約の画面をサイトに埋め込む方法があります。
Q2. 埋め込んだ予約の画面が、うまく動きません。
Studioのヘルプでは、Embedボックスに入れたコードは、内容によって「iframeタイプ」と「sandboxタイプ」に自動で分けられ、sandboxタイプでは一部の機能が制限されることがあるとされています。
うまく動かない場合は、予約サービスのページへのリンクに切り替えるのが確実です。
Q3. 埋め込みのリンクを押すと、枠の中で別のページが開いてしまいます。
Embedボックスの中のリンクは、target属性を設定していないと、枠の中で開くとされています。予約サービス側の設定で、新しいタブで開くようにできるか確認しましょう。
Q4. 無料のプランでも、予約の画面を埋め込めますか？
予約サービスによって、埋め込みのコードが無料プランから使えるかどうかが違います。予約サービスの料金のページで確認しましょう。Studioの側では、独自ドメインで公開するなら有料プランが必要です。
まとめ：まずはリンクで確実に、必要なら埋め込みで
Studioには予約の機能がないため、外部の予約サービスと組み合わせて予約を受けます。方法は、予約サービスのページへのリンクと、Embedボックスでの埋め込みの2つです。
迷ったら確実に動くリンクから始め、サイトの中で予約させたい場合は埋め込みを試してみましょう。
Studioでのサイト制作をプロに任せたい方は、新ゆりデザイン事務所の無料相談でお気軽にご相談ください。
