CSSの:hoverが大好きです～遊び心は私の好物～

f:id:MasaoBlue:20160414224132j:plain
　Photo credit: n.kondo via VisualHunt.com / CC BY

Q.『CSSで一番好きなのはどこ？』

A.『:hoverが使えるとこです！』

という訳で、この記事ではCSSの:hoverについての説明と、この機能の良いところや残念なところを紹介していきます。

そもそも「:hover」とは

今回お話する「:hover」はCSSの記法の1つで、
『マウスが上に乗った時にどう見せるか』を定義するものです。

皆さんにとって一番身近な:hoverの例は『リンクの上にマウスを乗せた時、文字の色が変わる』という動作ですね。

例）よくあるリンク
マウスを乗せると文字色が変わり、下線がつきます。

ではこの:hoverについて、良いところから順に見ていきましょう。

※この記事には色々な「例」が登場しますが、全てリンクではありません。安心してクリック/タップしてください。

:hoverの良いところ

1. ユーザを安心させられる

最近はワンクリック詐欺などが流行っていて、知らないサイトのリンクを触る時はちょっと不安になりますよね。

そんな時:hoverを使うと、カーソルを乗せた時にボタンの色を変えたり、注意書きを出すことができます。これによってユーザは、操作を行う前に今からクリックするものが何で、どんな動きをするのか確認できます。

例）:hoverの無いAと:hoverの有るB
ボタンAボタンB

このように、適切に使われた:hoverはユーザに安心感を与え、操作ミスを減らす手助けができるスグレモノです。

2. 遊び心を前面に押し出せる

ブログは主に文章を表現する場所。

それは当たり前のことですが、文字だけが羅列されている中にちょっとだけ目立つものがあると、触ってみたくなりませんか？

例えば、私が別の記事のために作った『へぇボタン』。

例）昔なつかしへぇボタン

（タップするかマウスを乗せてね）

この例だと置いておくだけでも目を引きますが、:hoverで動きが加わることによって、遊び心を更に前面に押し出すことができます。

私は昔からくだらないことが好きなので、こういったくだらないボタンを見ると妙にテンションが上がります。

3. 一瞬の動きで印象に残せる

上の2つの例も含め、:hoverはマウスが乗った一瞬で動きます。

それは特定のボタンを操作する訳ではなく、『たまたまカーソルの通り道に置いてあった』という偶然だけで十分です。その一瞬で何かが動き、ユーザの目に留まるというパターンはとても多くあります。

例えば、前に別のサイトでこんな動きのメニューを見ました。

例）びよよーんってするボール

私は実際このメニューに触れた後、気持ちよくて何度も触ってしまいました。:hoverはマウスを乗せるだけで動くので何度も繰り返し起こすのが簡単です。だからこそ、ユーザに触ってもらえる機会が増えるのです。

このように便利で、面白いことが沢山できるので、私は:hoverが大好きです！

:hoverのちょっと残念なところ

ここまで:hoverの良いところを説明してきましたが、実は最近、ちゃんと活躍できないことも増えています。

スマホじゃほとんど意味がない

この記事をスマホで読んでいる人は分かると思いますが、タッチパネルにはカーソルが無いため、:hoverが反応するのはタップした直後になります。

そのため、良いところ3の「一瞬の動きで印象に残せる」というメリットがありません。しかも、一度動いたものを元に戻すには『別の場所をタップする』という面倒な操作が必要です。

例）別の所をタップしないと戻らない

このように動くタイミングが違うと、たとえ:hoverで文字色を変えても、ボタンを押す前の事前確認には使えません。だから、良いところ1の「ユーザを安心させられる」という効果もありません。

こうして残るのは2の「遊び心」だけですが、操作がめんどくさくて不安なオモチャを誰が触ってくれるでしょうか。

結局、スマホ向けに:hoverを使うメリットはほとんど無いのです。

使い方を間違えると本末転倒

これは:hoverに限ったことではありませんが、動かし方によってはユーザに不安を与えてしまうので注意が必要です。

個人的にあまり好きじゃない表現として、ブログの記事一覧などでたまに使われる『カーソルを当てるとタイトルが消える』という動きがあります。

例）読もうとすると消えるタイトル

とっても面白い記事のタイトルです。

ユーザが画像にカーソルを当てる時、普通はその記事に興味があるはずです。そんな時にタイトルが見えなくなったら「今、何て書いてあったっけ・・・」と不安になってしまいませんか？

本来この場面では「操作をナビゲートするもの」として使いたい所なので、これではユーザの意識に反した動きになってしまっています。

楽しくて便利な機能のはずなのに、このような結果になるのは勿体無いですよね。
:hoverを使う時は、その動作の意味をよく考えることが必要です。

さいごに

CSS3では要素の動きを表現できるようになり、遊びの幅が格段に広がりました。
それゆえに、スマホで:hoverを使えないのはとても残念です。

最近はフラットデザインを始めとして「デザインはシンプルにする」という考えが主流ですが、ここには『余計な装飾が無くても理解できるようにせよ』と『メインのコンテンツを充実させよ』という2つの意味合いが強く含まれています。

そういった視点で見ると、:hoverは今や無駄な機能なのかもしれません。

しかし私は、無駄を省くのは必要なことだと思う反面、遊び心のあるサイトは大好きです。そしてできればこのブログも、楽しいサイトにしていきたい。

そのためにも、今後も:hoverと上手く付き合うための方法を考えていきます。

-----

どうでもいいですが、画像素材のサイトで「マウス」と検索したら、主にミッキーさんの方が出てきました。

残念ながらそっちじゃないんだなぁ・・・

まさおまっさお

おいまさおがんばれまさお