インラインフレーム（iframe）とは？　使われる場面や設定方法をご紹介

Webページを作るとき、そのWebページの中で外部サイトの情報をユーザーに見てもらう方法の一つに、インラインフレームというタグがあります。

インラインフレームは、2014年にHTML5がメジャーアップデートされた際に、sandboxなどの新しい属性を増やして再登場したタグです。過去にはセキュリティ面などの問題から非推奨のタグとされていましたが、新しい属性をうまく使うことで、比較的安全な環境で使えるようになりました。

この記事ではインラインフレームが使われている場面やメリット、注意点などをご紹介していきます。後半では実際にタグを記述する方法や、活用できるさまざまな属性についても説明しているので、ぜひ最後まで読んで、今後のWebページ作成の参考にしてみてください！

インラインフレームとは

インラインフレームとは、HTMLタグの一つです。略称としてアイフレーム（iframe）とも呼ばれ、設置するとそのWebページの中に別のWebページが埋め込まれ、表示できるようになります。

Webページを作る上で外部サイトの情報をユーザーに見てほしい場合、もっともシンプルな方法としてはURLリンクを貼る方法を思い浮かべる人も多いでしょう。しかしそれでは、ユーザーがそのリンクをクリックしなければ、リンク先の情報を見ることはありません。

そんなときWebページの中にインラインフレームを設置していれば、見せたい外部サイトのデザインや詳細な内容を、シームレスにユーザーへ見せられるようになるはずです。ユーザーが意識してアクションを起こさなくても、画面をスクロールしてフレームがある位置を表示するだけで、必要な情報を伝えられるようになります。

インラインフレームが使われる場面 

このインラインフレームを活用すると、Webページの中で外部サイトの情報をオリジナルコンテンツと同じように見せたり、複数の外部サイトをコンテンツとして並列で見せたりすることが可能です。

例えばSNSでコンテンツの最新情報を発信しているのであれば、Webページの中にそのSNSの情報を埋め込むことで、ニュースフィードの代わりとできるでしょう。Instagramのような写真がメインのSNSなら、カタログの代わりとして表示しても良いのではないでしょうか。

活用の場面はさまざまですが、なかでも効果を実感できるのは、売上や反響に直結するときです。アフィリエイトサイトの場合と、オリジナルの商品やサービスを紹介する場合の2通りをご紹介します。

アフィリエイトサイトの場合

アフィリエイトサイトなどで売上を上げたい場合、インラインフレームの活用はおすすめです。商品の画像や価格など、元のWebページに掲載されている情報をダイレクトにユーザーへ見せられるため、より多くの反響を得られるかもしれません。

商品を入れ替えたいタイミングでも、インラインフレームのタグへ書き込んだURLを入れ替えるだけで簡単に作業を完了させられるメリットがあります。直接Webページへ書き込んだ際に必要となる、HTMLへのテキストの書き換えや取り扱い終了の記載が不要となるため、作業時間の大幅な短縮につながるでしょう。

オリジナルの商品やサービスを紹介する場合

もちろん、自社商品を紹介したい場合でも、インラインフレームは活躍します。

有形のモノをECで販売したいケースでは、自社のWebページ上にショッピングサイトを構築しようと思うと、まとまった予算や手間が必要です。最近では無料で始められるホームページサービスも増えていますが、ユーザーにとって使いやすいWebページを作り、多くの人に自社商品の魅力を発見してもらうためには、ある程度のWebページ構築に関する知識が無ければ難しいでしょう。実際に商品が売れた後のユーザーとのやりとりや発送についても、独自のルールを設定しなければなりません。

そこで外部サービスとインラインフレームを活用すれば、これらの悩みを解決できます。ECショッピングモールなどへ商品を掲載し、インラインフレームで自社のWebページへ埋め込む手法を取れば、手間の掛かる設定や決済サービスの導入は基本的に不要になるでしょう。自社のWebページで管理するのはあくまでも自社の情報のみとなり、商品の在庫数やユーザーからの問い合わせ対応は、ECショッピングモールのルールにのっとって設定できるようになります。一定の手数料が掛かってしまうリスクは考えられますが、効率良くWebページを管理したいと考えている人にはおすすめの方法です。

サービスや無形の商材を販売したいケースであれば、ぜひ企業や商品のPRにインラインフレームを活用してみてください。専門の外部サイトにアップロードした動画や、権威のあるWebページに掲載された自社情報、所在地情報が書かれたマップなどをインラインフレームで埋め込めば、より信頼性の高いWebページになっていくはずです。デザイン性にも優れたものにできるため、ユーザーにとって非常に興味を引くコンテンツとなり、売上や反響につながると期待できます。

インラインフレームを使うメリット 

インラインフレームを利用すると、一つのWebページの中に違うWebページを埋め込むため、HTMLの作成や完成したWebページの管理・運用にあたってうれしいメリットが2つあります。それぞれの詳細は以下のとおりです。

さまざまなコンテンツへの導線となる

インラインフレームタグを活用すると、複数のWebページにある情報を一つに集約できるようになります。必要に応じて表示領域のサイズや見え方を調整でき、それぞれの情報が見やすく表示されるため、ユーザーにとってはより簡単に次のアクションを行いやすくなるはずです。

そのため数多くのサービスやSNSでは、ユーザーのアクションを獲得するために、タイムラインなどでインラインフレーム用のタグを簡単に作成できるようにしています。

一般的に広く普及しているものとして挙げられるのは

• Twitter
• Facebook
• Instagram
• YouTube

などです。

例えばYouTubeでは、共有オプションのリストから「埋め込む」というボタンをクリックするだけで、その後動画を埋め込むためのインラインフレームタグをコピーできるようになっています。コピーしたHTMLタグを自身のWebページに入力しておくと、該当箇所を表示したユーザーに動画のサムネイルが表示されるのです。これにより、ユーザーはページを移動せずそのまま動画の再生・視聴が可能になります。

埋め込んだページごとに更新ができる

インラインフレームを利用すると、タグを設置するWebページのURLと、フレームで表示するWebページのURLは違うものになるはずです。この仕組みを活用すると、Webページを作る際に作りたい箇所を個別に作業できるようになるため、一つのHTML上に全体の情報を入れて作るWebページよりも、作りながらの内容調整や微細な変更が行いやすくなります。

Webサイトのページ数が多いときは特に管理がしやすくなり、飛躍的に効率が上がるかもしれません。複数人で一つのWebサイトを作成する際にも、ページを分担して進めやすくなるでしょう。完成済みのWebページを更新したいときも、基本的に変更したい部分に該当するWebページのHTMLを変えるだけで良く、それ以外のHTMLに変更を加える必要はありません。

例として、ニュースフィードをインラインフレームで作っているケースを考えてみてください。ニュースの内容を変更したく、その他を変更する必要がなければ、作業としてはニュースのWebページにあたるURLのHTMLのみを変更するだけで完了です。ニュースを配信するURL自体を別のものに変更するのであれば、Webページのメイン部分にあたるURLのHTMLを更新します。

またインラインフレームで表示する先のURLは、自分で作成したWebページでなくとも仕組み上は問題ありません。埋め込みが許可されている外部サービス上のページも表示可能です。

実際のところ、インラインフレームで埋め込まれることを前提としているサービスも多数存在しています。代表的なものはAmazonや楽天のようなECショッピングモールや、Google Mapなど。それぞれ比較的簡単な操作でタグを作成できるようになっており、利用することで外部サイト内に作成した自社の情報を、自作したWebページ上の一部に表示できます。

これらの仕組みを利用すれば、新しい情報を外部サイト上に作っておき、インラインフレームタグで指定するURLをそれに書き換えるだけで、表示内容の更新が完了するのです。

インラインフレームの注意点

便利なインラインフレームですが、注意すべき点もいくつかあります。

Webページの作成方法のなかには、インラインフレーム以外にも他のページの情報を埋め込む方法もあるため、他の方法が使える場合は、デメリットを考慮してより適切な方を使うのがおすすめです。

インラインフレームを使う前には、以下の2つが問題にならないかどうかを事前にチェックするようにしましょう。

 適切なデザインにしづらい

インラインフレームで読み込んだWebページのデザインを変えるためには、読み込み先の情報を直接書き換えるか、設置したページにJavaScriptを設定しなければならないことが多いです。

また読み込み先の情報がインラインフレームで表示できる範囲よりも大きすぎると、不便なサイトになってしまう可能性があります。ユーザーは領域の中をスクロールして移動しなければならないため、目的の情報までたどり着きづらくなってしまうでしょう。インラインフレームは、デザインに無理がある場合などはむやみに使用せず、必要性がある場合にだけ活用するようにした方が良いかもしれません。

その他、インラインフレームをWebページの骨組みであるフレームに対して採用した際は、分割機能によってメニューとメインコンテンツの部分が分離してしまいます。フレームのURLではメニューが表示されていても、インラインフレームによって表示される各ページのURL自体には、メニューが含まれない状態になってしまうのです。この場合は、ユーザーが検索から各Webページに直接訪れたときに、構造の都合で他のページに移動できないというデメリットが発生します。

 SEOの観点では逆効果になることもある

インラインフレームを利用したからといって、SEOの順位上昇にはつながりません。むしろSEOとしての評価が低くなってしまう可能性が生じます。その理由は、ユーザーが使用するブラウザや環境によってデザインが崩れてしまい、上記で説明したとおり意図した形式でページが認識されないことがあるからです。

メインのフレームページに直接書き込まれたキーワードが少なく、本来ならばもっとも重要視しているページであるにも関わらず、検索エンジンにヒットしづらくなってしまうケースもあります。

サーバーへのリクエスト数が増えるため、ページの表示速度が遅くなる可能性にも注意してください。近年ではより高速な回線が普及しているため、速度に影響を受けない人も増えていますが、すべてのユーザーが問題なく表示できるとは限りません。表示速度が遅いことは、ユーザーにとって不便なだけでなく、SEOでの評価が下がる原因になります。心配な場合は、サーバーキャッシュやブラウザキャッシュを設置しておくようにしましょう。

最後に、そもそもインラインフレームは、headタグ内に記述することは非推奨とされているタグです。タグの記述箇所が適切でなければ読み込みのタイミングが変わってしまうので、SEOの評価へ大きな影響が起きるケースも考えられます。例えばtitleやmeta descriptionの前にインラインフレームを記述してしまうと、読み込んだページの情報をまったく違うものとしてGoogleに伝えてしまう可能性があるのです。間違ってもheadタグ内へ埋め込むことのないよう、気をつけてください。

iframeタグの設定方法  

インラインフレームの作成には、iframeタグを使います。記述方法は以下のとおりです。

<iframe></iframe>

なおiframeの属性には、HTML4.01からHTML5への移行により廃止・追加された属性があるため、ここでは現行のHTML5で非推奨となっていない属性を紹介します。

属性の基本となるのは、src属性です。これを記述することで、インラインフレームとして表示するWebページのURLを指定できます。

記述方法は以下のとおりです。

<iframe src=”http://〇〇〇〇.〇〇/”></iframe>

表示させたいWebページのURLを記述します。ここへさまざまな要素を追加して、表現したいフレームの形を作っていきます。

またsrcと同様、表示する内容を指定する属性にsrcdoc属性というものも。srcdoc属性は以下のように記述します。

<iframe srcdoc=”<p>〇〇〇〇</p>”></iframe>

この属性は、表示する内容をファイルパスとして指定するものです。一般的にはこの後で紹介するsandboxと共に使用することが想定されており、Webページを開くブラウザがsrcdoc属性に対応していない場合は、src属性に記述したURLが代替として表示されます。

 インラインフレームのサイズを変更する

以下の要素を入力することで、別のWebページを表示するためのフレームのサイズを調整可能です。

• width属性

<iframe src=”” width=””></iframe>

フレームの横幅を指定します。属性値には数値または％を入力します。

• height属性

<iframe src=”” height=””></iframe>

フレームの高さを指定します。属性値には数値または％を入力します。

その他の属性を指定する

フレームサイズ以外に関する属性は、以下の通りです。

• name属性

<iframe src=”” name=””></iframe>

名前を指定できます。

• loading属性

<iframe src=”” loading=””></iframe>

ブラウザに対して、フレームの読み込み方を指定する属性です。

属性値には、以下のようなものがあります。

1. eager：可視ビューポートの外にあるかどうかに関わらず、設置したWebページの読み込み時にインラインフレームの内容をロードします。（既定値）
2. lazy：表示が可能になってからインラインフレームの内容をロードする設定です。

セキュリティ対策のため、できることを制限する

インラインフレームはHTML5以降、マルウェアによるウイルス感染などへの対策として、送信するデータに制限をつけ、読み込み先のJavaScriptなどを原則作動させないようになっています。

• referrerpolicy属性

<iframe src=”” referrerpolicy=””></iframe>

設置したWebページの情報について、読み込み先のWebページへ送信するデータを指定する属性です。

属性値には、以下のようなものがあります。

1. no-referrer-when-downgrade：RSSL/TLS を用いたHTTPSで始まる読み込み先のみ、設置したWebページの情報を送信します。（既定値）
2. no-referrer：設置したWebページの情報を送信しません。
3. origin：設置したWebページの情報のうち、オリジン（スキーム、ホスト名、ポート番号）のみを送信します。
4. same-origin：同一オリジンのみへ、設置したWebページの情報を送信します。
5. origin-when-cross-origin：オリジンが異なる読み込み先に対しては、設置したWebページの情報のうち、オリジンのみを送信します。同一オリジンの読み込み先の場合は、URL全体を送信します。
6. strict-origin：セキュリティ水準が高いHTTPSで始まる読み込み先へは、オリジンのみを送信します。読み込み先の安全性が設置したWebページよりも劣る場合は送信しません。
7. strict-origin-when-cross-origin：オリジンが異なり、セキュリティ水準が高いHTTPSで始まる読み込み先へ、オリジンのみを送信します。同一オリジンの読み込み先の場合は、URL全体を送信します。

• sandbox属性

<iframe src=”” sandbox=””></iframe>

読み込み先のWebページができることに制限を加え、セキュリティを高める属性です。

sandbox自体の働きは、JavaScriptを動かなくさせたり、APIとの疎通を阻止したりすることですが、属性の値と組み合わせることで、指定した内容の動きを許可する効果があります。

属性値は以下のとおりです。

1. allow-downloads：ユーザーの操作によるダウンロードができます。
2. allow-downloads-without-user-activation：ユーザーの操作なしでダウンロードが発生することを許可します。
3. allow-same-origin：読み込み先のドキュメントを、設置したページのドキュメントと同じオリジンのドキュメントとして使用できます。
4. allow-forms：読み込み先がフォームを送信するのを許可し、情報を送信できます。
5. allow-popups：読み込み先のポップアップを表示できます。
6. allow-scripts：読み込み先がJavaScript（ポップアップを除く）を実行できます。
7. allow-modals：モーダルウィンドウを開けます。
8. allow-orientation-lock：スクリーンの方向をロックできます。
9. allow-pointer-lock：Pointer Lock API （en-US） を使用できます。
10. allow-presentation：プレゼンテーションセッション （en-US）を開始できます。

なお、これまでに紹介したそれぞれの属性は、多くのケースで以下のように組み合わせて使われています。

<iframe src=”” width=”” height=”” sandbox=”allow-〇〇”></iframe>

必要性を見極めてインラインフレームを活用しましょう！

インラインフレームにはさまざまな属性があり、それぞれのWebページに合わせて設定が可能です。属性の種類にはサイズや名前、読み込み方を指定するものの他、セキュリティについても制限を付けられるものもあり、用途や環境に合った記述を行うことが大切といえるでしょう。

その性能を十分に生かすことができた場合、インラインフレームを活用して作ったWebページは、ユーザーにとってより魅力的になる他、飛躍的に管理や運営が行いやすいものになるはずです。

今後インラインフレームが役立ちそうなWebページを作成する際は、今回ご紹介したメリットと注意点を照らし合わせてみて、利用するべきかどうかを検討してみてください。