HOMEへ
> アフィリエイト日記 > WEBデザイン・CSS > ユーザーが迷わないリンクカラーの使い方

WEBデザイン・CSS

ユーザーが迷わないリンクカラーの使い方

2009年 7月 6日(月) 更新

Webデザインにおいて配色は非常に大事な要素です。

色というのは全ての色が対等ではなく、特にWebページで使用する色に関しては、そのサイトのテーマ、対象ユーザー等によって慎重に配色を考える必要があります。

また、それぞれの色というのはそれぞれに喚起させる感情が違います。例えば赤であれば「情熱」や「革新」、青であれば「清潔感」や「安心」など、これらは人間が永い間自然界と関わりを持ってきた中で築かれた普遍的なものでしょう。

ですから、アフィリエイトサイトを運営しようとする場合、これらの事実を無視して配色を施すのは基本的にNGです。

これらの事象を踏まえつつ、今回は、まだまだ歴史が浅いWebの世界で築かれたと言える(おそらくマイクロソフトが作り上げたとも言い換えられますが…。)リンクの色リンクカラー)について考察してみたいと思います。

基本はブラウザの設定のまま、変えたい場合も色の統一性は考慮する

「IE(インターネットエクスプローラー)」がWindowsに抱き合わされて販売された時から、私達は「ホームページ閲覧に際しての一つの約束事」のようなものをずっと示されてきました。

それは、リンクカラーです。

Webブラウザのデフォルト設定において、リンクカラーは、訪問済みリンクカラーはとなっていて、それが長い時間を掛けて世間に浸透した事により、今や一つの常識というか約束事になっています。

ですから、基本的にWebサイトにおいてのリンクカラーを考える際はこのルールをそのまま踏襲するのが良いでしょう。

しかし、どうしてもサイトの特色を前面に押し出したい場合などに、デフォルトのリンクカラーが好ましく無い場合もありますので、その時はCSS等で色の変更をするべきだと考えています。

このブログにおいても、CSSでリンクカラーの再指定をする事でリンクの色を変えています。その時、ゼミ長自身は以下の事に気を付けたり、仮説を立てたりして設定しました。

1.本文中(テキスト)のリンクはやはり青色がベストだけれど、デフォルトの青はややビビット(vivid)で彩度が高いので、少し目に疲れないか?ちょっと「柔らかめの青」にしてみよう。

2.リンクしてあるテキストは、デフォルトと同じで下線を付ける。

3.左右のメニュー内で一部2.のルールに当てはまらないものもあるが、リスト表示しておけば、殆どのユーザーはメニューとして認識するので大丈夫だと思うし、マウスを乗せたりクリックしたりすると必ず効果が発生するようにしているので、下線のパターンよりも効果を高めていると思う。

4.訪問時のリンクカラーは、配色を考慮して変わらないようにしたが、左メニューに情報が多くなってきた段階で紫に変えるようにも考えてる。

以上です。

これらの考えの根本は「リンクのデォルトカラーを変える時は、変えるなりの客観的・効果的な理由がある場合のみ」という所にあります。

このブログも、まだまだ改善の余地はあるかと思いますが、現段階ではこのような考えのもとにリンクカラーを設定しています。

Yahoo!がリニューアルでユーザビリティを低下させた事件

事件と言ってしまうとちょっと大げさですが、2008年1月にYahoo!がホームページをリニューアルしたのは記憶に新しい方も居るかと思います。

その時に、余りにも『使い勝手が悪い。』『見づらい』といった意見が多く、ユーザビリティを大きく低下させた出来事がありました。

以下当時の情報をCNET Japanから一部抜粋させて頂きます。

1月1日にトップページをリニューアルした1位の「Yahoo! JAPAN」は、ユーザビリティの大幅下落を受け、サイトブランド指数が11.6ポイント下降した。社名変更のニュースが大きく報じられた松下電器産業の「パナソニック」サイトはコンテンツ認知度と評価が上昇した。
(※中略)
1月1日にトップページをリニューアルした「Yahoo! JAPAN」は、首位は変わらないもののユーザビリティを29.6ポイント下げ、サイトブランド指数も11.6ポイント下降した。アクセス度の高い上位サイトではリニューアル後にユーザビリティが上昇するケースが多い。昨年10月のリニューアル後に「使い勝手が悪くなった」と一部で話題にのぼった「mixi」も、直後に実施した「2008-Ⅰ」調査での下降幅は4.4ポイントで、「Yahoo! JAPAN」の下落幅は過去最大といえる。

今はある程度改善されていますが、当時ゼミ長も『リニューアルして使いづらくなったな~。』と、普段全然Yahoo!を利用しないクセに偉そうに独り言を言った記憶があります。

当然「慣れ」の問題もありますし、なんとなく日本人の気質として「ニュースに踊らされる」傾向や「懐古主義」という、ある種バイアスが掛かっている側面もあるでしょう。

しかし、それらを考慮してもYahoo!のリニューアルによる使いづらさ、見づらさは確実にあるなと思いました。

特に言われてたのが「サイト内にリンクカラーの異なるルールが混在している」問題で、これに関してはゼミ長も真っ先に気が付きました。

当時のYahoo!のトップページでは、訪問済み(a:visited)のテキストリンクの色が場所によって変化したりしなかったりしていました。

Yahoo!は、それまではブラウザのデフォルトの設定通りに、リンクカラーは青、訪問済みリンクカラーは紫と非常に分かりやすかったのですが、リニューアル当時は、同じサイト内でテキストリンクのカラールールが違うという有様でした。

Yahoo!のような大規模サイトの場合、サイト内にリンクが沢山存在しますので、こういった状況で使い勝手を考慮するのであれば、クリック前後で色が変わった方がいいかと思いますし、ブラウザのデフォルトの設定に従った方が効果的だと思います。

Webサイトというのは「見る」というよりも「使う」という表現の方が正しいと思いますので、ビジュアルだけを考えず、ユーザビリティを向上させるビジュアルという意識がとても大切だと思います。

この記事へコメントする






この記事へのトラックバック

トラックバックURL : http://business-affiliate.net/mt/mt-tb.cgi/124