リンクのスタイリング

立て続けにリンクに変わったスタイル当てることについての記事を二つ読んだ。ひとつはサムネイルにオンマウスすると暗くなったりしてサムネイルが見えなくなるスタイルについての記事で、もうひとつはオンマウス時や他の場所のリンクのスタイルとの食い違いについての記事。納得できるところもあり、納得できないところもあり。

両方の記事共に「どうなっているとユーザーがわかりやすいか」という視点として読んだ。もちろんウェブサイトはユーザーに見てもらってなんぼなので、そういう視点を忘れてはいけない。しかし、それと同じくらいどうコンテンツを伝えるかということも大事なはずだ。

サムネイルにオンマウスで暗くなったり、オーバーレイで補助的な情報を出したりするのは、確かにユーザーを混乱させやすい。オンマウスする時はそのサムネイルに注目するからなので、それが見づらくなったり隠れたりすることに煩わしさを感じても不思議ではない。

しかし制作者の方から見れば、サムネイルはコンテンツの一端しか表現していないもので、完全なコンテンツがあるリンク先へ移動してもらうためのものにすぎない。その目標を達成するためにはそれを補う情報が必要になる。多くの場合はそのためにキャプションを添えたりするわけだけど、オンマウスでそれを表示するというのも悪くはない。

ウェブでは選択という状態がほとんど表現できない(特にリンクに対しては)ので、こういった注目に対して補足情報の提示を行うのがとても難しい。ブラウザーの内蔵機能を使ってそれに近い表現を行おうとすると、オンマウスでのこういったアクションを使うのはしかたがないと思う。

同じオンマウスでのアクションでも、リンクの文字色や透明度の変更となるとまたちょっと変わってくる。後者の記事の著者の意見としては、通常時のリンクが認識しづらいのでなんらかの補助が必要だ、ということなのだろう。

少なくとも透明度をいじるのはコントラストと認識性の面から問題があると思う。通常時が不透明なら本文とのコントラストを下げる結果になるし、通常時が半透明だとしたら大きくリンクの認識性が落ちる。

そもそも何らかの形でリンクであることを認識しやすいようにスタイリングする方が良い。もしそうなっていないなら、リンクがそれほど重要ではない(Mediumとかはこっち)ということだ。オンマウスの時に補助的な効果を入れるといった後付けのコスメティックな方向から考えるべきことじゃない。

後者の記事の後半で書かれているセクション(ウェブページの構成部品と解釈した)をまたいで一貫性のあるリンクのスタイリングを行うべきかも、同じようにその仕上がりから判断することじゃないと思う。これもリンクの機能やリンク先のコンテンツを意識して行われる方が良い。

段落内の外部へのリンクとグローバル・ヘッダーのリンク、ページングのリンク、ファイルをダウンロードするリンク、それぞれ向いたスタイルは違うはず。これらが同じだと確かにユーザーにはリンクだとはわかりやすいだろうけど、肝心のリンクをクリック(タッチ)した時に起こることがわかりにくいものになってしまうかもしれない。

ステータスバー(的なもの)でのリンク先のヒントも含め、オンマウスでゴニョゴニョみたいなのは、もはや認識できるユーザーの方が少ないかもしれない。少なくとも静的な状態でリンクの見た目をどうするかはしっかりと考える必要があるけど、それ以上のことはそのリンクの持つ機能やリンク先のコンテンツを意識してスタイリングしてやった方がわかりやすいウェブページ、引いては良いウェブサイトを作れるはず。