WebサイトのiframeとウィジェットEmbed完全ガイド

2026-04-01·7分で読めます·

iframe埋め込みWebサイト

iframeとは何か

iframe（インラインフレーム）は、HTMLドキュメント内に別のHTMLページや外部コンテンツを埋め込むためのHTMLタグです。Google マップ・YouTubeの埋め込み・外部フォームなど、日常的に使われている技術です。

<iframe
  src="https://example.com"
  width="600"
  height="400"
  title="埋め込みコンテンツ"
></iframe>

基本的な構造はこれだけです。ただし、使い方・セキュリティ設定・レスポンシブ対応など、知っておくべきポイントが多くあります。

| 属性 | 役割 | 推奨値 | |------|------|--------| | src | 埋め込むURLを指定 | HTTPSのURLのみ | | width | 横幅 | 100%（レスポンシブ推奨） | | height | 高さ | コンテンツに応じて設定 | | title | アクセシビリティ用ラベル | 必須（スクリーンリーダー対応） | | loading | 遅延読み込み | lazy（パフォーマンス改善） | | sandbox | セキュリティ制限 | 外部コンテンツには必ず設定 | | allow | 許可する機能 | 必要な機能のみ許可 |

レスポンシブ対応の実装

iframeをモバイル対応にするためのCSSの実装パターンです。

アスペクト比固定の方法（推奨）：

.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 のアスペクト比 */
  height: 0;
  overflow: hidden;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

<div class="iframe-container">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube動画"
    loading="lazy"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

セキュリティ上の注意点

sandbox属性を必ず設定する

信頼できない外部コンテンツを埋め込む場合、sandbox属性を設定することでスクリプトの実行・フォーム送信などを制限できます。

<!-- 完全に制限（最も安全） -->
<iframe src="https://external.example.com" sandbox></iframe>

<!-- スクリプト実行を許可 -->
<iframe src="https://external.example.com" sandbox="allow-scripts"></iframe>

<!-- フォーム送信を許可 -->
<iframe src="https://external.example.com" sandbox="allow-forms allow-scripts"></iframe>

X-Frame-Options / CSPの確認

自社のサイトを外部からiframeで埋め込まれたくない場合は、HTTPレスポンスヘッダーで制限できます。

# iframeでの埋め込みを完全禁止
X-Frame-Options: DENY

# 同一オリジンのみ許可
X-Frame-Options: SAMEORIGIN

逆に、自社のウィジェットを外部サイトに埋め込ませたい場合は、このヘッダーをALLOWALLまたは削除する必要があります。

実用的な埋め込み例

Googleマップの埋め込み

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!..."
  width="100%"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  title="店舗の地図"
></iframe>

Googleフォームの埋め込み

<iframe
  src="https://docs.google.com/forms/d/e/FORM_ID/viewform?embedded=true"
  width="100%"
  height="800"
  frameborder="0"
  marginheight="0"
  marginwidth="0"
  title="お問い合わせフォーム"
  loading="lazy"
>
  読み込んでいます…
</iframe>

iframeより優れた代替手段：埋め込みスクリプト

テスティモニアルウィジェットのように、外部から動的にコンテンツを読み込む場合は、iframeよりJavaScriptを使ったscriptタグの埋め込みの方が柔軟性があります。レビューウィジェットをサイトに埋め込む方法については、こちらの記事で詳しく解説しています。

スクリプトタグ方式の例：

<!-- 任意の場所にdiv要素を置く -->
<div data-koe-widget="your-widget-id"></div>

<!-- bodyの末尾でスクリプトを読み込む -->
<script src="https://koecollect.com/embed.js" async></script>

この方式では、ウィジェットのスタイルを親ページのCSSに合わせて調整しやすく、レスポンシブ対応も容易です。

iframeとスクリプト埋め込みの使い分け：

| iframeが適している場合 | スクリプト埋め込みが適している場合 | |---------------------|--------------------------| | 完全に外部のコンテンツ（地図・動画） | 自社ウィジェット・カスタマイズが必要な場合（JavaScriptウィジェットの作り方参照） | | セキュリティを優先する場合 | 親ページとのCSSの統一が必要な場合 | | 埋め込み元が提供するコードを使う場合 | 動的なコンテンツ更新が必要な場合 |

パフォーマンスへの影響と対策

iframeは追加のHTTPリクエストとレンダリングを発生させるため、ページ速度に影響します。

パフォーマンス改善の施策：

loading="lazy" を全てのiframeに設定する
ファーストビュー外のiframeは遅延読み込みにする
YouTube埋め込みには「Lite YouTube Embed」ライブラリを使う
不必要なiframeを削除する（ページに1〜2個が目安）

まとめ

iframeはWebサイトに外部コンテンツを手軽に埋め込める便利な技術ですが、セキュリティ（sandbox属性）・レスポンシブ対応・パフォーマンスの3点に注意が必要です。テスティモニアルウィジェットなど自社コンテンツの埋め込みには、スクリプトタグ方式の方が柔軟性が高くなります。お客様の声をホームページに効果的に載せるための方法については、こちらのガイドをご参照ください。

テスティモニアルウィジェットのスクリプト埋め込みについては、Koeの公式ドキュメントをご覧ください。JavaScriptウィジェットの作り方もあわせてご参考ください。

ブログ一覧に戻る