WEBCRE8.jpウェブクリ８.jp

webデザイナーによる、デザインとwebを楽しむ情報ブログ

比べる。

WEBCRE8.jpとその仲間達で、web制作における「選択」に
おいて最良だと思われるものを考察していくカテゴリです。

WEBCRE8.jp > 比べる > [UI]ボタンや画像のマウスホバー時のアクションはどうあるべきか

[UI]ボタンや画像のマウスホバー時のアクションはどうあるべきか

この記事は約8分ぐらいで読めます

形状以外の表現で注目を引き、押せる、onであることを示すボタンもある
クリックできる領域にマウスをホバーしたときにそれがどういうアクションをするのが望ましいのか、ちょっと考えてみました。

Twitterでの話題

マウスホバー時の表現について、Twitterで少し話題になりました。ちょっとツイートをとぅぎゃったりしてたわけではないので(誰かしてたらお願いｗ)全部を拾っているわけではないのですが、昨日のぽよしさん(@poyosi)のツイートと関連したものを紹介。

https://twitter.com/yusuke824/status/303830096375054336

ツイートを引用させて頂きました(なんか表示されないこともあるみたいです)。

:hover時のアクション

さて、このマウスホバー(マウスオーバー？私はホバーと読んでます)のアクションについて、私は殆どの場合、

  1. ボタンが中彩度なトーン(具体的にはソフト・トーンやライト・トーン等)の色であればより高彩度(ストロング・トーン、ビビッド・トーン等)に
  2. ボタンが低明度なトーン(ダーク・トーン、グレイッシュ系)であればより高明度なトーンに
  3. 最初から彩度が高い場合は赤→青(offからon)等の様にボタンの意味に沿う様に色自体を変化させる
  4. ボーダーを太くする、オブジェクト自体を拡大する、ドロップシャドウや光彩を加える、アニメーションする等の色以外のアクションを行わせる

といったような優先度で演出を行っています。マウスオーバーしたときはよりポジティブな変化(明るくなる、鮮やかになる、大きくなる、前に出る)をする、というのが私の基本的な考えです。

トーンの事が分からない人は以下のページで確認してみてください。

カラーデザインの基本。トーンを理解する！

http://creators-manual.com/tone/

webサイトのセオリーから考える

ブラウザのデフォルトスタイルシートで考えた場合、通常のリンク(a)が原色の青(#00Fや#00C)であるのに対し、:visited(既に来訪したリンク)の場合は紫色(#800080等)が指定されているのが普通だと思います。

リンクカラーのよくあるパターン

リンクカラーのよくあるパターン

ブラウザ デフォルトCSSのチートシートを作ってみた。(力尽きた)｜Web Design KOJIKA17

これに加えて、他にもリンクは:hover等の状態もあり、更にはグローバルメニュー等で多用されるボタンが押されている(on)状態といった表現もあります。

この意味で、どの状態がよりアクティブな見た目で表すのが相応しいかというと、

  1. 既に訪れている(:visited)、またはoffになっているボタン(画像化したラジオボタン等)
  2. 通常のリンクやボタン(a)
  3. onになっているボタン(グローバルメニューや画像化したラジオボタン等)
  4. マウスを合わせた状態やクリックしたとき(:hover、:active)

の順番にアクティブになっていくと考えています。

メタファーで考える

押せるボタンの形状

押せるボタンの形状

リンクはクリック＝押すというニュアンスから、よくボタンとして表現されます。ボタンの表現は押せるというシグニファイア(アフォーダンスと言われていたもの)を持っています。

これは以前の記事デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素でも触れましたが、マウスでクリックする、クリックできるという事をボタンというメタファーで表現している以上、現実のボタンの様に振る舞うべきだという事です。

また、ぽよしさんもツイートで述べているように、こうしたメタファーを用いる場合には特に重要なのが世界観だと思っています。これは単にデザインの統一感を持たせる、という事だけでなく、全体的な雰囲気からそのオブジェクトの役割を想像させるという事です。これはまた別に記事を書きたい話題ですねー。

:hoverというアクションは現実のボタンにはない

ただし、現実のボタンの挙動を参考にするとすると、これにホバーという現象はありません。ホバーはPCにはマウスカーソルというインターフェースがあるから成立、また必要とされているものです。

形状以外の表現で注目を引き、押せる、onであることを示すボタンもある

形状以外の表現で注目を引き、押せる、onであることを示すボタンもある

ウィンク効果

普通に考えればホバーさせる瞬間はそのリンクエリアを見ているはずなので、前述のツイートでなつきさんが言っているウィンク効果(GIF動画やCSSアニメーション等でマウスがヒットした一瞬だけ変化させる)という案は理に適っています。これなら注意したいときにのみアピールできるし、より注意を引けそうです。

タッチデバイス

ホバーエフェクトを必要としないタッチデバイス

ホバーエフェクトを必要としないタッチデバイス

また、当然ながらホバーアクションはiPadの様なタッチデバイスにもありません。ホバーアクションだけで押せるということを示すのは今後避けた方がよいでしょう。

元々ホバーアクションは押せるということをユーザーに変化で示す表現であるため、押せるオブジェクトは押せそうな見た目を備えることが必要ですね。

その意味で、ホバーアクションというもの自体現在のデザインではあまり必要とされなくなってきています。その代わり、押した感を表現するためにそれがそのまま:activeの時に使われたりします。

クリックできる写真

写真が拡大できる、またはリンクになっていることを示すことにもホバーアクションは多用されますが、この場合はちょっと難しいです。彩度を変化させるのはフィルターで出来るにしても、写真自体を変化させるのは微妙な気がします。

どれも見栄えは落ちてしまいますよね

どれも見栄えは落ちてしまいますよね

また、写真は拡大しなくても成立しているべきであると思うので、最初から暗くしてあるのもNG。そしてマウスオーバー時に明るくしたり透明度を下げるやり方も(多用されますし私も使いますが)あんまり私は好みではないです…。

写真の外側のエフェクトで表現する

写真の外側のエフェクトで表現する

落とし所としては境界線の色が変わる、ドロップシャドウがつく、等でしょうか。これなら写真自体の印象を変えることはありません。

WEBCRE8.jpの場合

WEBCRE8.jpでは、リンクは基本的に青系でホバーすると彩度が上がる、またはドロップシャドウが拡がるといったようなアクションで統一しよう…としているのですが、まだデザインが完成していない未完成デザインなので、片手落ちですねｗ

やるやる詐欺になっているリニューアルですが、その時にはちゃんとしたガイドラインを反映したものをお見せできればなーと思っています★