リピタス LINEで相談

🧩 自社サイトへの予約システム埋め込みガイド

予約フォームを自社サイトに埋め込むには？
英語切替対応の予約システムを
既存ホームページへ導入する手順

結論からいえば、多くの場合は発行されたURLやタグを貼るだけで設置できます。 ただし、デザインの統一・スマホ表示・SSL・表示速度・英語切替がサイトと自然に連動するかなど、 貼った「あと」に確認しておきたい点がいくつかあります。この記事で方式・手順・注意点を順に整理します。

3

主な埋め込み方式は3タイプ

タグ

基本はコード貼付で設置

要確認

スマホ・英語切替の動作

導入の手順を見る ↓

THE OPTIONS

既存サイトに予約システムを組み込む4つの方法

「今あるホームページに予約システムを入れたい」と考えたとき、実は組み込み方には複数の選択肢があります。 どれか一つが正解というわけではなく、サイトの作り方（CMS）や、予約画面をどこまでサイトに溶け込ませたいかによって向き不向きが変わります。 まずは代表的な4つの方式を整理しておきましょう。

①

リンク遷移型（ボタンから予約ページへ飛ばす）

サイトに「ご予約はこちら」というボタンやリンクを置き、タップすると予約システム側のページへ移動する方式です。設置は最も手軽で、貼り付けるのはURL一つだけ。デザイン崩れの心配がほとんどなく、まず予約を受け付けたい店舗に向いています。一方で、予約中は自社サイトから離れるため、見た目の一体感はやや薄くなります。

②

iframe埋め込み型（ページ内に予約画面を表示）

自社サイトのページの中に、窓（フレーム）を開けてその中に予約画面を丸ごと表示する方式です。ページを移動せずに予約まで完結できるため一体感が高いのが利点。反面、フレームの高さ調整やスマホでの表示崩れに注意が必要で、レスポンシブ対応を意識した設置が求められます。

③

ボタン／ウィジェット設置型（スクリプトタグ）

指定のスクリプトタグを1行貼ると、ページ内にボタンやポップアップ型の予約ウィジェットが表示される方式です。デザインの自由度と手軽さのバランスがよく、既存デザインを大きく崩さずに設置しやすいのが特徴。ただし読み込むスクリプトが増える分、表示速度への影響は確認しておきたいところです。

④

サブドメイン運用（予約専用ページを別に持つ）

reserve.あなたの店.com のように、予約専用のアドレスを用意して運用する方式です。本体サイトとは切り離して管理でき、予約側の更新が本体に影響しにくいのが利点。運用は安定しますが、初期のドメイン設定が必要で、他の方式より一手間かかります。

つまり、埋め込みの本題は

「どう貼るか」よりも、「貼ったあと、どう自然になじませるか」

設置そのものは数分でも、確認すべき点を押さえておくと後戻りが減ります。

IS IT EASY?

「埋め込みは簡単か？」への率直な答え

率直にお答えすると、基本は発行されたURLやタグを貼るだけで設置できます。 多くの予約システムでは、管理画面から埋め込み用のコード（数行のHTML）やリンクが発行され、それを自社サイトの該当箇所に貼り付ければ予約フォームが表示されます。 HTMLの専門知識がなくても、貼る場所さえ分かれば設置自体はそれほど難しくありません。

ただし「表示された＝完成」ではない、という点は正直にお伝えしておきたいところです。 実際に運用に耐えるかどうかは、貼ったあとの次のような確認で決まります。

言い換えれば、設置は簡単。仕上げに一手間という関係です。 とくにインバウンド対応で英語切替を使いたい場合は、フォーム単体だけでなくサイト全体の言語導線との整合を見ておくと安心です。

STEP 1〜6

既存ホームページへ導入する6ステップ

順番に進めれば、迷わず設置から公開まで進められます。

①

埋め込み方式を決める

前半で整理したリンク遷移型・iframe型・スクリプト設置型・サブドメイン運用のうち、どれにするかを決めます。「まず早く受付を開始したい」ならリンク遷移型、「ページ内で予約まで完結させたい」ならiframe型やウィジェット型、といった具合に、サイトの目的に合わせて選びます。

②

設置ページと位置を決める

トップページの目立つ場所か、独立した「ご予約」ページか、各メニュー紹介の直下か——どこにフォームを置くかを決めます。予約の入口はできるだけ分かりやすく、ページを深くたどらなくても届く位置に置くのが基本です。

③

発行コード／URLを取得する

予約システムの管理画面から、埋め込み用のタグ（HTML）や予約ページのURLを取得します。方式によって「URLだけ」「iframeタグ」「スクリプトタグ」と発行されるものが異なるので、選んだ方式に対応したコードをコピーします。

④

サイトに貼り付ける

取得したコードを自社サイトに貼り付けます。WordPressなら「カスタムHTML」ブロックやウィジェット、Wix・STUDIOなら埋め込み用の要素（HTML/iframeブロック）、自作HTMLなら該当箇所へ直接タグを記述します。CMSによって貼る場所の呼び名は違いますが、やることは「発行コードを所定の欄に入れる」だけです。

⑤

英語切替とフォーム送信の動作を確認する

公開前に、実際に自分でテスト予約を1件送ってみて、確認メールまで届くかを確かめます。英語切替対応にしている場合は、言語を切り替えたときにフォームの表示や確認メールも意図した言語になるか、サイト側の言語表示とずれていないかまで見ておきます。

⑥

スマホ実機で確認し、アクセス計測を設定する

PCだけでなく実際のスマートフォンで開き、フォームがはみ出さず入力・送信できるかを確かめます。あわせてGoogleアナリティクス（GA4）などで、予約ページの表示や送信完了を計測できるよう設定しておくと、あとで効果を振り返れます。

貼り付けイメージ（iframe埋め込みの一例）

<!-- 予約フォームをページ内に表示する例 -->
<iframe
  src="https://reserve.example.com/embed?lang=ja"
  style="width:100%;min-height:720px;border:0;"
  loading="lazy"
  title="ご予約フォーム">
</iframe>

※ 上記は方式のイメージです。実際に発行されるコードは利用する予約システムによって異なります。高さ（min-height）はフォームの内容に合わせて調整します。

COMPARE THE METHODS

埋め込み方式のかんたん比較

代表的な3方式を、設置の手軽さ・デザインの統一・スマホ表示・向いているサイトの観点で並べました。 迷ったら、まずはリンク遷移型で受付を始め、あとから一体感のある方式へ切り替えるという進め方でも問題ありません。

観点リンク遷移型iframe埋め込み型ボタン（スクリプト）設置型
設置の手軽さ最も簡単（URL1つ）やや簡単（タグ貼付）簡単（1行スクリプト）
デザイン統一別ページへ移動ページ内で一体感が高い既存デザインに馴染みやすい
スマホ表示崩れにくい高さ調整の確認が必要おおむね良好
表示速度への影響ほぼなし小〜中スクリプト分の確認を
向いているサイトまず受付を始めたい店舗ページ内で完結させたいサイト既存デザインを崩したくないサイト

POINTS TO CHECK

導入時に見落としやすい注意点

設置後に「なんだか使いにくい」を防ぐために、事前に押さえておきたい点です。

⚠スマホでのレスポンシブ崩れ

PCではきれいに収まっていても、スマホでフォームが横にはみ出したり、ボタンが押しづらくなることがあります。iframeの高さや幅は固定値ではなく、画面幅に追従する設定にしておくと崩れにくくなります。必ず実機で確認しましょう。

⚠読み込み速度への影響

埋め込みによって外部のスクリプトやフレームを読み込むと、ページの表示が重くなる場合があります。とくにトップページなど最初に見られるページに置く場合は、遅延読み込み（loading="lazy"）などで体感速度への影響を抑える配慮が有効です。

⚠英語切替がサイトとちぐはぐにならないか

サイトを日本語で見ているのに予約フォームだけ英語、あるいはその逆になると利用者が戸惑います。英語切替対応の予約システムを使う場合は、サイト側の言語切替と連動させるか、少なくとも初期表示の言語を揃えておくと自然です。

⚠問い合わせ・電話導線との併設

予約フォームを置いても、電話や問い合わせで相談したい人は一定数います。フォーム一択にせず、電話番号や問い合わせ導線もあわせて残しておくと取りこぼしを防げます。

⚠重複コンテンツ・SEOへの配慮

サブドメイン運用や別ページ化をする場合、同じ内容が複数のURLに存在すると検索評価が分散することがあります。正規URL（canonical）の指定など、基本的なSEOの整理をしておくと安心です。

⚠予約確定後の遷移先

予約が完了したあと、どこに戻すかも大切です。自社サイトのトップやサンクスページに戻す、確認メールへ案内する、次回来店のクーポンを表示するなど、完了後の一手をあらかじめ決めておくと体験がなめらかになります。

株式会社アンカーリンク

この記事を運営する株式会社アンカーリンクが手がける予約・顧客管理システム（リピタス／RepiTas）は、既存の自社ホームページへの埋め込み設置に対応しており、 インバウンド向けに英語切替対応へのカスタマイズも行えます。発行したタグを貼るだけの設置から、デザインや言語導線をサイトになじませる調整まで、状況に合わせてご相談いただけます。 なお、予約画面の英語切替の詳しい仕組みはこちらの関連記事で解説しています。

埋め込み導入について相談する

FAQ

予約システムの自社サイト埋め込みに関するよくある質問

予約システムの埋め込みに専門知識は必要ですか？
多くの場合、発行された埋め込みコードやURLを自社サイトの所定の場所に貼り付けるだけで設置できます。HTMLの高度な知識は必ずしも必要ありません。ただし、スマホ表示や英語切替がサイトと自然に連動するかといった仕上げの確認には、少し慣れが要ることもあります。
WordPressで作ったサイトにも埋め込めますか？
はい、埋め込めます。WordPressでは「カスタムHTML」ブロックやウィジェットに埋め込みタグを貼るのが一般的です。Wix・STUDIO・自作HTMLなど他の作り方でも、HTMLやiframeを挿入できる箇所があれば設置できます。
英語切替に対応した予約システムは既存サイトにも入れられますか？
入れられます。英語切替対応にカスタマイズした予約フォームも、通常の埋め込みと同じ手順で設置できます。設置後は、サイト側の言語表示とフォームの言語がちぐはぐにならないか、初期表示の言語が揃っているかを確認しておくと自然に見えます。
スマホで表示崩れが起きないか心配です。
iframe埋め込みなどでは、高さや幅を固定値ではなく画面幅に追従する設定にすると崩れにくくなります。公開前に必ず実際のスマートフォンで開き、フォームがはみ出さず入力・送信できるかを確認してください。
埋め込むとサイトの表示速度は遅くなりますか？
外部のスクリプトやフレームを読み込む分、多少の影響が出ることはあります。遅延読み込み（loading="lazy"）を使う、最初に見られるページに重い要素を置きすぎない、といった配慮で体感への影響は抑えられます。設置後に表示速度を一度チェックしておくと安心です。

既存サイトへの埋め込み、
まとめてご相談ください

今のホームページの作り方（WordPress・Wix・STUDIO・自作HTMLなど）や、英語切替を使いたいかどうかを伺ったうえで、どの方式が向いているか、どんな手順で進めるかを率直にお伝えします。設置だけの確認でも構いません。

LINEで相談する（最短）

または、フォームから

自社サイトへの埋め込みを相談する