2007.01.26サイトの構築においてなくてはならない・欠かすことのできないのがナビゲーションです。ナビゲーションは文書同士を有機的につなぐリンク(通常はa要素)によって構成・提供されます。登場し、新しいナビゲーションのベースとなりえるかもしれません。frame要素(フレーム)によって本文とナビゲーションを分離して提供する必要があります。いった形でナビゲーションを提供するかは、ウェブサイトの制作者にその一切が委ねられることになります。フレームでナビゲーションを提供している制作者の多くは、フレームの抱える問題点を解決できるような実装になっていないまま、もしくはその問題点を知らずにフレームを利用していることが多いようです。そこで、本文書ではフレームでナビゲーションを提供する場合の最適化について考えていきます。フレームが抱える問題点ひとつのページの表示域を分割してページを表示するフレームを使うことでナビゲーションと本文を分離させ、部分的にユーザビリティを強化してくれます。フレームによるナビゲーションは最短のナビゲート方法を提供してくれます。それだけでなく制作者側からしてもナビゲーションを1つのファイルで共有することができるのでメンテンスが容易におこなえ、更新は最低限の労力で済ませられます。このように一見フレームはユーザにとっても便利で、かつ制作者側も楽ができるものと思われるかもしれません。ナビゲーションの提供にフレームを採用するとなるとユーザ側とウェブサイトの管理・運営側の双方においても以下のような問題点を抱えてしまうことがあります。ユーザ(観覧者)視点の欠点ユーザの利用している環境(UA)がフレームに対応していない(フレームを利用できない)場合がある。フィーチャフォンの携帯電話端末などに多い。ひとつの画面に複数の文書を表示しているため印刷が困難な場合がある。欠点ナビゲショーン用フレームページにしかリンクがないためサイト内のリンクポピュラリティ向上につながらない。取得が困難なため、ユーザがリンクを張りにくい(張れない)。その結果、リンクポピュラリティの向上につながらない。検索エンジン経由の際にランディングページが各フレームページの場合、せっかくの訪問者が迷子になるかもしれない。ユーザ視点の欠点から詳しくみていきましょう。バージョンが該当します。今となっては、そのような化石のように古いブラウザを利用しているユーザは皆無であると考えることができますが、フィーチャーフォンの携帯電話端末などには画面の大きさに制限があるためフレームの機能を一切サポートしていないものが多くあります。本来のマークアップではありません。音声出力や点字出力の非視覚環境においては、フレームを使用したページの内容を把握するのが困難で、知らず知らずのうちに利用者を制限してしまっていることにもなりかねません。"ひとつの画面に複数の文書を表示しているため印刷が困難な場合がある"というのは、比較的新しいブラウザではオプションでページを指定して印刷できますが、たとえオプションがあっても、その方法を知らない場合、ユーザはかなり混乱することになります。フレームページが一枚に収まらない場合、適切に印刷できないことがあります。screen")を使用することで、ある程度まではカバーすることができるでしょう。表示されないためです。取得できない(取得が困難になる)ためリンクしにくい・されにくいということが言えます。WWW上に公開されている各文書もその情報発信力を最大限に活かすことができません。検索エンジンは各ページを巡回し、サイト内の情報を収集します。問題が起こるのは検索エンジンのロボットがフレーム内のページであろうとひとつのページとして認識することです。検索エンジンのロボットのようなプログラムでは、それがフレーム内のページであるのか、そしてそのフレームの構成がどのようになっているのかということまでは正しく認識することができません。その結果、検索エンジンの検索結果でナビゲショーンが不完全なフレーム内のページへユーザが訪問してきた場合、ユーザはそのページから身動きができなくなってしまいます。訪問者を見逃してしまうことになる可能性もあります。検索エンジンのプログラムは被リンクを重視するといわれているため、せっかくのリンクがひとつのメニューページにだけ統一されていては、リンクポピュラリティの向上にもつながりません。取得が困難なため他力での被リンク獲得の機会をも知らず知らずのうちに失ってしまっているのかもしれません。フレームの享受と最適化ここまで、ユーザと管理・運営者視点からフレームの欠点を見てきましたが、一方的に悪い面だけを見てフレームでナビゲショーンを提供する方法はダメだと考えるのは早計です。フレームのメリットを享受しながらもフレームの欠点を改善する方法を考えてみましょう。フレームでナビゲーションを提供するかどうかは、制作者の判断に委ねられるわけです。先ほど制作者にとってフレームとは、ナビゲーションをひとつのファイルで共有することができるのでメンテンスが容易におこなえ最低限の労力で済む楽な方法だと述べていましたが、この前言を撤回します。フレームのみでナビゲーションを提供することは楽ができるのではなく、単なる手抜きでしかありません。フレームのみでのナビゲーションを提供するのは制作者の怠慢といえます。フレームが楽のできるものだというのは忘れてください。フレームのメリットを享受しながらもフレームの欠点を改善したいというのであれば、フレームは決して楽のできるものではなく制作者の作業量をより増やすものだと心得てください。それでは、フレームの欠点を改善する方法に焦点をあててみましょう。ナビゲーションは全ページで提供するそもそもフレームだけでしかナビゲショーンを提供していないというのが誤りです。検索エンジン経由の際にランディングページがフレーム内ページであっても、フレーム内ページにもしっかりとナビゲショーンをつけていればまったく問題はありません。フレーム内ページにもリンクが張られていれば、サイト内では被リンクもしっかりと獲得できリンクポピュラリティ向上にもつながります。結局は楽ができるのではなく、フレーム用のナビゲーションと各フレーム内ページ用のナビゲーションまで記述しなければならなくなるため余計に手間がかかることになります。フレームは選択できるものにするナビゲーションを全ページに記述した上で、サイト構成をフレームで固定するのではなく、常にフレームで閲覧するか・各々のページで閲覧するかを選択できるような機能を提供しましょう。すれば各ページごとにフレーム有りで閲覧するのか無しで閲覧するのかユーザ側で選択することができます。することでフレームはよりユーザビリティを強化してくれるものとなり、最短のナビゲート方法としてユーザに提供できるので、メリットをそのまま享受することができます。noframes要素を指定するnoframes要素はフレームに対応していない環境の場合に表示させる内容を指定することができます。フレームに対応した環境では、この部分の記述を無視してフレームを表示するのでフレーム対応環境の邪魔になることもありません。重要なのが、この要素内にどのような記述を施すかです。検索エンジンの検索結果画面にはスニペットと呼ばれる、そのページの要約文が表示されます。検索でヒットした膨大なページの中から、ユーザはどのページを訪問するかにあたって、このスニペットの内容が有用であるかどうかが重要な判断材料となります。noframes要素内の内容はこのスニペットにもなり得ます。noframes要素内によく記述されている文面はというと、「フレームを使用しているのでフレーム対応環境でご観覧ください」といった類であり、これでは各フレームの内容となっているリソースの表現している情報の代替にもならなければ、フレーム内の情報にもアクセスできないという結局何の意味も成さない内容を記述しているだけです。noframes要素を上手に使えば有用なサイトであるかの判断材料とも成り得る上に、フレーム非対応環境用のナビゲーションにも成り得ます。noframes要素内に記述する文面は次のようにするといいでしょう。Good)&lt;/h1&gt;&lt;p&gt;より良いWebを作るための初学者を対象とする情報技術の解説サイトです。&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;a&nbsp;href=&quot;menu.html&quot;&gt;コンテンツ一覧&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a&nbsp;href=&quot;main.html&quot;&gt;トップページ&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a&nbsp;href=&quot;sitemap.html&quot;&gt;サイトマップ&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/noframes&gt;&lt;/frameset&gt;&lt;/html&gt;以上ここまでフレームを採用したサイト構成を最適化する方法を取り上げましたが、フレームを使用することで、つきまとうデメリットがあります。取得が困難になることです。フレームを使用しながら、これを改善・緩和できる良い方法は思いあたりません。フレームを享受するとうことは、イコール、このデメリットも享受しなければならないということを心得てください。フレームの代替となる技術の利用フレームは制作者が楽をするためのものではありません。楽がしたい、作業の効率化を図りたいのであれば以下に紹介する技術を利用するようにしましょう。Include)という技術を利用するこでフレームのメンテナンスの容易さとほとんど同じ作業量でナビゲーションの提供を代替することが可能です。利用することで任意の位置に別のファイルを呼び出し・表示することができます。使用が許可されている)必要があります。利用すれば、フレームと同様にナビゲーション部をひとつのファイルで共有することが可能です。ファイルに書き換える必要があるなどの制限が設けられています(これらは各種ウェブサーバの設定ファイル、Apacheであれば.htaccess、WindowsのIISであればWeb.configなどで設定できます)。includeモジュールという機能があります。ファイルに書き換える必要があるなどの制限が設けられています(これらは各種ウェブサーバの設定ファイル、Apacheであれば.htaccess、WindowsのIISであればWeb.configなどで設定できます)。同様、PHPファイルの指定箇所に以上のようなソースを記入するだけです。MIMEとして出力対象に設定できます。PHP用のコードで記述しなければいけない場合があります。System)は、サイト内のナビゲーション部分を自動生成してくれるため、ページが追加されるたびに関連するページにリンクを追加するといった煩わしい作業から解放されます。Type、Drupal、Xoops、Joomla!、concrete5などのソフトウェアがあります。CMSを利用すれば、作業はテキスト等の記述だけに専念することができるので、作業が大幅に減少することでしょう。CMSについても利用しているウェブサーバにCMSを利用できる環境が整っている必要があります。使って視覚的にフレームに似せたものを作成することもできます。使った方法がもっとも妥当です。overflowプロパティを応用して、擬似的にフレームを再現することもできます。その作成例は次の通りです。視覚的にフレーム構成を擬似的に再現できたとしても、フレームのようにナビゲーション部をひとつのファイルに共有することで制作者の作業量を減らすことはできません。擬似フレームでは、各ページにナビゲーション部分を記述することになるので作業量が減ることはありません。includeモジュールなどの別ファイルを呼び出し・表示できる技術、またはCMSと組み合わせることで、作業量を大幅に削減できる上に、見た目もフレームに似せたナビゲーションを構成・提供することができるでしょう。最適化ContactWeb制作に関するご相談、お気軽にお問い合わせください。/WebデザイナーContactSubscribeTwitterFacebookGoogle+。