HTMLのiframeとは？基本的な3つの用途やメリット・デメリットを徹底解説

「iframeの基本的な意味や用途を知りたい」
「iframeの具体的な使い方や注意点を知りたい」

iframeの活用を考えている方は、上記のような悩みを抱えている場合も多いのではないでしょうか。

そこで、本記事ではiframeの概要を踏まえたうえで、使用するメリット・デメリット、基本的な書き方を解説します。3つの代替手段もご紹介しますので、最後までご覧ください。

また、フォームをノーコードで簡単に埋め込むなら、フォーム作成ツール「formrun」がおすすめです。formrunを使用するメリットは主に下記の9つです。

• プログラミング不要
• 集計がリアルタイムで行える
• 入力補助機能が付けられる
• 条件分岐項目を付けられるため、回答数はそのままでそれぞれにあった質問に答えてもらえる
• ワンクリックでrecaptcha設定可能
• マウス操作でデザイン設定可能
• お問い合わせ管理、メール対応も可能
• 自動メールやChatworkなどツール通知まで付いている
• 有料プランも無料でトライアル可能で、その後自動で請求始まることはなく安心

以上の機能が完備されており、基本料金は無料です。
ビジネス用フォーム作成ツール「formrun」では、複数人でデザイン性の高いフォームを管理できます。

iframe（インラインフレーム）とは、HTMLのタグの一つで、Webページ内に別のWebページやコンテンツを埋め込んで表示できる仕組みです。

iframeを使うと、指定したURLのWebページや外部サービスを元のページの一部として直接表示可能です。これにより、ユーザーはページを移動せずに他の情報や機能をシームレスに利用できるため、利便性が向上します。

たとえば、企業サイトに自社SNSの最新情報を埋め込んだり、YouTubeの動画を自分のWebページ内に表示したりする場合などに、iframeが活用されています。

iframeの基本的な用途は下記の通りです。

• 外部Webページの埋め込み
• 動画の埋め込み
• 地図の埋め込み

それぞれの用途を詳しく解説します。

iframeタグは、外部Webページや外部サービスを自分のWebページ内に直接埋め込んで表示する際に活用されています。

iframeタグを使えば、ユーザーはリンクをクリックして別ページに遷移せずに、埋め込まれた外部コンテンツをそのまま閲覧可能です。これにより、情報のシームレスな提供や複数の外部サービスとの連携が容易になります。

たとえば、企業のWebサイトに自社のInstagramやX（旧Twitter）のタイムラインを埋め込んで最新情報を表示できます。

iframeタグは、YouTubeなどの外部動画サービスの動画を自分のWebサイト内に簡単に埋め込むために広く利用されています。

iframeタグを使うと、動画サービスが提供する埋め込み用URLをコピーして貼り付けるだけで、HTMLや動画ファイルの知識がなくても手軽に動画を表示可能です。自社サーバーに動画ファイルを置く必要がなく、運用や管理の手間も大幅に削減できます。

YouTube動画を埋め込む場合、YouTubeの「共有」→「埋め込む」から表示されるiframeタグをWebページに貼り付けるだけで、動画プレイヤーがそのまま表示されます。

iframeは、Googleマップなどの外部地図サービスを自分のWebページに埋め込むために使われます。

Googleマップの埋め込みにはAPIキーが不要な方法もあり、Googleマップの画面から「共有」→「地図を埋め込む」で取得したiframeタグを貼り付けるだけで、手軽に地図を表示可能です。APIを使わずに地図を埋め込む方法は無料で利用可能で、とくに店舗や企業の所在地案内に便利です。

また、CSSでレスポンシブ対応させれば、スマートフォンなどの画面サイズに合わせて見やすく調整できます。

iframeを使用するメリットは下記の通りです。

• 外部コンテンツを簡単に埋め込める
• デザインやスタイルの衝突を防げる
• 個別のパーツごとに管理・更新できる

それぞれのメリットを詳しく見ていきましょう。

iframeを使用するメリットは、外部コンテンツを自身のWebページに簡単に埋め込める点です。

iframeタグを使えば、YouTube動画やGoogleマップなどの外部サービスやコンテンツを特別なプログラミング知識がなくても、HTMLにタグを追加するだけでページ内に表示できます。これにより、外部コンテンツを自分で用意したり、管理したりする手間が省け、最新の情報や機能をそのまま自サイトに反映可能です。

ユーザーはページを移動せずに動画を再生でき、運営者側も動画の更新や管理をYouTube側に任せられます。

iframeを使用すれば、埋め込んだ外部コンテンツと自サイトのデザインやスタイルの衝突を防げます。

iframeは、外部コンテンツを独立した枠の中に表示する仕組みです。このため、iframe内のCSSやJavaScriptは親ページとは基本的に分離されており、互いのスタイルやスクリプトが干渉しません。

よって、親ページのデザインを崩したり、逆に外部コンテンツの表示が意図せずに変わったりするリスクを減らせます。

iframeを使えば、Webページ内の各パーツを個別に管理・更新できるメリットがあります。

iframeは外部ファイルを独立した枠としてページに埋め込む仕組みのため、埋め込んだパーツごとにHTMLや内容を分割して管理可能です。そのため、特定のパーツだけを修正・更新したい場合でも、該当するファイルだけを変更すればよく、他のページやパーツに影響を与えずに運用できます。

パーツごとに管理・更新できることで、Webサイト全体の運用効率が向上します。

iframeを使用するデメリットは下記の通りです。

• SEO評価の対象外になる
• ページ全体の表示速度が遅くなるケースがある
• セキュリティ上のリスクがある

それぞれのデメリットを詳しく見ていきましょう。

iframeを使用すると、埋め込んだコンテンツはSEO評価の対象外となります。

検索エンジンは、iframeタグで読み込まれた外部コンテンツを、そのページ自体のコンテンツとして評価しません。そのため、iframe内にどれだけ有益な情報やキーワードが含まれていても、親ページのSEO評価には直接反映されません。

また、iframeで埋め込んだYouTube動画やGoogleマップはユーザー体験向上に役立ちますが、動画や地図自体の内容は親ページのSEO評価につながらないため注意しましょう。

iframeを使用すると、ページ全体の表示速度が遅くなる場合があるため注意が必要です。

iframeは外部コンテンツをページ内に埋め込む際、親ページとは別に追加のHTTPリクエストが発生します。そのため、iframe内のリソースの読み込みが遅い場合や複数のiframeを設置した場合、ページ全体の読み込み速度が低下しやすくなります。

また、iframeはデフォルトで同期的に読み込まれるため、他のリソースの読み込みをブロックする場合もあるので注意しましょう。

iframeを使用すると、クリックジャッキングやマルウェア感染など、セキュリティ上のリスクが発生するデメリットがあります。

iframeは外部サイトのコンテンツやプログラムを自サイト上で実行できるため、信頼できないソースを埋め込んだ場合、悪意のあるコードが実行される危険性があります。これにより、クリックジャッキングやクロスサイトスクリプティングなどの攻撃手法が成立しやすくなるため注意が必要です。

このようなリスクを防ぐためには、sandbox属性やX-Frame-Optionsヘッダーの設定などの設定が必須です。

iframeタグはsrc属性で表示したい外部コンテンツのURLを指定し、widthやheight属性で表示サイズを設定するだけで、外部コンテンツをページ内に表示できます。YouTube動画やGoogleマップの埋め込みなど、幅広い用途に利用されています。

たとえば、YouTube動画を幅560px、高さ315pxで埋め込む場合は下記のように記述しましょう。

<iframe src="https://www.youtube.com/embed/動画ID" width="560" height="315"></iframe>

iframeタグはシンプルな構文で外部コンテンツをページ内に表示できる便利なタグです。

iframeの代替手段は下記の通りです。

• objectタグ
• embedタグ
• Ajaxリクエスト

それぞれの代替手段を詳しく見ていきましょう。

objectタグは、iframeの代替手段としてHTMLページ内に外部ファイルを埋め込むために利用できる汎用的なタグです。

objectタグは、data属性に外部ファイルのURL、type属性にMIMEタイプを指定すれば、幅広い種類のコンテンツをページ内に表示できます。iframeと異なり、PDFやSVGなど多様な形式に対応している点が特徴です。

また、objectタグがサポートされていないブラウザ向けに、タグ内に代替コンテンツを記述できます。

embedタグは、iframeの代替手段として外部コンテンツを埋め込むために使用できるHTMLタグです。

embedタグはsrc属性で埋め込むファイルのURL、type属性でMIMEタイプ、widthやheightで表示サイズを指定できます。主にPDFや動画、音声などのメディアファイル埋め込みに適しており、iframeが主に外部Webページの表示に使われるのに対し、embedは多様なメディアコンテンツ向けに設計されています。

しかし、埋め込むコンテンツの種類やブラウザの対応状況に注意が必要です。

Ajaxリクエストは、iframeの代替手段として外部コンテンツやデータを非同期で取得し、ページ内の任意の場所に動的に表示できる技術です。

Ajaxを使うことで、iframeのように外部ページを丸ごと埋め込むのではなく、必要なデータやHTMLだけを取得し、ページの一部として自由にレイアウト・デザインできます。また、取得したコンテンツの表示領域が自動的に調整されるため、iframeで発生しがちなスクロールバーや余白の問題を回避できます。

iframeに関するよくある質問を整理しました。詳しく知りたい方はこちらもご覧ください。

iframeが一時期非推奨だった主な理由は、SEOへの悪影響とセキュリティリスクの2点が大きかったためです。

iframeは、ページ内に外部コンテンツを埋め込む便利なHTML要素ですが、検索エンジンはiframe内のコンテンツを正しく認識できない場合が多く、自サイトのコンテンツとして評価されにくくなります。

また、悪意のある外部サイトを埋め込むとクリックジャッキングやXSS攻撃などのセキュリティリスクが生じるため、信頼できるソース以外の利用は推奨されません。

HTML4.01時代には、Web標準の厳格な運用が求められ、iframeは「本来使ってほしくない」タグに位置づけられていたことも背景にあります。

iframeの枠線を消すには、CSSの「border: none;」をstyle属性やスタイルシートで指定する方法が一般的かつ推奨されています。

従来はHTML属性の「frameborder="0"」で枠線を消せましたが、frameborder属性はHTML5で廃止されたため、現在はCSSで「border: none;」を指定する方法が推奨されています。

外部CSSで枠線を消すには、下記のように記述しましょう。

iframe { border: none; }

これでiframeの枠線が表示されなくなります。

フォームをノーコードで簡単に埋め込むなら、フォーム作成ツール「formrun」がおすすめです。formrunには主に下記の3つの特徴があります。

• フォーム共有や埋め込みが簡単
• フォーム作成が簡単にできる
• 万全のセキュリティ

それぞれの特徴を詳しく解説します。

formrun（フォームラン）で作成したフォームは簡単に共有・サイトへ埋め込みできます。

フォームランではフォームを作成したあと自動でフォームのQRコードやURLを生成できます。してくれます。発行されたURLの一部はお好きな文字列に書き換えることも可能です。

また、サイト内に設置も可能なのでコーポレートサイトのお問い合わせページや、ファーストビューにリード獲得用フォームなどを埋め込んでご利用いただけます。

設置方法も簡単で、フォーム作成後に発行できるHTML要素（スクリプト）をサイトにコピー＆ペーストで貼り付けるだけで埋め込みできます。

非エンジニアでもマウスだけの簡単な操作中心でフォームが作成できるため、フォーム利用までに準備期間が短い場合にも役立ちます。

同じフォーム作成ツールのGoogleフォームと比べてもセキュリティ条件が高く、細かい設定まで機能が豊富となっているため、ビジネス利用目的では、formrunのユーザーのうち7割がGoogleフォームから変更しています。

メールアドレスがあれば無料登録可能！無期限で無料プランが利用できるのでformrunでぜひフォームを作成してみてください。

テンプレートはこちらをご覧ください。
>> テンプレート一覧

セキュリティが高いのもformrun(フォームラン)の魅力のポイントです。「ISO 27001 (ISMS)」の認証取得やプライバシーマークの付与認定、SSL/ TLSによる暗号化通信、24時間365日のサーバー監視体制などさまざまな対策がとられています。

フォームは、名前や住所、メールアドレスなど重要な個人情報を取り扱います。ユーザーに安心してフォームを利用してもらうためにも、フォームのセキュリティはとても重要です。

安全なフォーム運用や個人情報の取り扱いは、顧客からの信用に大きく影響するため、セキュリティを重視している方にはformrunの利用がおすすめです。

iframeとは、HTMLで使用される要素の一つで、Webページの中に別のWebページを埋め込むために使われます。たとえば、外部のサイトやサービスのコンテンツを自分のページ内に表示したい場合、iframeを利用すれば簡単にその内容を取り込むことができます。

ただし、セキュリティや表示速度の観点から、埋め込むコンテンツや設定には注意が必要です。とくに、クロスオリジンの場合は、ブラウザ側で制限がかかる場合もあるため、用途や目的に応じて適切に利用しましょう。

しかし、フォームをノーコードで簡単に埋め込みたい場合には、現在使用しているフォーム作成ツールの機能が不十分に感じられることもあるでしょう。その場合、formrunを使えば下記の9つのメリットがあります。

• プログラミング不要
• 集計がリアルタイムで行える
• 入力補助機能が付けられる
• 条件分岐項目を付けられるため、回答数はそのままでそれぞれにあった質問に答えてもらえる
• ワンクリックでrecaptcha設定可能
• マウス操作でデザイン設定可能
• お問い合わせ管理、メール対応も可能
• 自動メールやChatworkなどツール通知まで付いている
• 有料プランも無料でトライアル可能→その後自動で請求始まることはない

無料での利用も可能なため、ぜひ一度、試してみてはいかがでしょうか。
Sansan、BASE、hey、DMMなど幅広い規模の企業に導入されており、自社に最適なフォームを作ることが可能です。