こんな時だからこそロールオーバー効果について今一度考えてみる

- by konitter

今では様々な手法の考案とともに、当たり前のように使うようになってきた画像のロールオーバー。今回はこのロールオーバーについて、どのような考えのもとにあるものなのか、どのような手法が最適なのかを今一度考えてみます。

※ここでいう「ロールオーバー効果」(以下、ロールオーバー)とは、リンクなどが設定されクリックできるようになっている部品(画像など)にポインタを乗せたときに、表示が切り替わる事を言います。

ロールオーバーって何のためのもの?

ポインタを載せた対象がクリックできるものであるとユーザーに分かってもらうため?、クライアントにやれって言われるから?、ロールオーバーがあった方がないよりクリックされるから?、付加的なアニメーション?、みなさん色々な考えがあると思います。ぼくはと言うと恥ずかしながら、正直言って深く考えた事は無く、単純にその方が良いだろくらいにしか思ってませんでした。

ある時、果たしてそれらはロールオーバーが必要な理由になりえるのか?、もしかしたらロールオーバーって要らないんじゃないか?という疑問が沸々と湧き出てきて、@vanillateさんがやっているUST番組「vanitalk」に出演した時にそんな事を言うと結構反響があってびっくりしたことが今回のエントリーに繋がっています。

で結局のところ、「機能することがデザイン」というものの観点から言えば、ロールオーバーが有ろうと無かろうと、対象がクリックできると見ただけで分かることがまず大前提なんですよね。

つまり、ポインタを乗せてみないとクリックできるかどうか分からない、というデザインがあったとしたら、それをロールオーバーで機能を補完するのではなく、デザイン自体を見直す必要があるわけです。

今のところ個人的には、ロールオーバーとはクリックできると分かるデザインが担保された上でのプラスアルファのエフェクトであると考えています。

じゃあロールオーバーは要るのか要らないのか。要は使い分けなんだと思います。

ポインタを乗せる前と乗せた後で対象が与える情報(画像内のテキストなど)を変える必要があれば、当然ロールオーバーは必要だし、前後で情報は変わらない、ただ背景などの色を変える・全体の色を少し薄くする程度であれば、必要ないし、どうしても欲しいなら、カーソルを指マークにするだけで本来は十分なはずなのです。

ロールオーバーをやるなら実装の最適な手段は?

絶対CSSでやる、いやJavaScriptでやる、いやいやケースバイケースで使い分ける、などこれも人それぞれで、「絶対にこの方法でやるべき」というものはありません。

ただ、前述したようにロールオーバーがプラスアルファのエフェクトだと考えるならば、JavaScriptで実装する、ということになるでしょう。

なぜなら、ロールオーバーでは、ポインタを乗せた時にエフェクトを加える、つまり「動作」を制御することになるので、それはスタイルを制御するCSSが担うことではなく、JavaScriptがやることだと思うからです。

とは言いつつも、CSS3の登場でこの考えはもう破綻しているわけで、正直この部分については明確な答えが出せていません。

まあ考え方・実装方法ともに正解の無い話ではあるのですが、みなさんはどのように考えていますか?この記事が何かを考えるきっかけになってくれれば嬉しいです。

さいごに。

遅くなりましたが、このたびの東北地方太平洋沖地震により被害を受けられた皆様には、心よりお見舞い申し上げます。被災地の1日も早い復興をお祈りいたします。