外部フォームや予約システムを埋め込んだのに表示されないとき｜URLをiframeに入れるだけでは動かない理由

予約システムや問い合わせフォームなど、外部サービスの画面を自社サイトの中に埋め込んだのに、その部分だけ真っ白になっている。あるいは表示はされたが、高さが数センチに潰れて中身がほとんど見えない――。外部サービスの埋め込みでは、この2つの症状が本当によく起きます。

先に結論を書きます。外部サービスをサイトに埋め込むときは、ブラウザで開いたときのURLをiframeに入れるのではなく、そのサービスの管理画面で発行される「埋め込みコード（設置コード）」を使ってください。 表示されない・高さが潰れるといった不具合の多くは、この入手手順を飛ばして「公開URLをそのままiframeのsrcに入れる」ことで起きています。

「公開URL」と「埋め込み用コード」は別物

iframeは、他のページを自分のページの中に表示するためのHTMLの仕組みです。仕組みだけ見れば「表示したいページのURLを入れれば映る」ように思えますし、実際に昔ながらの静的なページならそれで映ります。

ところが、いま主流のフォーム作成サービスや予約システムは、この前提で作られていません。多くのサービスは「ブラウザで直接開くための公開URL」と「他のサイトに埋め込むための専用コード」を分けて設計しています。埋め込み用のコードには、埋め込み先で動くために必要な初期化処理や、後述する高さ調整の仕組みが含まれていて、公開URLにはそれがありません。

つまり「公開URLをiframeに入れたのに表示されない」は、故障でもブロックでもなく、サービス側が想定していない使い方をしている状態です。ここを知らないまま原因を探し始めると、かなりの時間を失います。次の実例がまさにそのパターンでした。

実例：ヘッダーに拒否設定がないのに、真っ白になる

都内のスクールのサイトで、外部のフォーム作成サービス（Tayori）で運用しているオンライン申込フォームをサイト内に埋め込むことになったときの話です。フォームの公開URLをiframeのsrcに指定したところ、表示は真っ白。そこで原因を切り分けるために、技術的な確認を一つずつ行いました。

• レスポンスヘッダーに X-Frame-Options（iframe表示を拒否する設定）は付いていない
• CSPの frame-ancestors（同じく埋め込み元を制限する設定）も付いていない
• テスト環境（http）と本番ドメイン(https)の両方で試しても、どちらも真っ白
• 埋め込みでよく使われる高さ通知（postMessage）は一度も飛んでこない
• ページのHTMLを直接取得すると、中身は空の受け皿が1つあるだけの約4KB。JavaScriptが後から画面を組み立てるSPAという作りだった

ここがこの症状の厄介なところです。iframeを拒否するヘッダーが付いていれば、ブラウザのコンソールに「拒否された」と痕跡が残るので、すぐ原因にたどり着けます。ところが今回のように「拒否はしていないが、描画もされない」場合は、エラーがどこにも出ません。 ブロックの痕跡がないため、自分のCSSやテーマ側を疑って延々と調べ続けることになりやすいのです。

なお、URLの後ろに ?embed=1 のようなパラメータを付けたら埋め込みモードになるのでは、と試したくなりますが、これも推測で試すだけ時間を失いやすい行動です。このケースでも複数パターンを試してすべて同じ結果でした。答えは最初から公式の側にあります。このサービスの場合、管理画面でフォームを選び、「設置」からiframe方式を選んでコードを生成するのが正規の手順で、公式の案内にも「公開URLとは別に発行されるコードを使う」前提で書かれています。

高さが潰れるのも、同じ理由で起きる

もう一つの定番症状である「表示はされたが高さが潰れる」も、原因は同じ場所にあります。

iframeは、高さを指定しないと150pxという小さな初期値で表示されます。そして中身がフォームや予約カレンダーの場合、内容の長さは入力状況や日付によって変わるため、固定の高さを指定してもどこかで見切れます。

各サービスが発行する公式の埋め込みコードには、この問題を解決するために「中身の高さを親ページに通知して、iframeの高さを自動で合わせるスクリプト」が含まれていることが多いのです。公開URLを直接iframeに入れると、この通知の仕組みごと失われるため、高さが150pxに潰れたり、内部にスクロールバーが二重に出たりします。「埋め込みコードを使う」という一つの対処で、表示されない問題と高さの問題の両方が片づくことが多いのはこのためです。

逆方向の事故もあります。WordPressの本文にYouTubeなどのURLを貼ると自動で埋め込みに変換されますが、この変換は環境によって「非表示のiframe＋代替表示のリンクカード」という二段構えのHTMLを出力します。ここに見た目を整えようとして動画用の縦横比のCSSを一律に当てると、非表示のはずのiframeが空の枠として現れることがあります。iframeに対する一律のCSSは、埋め込みの種類ごとの作りを確かめてから当てるのが安全です。

正しい手順：実装の前に「発行機能があるか」を確かめる

外部サービスの埋め込みを頼まれたときに、失敗しない順序はこうです。

1. 公式ドキュメントで「埋め込みコードの発行機能」を確認する

コードを書き始める前に、そのサービスのヘルプページで「埋め込み」「設置」「iframe」といった項目を探します。発行機能があるならその手順に従うだけで済み、なければ「そもそも埋め込みに対応していない」可能性を最初に把握できます。公式が「埋め込みに対応していない場合がある」と明記しているサービスもあります。

2. 管理画面から埋め込みコードを発行し、そのまま貼る

発行されたコードには、srcのURLだけでなく、初期化用のスクリプトや高さ調整の仕組みが含まれていることがあります。URL部分だけを抜き出して自前のiframeに移し替えるのではなく、コード一式をそのまま使うのが原則です。

3. テスト環境と本番相当の両方で表示を確認する

埋め込みコードの中には、httpとhttpsの違いで挙動が変わるものがあります（外部スクリプトの読み込み方によっては、httpのローカル環境だけで壊れることがあります）。片方だけで確認して問題ないと判断すると、公開後に初めて症状が出るという事態になりかねません。両方で確認しておけば、症状が出たときに「環境の問題か、サービス側の仕様か」を一発で切り分けられます。

4. 確認する場所はコンソールだけでなく、ヘッダーとHTMLの実体まで

真っ白になったときは、①拒否ヘッダーの有無、②返ってきているHTMLの中身、の2点を見ると原因の層が分かります。ヘッダーで拒否されていればブラウザが教えてくれます。ヘッダーに問題がないのに白いなら、今回の実例のように「専用コードが前提の作り」を疑うのが近道です。

埋め込みコードがすぐ手に入らないときの設計

実務では「埋め込みコードの発行はクライアントの管理画面でしかできず、すぐには取得できない」という状況がよくあります。ここで作業を止めてしまうのが一番の損失です。

おすすめは、「別タブでフォームを開くボタン」を先に本番へ入れておき、埋め込みコードが手に入ったら設定1箇所でiframe表示に切り替わる構造にしておくことです。実例のスクールのサイトでもこの構造にしました。設定値が空ならボタン導線、埋め込みURLが入ればiframe表示、と自動で切り替わる作りです。これなら利用者への導線は初日から機能し、埋め込みへの移行も1行の変更で済みます。

そしてもう一つ。最終的に「埋め込まずリンクのままでいい」という判断も、十分あり得る正解です。実例のケースでも、最終的にはクライアントとの確認の結果、別タブでフォームを開く方式で確定しました。決済や写真アップロードを含む長いフォームは、狭い埋め込み枠の中で操作させるより、フォーム側のページをそのまま開いてもらうほうが入力しやすいことも多いからです。埋め込みは目的ではなく手段なので、「サイト内で完結して見えること」がどれだけ成果に効くかで選べば十分です。

まとめ

• 外部フォーム・予約システムの埋め込みは、公開URLをiframeに入れるのではなく、管理画面で発行される公式の埋め込みコードを使うのが正解
• 拒否ヘッダーが無いのに真っ白になるケースがあり、この場合はエラーの痕跡が出ないため原因調査が長引きやすい。ヘッダーとHTMLの実体を見て、専用コード前提の作りかどうかを早めに疑う
• 高さが潰れる問題も、公式コードに含まれる高さ自動調整の仕組みが失われていることが原因であることが多い。対処は同じ「公式コードを使う」
• コードがすぐ手に入らないときは、リンク導線を先に本番へ入れ、後から1箇所の変更で埋め込みに切り替えられる構造にしておくと作業が止まらない
• 埋め込みにこだわらず、リンクで開く方式のままにする判断も実務では十分あり得る

外部サービスの埋め込みは「動いて当たり前」に見えて、サービスごとの設計思想に踏み込む必要のある作業です。表示されないときほど、自分のコードより先に「入手手順」を疑ってみてください。