link3973 link3974 link3975 link3976 link3977 link3978 link3979 link3980 link3981 link3982 link3983 link3984 link3985 link3986 link3987 link3988 link3989 link3990 link3991 link3992 link3993 link3994 link3995 link3996 link3997 link3998 link3999 link4000 link4001 link4002 link4003 link4004 link4005 link4006 link4007 link4008 link4009 link4010 link4011 link4012 link4013 link4014 link4015 link4016 link4017 link4018 link4019 link4020 link4021 link4022 link4023 link4024 link4025 link4026 link4027 link4028 link4029 link4030 link4031 link4032 link4033 link4034 link4035 link4036 link4037 link4038 link4039 link4040 link4041 link4042 link4043 link4044 link4045 link4046 link4047 link4048 link4049 link4050 link4051 link4052 link4053 link4054 link4055 link4056 link4057 link4058 link4059 link4060 link4061 link4062 link4063 link4064 link4065 link4066 link4067 link4068 link4069 link4070 link4071 link4072 link4073 link4074 link4075 link4076 link4077 link4078 link4079 link4080 link4081 link4082 link4083 link4084 link4085 link4086 link4087 link4088 link4089 link4090 link4091 link4092 link4093 link4094 link4095 link4096 link4097 link4098 link4099 link4100 link4101 link4102 link4103 link4104 link4105 link4106 link4107 link4108 link4109
トップページ > IT, Internet > ボタンのマウスオーバーここが変だよ。凹むのはまだ早い

ボタンのマウスオーバーここが変だよ。凹むのはまだ早い

WebデザインにおいてインタラクティブなUIの肝じゃないかとも思えるリンクボタンのマウスオーバー(ロールオーバー)。その挙動というかデザインというか、いつもちょっと気になるところがあるのです。

皆さんはマウスオーバー(ロールオーバー)した際にどういう動作をしてほしいですか?
いつもWebサイトをみていて変に感じることがあります。ボタンの画像などにマウスを載せた際の挙動が、思っているものとは違っている場合がよくあるのです。

その挙動とはこういうものです。
マウスオーバー時(a:hover)つまりまだマウスボタンはクリックしておらず、ボタンの上にマウスを載せただけにもかかわらず、まるでボタンが押下されたように凹んだものが表示されてしまう。以下はその動作サンプル
私のウィッシュリストへ

上記のような凹んだものを見せるタイミングとしては、マウスオーバー時ではなくマウスクリック時(a:active)が適してるのではないでしょうか。やはり実際のメカニカルなボタンもそうですが、押下されたときに凹んだ方が自然ですよね。「押そうかな?」と指を近付けただけで部屋の電気が消えたり換気扇が回ったりするのは困りますから。
私のウィッシュリストへ

押下したときだけでなくマウスオーバー時にも何らかの反応を入れたいのであれば、ボタンを凹ませたりするのではなく色が変化するとかテキストにアンダーラインが引かれるという動きで知らせたほうが良いかと思います。
私のウィッシュリストへ

正直なところタッチインタフェースを使うのがWebサーフィンの主流となった今では、そんなことすらどうでもよくなっていますけどね(どうせマウスオーバー効かないし)。でもたまにパソコンで観るとやっぱりこういうところは気になるものですから。



投稿者 愛場大介(Daisuke AIBA / Jetdaisuke) : 2010年4月11日 20:28

» ロジクール ワイヤレスマウス M505 レッド M505RD | from お買い得連絡通信
ロジクール ワイヤレスマウス M505 レッド M505RD◆最大15ヶ月の電池… [続きを読む]

トラックバック時刻: 2010年4月17日 18:24

» ロジクール ワイヤレスマウス M505 レッド M505RD | from アマゾン探検隊
ロジクール ワイヤレスマウス M505 レッド M505RD◆最大15ヶ月の電池寿命だから、安心して使える◆精確性に優れたレーザーセンサーを装備◆信頼性の… [続きを読む]

トラックバック時刻: 2010年4月17日 20:05

ジェット☆ダイスケ

ジェット☆ダイスケ
愛場大介/ジェット☆ダイスケ
昭和生まれの古い男がこのブログを地味に更新しつづけております。趣味はブログです。 ツイッターIDは @jetdaisukeです。 また、YouTubeのチャンネル登録はこちらからできます。

ナノ一眼 PENTAX Q の実力
iPhoneとも戦えるカメラ、ナノ一眼 PENTAX Q を購入しました
シャッター切るたび画調が変わる PENTAX Q のランダムなクロスプロセスが楽し過ぎるのだ
PENTAX Q トイレンズ比較 魚眼/広角/望遠
ペンタックスQのバッテリは、フジフイルム、コダックとも共通
ナノ一眼PENTAX Qをもう一台導入しまして
ナノ一眼 PENTAX Q でも星を撮影できた
PENTAX Q 動画モードについての感想

世界最小15倍ズームレンズB008とキヤノンEOS 60Dで大自然を撮ってみよう!
TAMRON 18-270mmF3.5-6.3 Di2 VC PZD B008
タムロン 18-270mmF3.5-6.3 Di2 VC PZD B008

バリアングル液晶でビデオ撮影も快適なデジイチ
Canon デジタル一眼レフカメラ EOS 60D
EOS 60D
レビュー記事:
EOS 60Dのバリアングル液晶はやっぱり動画撮りやすいです
キヤノン 一眼レフ EOS 60D を購入してみた

[地球圏最強の標準レンズ]
シグマ30mm F1.4レンズは企業プロモーションビデオにも使える優れもの
SIGMA 30mm F1.4 EX DC

Canon EFレンズ 50mm F1.8 II 最安の単焦点レンズを試す
Canon EFレンズ 50mm F1.8 II
[最安の超広角レンズ買うた]
タムロン超広角ズームレンズ TAMRON SP AF10-24mm F/3.5-4.5 Di II
TAMRON AF10-24mm F/3.5-4.5 DiIILD Aspherical
TAMRON AF10-24mm F/3.5-4.5 DiIILD

【EOS 関連記事】
キヤノンEOS Kiss X3関連で購入したアイテムまとめ1 純正品編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ2 お役立ち編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ3 交換レンズ編

最近のエントリー