リンクを視覚化するためのガイドライン

公開：2004年5月10日付　著者：ニールセン博士
分類キーワード：ハイパーテキスト

要約：

いくつかの例外はあるが、クリックできることを最大限に訴えかけるためには、テキストリンクに色をつけてアンダーラインを引くべきだ。

以下がテキストリンクの見せ方に関する最新のガイドラインだ。

クリックできることを最大限に訴えかけるためには、リンクテキストに、色をつけて、アンダーラインを引く。どこがクリックできるのか見つけるために、ユーザに勘を使わせたり、マウスで探し回らせたりすべきではない。
リンクテキストに色がついていれば、必ずしもアンダーラインを引く必要はない。
- アンダーラインを使わなくても大丈夫な場合は 2 つある。ナビゲーションメニューの場合と、リンク集の場合だ。しかし、これはページのデザインがその部分の機能を明示している場合に限る。（注意：そのデザインは制作者たちが思っているほど、明瞭でない場合もある。）一般的にユーザは、ページの左側にあって、背景色が異なっていて、リンクが並んでいるナビゲーションエリアについては理解する。これは、ほかのサイトでもよく見るものだからだ。
- 例外：リンク色に赤色や緑色を使う場合は、アンダーラインは不可欠だ。これらの色は、色覚障害を持ったユーザで問題を引き起こすからだ。
- 例外：視覚障害を持ったユーザのアクセシビリティには、リンクのアンダーラインは重要だ。もし、アクセシビリティが優先事項である場合や、視覚障害を持ったユーザが多い場合には、アンダーラインを使おう。
リンクではないテキストには、一切アンダーラインを引くべきではない。あなたがリンクにアンダーラインを引いていないとしてもだ。アンダーラインはリンク専用にしよう。アンダーラインはクリックできることを強く訴えるので、アンダーラインが引かれたテキストがクリックできないと、ユーザを混乱させたり、がっかりさせしてしまう。
訪問済みリンクと、未訪問リンクには異なる色を使用する。
- 未訪問リンクは、訪問済みリンクよりも鮮やかで明るい色にすべきだ。訪問済みリンクの色は、「くたびれた」（鈍くて色あせた）ように見えるべきだ。
- この 2 つの色は、同じ色相で明度の違う色にすべきだ。そうすれば、それらは明らかに関連性があるように見える。全く異なる色（たとえばオレンジと緑）を使うと、2 種類のリンクの関連性を理解しにくくなり、どちらの色が「使用済み」バージョンなのかわからなくなる。
- 青系統の色は最もリンクっぽく見えるが、ほかの色でも同じような効果がある。
- いつも言っていることだが、色によって情報を伝える場合には、色覚障害を持ったユーザに代替手段を提供すべきだ。未訪問リンクの色を、訪問済みリンクよりも鮮やかで明るい色にすれば、一般的にこの問題は解決する。
リンクでないのならば、テキストをリンク色で表してはいけない。
- 一般的に、リンクでないテキストには色をつけるべきではない。ただし、リンク色と全く異なる色ならば、大きなユーザビリティ問題を起こさずに、色のついたテキストを使うこともできる。例えば、チェックリストの「OK」という単語を緑色にして、「エラー」という単語を赤色にしても構わない。（単語の意味が明らかに違うので、色覚障害を持ったユーザでも区別できる。）
- たとえリンク色として青色を使っていないとしても、リンクでないテキストに青色を使ってはいけない。青色はクリックできることを最も強く訴えかける色だからだ。
カーソルがリンクの上を通過したときに、色を変えるなどの視覚的効果を行う必要はない。それを行うと、ユーザがスクリーン上でマウスを動かしたときに、ページが乱雑に見える。
- 例外：もし敢えて、リンクがクリック可能であることを最大限に訴えかけようとしていないのであれば、リンクの上をカーソルが通過するときにクリック可能なことを合図して、失われたユーザビリティを多少取り戻すことはできる。例えば、リンクにアンダーラインを引いていない場合、カーソルがその上を通過するときにアンダーラインを表示することができる。
- 有効な視覚効果の一つの例は、リンクの行き先を予想する助けになるようなリンクタイトルを使うことだ。（もし主流のブラウザを使っているならば、このコラムのリンクの上にカーソルを重ねれば、この効果を見ることができる。）
リンクに小さい文字を使ってはいけない。リンクを狭い場所に押し込んで、運動能力が低下しているユーザに選択しづらい思いをさせてはいけない。高齢者のためのユーザビリティを確実にするためには、このガイドラインは特に重要になる。
- 例外：少数の人たちにしか必要のないリンク（たとえばコピーライト情報など）ならば、小さなフォントを使うのはかまわない。ただし、そのようなリンクは二次的な場所（フッターなど）に配置して、ユーザに読む必要性を感じさせないようにしなければならない。
- 高齢者をターゲットにしているか、または高齢者のユーザが多い場合は、リンクのフォントが大きい（12 ポイント以上）ことと、簡単にクリックできるに足るだけの文字列を含んでいることを確認しよう。

これら全てのガイドラインは、テキストリンクの見え方に関することだ。リンクのコンテンツ（実際に使われている言葉）を注意深く選ぶのはさらに大切なことだが、それはまた別の問題だ。（この問題に関するアドバイスは、Homepage Usabilityに載っている、リンクに関する 6 つのガイドライン、書き方に関する 12 のガイドライン、ナビゲーションに関する 7 つのガイドラインを参照するように。）画像リンクはさらに別の問題であるが、通常、ほとんどのリンクにはテキストを用いるのが一番よい。リンクの見え方に関するユーザビリティガイドラインに従えば、ユーザは各ページで何ができるのかが即座にわかり、重要なリンクを見過ごしてしまう可能性を低くすることができる。

2004年5月10日

↑次の記事：コンピュータとともに30年
↓前の記事：訪問済みリンクの色は変えるべし

このサイトの最新情報をRSSフィードで配信しておりますので、ぜひご購読ください
（Google ReaderやLivedoor Readerでもご購読いただけます）