※本記事にはアフィリエイト広告（プロモーション）が含まれます。
自社のホームページに、予約カレンダーを置きたい。
この相談は、制作の現場でもよく出ます。Squareの予約を使っているなら答えは「置ける」なのですが、置き方が3通りあって、それぞれ動き方が違いました。
先に知っておくと、あとで直さずに済みます。
オンライン予約そのものは、フリーでも使える
ここは意外だったので先に。
予約まわりの機能は、プランで切られているものが多い。リマインダーはプラス以上、リソース管理はプレミアム限定でした。ところがオンライン予約は、Square 予約フリー、プラスおよびプレミアムの登録者さまが対象と書かれています。
つまり無料のまま、予約ページを持ってサイトに置けます。前払いまで受けたい場合は、アカウントでクレジットカード決済を有効にしておく。お客さま側はクレジットカード、デビットカード、Google Pay、Apple Pay、Squareギフトカード、前払いパターンが使えます。
既存サイトに置く方法は、3つ
場所は1か所にまとまっています。Square データの [予約] > [オンライン予約] > [チャネル] と進んで、[予約フローを既存のサイトに追加する] の [はじめる]。
既存サイトへの3つの置き方
- URLを入手：予約フローのURLをコピーして、好きな場所にリンクとして貼る
- ボタンを作成：色・テキスト・形・フォントを決めてHTMLコードを取得する。メールの署名にも置ける
- 埋め込みコードを入手：HTMLをコピーして、サイトのページに貼り付ける
出典: Squareヘルプセンター「Square 予約でオンライン予約を設定する」（2026年9月24日確認）
複数店舗がある場合は、どの方法でも先に店舗を選びます。URLの場合は予約の種類も選ぶ。
どの方法でも、飛ぶ先は同じ「オンライン予約サイト」です。これは店舗の住所、営業時間、ウェブサイトのリンクを載せたシンプルなページで、カレンダーと同期しています。既存サイトを持っている店は、このページを自前で作り直す必要はありません。リンクを通すだけで足ります。
制作側の感覚でいうと、既存のデザインを崩したくないならボタン、導線を短くしたいなら埋め込み、メルマガやSNSのプロフィールに置くならURL、という使い分けになります。
埋め込みコードでも、サイト内では完結しない
ここが一番の注意点でした。
埋め込みコードの説明に、こう書かれています。お客さまは別のタブまたはウィンドウの予約フローに移動します。
「埋め込み」という言葉から想像するのは、ページの中でカレンダーが開いて、そのまま予約が終わる形だと思います。実際はそうではない。ページから予約フローへ送り出す仕組みです。
離脱を気にするなら、この前提で導線を組むことになります。予約ボタンの手前で、料金や所要時間を出しきっておく。飛んだ先で考えさせない。制作の設計としては、そちらのほうが効きます。サイトそのものの作り方はWebサイト制作のページにまとめています。
高度なウィジェットで、サービスとスタッフを絞る
もう1段階、細かい置き方があります。
[オンライン予約] > [高度なウィジェット] で、特定のサービス、特定のスタッフ、またはその両方を組み合わせて表示するウィジェットを作れます。ページごとに出し分けられるということです。メニューページにはそのメニューだけ、スタッフ紹介ページにはその人だけ、という置き方ができる。
作るときに引っかかる仕様が2つありました。
ひとつ、指定のサービスが割り当てられていないスタッフを選ぶと、そのサービスはウィジェットに表示されません。サービスとスタッフの紐付けが先です。
もうひとつ、オンライン予約の設定に関係なく、すべてのサービスバリエーションが表示されます。普段は出していないバリエーションまで並ぶことがある、ということです。
編集した内容は、そのウィジェットを置いてあるすべての場所に自動で反映されます。スタッフやメニューの構成は、リソースの記事で整理しました。
消すときに、気をつけること
ここだけは先に知っておいたほうがいい仕様です。
Square データからウィジェットを削除しても、その他のウェブサイトに埋め込まれたウィジェットは自動では削除されません。そして削除したウィジェットのコードをサイトから消さない限り、ウィジェットの代わりにエラーメッセージが表示されます。
Square側で消えたから大丈夫、にはなりません。サイト側のコードも自分で消す必要がある。
制作を外注していると、ここが抜けがちです。キャンペーン用に作ったウィジェットを終了後にSquareから消して、ページにエラーだけが残る。どのページに何を貼ったかを、置いた時点で残しておくのが安全です。
Squareでサイトごと作る場合
ホームページを持っていないなら、Squareオンラインビジネスでサイトごと作る手もあります。こちらは置き方が2つ。
予約ページを追加するのは、複数店舗がある場合に向いています。サイトエディタで [+ページを追加] > [予約] > [追加]。
予約リンクを追加するのはヘッダーのナビゲーションからで、単一店舗なら [予約のポップアップ]、複数店舗なら [予約リストページ]を選びます。ポップアップのほうは、その店舗の予約時間がその場で開く形です。
すでに旧版の予約ページを使っている場合も心配はいりません。新しいページで置き換えると、古いURLは自動的に新しいURLに転送されます。
無料テーマで足りなければ有料テーマもありますが、そちらはSquare オンラインビジネスのプラスまたはプレミアムが必要になります。
予約だけのサイトにしたい場合は、他のページをすべて削除すれば成立します。そしてサイトで受けた予約や注文は、Square 予約とお使いのPOSレジアプリに自動的に同期されます。予約時にお客さまが選べるのは、店舗、サービス内容、希望するスタッフ。ここまでが最初から入っています。
埋め込みという言葉が指しているのは、入口までです。
置き方を決める順番は、こうなります。既存サイトがあるか。予約を受けたいのは1店舗か複数か。ページごとに出し分けたいか。この3つで、3つの方法のどれにするかが決まります。
通知が届かない話は予約通知の記事にまとめました。置いたあとに効いてくる設定です。受けたいのが予約ではなく商品の代金なら、WordPressに決済ボタンを置く方法が別にあります。
今日やるなら、[予約] > [オンライン予約] > [チャネル] を開いて、[予約フローを既存のサイトに追加する] から [URLを入手] を押すところまで。URLさえ手元にあれば、置き場所はあとから変えられます。Googleマップから予約を受けたい場合は、「Googleで予約」の条件を先に見ておくと、ブースや間借りの店でも迷いません。
アカウントの作成は無料です。
Square 予約の無料アカウント作成はこちら（公式サイト）
出典（いずれも2026年9月24日に確認）
Squareヘルプセンター「Square 予約でオンライン予約を設定する」
Squareヘルプセンター「オンライン予約ページまたはリンクをオンラインストアに追加する」
