ハイパーテキストリンクのスタイル大全

ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。

The Definitive Guide To Styling Web Links

以下は、各ポイントを意訳したものです。

はじめに

ハイパーテキストリンク（リンク）はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。

我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。

1. CSSのセレクタと擬似クラス

リンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです。

まずは、リンク関連のCSSのセレクタと擬似クラスを見ることから始めます。

• a:link{}
  未訪問リンク
• a:visited{}
  訪問済みリンク
• a:hover{}
  ユーザーがリンクをマウスオーバーした際
• a:focus{}
  ユーザーがリンクをフォーカスした際
• a:active{}
  ユーザーがリンクをクリックした際

2. コントラストの確保

リンクは背景色からだけでなく、周囲のテキストと比較しても目立たせる必要があります。もしテキストのカラーとリンクのカラーが同じだったら、それは問題をもっています。
リンクを目立たせるには、次のテクニックの一つ、もしくは二つ以上を使用してください。

• text-decoration:underline;
  下線
• font-weight:bold;
  太字
• font-size:1.4em;
  サイズ
• color:#ed490a;
  カラー
• background-color:#c0c0c0;
  背景色
• border-bottuom:2px solid #a959c3;
  ボーダー

もし、リンクのカラーをブルーにすると決めたなら、ユーザーがそれが同じリンクであることを予想するので、他のあらゆるテキスト要素がブルーではないことを確認してください。

同じく、ユーザーは下線を使用したテキストはリンクであると予想するため、リンクではないテキストには下線を使用してないでください。
そして、視力が低いユーザーも念頭においてください。カラーのみの変更の場合、色弱のユーザーは区別がつかない場合があります。問題のないカラーの選択や下線、太字などを考慮にいれてください。

The Hicksdesign

私がよく使うテクニックの一つに、フォーカス時に少しだけブラーを入れることです。
ページを見るとき、リンクはよいコントラストを伴っているべきです。

3. 訪問済みリンクを忘れずに

訪問済みリンクのデザインはしばしば見落とされます。しかし、これは特に大きいウェブサイトでは非常にユーザーの役に立つものです。既に訪問したページを避けることは、再び訪問することを望むにかかわらず、ユーザーの助けになります。

訪問済みリンクは、未訪問ほど明白ではないように、ほのかなカラーを与えてください。

Lee Munroe

4. title属性の使用

titile属性はよく見落とされます。しかし、これはリンクに記述を加える良い方法で、特にスクリーンリーダーを利用する人に役立ちます。

5. ボタンスタイル

本当に重要なリンクを目立たせるために、ユーザーに行動を呼びかけたり、多くの情報を与えられるボタンのスタイルを使用します。スタイルを利用することで、画像を編集せずに繰り返し利用できます。

UX Booth

「Call to Action Buttons.」にボタンに関する記事があります。

6. ホバーのデザイン

リンクの上にマウスがホバーしていることをユーザーに伝えることは良いアクションです。よく使用されるのは、背景のカラー変更やテキストのカラー変更、下線の削除です。

Adii Rockstar

ユーザーがリンクをホバーする際、マウスのポインタは通常アローからハンドに変わります。しかしこの機能はIEではspan要素やサブミットボタンで失われます。下記のCSSでカーソルタイプを加えて修正してください。

7. アクティブのデザイン

ユーザーがリンクをクリックしたことを示すためにビジュアルでのフィードバックを提供します。リンクが押されたことを明示する素敵なテクニックの一つに、リンクを1, 2px下げるのも効果的です。

Maxvoltar

8. paddingの活用

ユーザビリティのチップスを紹介します。
リンクにpaddingを加えてください。これはリンクの領域をより大きくするもので、クリックするのがより簡単になります。

Simple Bits

9. 各種ファイルへのリンク

リンク先のファイルのフォーマットを明示したい場合は、アイコンを使用してユーザーに知らせてください。リンク先がPDFや画像などに関わらず、開こうとしているファイルタイプに対してユーザーに準備をさせます。

The TLC

10. アイコンの併用

ファイルのフォーマットのためにアイコンを使用するのと同様に、アイコンをリンクがどこであるか、何をするかについて明らかにするために使用してください。アイコンを併用するとユーザーはテキストだけより速く認識することができます。

Sam Brown

11. テキストは記述的に

リンクのテキストには「ここをクリック」ではなく、有意義な意味のあるテキストを使用してください。「ここをクリック」の一番の問題点は、なぜクリックすべきなのか前後のテキストを読む必要を強いるということです。リンクのテキストにはより説明的な文言にします。そしてそれはSEOにも効果的です。

12. ロゴのリンク

ロゴは常にトップページへリンクを設定してください。多くのユーザーはこのことを予想します。しかしながら、ユーザーがこのことを知っていると想定はしないでください。ユーザーの多くは「トップ」リンクを探します。

13. 新しいウインドウは開かない

これはしないでください。
新しいウインドウやタブを開くのは、ユーザーに決めさせてください。ユーザーの多くは同じウインドウで遷移することを予想します。
もし、どうしても新しいウインドウを開く必要がある場合は、明示してください。アイコンを添えるのも効果的です。

14. マイクロフォーマット

そのページとリンク先の他のページがどのような関係か理解するのに役立つためにリンク構造にマイクロフォーマットを採用することを検討してください。

これは検索エンジンのロボットに対して、リンク間の接点を与えることができます。

テキストリンクのショーケース

元サイトではショーケースとして上記以外にも多くのサイトが紹介されています。
The Definitive Guide To Styling Web Links