WEBサイトを作成していると、YouTubeの動画やGoogleマップなどをページ内にはめ込みたくなることがあると思います。さらに、申し込みフォームや問い合わせ情報を小さな枠内に収めてスクロールで見せるなど、ランディングページにたっぷりの情報を並べたいと思うことも出てくると思います。そのようなページを構成するのに役立つのがiframe（インラインフレーム）で、スマホにもPCにも最適な画面レイアウトが簡単に作成できます。
インラインフレームとは？
このインラインフレームは、基本的にWEBサイト内に別のWebページなどを読み込んで表示するためのHTMLの要素の一つです。
ワードプレスなどで利用されているHTMLのタグのひとつで、WEBサイトのページに動画などのコンテンツを簡単に埋め込むことができます。
インラインフレームの基本的な利用法
インラインフレームの使い方はとても簡単です。
ワードプレスによるサイト作成で使用しているHTML内のテキストモードやコードエディタで、下記のように＜iframe＞～＜/iframe＞タグの間に埋め込みたいページのURLを書き込めばOKです。
これで『この場所にインラインフレームを使用する』ように設定できます。
<iframe src="埋め込みたいページのURL" width="750" height="600" frameboader="0"></iframe>
上記の『iframe src』とは、src属性（画像・スクリプト・フレーム内の文章の位置設定のための機能）によって指定した埋め込みたいページのURL（ページ内容）をインラインフレーム表示するHTMLタグのことです。
この方法で、動画サイトyoutubeのコンテンツをサムネイル画像付きでアップさせることができます。
他にもGoogleマップの1ページを切り取って張り付けたり、自分で撮った動画をワイプ画面のように表示することが出来たり、とても簡単です。
文章や画像だけのWEBサイトやブログは、短時間に閲覧者へ情報提供する点で力不足になることがあります。
特にスマホ検索で情報を探している人は、ランディングページを流し見して読むべきサイトを選んでいますから、情報内容は視覚的にインデックスして提供する方が効果的です。
この作業を的確にスムーズに行うためには、インラインフレームを利用したサイト作成が適しています。
また、＜iframe＞～＜/iframe＞タグ内の埋め込みページのURLだけを変更すれば、簡単に動画の差し替えや情報の更新も済んでしまいます。
インラインフレームを使うメリット
冒頭で述べました通り、閲覧者の注意を引き付けるランディングページを作り上げるには、単に文字と画像を配置するだけでは不十分かもしれません。
Facebookにはカルーセル広告といって、見開きのページにいくつもの動画や連続する画像スライド、それらのコンテンツにコメントを付けて視覚的・聴覚的・活字的に情報発信するツールが用意されています。
これは最先端のインラインフレームの活用法と言えるかもしれません。
このようにインラインフレームを利用することで、ランディングページに別のWebページや動画などをあたかもそのページの内容のようにはめ込み一体化して表示することができて、ネット検索で訪れた人へ多面的に情報発信が可能となります。
これがインラインフレームの最大のメリットでしょう。
また、インラインフレームを使ってサイトを作成しますと、埋め込んだフレームの内容だけを更新・改善することができます。
例えば埋め込んだYouTube動画を更新する作業とか、地図情報の差し替え作業をする場合、仮にインラインフレームを使わずに作業するならば、結局ページ全体を手直しする必要が出てきて作業時間が長くなってしまうでしょう。
ですが、インラインフレームで作成されたページであれば、差し替えたい部分（ページ）を取り替えるだけで済みます。
つまり、インラインフレームを使うことで、WEBサイトの情報発信力が向上して訪問者を目的とする行動へ喚起する可能性がアップすること、そしてページのメンテナンスが時短できることがメリットとなります。
このツールで実際にメリットを得ている人の例は、主に次の2つです。
・埋め込んだコンテンツは別ページになるので、楽天などの文字数制限がクリア可能
・ページ数が多くなっても、メンテナンスが時短で効率的に行える
インラインフレームを利用する際の注意点
インラインフレームの利用では、主に次の3つの点に注意してください。
・埋め込みページが多すぎるとサイトが重たくなりすぎて動きが遅くなる
・埋め込んだページが他人のページであれば、そのページへのアクセス数もプラスされる
＊Googleアナリティクスでは、この見せかけのPV数が加算されているため、正確なデータが取れないので要注意
・検索エンジンでは、埋め込まれたページが本サイトの一部として扱われない
＊本サイトのコンテンツの内容を厚くすることにはならないので、文字数を増やす、情報量を増やすといったSEO対策にはなりにくい
よくインラインフレームのデメリットとして、『別タブで開けない』や『iframe内のリンクで親ページ(元ページ)のURLが書き換えられない』と言われていますが、これは誤解です。
まず別タブで開く方法ですが、aタグを通常使用する際と同様､埋め込んだリンクにtarget=_blankとすることで、そのリンクをクリックすると別タブで開くことができます。
また、親ページのURLもtarget=_parentとすれば書き換えることが可能です。
それぞれの例を以下に記載します｡
記述例<ul>
<li><a href="https://kurokawaandco.jp/contents/seo/">target指定なし(iframe内で表示)</a></li>
<li><a href="https://kurokawaandco.jp/contents/seo/" target="_parent">ページ(親ページ)のURLを変更する</a></li>
<li><a href="https://kurokawaandco.jp/contents/seo/" target="_blank">別タブでページを開く</a></li>
</ul>
上記の実装例
インラインフレームは『フレーム』と同じようなツールではありますが、利便性においては若干機能が違っています。
インラインフレーム(iframe)の調節方法
インラインフレームを使用する場合、ただ単に別ページを埋め込むだけでは思うようなレイアウト・デザインに仕上がりません。
ワードプレスなどのHTMLやCSS上で、意図した形に収まるように埋め込むコンテンツを調整する必要があります。
CSS適用の方法
まずCSSですが、これは埋め込むコンテンツのサイズを変えたり、バックスクリーンを選定したりとHTMLの飾り付けができる機能です。
インラインフレームをCSS適用させるには、主に次の2つの方法があります。
・インラインフレームの枠をCSSで調整する方法
・インラインフレームの中に収めるコンテンツを調整する方法
インラインフレームの枠については、iframeタグにstyle・class・idの3つの属性を指定して、枠のデザインやサイズなどをCSSで調整することができます。
また、文章や画像、スクリプトの位置設定をするsrc属性によるCSSファイルを修正して、インラインフレーム内のページを調整することもできますし、JavaScriptの記入を簡単にするjQueryを使って、インラインフレームを設置しているリンク先ページからインラインフレームのコンテンツを調整する方法もあります。
HTML5での使い方：横幅と高さの調整
インラインフレームで埋め込んだフォームは可変サイズで表示しないと、それぞれのブラウザ画面にピッタリの表示ができません。
例えば、最新のHTML5でインラインフレームを使う場合、基本操作は次の通りです。
記述例<iframe src="sample.html" width="500" height="100"></iframe>
このようにsrc属性で埋め込むページのURLを指定して、インラインフレームに表示したいコンテンツを設定します。
表示サイズにおいては、この段階でwidth（横幅）とheight（高さ）を指定しておきます。
なお、埋め込むページがインラインフレーム内に収まらない場合は、フレーム内をスクロールバーで納めることもできます。
このスクロールバーの設定は、scrolling属性で調整できます。
記述例<iframe src="sample.html" width="500" height="100" scrolling="no">
『scrolling=”no”』にすれば非表示になり、『scrolling=”yes”』にすれば表示できます。
また『scrolling=”auto”』なら必要に応じて調整されます。
ただし、このタグはHTML4.01からHTML5へ移行した際に廃止されたとされてます。
インラインフレーム(iframe)のレスポンシブ対応方法
Googleが2018年から営業戦略の柱に挙げている『モバイルファーストインデックス』によって、スマホなどモバイル端末での利便性を重視したサービスが展開されています。
そこでポイントとなるのが、インラインフレームのレスポンシブ対応です。
その対策として、レスポンシブウェブデザイン（Responsive Web Design, RWD）の手法を取り入れる必要があるでしょう。
パソコンでもスマホでもタブレットでも、一つのWEBページが各デバイスの画面サイズに応じてレイアウトの適正化がなされる手段を講じること、これをレスポンシブ対応と言います。
適切にレスポンシブ対応を講じることで、従来のようにパソコン用・スマホ用と作り分ける必要がなくなり、作成側には大きなメリットとなります。
Googleマップはwidth（横幅）だけ可変させて対応
ここで、Googleマップをレスポンシブ対応で埋め込んでみましょう。
まず、埋め込みたい地図を設定します。
次に、画面の左上のメニューアイコンから『地図を共有または埋め込む』を選択し、『地図を埋め込む』をクリックします。
すると『HTML をコピー』が画面左上に出ますので、それをクリックすればコードが取得できます。
記述例<iframe src="https://www.google.com/maps/〜〜〜" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
GoogleマップをPCでもスマホでもキレイに収まるようにするためには、『横幅のみ可変させる』という方法があります。
こちらはコピーしたコード内のwidthの部分だけを書き換えればOKです。
横幅のみを可変させるためには、CSS属性でwidthの数値を100％と変更します。
YouTube動画は縦横比率を保ったままレスポンシブ対応
YouTubeの動画コンテンツをインラインフレームで埋め込む場合、一般的に利用されているのが縦横の比率を親コードのままでレスポンシブ表示する方法です。
具体的には、HTMLで動画の埋め込みコードをdivタグで囲みます。
記述例<div class="iframeWrapper">
<iframe width="560" height="315" src="〜〜" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
次にCSS属性で次のように設定します。
記述例.iframeWrapper{
position: relative;
}
.iframeWrapper::before{
content: "";
display: inline-block;
padding-top: 56.25%;
}
.iframeWrapper iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
この設定のポイントは、『before』を疑似コンテンツとして使う点です。
これによって指定された『padding-top』が縦横比率をキープしてくれます。
なお、YouTubeの動画コンテンツは『16：9』の横縦比率が主流なので、『padding-topの比率』を56.25％に設定するのが一般的です。
もちろん、横幅と高さは100％に設定して、各ブラウザ画面にぴったり合うよう調整します。
まとめ
WEBサイトの運営では、いかに訪問者の興味を惹きつけ、目的とする行動を喚起するかが重要です。
インラインフレームの活用は、視覚・聴覚・活字をフル活用したランディングページ造りには有効な手段ですから、効果的な使い方を身に着けておくことをおすすめします。
