サイトナビゲーション

サイトナビゲーション機能で、閲覧が便利になります。

ホームページは、内容が良いものであることはもちろんですが、ユーザーが閲覧しやすいサイトにするのが大事ですね。そのための便利な機能に、サイトナビゲーションがあります。ここではサイトナビゲーションについて解説します。

このページの作成にあたり、 Opera 7に於るlink要素、 link 要素とサイトナビゲーションバーを参考にさせていただきました。

サイトナビゲーションとは

サイトナビゲーションとは、サイトの各コンテンツ間の関係を示したもので、日本語では道案内、といった意味になります。今見ているページから上位階層へ移動したり、同一階層間で行き来したり、トップページへ移動したり、といったことができます。

Operaと Mozilla の場合のキャプチャー画面をのせておきます。赤い丸で囲った部分がサイトナビゲーションです。

サイトナビゲーションを作るには

サイトナビゲーションを作るには、<head> タグ内部に、以下のように記述してください。サンプルでは相対参照にしていますが、もちろん絶対参照(http:// で始まる形式)でもOKです。

<link rel="start" href="../" title="人気ホームページ製作法">
<link rel="index" href="./" title="ホームページを持つ全ての方に">
<link rel="begin" href="./" title="ホームページを持つ全ての方に">
<link rel="prev" href="./usability.html" title="ユーザビリティ">
<link rel="next" href="./kyoyu.html" title="メニューの共有">

全てではありませんが、簡単に解説しておきます。 start、up、prev、next などを書いておくと、サイト閲覧が便利になると思います。

start: トップページを示す。
up: 1つ上の階層を示す。
begin first: 同一階層内の最初のページを示す。
prev: 同一階層内の1つ前のページを示す。
next: 同一階層内の1つ後のページを示す。
end last: 同一階層内の最後のページを示す。
index: 索引を示す。
contents: 目次を示す。
copyright: 著作権表記を示す。

この他にも、chapter、section等があります。小説をホームページで公開される方は利用されると良いでしょう。

サイトナビゲーションの利点

サイトナビゲーションには、画面内に表示されるメニューと比べると、以下のような利点があります。

ブラウザ上に常に表示される。: 画面内のメニューは、スクロールすると消えてしまうことが多いですが、サイトナビゲーションならブラウザの決まった位置に常に表示されます。
リンク先との関係がわかる。: 階層関係、前後関係が記述されているので、移動しやすくなります。
どのサイトでも同じ表示になる。: 画面内のメニューは、サイトごとに位置や配置方法などが異なりますが、サイトナビゲーションは、サイトにかかわらず常に表示方法が同じなので、始めて訪問したサイトでもとまどうことがありません。
ショートカット機能が使える。: ブラウザの設定で「前へ」「次へ」などにショートカットを割り当てておくと、サイト閲覧がしやすくなります。
サイト表示が速くなる。: 先読みブラウザだと、ブラウザが先読みしてくれるので、次ページ表示が速くなります。

サイトナビゲーションが使えるブラウザ

残念ながら、サイトナビゲーションが使えるブラウザは多くありません。 2004年12月の時点では、 Mozilla、 Operaぐらいです。 Safari は使えないようです。

サイトナビゲーションを使用しているホームページ

ホームページ作成ソフトは多くありますが、標準でサイトナビゲーションをヘッダに出力するものは無いようです。このため、普通のホームページではほとんどサイトナビゲーション機能は使われていません。

最近はやっているブログでも、レンタルブログでサイトナビゲーション機能があるのは、私が調査した限りココログとはてなダイアリーだけでした。

自分でカスタマイズするブログは、 MovableType と Nucleusが有名ですが、これらは両方ともサイトナビゲーション機能を使っています。