特定のページへのリンクについてはまだ触れていなかった。 サイトの同じセクションにあるその他の記事へのリンクだ。 ほとんどのサイトはページの左側に欄を作り、そこに特定のページへのリンクを並べる。 ページの一番下の部分がまだ使えるが、 それについてはこのすぐ後に触れよう。

左サイドにナビゲーション欄を作る利点は、 メインのコンテンツがページ全体に広がるのを避ける、 自然なやり方だ。 ページ全体に広がったテキストよりそうでないほうが読みやすい。

左ではなく右側にサイドナビゲーションを置いたサイトもあるかもしれない。 どちらがよいか意見が別れるところだ。 右サイドは垂直スクロールバーに近く、ビジターのマウスはたいていその位置にあるから、 右にリンクを置いたほうがクリックしやすいという理由で、 右サイドナビゲーションを勧めるユーザビリティの専門家もいる。 私の個人的な経験から言うと、 右サイトナビはあまりお勧めできない。 ビジターひとり当たりのページビューは右のほうが少なかった。 よって現在、左側がいいというのが私の意見だ。

サイドナビゲーションリンクの場合も、 ビジターが決めやすいようにリンクは10以下にしよう。 サイドナビゲーションにたくさんリンクを貼りつけるのはよくある過ちで、 それをやってしまった大きな Web サイトがいくつかある。

メインメニュー ページやサブメニュー ページは、 本来それ自身がナビゲーション用ページだから少し特別で、 サイドナビのリンク数は多くてもかまわないが、 それでもめったなことでもなければ、30を超えないほうがいい。

フォローアップリンク

ナビゲーションリンク用としてまだ話していなかった場所、ページの一番下が残っている。 ここはそのページに関連したページへのフォローアップリンクを置くのに理想的な場所だ。 ふつう、左サイド欄のリンクよりもページのメインコンテンツに深い関係のあるリンクを、 そこに置く。

どのリンクをどこに置けばいいのか定かでないなら、こんな風に考えてみよう。 ページ左のリンクは、そのページを読み始めたけれどいまひとつで、 途中で止めようと思っているビジターのためのものだ。 同じ主題の情報をビジターに与えるチャンスだ。

下のリンクは、まさにそこが探していたページだったので、 終了しようとしているビジター用のリンクの場所だ。 ここでは、同じ題材についてより深い情報を与えるようなリンクを置くことができる。

もし同じ題材についての記事がたくさんなくて、 ビジターが簡単に選択できるくらいのリンク数（理想的には5かそれ以下だが）に達していないなら、 全く同じ題材でなくてもそれに限りなく近いものへのリンクも置いてもいいだろう。

長いページの下のほうに、 メインセクションへのリンクも置いてもいい。 ビジターはトップへ戻るのにスクロールしなくてもいいので、時間を節約できる。

リンクは画像かテキストか

一般的なルールとしては、 画像が使われれば必ずといっていいほどユーザビリティは劣る。 それはページデザインに関する他の部分同様、 ナビゲーションについても言える。 ナビゲーションに画像を使うとよくない理由は2つある。 ひとつはダウンロードに時間がかかる。 ( Usability: the Basics - Graphics and Speed 参照) もうひとつは、 ダウンロード時間を短くするために画像が表示されないようにしている人が多い。

画像ナビゲーションを使うのなら、 ページ内の別の場所にテキストナビゲーションも置くべきだ。 通常テキストナビゲーションはページの下のほうに置かれる。 画像にAlt タグを使って、画像の内容がテキスト表示されるようにしたサイトも中にはあるが、 画像が表示されないブラウザで一度試して見ると分かるが、 それは絶対使うぞと決意した人にしか向いていない。

ナビゲーションに画像を使わなければならないのなら、 ナビゲーションだと見てすぐ分かるように作ろう。 人気のサイトではカード式索引のような丸いタブが使われている。 ダウンロードに2、3秒よけいかかったとしてもその目的は明らかだ。

画像を使えばナビゲーションのユーザビリティが劣るにもかかわらず、 画像が人気があるのは疑いのない事実で、 成功したWeb サイトのほとんどで使われている。 企業のロゴを除けばページ内の唯一の画像アイテムかもしれない。 考え方としては、ユーザビリティが多少落ちても、 全く面白みがないよりはいいということだ。

ロールオーバー

マウスがその上を動くたびに変化する画像は見た目いいが、 確実にユーザビリティを悪くする。 プレーン画像のナビゲーションと比べてユーザビリティは約2倍悪いということになる。 というのも、ダウンロードに2倍の時間がかかり、 JavaScript がそれを動かす時間が加わるからだ。

サイトがあまりにシンプルなので少し見た目をよくしたいなら、 ユーザビリティを犠牲にする価値があるかもしれない。

一方、ダウンロードにとても時間のかかる大きなページの場合は、 かわいらしい絵が再生されつつある間に肝心のビジターがいなくなってしまうかもしれない。 それでもよければいいが。 大成功したサイトではそんなことはやっていないようだ。

テキストリンク同士の離し方

トップナビゲーションの場合は比較的簡単だ。 テキストリンクは垂直棒 ( | )で、 パンくずナビは山形記号(>)で簡単に分けることができる。

サイドナビゲーションの場合は巧妙だ。 それぞれのリンクの間に実線の空白がベストだが、 長いリストのあるメニューページではうまく行かない。 空白より改行がいいと思うかもしれないが、 その場合、2行にまたがるリンクがないか気を付けなければならない。 よくある問題で、簡単には解決できない。 それぞれのリンクの初めだけ大文字を使ってリンクを分けたとしても、 はっきりとは分からない。 長いリンクは強制改行し、 2行目以降はノンブレーキングスペース(HTMLの場合は ) を1つか2つ入れてインデントするほうがいいかもしれない。

ユーザビリティとナビゲーション
テキストリンクの色とサイズ -- 3ページ

• iPhone 向け睡眠支援アプリ、単純作業で眠気を促す 19:00
• サンワサプライ、クリック/ホイール音の少ない"静音"マウス発売 08:00
• 「SnapDish」の料理写真を直接「goo ブログ」に投稿、両サービスが連携 07:00
• アート性が高い Instagram の写真を販売・購入できる「HASHPIX」 06:00
• チョキチョキ切って気分爽快！iPhone/iPad 向けゲームアプリ「Cut the Buttons」日本語版リリース 5/26
>>その他の新着ニュース・コラム

• アジアパシフィックにおけるソーシャルメディア・トレンド〜グローバルな視点、ローカル市場での現実〜 (ネットレイティングス株式会社)
• 【プレジデント・gooリサーチ共同】時間の使い方に関するアンケート (NTTレゾナント株式会社)
• 情報共有と業務効率化を実現するためのお手軽グループウェア (リスモン・ビジネス・ポータル株式会社)
• Yahoo!検索プラグイン開発マニュアル (Yahoo! JAPAN)
• 「暗号の2010年問題」対応ガイド〜サーバ管理者のためのチェックリスト10項目〜 (日本ベリサイン株式会社)