京都のシステム開発・ホームページ制作会社　株式会社Nextat（ネクスタット）

「諸君らが愛してくれた<frame>タグは死んだ！何故だ！！」




「ユーザビリティとアクセシビリティが悪いからさ」



本日はHTML5で廃止された<frame>タグと<frame>タグを使ったサイト（以下、フレームサイト）のお話です。


「エンドユーザのユーザビリティとアクセシビリティに悪影響」


確かに、検索エンジンにインデックスされた下層ページへの来訪者があった場合、サイト運営者が想定したレイアウトで使ってもらえない可能性があります。コンテンツだけが表示され、メニューやタイトルが表示されないのは致命的です。
ランディングページとしての利用は難しいでしょう。

他にも、音声読上げソフトを使っている利用者にとって使いにくい、現在いるページがわかりづらい、任意のページのブックマーク登録がやりづらいなどといった欠点が挙げられます。




でも私は声を大にしてこう言いたいのです。



フレームサイトはサイト訪問者・運営者双方にとって使いやすかった、と。


検索エンジンに悪影響があろうが、<frame>タグにはそれを補って余りある魅力がありました。

非推奨となるまで多くのサイトに利用されていたことがその証明です。

フレームサイトのメリット

１．共通要素を別ファイルで管理できる

一枚もののWebサイトでない限り、ナビゲーションなど複数のページに配置する共通要素が必ず出てきます。

今ではCMSを使った制作が一般的になっていますが、CMSにおいてはPHPなどのプログラムを使って共通要素をまとめ、管理コストを抑えています。
一方、frameタグが非推奨でなかった時代は同じ利便性を簡単なHTMLだけで享受できました。初心者にとっても比較的ハードルが低く、個人サイトでも<frame>が流行った理由の1つであると思います。

また、検索エンジンへの悪影響が取り上げられがちですが、逆に良い影響もあります。
ナビゲーションやヘッダ、フッタなど、そのページの本質ではない要素が別ページにまとめられることで、
ページ独自のコンテンツのページ内における比重があがるのですから。

２．サイトのナビゲーションを定位置に表示できる

最近、上部のヘッダやナビゲーションをCSSのposition:fixed;を使って固定するサイトが増えてきました。

例えばLaravelのサイトなんかもそうですね　→　http://laravel.com/


サイトのどの部分を閲覧していても、常に上部にメニューが表示されているのでサイト内の移動に迷うことが少なくなります。
常に表示されているために、共通要素とそのページ自体のコンテンツとの区切りも明確です。

このユーザビリティは10年前にフレームサイトが通過した地点です。

３．領域の幅をリサイズできる

ウィンドウサイズやフォントサイズが変更されて多少レイアウトが崩れようが、ユーザ側である程度対処できます。
ローカルのアプリケーションでも、幅が調節できるペインを採用する例は多いですね。




何も<frame>タグを復活させろとまでは言いません。

しかし、今現在のWeb技術であれば、<frame>タグと同等のメリットを享受しつつ、デメリットを廃することが可能となっています。


次回はCSSとJavascriptによる擬似フレームを紹介します。