[CSS]ネガティブホバーに違和感アリ、ポジティブホバーのススメ
Post on:2011年5月26日
sponsors
テキストリンクなどのマウスホバー時に、そのアピアランスをどのように変化させていますか？
アピアランスをどのように変化させるのがよいのか考察した記事を紹介します。
[ad#ad-2]
下記は各ポイントを意訳したものです。
ネガティブホバーとは
ネガティブホバーとはそのアピアランスからマイナスするもので、下記のようなアピアランスです。
ネガティブホバーのデモページ
マウスをホバーすると、色が薄くなります。
ネガティブホバーのデモページ
マウスをホバーすると、下線が消えます。
ネガティブホバーのデモページ
マウスをホバーすると、背景色が消えます。
ポジティブホバーとは
では、そのアピアランスにプラスするポジティブホバーの例を見てみましょう。
ポジティブホバーのデモページ
通常時のキャプチャ
ホバー時には、ネガティブホバーと逆のアピアランスになります。
ポジティブホバーのデモページ
ホバー時のキャプチャ
[ad#ad-2]
ネガティブホバーとポジティブホバーの考察
直感的に
最も大切なことは、間違っているように思われない、ということです。
ホバー時に期待するものとしては、なにかしらの反応があると予想しませんか？ 例えば、ページに遷移するリンクをクリックしようとした際、そのリンクがあなたから逃げてしまうことは望まないでしょう。その箇所に注意が向けられるように分かりやすくなることは、直観的に理解ができるとも言えるでしょう。
この感覚はUIデザイナー・デベロッパーにとって、とても大切ことです。
そして、この直感をもたらすものが、ポジティブホバーです。
どちらがよいのか？
答えはもちろん、ポジティブホバーです。
ホバー時には、そのアピアランスには加えるようにします。
アピアランスをポジティブにするには、下記の方法があります。
- 通常時：下線無し
-
- 下線を加える
- コントラストを加える
- 通常時：下線
-
- コントラストを加える
- 背景色を加える
- 通常時：背景色
-
- 下線を加える
- コントラストを加える
注意事項
もし、通常時に下線無しにすると、アクセシビリティの問題があります。色が判断できない環境の場合、リンクを区別することができません。
もし、これを採用する場合は、適切なコントラストをつけるように色を試してください。
sponsors
