|
==============================================================
うちのホームページはどーなってるんだ！
Vol.021 発行／2003.06.20
==============================================================
▼ 脱フレームの実務（２）
筆者／石井研二
さて、フレームサイトを脱却しましょう！ その良さを失うことなく、いかに安
価に、そして効果は最大にできるか？ じっくりお読みください。
■ 脱フレームの作業規模レベル
作業規模のレベルは４つあります。
１）全ページを脱フレームする／新デザインにする
２）全ページを脱フレームする／デザインは変えない
３）一部コーナーやページを脱フレームする
４）新コーナーを非フレームで追加する
１）は大事です。制作会社に依頼するとかなりの金額を覚悟しないといけません。
２）は少しましで、今のパーツをえっちらおっちら組みあわせれば何とかなると
いう感じです。
しかし、どうせある程度のコストがかかるならより良いデザインに変えたいとい
うのも本当のところかもしれません。このあたりも、デザインの注意点などを解
説していきます。
３）はその小規模版で、トライアルとしてやってみてもいい、という感じだと思
います。デザインは変えても変えなくても、規模は小さいとしたら、たいしたこ
とではありません。
４）も、従来コーナーとの関係をあまり気にしなくても良いので気は楽です。フ
レームサイトをお持ちで、これから新しいコンテンツを追加しようとするなら、
ぜひこの形式を選んでください。
普通に予算の上限があって作業しておられるウェブマスターさんは、戦略的な優
先順位を決めて、（３）ないし（４）の方法で優先順位の高いコンテンツについ
てトライアルし、効果を確認してから全体的な作業を行なう、というステップを
描くと良いでしょう。
アクセスログ解析からその優先順位を決めるには
● たくさんのキーワード検索で上位に表示されているページやコーナー
● その中で、今、たくさんのアクセスの入口になっているのに直帰率の高いペー
ジやコーナー
● 新しく追加しなければならない、来訪者を直帰させたくないページやコーナー
などを考えておくと良いでしょう。
■ フレームの構造
元のフレームの構造としては、次のようなものがよくあると考えられます。
Ａ）ヘッダフレーム
Ｂ）ナビゲーションフレーム
Ｃ）メインページフレーム
Ｄ）フッタフレーム
この他に、メインページが２つに分かれて、コーナー内のナビゲーションをまた
別フレームにしている例などもあります。
ともかく、フレームのお話はややっこしいので、メールだけでお話するとわけが
分からなくなりがち。そこで簡単なサンプルサイトを作りました。こちらに基づ
いてお話していきましょう。
http://www.quickvalue.net/FRAME/01/index.html
を見てください。このサンプルページが上の（Ａ）〜（Ｄ）の４つのフレームか
らできています。関連するファイル名とフレーム名は、
ファイル名 フレーム名
フレーム定義 index.html
ヘッダフレーム head.html headerframe
ナビゲーションフレーム navi.html naviframe
メインページフレーム main.html mainframe
フッタフレーム foot.html footerframe
となっています。つまり、このページを見た人は１ページ見たつもりで同時に５
つものＨＴＭＬを呼びだしているわけです。
ヘッダフレームに「企業ロゴ」の画像が入っていますね。
ナビゲーションフレームを見ると、ＡＢＣＤの４つのページとＨＯＭＥにリンク
がはられていて、ＡＢＣＤはmain.htmlがあるメインページフレームに呼びださ
れる仕掛けです。ＨＯＭＥをクリックすると、フレーム全体が再度読み込まれて、
元の状態になります。ファイル名は、
Ａ a.html
Ｂ b.html
Ｃ c.html
いろいろクリックしてみてください。待ってますから。
---- * ---- * ----
クリックし見てましたか？ では先に進みましょう。
問題が起こっているのは、サーチエンジンではこのうち、メインページフレーム
に呼びだされるはずのページ、main.htmlやa.htmlなどが直接呼びだされること
です。
例えばa.htmlは、「フレームの弊害について」という内容を持ったページです。
フレームで見えませんが、ページタイトルにもこの文言が書いてあります。
これがシンプルな構造のためにサーチエンジンへの親和性が高く、けっこう上位
に紹介されてしまうわけですね。
そうすると検索者は、Googleでこんな紹介を見るわけです。
フレームの弊害について
フレームの弊害はいろいろあるが、最も大きいのはフレームの中の本文
ページだけが紹介されて、フレームが外れた状態で表示されてしまうこと...
http://www.quickvalue.net/FRAME/01/a.html
さて、このリンクをクリックしてみてください。
これがサーチエンジンから紹介された状態です。企業ロゴマークも著作権表示も、
他のページへ移動するボタンもありませんね。
どんなに多くの人が訪れても、ほぼ全員帰ってしまうし、たとえこのページの内
容に満足して帰ったとしても、会社名も伝えることができないのでは「効果のあ
る企業サイト」とはとても言えません。
まずこの状態に気付いていただきたいのです。
さて、サーチエンジンでは、「フレームを使わないサイトにするには」が書かれ
ているb.htmlが紹介されるかもしれません。これが紹介されるとこんな感じにな
ります。
名称未設定
フレームの弊害が分かったら、さて、フレームを使わないサイトにする方
法を考えてみなければなりません....
http://www.quickvalue.net/FRAME/01/b.html
「名称未設定」？ そうです。リンクをクリックしていただければ分かるかと思
いますが、b.htmlにはページタイトルがこう書かれているのです。ホームページ
制作ソフトで、ページを新規作成するときにこんなページタイトルが初期値にな
っているものがあり、そのままアップしてしまうと、こうなります。
普段、フレームが隠れ蓑になって、目立たないのですが、こんな風にサーチエン
ジンで紹介されてしまうと、たとえ上位に表示されてもあまりクリックされない
恐れがあります。
■ フレームをなくした姿
では、フレームをなくしてみましょう。
http://www.quickvalue.net/FRAME/01/a2.html
を見てください。
これはa.htmlをベースに、ヘッダやナビ、フッタの要素をひとまず集めてみたも
のです。ソースを開いていただければ分かりますが、ややこしいＨＴＭＬです。
実はあまりサーチエンジンにフィットもしていないし、表組で複雑にレイアウト
してあって、今どきあまり誉めたソースではありません。
ここで見ていただきたいのは、ひとまずこういう形で、レイアウト的に近い形に
できなくもない、ということです。
キーワード検索から多くの来訪者の入口になっているページをとりあえず脱フレ
ームするといった場合の第１段階です。作業レベル３）や４）の形です。
ただし、これは不完全な形です。まずナビゲーションのところがもとのnavi.html
のままにしてあります。
<a href="./a.html" target="mainframe">ページＡ</a><BR>
<a href="./b.html" target="mainframe">ページＢ</a><BR>
<a href="./c.html" target="mainframe">ページＣ</a><BR>
<a href="./d.html" target="mainframe">ページＤ</a><BR><BR>
<a href="./index.html" target="_top">HOME</a>
こんな形で、呼びだしがmainframeフレームにパーツのHTMLだけを呼ぶ指定と
なっています。これでは、いけません。実際にクリックしてみると....
ね？ それぞれのページが別窓で出てきてしまいますね。ターゲット指定がされ
ているのに、a2.htmlにはターゲットとなるフレームが全くないので、ブラウザ
は仕方なく新しい窓を開いて表示しようとするのです。
そもそもd.htmlなどのフレームの一部分を呼びだしてしまってはどうしようもあ
りませんから、d.htmlを呼びたい場合は、d.htmlを含んだフレームセットを呼び
ださなければなりません。
その処置をしたのが次のページです。
http://www.quickvalue.net/FRAME/01/a3.html
このページからサイトへ行って、いろいろクリックしてみてください。はい、ま
たここで待ってます。
---- * ---- * ----
どうでしたか？ フレームが出たり消えたりしましたね。
この場合には次の３つのことが裏で行われています。
１）a3.htmlのナビの指定が変わった。先ほどのナビゲーション部分が
<a href="./a3.html">ページＡ</a><BR>
<a href="./bf.html">ページＢ</a><BR>
<a href="./cf.html">ページＣ</a><BR>
<a href="./df.html">ページＤ</a><BR><BR>
<a href="./index.html">HOME</a>
と変わりました。ターゲット指定がなくなったこと、それと、./a.htmlを呼んで
いたところが./a3.htmlを呼ぶようになりました。
さらに、./b.html→./bf.htmlというように、違うファイルを読んでいます。
bf.htmlやcf.html、df.htmlは、それぞれ、b.html、c.html、d.htmlを呼び込
んだフレームセットを定義したファイルなのです。
うまくブラウザの上メニューからソースを見てもらえば分かるのですが、
一番最初に呼びだした
http://www.quickvalue.net/FRAME/01/index.html
と
http://www.quickvalue.net/FRAME/01/bf.html
とは非常に良く似ています。
index.htmlがメインページフレームにmain.htmlを呼んでいたのが、bf.html
ではb.htmlを呼ぶようになっているだけの違いです。
いつも長くて済みません。
フレームのお話はただややこしいですね。とにかくうまくソースを見比べて、コ
ツをつかんでください。文章にするとややこしいだけで、実際にやってみるとた
いしたことはないですから。
ご自身でおやりになるかどうかはともかく、こういった作業と配慮を経て、優先
順位の高いページを脱フレームすることはできるのだと思ってください。
ややこしい気がするのは最初だけで、ひな形を決めてしまえば同じ作業の繰り返
しでどんどん脱フレーム化できますからご安心ください。
■ a3.htmlのソースはサーチエンジンにやさしくない！
改めてa3.htmlのソースを見てください。実にややこしくて、長ったらしいソー
スですね。特に、
１）<head></head>というヘッダの長さが長くて、サーチロボットが巡回しにくい
２）本文部分（<BODY>以下）に入っても、ロゴの部分やナビゲーションの指定が長すぎ
て、肝心の「フレームの弊害について」という文言がなかなか出てこない
この２つは今どきのサーチエンジンを相手にする場合、非常に不利です。
かつてサーチエンジンに紹介されてかえって困ったa.htmlのソースを見てくださ
い。<BODY>タグの次の行にはもう「フレームの弊害について」という文言が出て
くる、実にシンプルな作り。これがサーチエンジンに親和性が高かったのです。
脱フレームをした結果、サーチエンジン対応の悪いページになってしまうのでは、
いったい何をやっているのか分かりません。
そこで、次回はそうした部分を処理したファイルへ進むことにしましょう。
--------------------------------------------------------------
フレームの弊害をやっとサンプルでご覧いただけました。
御社のサイトはロゴもない、リンクボタンもないページを
サーチエンジンに紹介されていませんか？
そうした問題を回避するために、脱フレームをします。
「面倒だからフレームの内部が検索されないようにできないの？」なんて
おっしゃる方もおられますが、せっかくサーチエンジンから
検索で多くの来訪者が来ているのに、それを断るというのは本末転倒です。
効果の高いホームページにするなら、検索から数万人のアクセスを
呼ばなければならないのは間違いないこと。
ちょっと手数でも、本質的な変更を加えることが大切です。
==============================================================
【筆者プロフィール】
石井研二（いしい・けんじ） 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
==============================================================
|
