:visited と :hover は本当に必要なのか 無意識にやっているリンクの設定について考える

このエントリーをはてなブックマークに追加

先日、サイゾーのサイトを見ていたところ、過去に読んだことのある記事をもう一度クリックしてしまうということがあった。
理由は、単純に私の記憶力が足りていないこともあるのだが、サイト側の作りにも原因を見つけた。それはリンクカラーだ。

htmlやcssを勉強してかなり初めの方に出てくるのが擬似クラスによるリンクの指定だろう。

  • a:link 訪問していないURLへのリンク
  • a:visited 訪問済みのURLへのリンク
  • a:hover マウスオーバーした時
  • a:active 選択中(tabキーで選択した時など)

の4つで指定する。
サイゾーではこの中の、 a:link と a:visited を同じ色に設定していた。

ブラウザのデフォルトではそれぞれ青と紫の色を指定されており、デザインする場合はこれにならい、未訪問を明るい色、訪問済みを暗い色にすることが多い。
とはいえこれはサイトの性質により変わるもので、例えばSNSなどではサイゾーと同じく同色を使うことが多い印象だ。
:hover については色に加え、 text-decoration の有無で変化をつけるというパターンがよく見られる。
リンクの指定のセオリーは、現在どのようになっているのだろうか。

リンクカラーを同色にする理由・しない理由

そもそもなぜ、デフォルトではリンクカラーを変更しているのだろうか。
これは普段あまり意識しないが、ユーザビリティの向上のためだろう。一度見たことのある文書かどうかを判断するためだ。
では同色にする理由は?

まず、そもそも訪問済みかどうかを確認する必要のない項目があることが理由として挙げられる。
文書ではなく機能として作られたページに対するアクセスや、動的なアクションのためのボタンなどの場合、訪問済みかどうかをユーザーに意識させる必要はない。
例えば、facebookの新規投稿などは、自分が投稿をしたことがあるかを意識する必要はないのでリンクカラーは同色で良い。

上記のサイゾーの場合はどうだろうか。これはまさに私がした行動が求められる結果で、
「同じページをもう一度見せる」
のが狙いだろう。
ユーザビリティとして正しいかどうかは別として、PVは上がるだろうし、以前は適当に見ていたというユーザーにもう一度ページを見せることでより記事を深く読ませることができる。

セキュリティ問題を発端とする、ブラウザ側での :visited への対応の変化

以前ニュースサイトのデザインを担当した際、逆に全ての記事を読んでもらうための施策として、 :visited に background-image を設定するというものをコーディングしたことがある。確か2011年ごろだったろうか。
サイゾーの方針とは真逆で、 background-image としてチェックボックスのような画像を入れ、すでに読んだことのある記事にはチェックが付くというような趣旨だ。

これを実装したところ、一部のブラウザで変更が効かないということがあった。
そんなに難しくない指定なのでミスということも考えられないので検索したところ、どうやら :visited での指定にセキュリティ上の問題があるとのことで一部の指定が使えなくなっていたのだ。
当時は、一部のブラウザには使えるので良いかと思っていたが、今ではおそらくほとんどのブラウザで使えないものなのでこういった指定はできない。
background-image にかぎらず、背景色のみでも指定はできないので注意が必要だ。

似たようなケースで、 :visited に対して変化を付ける例として、SNSの新着お知らせなどがある。
facebookの場合は、未読のお知らせは背景色が濃い色で、既読のものは白くなるようになっている。
こういったデザインの実装には :visited での指定はできないので、既読と未読でクラスを変更するなどの方法が必要になってくる。
(実際、複数のデバイスからアクセスされるためシステム側で既読かどうか判定したほうが実用的だろう)

デバイスの多様化とリンク表現

:hover については、ここ数年で大きな変化があった。スマートフォンとタブレットの出現だ。
画面をタッチして操作するこれらのデバイスでは、 :hover による効果は得られにくい。
一応表示されるのだが、一瞬だけ表示されたりすることが多いのでむしろユーザーに不快感を与えるケースもあるだろう。

以前よく受けた注文として、リンク箇所に画像のボタンを設置して :hover した際に大きく変化をつけるというデザインだ。
コンバージョンの向上のためにあった注文だが、こういったデザインの効果も以前より確実に下がっているだろう。

こういったデバイスの変化を受けても、マウスで操作して見ている人も多くいるのだからこういった効果をつけるべきだ、と思う人もいるかもしれない。
しかし、そうでない人の割合が増えてきた今では、 :hover に頼らずにコンバージョンを上げることができるデザインというものを作るべきではないだろうか。

グローバルナビなどでよく見られる失敗

:hover に関連して、最近よく見られる失敗例として、 :hover 後メニューが表示されるタイプのグローバルナビがあげられる。
主にたくさんのコンテンツがある企業サイトなどで見られるが、こういったメニューの表示方式はスマートフォンではほぼ見ることができない。

多くの企業はスマホ版を作成することで対応しているだろうが、タブレットやタッチデバイスからの閲覧ではPC向けが表示されるため対策が必要だ。
考えられる手段としては、 :hover (というか onmouseover )のみではなく、 onclick にも対応させることだ。
グローバルナビのメニュー自体もリンク要素にする場合もあるのでこの方法が確実に適用できるかは難しいのだが、少なくとも今後PCサイトを制作する際はなんらかの対策をする必要があるだろう。
JSの場合 onTouch で指定するという方法もある。…が、この辺りは全然詳しくないので割愛。

また、タッチデバイスから閲覧されたときは全てのメニューを表示するという手段も考えられる。
タブレット端末についてはUAでCSSを切り替えるなどして容易に実装できるだろう。
タッチパネル搭載PCに対しての振り分けについては良い方法が思いつかなかった。

まとめ

:visited での指定が求められるケースは以前よりも減ってきた。
これはブラウザ側で対応できる項目が減ってきたことも関係し、またSNSなどのサービスでは訪問済みかどうかをユーザーが認識したところでメリットがないからだ。
また、サイト内の回遊率を上げるためにあえて同色を指定するケースもある。逆に外部ページヘのリンクの場合は :visited を指定することで流出を減らすことができるかもしれない。
異なる色を指定する必要があるものとしては、例えば企業サイトのお知らせ欄のように、あくまでそのリンク先ページがひとつの完結した「文書」の時だろう。

:hover に関しては指定の方法に注意が必要になってきた。
スマホ・タブレット向けサイトでは :hover による効果を期待せず、それがなくとも成り立つようなデザインを心がけたい。
PCサイトにおいてもタッチパネルを搭載した端末が増えてきたので同様のことが言えるが、それでもグローバルナビの onmouseover による開閉メニューのように多くの項目を効率良く見せるために必要なケースがある。
こういった場合、 :hover による効果を得られない端末と得られる端末とで、見ることができるコンテンツに差がでないようにすることが大切だ。

お問い合わせはこちら