ナビゲーション - アクセスアップ

■グローバルナビゲーション

　サイトが大きくなるにつれて様々なコンテンツを閲覧することが大変になってしまうことがあります。ユーザにとって興味の有るコンテンツであっても毎回インデックスページを経由することでしか、別のコンテンツに移動できないのはサイトのユーザビリティに問題があると言えます。その結果、サイトのコンテンツを閲覧してもらえなくなってしまい、ページビューが落ち込むこととなってしまいます。

　各主要コンテンツに容易にアクセス出来るように、サイト上部に各主要コンテンツをリンクしたメニュー（グローバルナビゲーション）を用意しましょう。また効果的にするために各ページの同じ位置・同じ形・メニュー順を統一しましょう。統一しないと、せっかくグローバルナビゲーションを導入してもメニュー位置が各ページ上下左右ばらばらに配置されていたり、メニューがページ毎に異なってしまっては、結局のところユーザが迷ってしまいます。

　参考にしていただけるように導入しているサイトを紹介します。

■トピックパス

　ユーザにとってサイトを見ていると時にサイト内で自分がどこにいるのか迷ってしまう可能性があります。これは巨大なサイトである程、陥りやすい状態でしょう。その場合にユーザがサイトのどの位置にいるのであるかを示すことが出来れば、ユーザにとってわかりやすく親切であると言えます。

　ホーム > アクセス向上 > リンク

　上記のように表示されていますが、このことを「トピックパス」と言います。トピックパスを使用することで自分の位置を把握ができ、移動もスムーズに行くことが出来ます。またカテゴリを示していることによりユーザにとって興味のあるものであるかを簡単に判断することが出来ます。

　ユーザビリティを著しく向上させることが可能となりますので、是非各サイトで取り入れてほしいものです。主に巨大な検索エンジン等で取り入れられています。

■リンクネーミング

　リンクのネーミングによってはコンテンツの内容がわからず、ユーザが目的のコンテンツであるかが判断できずに迷ってしまう可能性があります。またサイトによっては、リンクであることすら気付かれない可能性さえあります。コンテンツの内容がわかるようなリンクネーミングをするように心掛けると良いでしょう。

悪い例
以下の例では、HTMLに関するどういったコンテンツなのかが全くわかりません。リファレンス,テクニック,HP作成方法？どんなコンテンツなのでしょう？コンテンツの内容が以下に充実していようとユーザにそのコンテンツの内容が伝えられないと意味がありません。

HTML
良い例
良い例では、HTMLに関するテクニック集ということがリンクを見るだけで理解出来るでしょう。またトップ書いてあることからテクニック集のインデックスページに派生していることもわかります。ユーザにとってそれが求めるものであったら閲覧してくれる可能性が高くなります。

HTMLテクニック集のトップへ

　リンクネーミングについて補足するならば、リンク先の情報に関する説明文を入れるということも良いでしょう。先程の「HTMLテクニック集のトップへ」についての説明文ならば、以下のようにするとリンク先の情報がもっとユーザにわかりやすくなります。

HTMLテクニック集のトップへ
　「HTMLのちょっとしたテクニック集。HTMLだけでもこんなことができるという便利なものを載せています。(20Tips)」

■各ページからトップページへのリンク

　検索エンジンによりページを検索され表示された時には、毎回トップページが検索されるわけではありません。サイト内の様々なページが検索されることでしょう。その時にユーザに他のコンテンツを見てもらうには、やはりサイトの概要・雰囲気がわかるトップページへ来てもらう方が良いでしょう。しかしユーザは検索結果を見ただけで去ってしまう確率が非常に高いといえます。その僅かなチャンスを逃さずに各ページにトップページにワンクリックでいけるようにリンクしましょう。そこから様々なコンテンツを見てくれるかもしれませんし、気に入ったらブックマークに入れてくれるかもしれません。

　検索結果によりサイトに来てくれるということは、ユーザは少なからずともサイトのコンテンツに興味を示してくれる可能性があるということを示しています。そういったユーザを逃さないことも地道ながらもアクセス数の増加に繋がっていくのです。

■ページ最上部へのリンク

　スクロールしないと全ての情報を見ることが出来ないようなページに対して、ページ最上部へのリンクをしているサイトは以外とありません。前記したグローバルナビゲーションがページ最上部のみにある場合や、最初から見直したい際にユーザはスクロールバーを動かすかキーボード・マウスの操作によってわざわざページ最上部に移動しなければなりません。

　Webの世界に慣れている、もしくは普段からインターネットをしているユーザであれば、キーボードやマウスの操作の方が楽かもしれません。しかし、そんな都合のいいユーザばかりではありません。きちんとリンクボタンを押して移動、インターネットに不慣れ、パソコンの操作自体に不慣れ等、Webの世界には様々なユーザがいることを忘れてはいけません。

　ページ最上部へのリンクは、ユーザビリティを向上させることに繋がりますので是非やってみましょう。HTMLで以下のように記述するだけで簡単に出来てしまいます。

■ページ内へのリンク

　スクロールしなければ見れないようなページで、複数項目がある場合には、ページ内リンクを利用する方がユーザにとって便利です。一番下にある項目を見る際にわざわざ一番下までスクロールするのは非常に面倒ですが、リンクでページ内のその場所まで移動できるのは簡単ですし、その項目がすぐに見れることが出来るので非常に便利です。

　ページ内へのリンクは、ユーザビリティを向上させることに繋がりますので是非やってみましょう。HTMLで以下のように記述するだけで簡単に出来てしまいます。

■リンクに画像を使うのならば

　リンクに画像を使うのであれば、画像であることを効果的に使ってほしいものです。以下のサイトを参考にしていただきたいのですが、リンク画像に製品の画像をプラスすることにより、リンク先の情報としてどのような製品・商品であるかを視覚的にユーザにうったえることに成功しています。またソニーでは、ロールオーバー（画像がマウスに乗った時に別の画像を変化させること）を使うことによりリンクであることをユーザに伝えています。単純に文字を画像化したものを使用するのではなく、絵等を加えることによりユーザにリンクであることやリンク先の情報を効果的に伝えていきましょう。

■リンクカラーは変えない方が良い

　リンクカラーの訪問済色(visited)、未訪問色(link)等をデフォルト（基本的には、visitedは青色・linkは紫色)で指定されているものから変更すると、ユーザにとってどこがリンクされているか迷うことになります。

　ユーザは、サイトを見ているうちに経験を積んでいきます。その中でリンクというものは、下線が付いていて青い文字であるということを誰かに教えられずとも、理解していきます。だからこそ他のページにスムーズに移動することが出来るのです。では、リンクカラーが変えられてしまった場合には、どうなるのでしょうか？さすがに通常の文字色とは異なる色を付けているため、それがリンクであることは判断できるでしょうが、少なくともユーザは一瞬でも迷ってしまいます。この迷いはユーザに不快感を与える可能性があります。

　しかし、サイトの配色上の問題でデフォルトカラーから変更しなければならない場合があるでしょう。その際には、通常の文字色以外でユーザにとって見えやすい色にしましょう。そして背景色に対してコントラストを充分に付けることで、リンクであることを視覚的に分かるようにしましょう。

■リンクの下線は消さない方が良い

　テキストリンクの下線を良く消しているサイトを見かけます。サイトに対して、リンクの見栄えを気にするウェブマスターが多いようです。CSSのhover等を使うことで、マウスポインタをテキストリンクに合わせることでリンクであることが、ユーザが認識できるようにすることが出来ます。

　ただし、テキストリンクの下線はリンクであることを知らせるもので、ユーザにとってリンクと認識するためにテキストリンクの下線は重要なものとなります。なるべくならば、消さないほうが望ましいでしょう。

■リンクではないなら下線を使わない

　文章を強調する際に下線を使う場合があります。普通のWord文書等では、そのまま文章を強調するために使われますが、Web上ではユーザはリンクであると誤認識してしまうことがありますので止めた方が良いでしょう。特にリンクカラーを変えてしまっているサイトではどれが強調としての下線であるのか、リンクとしての下線なのか判別できなくなってしまいます。

■リンクのhoverを効果的に使おう

　ユーザがリンクであることがわかりやすくするものとして、CSS擬似要素のhoverが定義されました。hoverとは、リンクにマウスカーソルが乗るとCSSで指定した効果を動的に与えることが出来ます。例えば、リンクカラーを青→赤に変更したり、下線をつけること等が出来ます。

　人は動的に動くものに対して反応するので、上手く使うことによりどこがリンクであるかが、ユーザにとってわかりやすく伝えることが出来ます。では、どのようにすればリンクであることをユーザに効果的伝えられるのでしょうか？以下に例を示します。※1

リンク色がblueとしてそこにマウスカーソルが乗った時にリンクカラーが黒に変わる。
ACCESS R
リンク色がblueとしてそこにマウスカーソルが乗った時にリンクカラーが赤に変わる。
ACCESS R
リンク色がblueとしてそこにマウスカーソルが乗った時にリンクカラーが白に変わる。背景色が黒に変わる。
ACCESS R
リンク色がblueとしてそこにマウスカーソルが乗った時にリンクカラーが赤に変わる。下線,上線がつく。
ACCESS R

　と上記のように様々なことをhoverにて定義することが出来ます。サイトにあったhoverを使い、リンクであることを明確にしましょう。

※1･･･hoverを個々の<A>に上手く設定することが出来ないため、<SPAN>にJavaScriptを使用しています(Internet Explorerでしかきちんと見えないかも･･･)。あくまでリンクのサンプルとしてご覧下さい。

[ホーム] [アクセス向上] [↑ページ最上部へ戻る]

簡単に1クリックで宣伝広告!!
個人が全ての検索エンジンやメルマガ等に登録していくのは、非常に大変な労力となっています。しかし、簡単に検索エンジン、リンク集、掲示板、メルマガの全てに1クリックでPRが出来てしまいます。