リンクである事を知らせる
画像をページに設置して、そこにa要素でリンクを付ける事ができます。
でもそれで終わってしまっては押してもらえないかもしれません。
文字のリンクであれば、初期値で青色・下線という見た目になります。
一度見たリンクは紫色に変化し、以前に見たページである事を教えてくれますね。
ところが画像のリンクの場合、マウスカーソルのアイコンが変化するばかりで、なかなか気が付きにくいものです。
見た目的に「何かあるぞ」と主張するボタンにしたとしても、それだけではまだちょっと弱いです。
マウスを当てた時に色が変わる・半透明になるなどの変化を持たせる事で、「クリックする事ができる」という事を分かりやすくする事ができます。
とりあえずクリックしてみれば、リンクしているかどうかが分かりますが、見た方の操作に期待しなければなりません。
見る方からすれば、どれがクリックできるのかわからない・・・と見ていてストレスに感じるでしょう。
こうした事態を回避するためにも、リンクできる部分の見た目以外にも、マウスを当てた時の動きを付けてあげる様にしてみてください。
例えば・・・
テキストリンクにマウスを当てたとき、色が変わり、下線が消える・・・とか画像の色が変わる・・・半透明になるなど、様々なパターンが考えられます。
いかにも「クリックできそう」な見た目をしているのに、マウスを当てても変化がないとクリックする前に本当にリンクが付いているのか？と不安になってしまいますが、このように変化を付ける事で分かりやすくなりますね。
:hoverを使えばCSSで簡単に実装できる
CSSで簡単に機能をつけ足す事ができるので、是非試してみてください。
「:hover」はマウスが乗った時という処理になります。
例えば「a:hover」なら、a要素にマウスが乗った時のCSSを指定する事ができます。
「div:hover」ならdiv要素にマウスが乗った時ですね。他にも「.box:hover」とすればclass名boxという要素にマウスが乗った時の動作を指定できます。
まとめ
ボタンの色や形、名称にも気をつかわなければなりませんが、実際に操作する時に見え方は忘れがちです。
CSSを書き足してあげれば対応できる場合がほとんどですので、実際にブラウザで表示し、自分で操作してみてどう感じるか？人に操作してもらってどう思ったかを採り入れるようにしてみてください。
もしそこで少しでもわかりにくい・・・と感じれば、それは要修正ポイントです。
