【もう迷わない】iframe（インラインフレーム）の意味と使い方を3ステップでマスターしよう

SHARE

●iframeの意味がわからない
●YouTubeや地図を埋め込みたいけれど失敗する
●SEO的にiframeを使うのが不安

HTMLを学び始めた人の多くが、iframeの使い方でつまずきます。
iframeはページ内に別ページを埋め込む便利なタグですが、SEO・セキュリティ・デザインの3点で注意が必要です。

この記事では、iframeの意味・使い方・SEO対策・安全な活用法を初心者向けにわかりやすく解説します。
読了後には、iframeを自信を持って使いこなせるようになります。

目次

iframeとは？意味と基本構造をわかりやすく解説

iframe（inline frame）は、Webページの中に別のページを表示するHTMLタグです。
「窓の中にもう一つのページを開く」ような仕組みです。

代表的な用途は、YouTube動画・Googleマップ・外部フォームの埋め込みです。

<iframe src="https://example.com" width="600" height="400"></iframe>
属性名 内容 例
src 埋め込み先のURL src=”https://example.com“
width / height サイズ指定 width=”600″ height=”400″
allow 許可する機能 allow=”fullscreen”
loading 遅延読み込み loading=”lazy”
sandbox セキュリティ制限 sandbox

iframeの基本を理解することで、Webページの自由度が大幅に上がります。

iframeの使い方｜実際の埋め込み例（YouTube・Googleマップなど）

YouTube動画

  1. 「共有」→「埋め込む」をクリック

  2. HTMLコードをコピーして貼り付け

<iframe width="560" height="315" src="https://www.youtube.com/embed/abcd1234" frameborder="0" allowfullscreen></iframe>

Googleマップ

  1. 地図を開いて「共有」→「地図を埋め込む」

  2. コードをコピー

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen loading="lazy"></iframe>

<h2>iframeを使うメリット・デメリットを比較</h2>

項目 メリット デメリット
実装 コードを貼るだけで簡単 外部依存が強い
デザイン 動的要素を追加できる レイアウト崩れのリスク
SEO 補助的に使える 中身を検索エンジンが認識しない

iframeを使うとSEOに影響はある？

iframe内のコンテンツはGoogleが評価しにくい傾向があります。
したがって、メイン部分をiframeで表示するのは避けましょう。

本文中で内容を補足すればSEO評価を保てます。
例：

<p>この動画ではiframeの正しい使い方を解説しています。</p>
<iframe src="https://www.youtube.com/embed/abcd1234"></iframe>

iframeのセキュリティ対策｜安全に使う方法

iframeは外部ページを読み込むため、安全対策が必須です。

属性 内容 目的
sandbox 外部動作を制限 攻撃防止
allow 明示的に許可する操作 セキュリティ制御
loading 遅延読み込み 表示速度改善
<iframe src="https://example.com" sandbox="allow-scripts" loading="lazy"></iframe>

iframeが正しく表示されないときの原因と対処法

原因 内容 対処法
URL誤り srcの指定ミス 正確なURLを設定
HTTPS問題 HTTP混在でブロック httpsに変更
X-Frame制限 外部側で禁止設定 代替手段を検討
サイズ不足 表示領域が小さい width / height調整

レスポンシブ対応iframeの書き方

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe src="https://www.youtube.com/embed/abcd1234"
style="position:absolute; top:0; left:0; width:100%; height:100%;"
frameborder="0" allowfullscreen></iframe>
</div>

スマホでも美しく収まるよう、縦横比（16:9）を維持します。

iframeの実践活用事例

活用シーン 内容 効果
採用サイト エントリーフォーム埋め込み UI統一
イベント告知 Googleフォーム埋め込み 離脱防止
メディア記事 SNS投稿埋め込み 滞在時間増加

iframeを使う前に知っておくべき3つのルール

  1. 信頼できるサイトのみ埋め込む

  2. 代替テキストやリンクを併用する

  3. loading=”lazy”でページ速度を維持する

iframeを理解した次のステップ

タグ 用途 学ぶ価値
<video> 動画埋め込み 外部依存を減らす
<embed> メディア表示 内部構造の理解
<object> PDFなどの埋め込み iframeとの比較に最適

初心者が間違えやすいiframeの設定ミスと防止チェックリスト

iframeの設定では、初期段階で単純なミスが発生しやすいです。公開後のトラブルを防ぐために、次のチェックリストを活用してください。

チェック項目 確認内容 重要度
srcの設定 正しいURLを入力しているか ★★★★★
https対応 httpではなくhttpsか ★★★★★
サイズ設定 幅と高さが適切か ★★★★☆
遅延読み込み loading=”lazy”を設定しているか ★★★★☆
セキュリティ設定 sandboxを設定しているか ★★★★☆
代替説明 本文中で内容説明を補足しているか ★★★☆☆

公開前に6項目すべてを確認すれば、初心者でも安全で読みやすいページを作成できます。

iframeと他の埋め込み方法の違いを比較

iframe以外にも外部コンテンツを埋め込む方法があります。
目的に合わせて適切な手段を選ぶことで、表示速度やSEO効果を最適化できます。

方法 主な用途 メリット デメリット
iframe 外部ページ全体の表示 実装が簡単 SEO評価を受けにくい
oEmbed 動画・SNS表示 自動最適化される 対応サービスが限定される
API＋JS描画 データのみ取得 SEO設計がしやすい 実装がやや難しい
<video>タグ 動画再生 外部依存を減らせる サーバー負荷が増える

埋め込みたい内容の種類に合わせて選択すると、ユーザー体験が向上します。

コピペで使えるiframeテンプレート集

学習直後でも迷わず使えるように、実務向けテンプレートをまとめました。

● セキュリティ強化＋遅延読み込みテンプレート

<iframe
src="https://example.com"
width="100%"
height="400"
loading="lazy"
sandbox="allow-scripts allow-same-origin">
</iframe>

● レスポンシブ対応テンプレート（16:9）

<div style="position:relative;padding-bottom:56.25%;height:0;">
<iframe
src="https://example.com"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
loading="lazy">
</iframe>
</div>

テンプレートを基に、用途に応じてwidthやheightを調整してください。

よくある質問（FAQ）

Q．iframeはSEOに不利ですか？
A．iframe内部の内容は評価対象になりにくいため、メインコンテンツへの利用は非推奨です。補助的に使えば問題ありません。

Q．iframeが表示できない理由は何ですか？
A．X-Frame-OptionsやHTTPS混在が原因の場合があります。セキュリティ設定を確認してください。

Q．何個まで設置しても大丈夫ですか？
A．個数制限はありません。ただし読み込み速度に影響するため、loading=”lazy”の併用を推奨します。

iframe導入前に確認したい目的別アドバイス

目的 推奨設定 補足
YouTube動画を安全に表示 allowfullscreen＋遅延読み込み 視聴離脱を防止
Googleマップを埋め込み styleでサイズ固定 モバイル崩れ防止
問い合わせフォームを表示 sandbox必須 個人情報保護の観点で重要

目的を明確にして設定すれば、UXと安全性のバランスを最適化できます。

まとめ｜iframeを正しく使ってSEOも安全に

iframeは、外部情報を効果的に取り入れるための便利なタグです。
ただし、主役ではなく「補助的な使い方」を心がけることが重要です。

3ステップでマスター：

  1. 意味と構造を理解する

  2. 実際に埋め込む

  3. SEO・安全対策を実施する

安全に使えば、ユーザー体験とSEO評価の両方を高められます。

前の記事

【もう迷わない】xlsx(拡張子)とは？3分でわかる意味・開き…

次の記事

【セキュリティ対策】ワイプとは？パソコンの記憶装置を安全に初期…