ご利用案内
最終更新: 2011年08月08日 11:27
ナビゲーション関連のデザインで心がけることは、検索結果からアクセスしてくるユーザーや、そのほかのユーザーを迷わせないようにすることです。ユーザーがサイト内で迷った結果起きる機会損失はデザイナーに責任があると考え、使いやすいナビゲーションをデザインするようにします。
検索結果からアクセスしてくるユーザーへの配慮
検索結果からアクセスしてくるユーザーへの配慮として必要なことは、どんなサイトの、どんなページにアクセスしてきたのか、ということをユーザーにきちんと伝えることと、そのほかのページへの移動手段を確保することです。
- トピックパスを配置する
- 各ページにトピックパス（パンくずリスト）を置き、ユーザーが常に自分のいる場所を把握できるようにデザインします。ユーザーがサイトの中のどのような位置にいるのかを常に示すような配慮は、検索結果からアクセスしてきたユーザーに対して特に有効です。
- トップページへのリンクを配置する
- すべてのページにトップページへのリンクを配置します。検索結果からサイト内のページにアクセスしてきたユーザーが、トップページに移動する動線を確保すると共に、ディープリンクを受けることによって得たリンクポピュラリティを、サイトのルート（根）であるトップページに戻すことで、サイト全体のリンクポピュラリティを有利にします。
- 上位の階層へのリンクを配置する
- すべてのページに、上位の階層に移動できるようなリンクを配置します。検索結果からサイト内のページにアクセスしてきたユーザーが、関連の情報を求めて上位の階層に移動するための動線を確保すると共に、ディープリンクを受けることによって得たリンクポピュラリティを上流に環流させる意味もあります。
ユーザーの混乱を避ける
サイトに慣れていないユーザーであっても、迷わずサイト内を巡回できるような配慮をすることで、ユーザーの混乱が引き起こす機会損失を最小限に抑えます。このためには、学習の必要のないナビゲーションを用意することが解決策になります。
- サイト内のすべてのページに共通のナビゲーションバーを置く
- サイト内のすべてのページに共通のナビゲーションバーを置き、ユーザーがサイト内のどのページにいても、主要なコンテンツへは1クリックで到達できるようにデザインします。これによってユーザーの移動を助けるだけでなく、主要コンテンツにリンクポピュラリティを集中させることができます。
- サイト内では統一したナビゲーションを使用する
- サイト内のナビゲーションの方法を統一します。サイトのある部分ではFLASH、ある部分ではHTMLリンク、といったように一貫性のないナビゲーションを行うと、ユーザーを混乱させるおそれがあります。サイト全体を通じて統一されたナビゲーションを使用するようにしましょう。基本的にはサイト全体を通常のHTMLリンクでナビゲーションするようにします。
- リンクは必ずa要素とhref属性を使用してリンクする
- 他のページへのリンクは必ずa要素とhref属性を使用してリンクします。この方法によるリンクはWebページ同士のリンクとして最も標準的なものであることから、検索エンジンロボットを含むあらゆる環境で正常にリンクを辿ることができるようになります。
- アンカーテキストはリンク先を的確にあらわすようにする
- アンカーテキストには、リンク先のページに関連したキーワードを含み、リンク先のページを的確にあらわす文字列を使用します。最近の検索エンジンの多くはリンク元のアンカーテキストとリンク先のページを関連付けるため、このようにしておくことでリンク先のページのSEOに対応します
- リンクの下線は消さない
- CSSなどを使ってリンクの下線を消すようなことは原則的にはおこなわないようにします。多くのブラウザではリンク部分のテキストの文字修飾が下線であることから、ユーザーの多くは学習によって、下線の部分をリンクと判断します。特に検索エンジン経由でサイトに訪問するユーザーは初来訪のユーザーであることが多いため、リンク部分のテキストに下線がなかった場合、混乱する確率が高まります。リンク部分のテキスト下線を表示するようにし、ユーザーの混乱を回避します。
- 未訪問リンクの色は青系統を使用する
- 未訪問のリンクの色には、青系統の色を使用するようにします。多くのブラウザではリンク部分のテキストのデフォルトカラーが青系統の色であることから、ユーザーの多くは学習によって、青系統の文字の部分をリンクと判断します。特に検索エンジン経由でサイトに訪問するユーザーは初来訪のユーザーであることが多いため、青系統以外の色がリンクに使用されていた場合、混乱する確率が高まります。リンク部分のテキストの文字色に青系統の色を使用するようにし、ユーザーの混乱を回避します。
- リンク以外の文字列に青系統の文字を使用しない
- ユーザーの多くは青系統の文字色が使われている部分をリンクだと理解するため、リンク以外の部分に青系統の文字色が使用されていると混乱する可能性があります。
- 訪問済みリンクの色は紫系統を使用する
- 訪問済みリンクの色には、紫系統の色を使用するようにします。多くのブラウザでは訪問済みリンクの部分のテキストのデフォルトカラーが紫系統の色であることから、ユーザーの多くは学習によって、紫系統の文字の部分を訪問済みリンクのと判断します。特に検索エンジン経由でサイトに訪問するユーザーは初来訪のユーザーであることが多いため、紫系統以外の色が訪問済みリンクのに使用されていたり、リンク部分と訪問済みリンク部分乗りが同じであったりした場合、混乱する確率が高まります。訪問済みリンクの部分のテキストの文字色に紫系統の色を使用するようにし、ユーザーの混乱を回避します。
- 未訪問のリンクと訪問済みのリンクに同一の色を指定しない
- 訪問済みリンクと未訪問リンクの色は必ず別の色を指定し、視覚的に区別できるようにしておきます。訪問済みのリンクと未訪問のリンクの区別がつかないような指定がしてあるサイトの中で、同じページを行ったり来たりした経験は誰にでもあると思いますが、これはなかなかにいらいらさせられるものですし、多くのユーザーはこのようなサイトを快適だとは思いません。
- イメージによるリンクは極力避ける
- イメージによるリンクは、可能な限りおこなわないようにします。img要素をリンクに使用し、かつborderを0に指定する場合は、未訪問のリンクと訪問済みのリンクの区別が付かなくなり、ユーザーの混乱を招く可能性があります。リンクイメージの使用は必要最低限に抑え、リンクにはできる限りテキストを使用するようにしましょう。なお、ページの左上部分におくCIロゴのイメージにトップページへのリンクをつけておくことは、多くのユーザーがすでに学習済みのことですから、使用しても問題ないかもしれません。
リンクのラベリングをわかりやすく
リンク部分のテキストには、リンク先の情報を的確に表す文字列が使用されるべきです。リンクの先にある情報がどのようなものかを予想しやすいリンクになっていれば、ユーザーは自分の求める情報を容易に探し当てることができるようになります。
例えばリンクの文字列が「ここ」「こちら」「クリック」などという文字列ばかりだった場合、ユーザーはリンクの周囲の文章をすべて読まなければ、リンク先の情報を予想することができません。そのページを斜め読みして次のページに移る、というウェブ上での基本動作に支障をきたしてしまうのです。
リンクのラベルは、わかりやすく、リンク先の情報を容易に想像できるように、と考えて決定すると良いでしょう。
また最近の検索エンジンはリンクに使用されている文字列を解析し、リンクに使用された文字列とリンク先のページを関連づけます。リンク元のリンクで使用されたキーワードが、リンク先のページの重みづけに影響を及ぼすのです。
またリンクに使用される文字列は、そのリンク元であるページ自身のテーマにも近いものである考えられるため、リンクに使用する文字列はリンク元ページ内でも特別な重み付けを受けます。このように、リンク先の情報を容易に想像できるようなわかりやすいリンクにすることで、ユーザーだけでなく検索エンジンの適合度の計算にも有利に働きます。
- わかりやすいリンクのラベリングで得られる利点
-
- ユーザーがリンク先の情報を予想しやすくなる
- 検索エンジンがリンクに使用された文字列とリンク先のページの関連をもとにした適合度の計算をしやすくなる
おわりに
この記事が役に立った（または役に立ちそうだ）と思っていただけたなら、下のボタンから共有をお願いします。
