|
==============================================================
うちのホームページはどーなってるんだ！
Vol.015 発行／2003.03.13
==============================================================
▼ 困った「入り口ページ」たち 第２回
「フレームサイトは機会損失の巣」
筆者／石井研二
さて、今回はフレーム問題です。
フレームというのは、
１）コンテンツをスクロールしてもナビゲーションが移動しないので便利
２）ナビゲーションを変更するには、ナビフレームのHTMLを１つ変更すれば
いいので、管理がやりやすい
３）呼び出される本文ページは、ナビなどの要素がないぶん軽くて表示が速く
４）しかもデザイン性が少なくて済むので経済的
ということから採用されているわけですね。早くからホームページを立ち上げ
られた、先進的な会社で、意外にも多く採用されている手法です。いわば、昔
一世を風靡した制作方法なのです。
■ フレームは多くの来訪者を追い返しています！
問題は、フレームサイトではサーチエンジンで検索してサイトに訪れた人の大
半が１ページだけを見て直帰してしまう、ということです。90％が帰っている
ことも少なくありません。
また、そもそもフレームは来訪者が増えにくい構造でもあります。
フレームに恨みがあるわけではありません。私もかつては（20世紀の話です）
フレームを採用してサイトを作成しました。でも、アクセスログ解析してみる
と、多数の来訪者が帰ってしまい、効果が上がらない。だから、多くのサイト
をノンフレーム化するリニューアルを行ってきました。
フレームだと効果が上がらない理由は何か？ 今フレームサイトならどうすれ
ばいいか？ それが今回からのシリーズのテーマです。「どうすればいいか」
部分は、ウェブのコストパフォーマンスに直結しますのでじっくりお読みくだ
さい。
■ 主力タグの廃止にご注意！
HTMLについての定義を決定する世界機関Ｗ３Ｃ(World Wide Web
Consortium)では、現在、３つの書き方を認めています。
１）Strict … HTML4.01に厳格に従うもの（最も推奨）
２）Transitional … 古いタグも含む記述方法
３）Frame … フレーム
言葉の意味は非常に分かりやすいですね。
ｓｔｒｉｃｔ：厳格な。つまり、HTML4.01以降のHTML書式に厳格にしたがっ
たものはこれだ、ということです。W3Cにしてみれば、「今後すべてのホーム
ページはこの方法で書け！」と言っているわけですね。
ｔｒａｎｓｉｔｉｏｎａｌ：過渡期的な。まあ、いきなりダメというわけにも
いかないから、移行期間としてこれも許すよ、ということです。ただし、いつ
まで許されるか分かりません。HTML4.01で廃止されたり非推奨となったタグ
を含む書き方です。
とてもポピュラーなタグも廃止／非推奨のリストに載っていますから、真剣に
対応が必要です。例えば、
<center></center> ： これではさまれた内容は「中央揃え」される
<font></font> ： 文字のサイズや色の定義のためのタグ
<body>内のbackgroundやbgcolor、text、link、alink、vlink
<img><table>などのalign、bgcolor、width、height
これまで主力となってきた書き方が、HTML4.01では軒並み非推奨となったの
です！ いつまでtransitionalの書き方が許されるのか分かりません。
これからホームページ制作業者の広告には「StrictDTD完全対応！」になるで
しょう。これは大変。
上記のような主力タグが軒並みダメになったので、制作会社からすると、「こ
れまで日本語で会議してきたのに、社長が外人になったから今日から会議はす
べて英語」と言われているようなものなのです。そりゃ、その方がいいだろう
し、自分のためにもこの際、英語を覚えるのも良いだろう、だけど急に言われ
ても...
W3Cがどうしてこんなドラスティックなことを決定したかというと、HTMLで
見栄えを作るな、ということなんですね。見栄えの部分はすべてCSSで書いて
くれ、と。いわゆる「スタイルシート」です。
これまで
<body bgcolor="white">
と書いてきたのを、
body { background-color:#FFFFFF; }
とスタイルシートの方で定義しておいて、実際のタグはすっきりと
<body>
と書けばいいと。
これは美しいHTMLになります。シンプルで、サーチエンジンのロボットも巡回
しやすくていいですね。
制作会社としては皆、いっせいに今勉強しているわけです。bodyの定義などは
もうほとんどの制作会社が対応しています。でも、全部を掴みきれていない。代
替的処置としてのスタイルシートの書き方を完全に掴んでいない、というのが
現状でしょうね。急がなければなりません。
■ フレームも廃止です。
さて、問題はフレームです。strictでもない、Tranitionalでもない。３番目の
frameは、XHTML1.1では廃止となっています。W3Cとしては、「フレームは今
すぐやめなさい」と言いたいわけですね。
この理由だけでも、今のうちにノンフレームに移行しておいた方が良いでしょう。
次のバージョンのインターネットエクスプローラーで、for strictDTD only と
言われてしまえばおしまいです。サイトを見ようとすると、「フレーム対応のブ
ラウザでご覧ください」なんて懐かしい表示が出てしまいます。
何につけ、自国のやり方を世界に広めることが「正義」だと思っている国があり
ますからね...。いつ大きな変化が訪れるか分かりません。
■ なぜフレームだと来訪者が増えないのか？
上記のHTMLの定義問題だけでも、フレームサイトは「風前の灯火」状態なのです
が、今のフレームサイトを多少のコストをかけてでもノンフレームサイトに変更
すべき理由は、最初に書いたように、「フレームだとウェブの効果が上がらない」
からです。
来訪者が増えない、来た人がすぐ帰る。しかも「良いサイト」と思われない。
こんな３重苦を抱えている手法をなぜ多くのサイトが採用しているのか、疑問に
思えるほどです。その理由を考えていきましょう。
今や、トップページから訪れる来訪者は全体のわずか３割。このことはこのメー
ルマガジンでも繰り返し書いてきました。そして、フレームサイトは、トップペ
ージから来てもらわないとまともに表示されないサイトなのです。
良くあるフレームとは、こんな風に定義されています。
まず、上フレームに会社のロゴや「HOME」「ENGLISH」「サイトマップ」「検
索」といったボタンを配置。
次に、左フレームにグローバルナビゲーション（製品情報や会社概要などのコー
ナートップへのボタン）を配置。
そして、右フレームに本文ページを呼び出す。
これには少なくとも４つのHTMLが関わります。
１）全体の定義をするHTML（ここではindex.htmlとします）
２）上フレームのHTML（head.html）
３）左フレームのHTML（navi.html）
４）本文のHTML（main.html）
絵にすると、（等幅フォントで見てくださいね）
┏━━━━━━━━━┓
┃ head.html ┃←この全体を書いているのがindex.htmlです。
┠─┬───────┨
┃n │ ┃
┃a │ ┃
┃v │ ┃
┃i │ ┃
┃. │ main.html ┃
┃h │ ┃
┃t │ ┃
┃m │ ┃
┃l │ ┃
┗━┷━━━━━━━┛
ということになるでしょう。この状態を作るために、index.htmlには、このフ
レーム構造だけが書かれています。
このメルマガは制作会社だけに向けたものではありませんが、サイトを運営す
る企業の方にもぜひこの問題を根本からご理解いただきたいので、今回はさら
に詳しく書いていきます。
「こういうプログラムっぽいのは頭が痛い」なんておっしゃる企業人が多いで
すが、今回だけはしっかり読んでください。これを理解しておかないと大きな
損をするのです。HTMLなんて単なる「カタコトの英語」だと思ってお読みくだ
さい。
フレームを定義しているindex.htmlの記述内容をすべて書くと、こうです。
（行頭のナンバーはあとでご説明するためのもので、実際のHTMLには不要です。
番号がないところは、前の行の続きで、本来は１行で書くべきところを、メール
マガジンの性格上、２行に分けて書いています）
001: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
002: <HTML lang="ja">
003: <HEAD>
004: <TITLE>フレームのページです</TITLE>
005: </HEAD>
006: <FRAMESET rows="100,*" border="0">
007: <FRAME src="./head.html" name="top">
008: <FRAMESET cols="200,*" border="0">
009: <FRAME src="./navi.html" name="navi">
010: <FRAME src="./main.html" name="main">
011: </FRAMESET>
012: </FRAMESET>
013: <NOFRAMES>
014: フレーム対応のブラウザでご覧ください。
015: </NOFRAMES>
016: </HTML>
たったこれだけです。
014の文言は、フレーム非対応のブラウザで表示するためのメッセージです。
そんなブラウザがまだあるのか？ と思われるかもしれません。モバイル関連
だとまだまだあるから、これも有効な措置、とホームページ教則本には書いて
ありますね。そもそもフレームをやめた方が良いのですが。
サーチエンジンのロボットは基本的に
<a href="next.html">次のページ</a>
という、通常のリンクの記述をたどってサイトを巡回することになっています。
そのため、このフレームの記述に弱いのです。次のページを見つけられないこと
はないのですが、これが何度も繰り返されると帰ってしまい、その先のページが
検索結果に加えられなくなってしまいます。
前回ご説明した「ロボットはJavaScriptに弱い」に続く、弱点第２弾です。
フレームや別窓の措置が多いサイトはサーチエンジンの検索結果に加えられるペ
ージ数が少なくなります。
１）検索結果に加えられないページに含まれているキーワードで検索しても
当然、あなたのサイトは紹介されない。
２）検索結果に加えられたページ数が少ないと、Googleは「利用者に紹介すべき
サイトではない」と判断して、上位表示しない。
２番目は詳しくご説明する必要があります。
つまり、あるキーワード、例えば「腰痛 対策」というフレーズで検索した人が
いたとしましょう。
当然、Googleは「この人は腰痛対策を求めているのか」ということで、サイトを
探します。このキーワードでインデクスしているサイトは...
サイトＡ：腰痛対策でヒットするページが ２０ページ
サイトＢ：腰痛対策でヒットするページが３００ページ
見つかったとします。あなたなら、どちらを検索者にお勧めしますか？ そう、
サイトＢですね。より詳しい情報を持っていそうです。サーチエンジンは来訪
者に「このサーチエンジンを使ったら良い情報が見つかった」と思ってもらわ
ないといけません。これはサーチエンジン自身の「顧客満足」の問題なのです。
死活問題と言っても良いでしょう。だから、いろいろな条件で、より満足を得ら
れそうなサイトを上位に紹介するように、工夫しているわけです。
Googleの基準はいろいろあると言われていますが、その１つとして、関連情報を
多く含む、つまりあるキーワードでヒットするページをたくさん含むサイトの方
を上位に紹介する性質があるようです。
つまり、フレームを使っていて、たくさんのページが登録されないと、この数の
問題で不利になるのです。せっかくたくさんの情報を持っているサイトなのに、
Googleは「たったこれだけのサイト」としか認識できていない恐れがあります。
また長くなりました。
さらに詳しいご説明は次回としましょう。上のindex.htmlのソースは保管してお
いてくださいね。
--------------------------------------------------------------
上記のフレーム例では、来訪者は１ページを見たつもりで
実際には４HTMLがリクエストされています。
フレームでは、ページビューはやたら膨らみます。
「たくさんのページが見られている」なんて自慢していたら
実はぜんぜんダメだった、なんてこともあります。
そのあたり、次回詳しく見ていきましょう！
==============================================================
【筆者プロフィール】
石井研二（いしい・けんじ） 61年生まれ。有限会社いなかどっとコム代表。
95年から企業ウェブ構築／リニューアル、効果分析で実績を残す。
アクセスログをエクセルで読むのが趣味。
==============================================================
▼▼▼▼▼▼▼▼
ＳＩＴＥＧＲＡＭメールマガジン「うちのホームページはどーなってるんだ！」
◆週刊発行 購読無料
◆転載はご自由にどうぞ。事後にご連絡いただければ幸いです。
◆購読登録／削除は、こちらから→ http://www.quickvalue.net/
◆ご連絡／お問い合わせ等は → info@quickvalue.net
編集発行／有限会社いなかどっとコム http://www.inaka.com/
〒530-0053 大阪市北区末広町3-7 矢崎ビル2F
PHONE 06-6316-7599 FAXIMILE 06-6316-7630
==============================================================
|
