ウェブサイト、ウェブアプリケーションは、マウスを使って操作していくことがほとんどでしょう。
今回の記事では、そんなマウス操作に焦点を当ててみます。
早速ですが、みなさんがウェブサイト、ウェブアプリケーションをマウスで操作するときのことを想像してみてください。
マウスを使って、ポインタ(カーソル)を動かしたり、クリックしたり。
そんな操作をしていく中で、「クリックする、しない」の判断基準として、何が考えられるでしょう?
ざっくり分けて、下の3点を挙げてみました。
- ボタンやバナー
- テキスト
- マウスポインタの形
ボタンやバナー、テキストについては、ちょっとした工夫でクリックを誘導することができるでしょう。
では、最後の「マウスポインタの形」についてはどうでしょうか?
マウスポインタの形が変わらなければ、クリックすべき箇所に気づかず、スルーしてしまうかも。
そのようなちょっとした配慮不足が原因で、ページビューやコンバージョンを減少させることにつながるかもしれません。
また、ウェブアプリケーションに至っては、操作性の低下が業務効率を落とすことにもつながっていくでしょう。
そうならないためにも、ウェブサイト、ウェブアプリ制作者がマウスポインタの形にも配慮する必要があるのです。
今回はウェブサイト、ウェブアプリ制作者のための「マウスポインタの変更」について、解説していきます。
マウスポインタの形は、「CSS」で簡単に変更することができます。
CSSでマウスポインタ(カーソル)の形を変える
制作者側がクリックしてほしい箇所に、ユーザーがマウスポインタを動かした時、その形が変わらなければ、クリックしてもらえないこともあるでしょう。
マウスポインタの形は、制作者側の操作意図を伝える大きな役割を担っているのです。
では、具体的にCSSでマウスポインタの形を変える方法を解説していきます。
書き方はとても簡単。
cursor: 値;
これだけです。
cursorの値一覧
CSSの「cursor」プロパティで以下の値を指定することで、マウスポインタ(カーソル)の形を変えることができます。
表内の「サンプル」の文字列上にマウスポインタ(カーソル)を乗せてみてください。
指定する「cursor」プロパティの値に対応したマウスポインタ(カーソル)の形を実際に確認することができます。
値 | カーソルの形 | |
---|---|---|
auto | ブラウザに依存 |
サンプル
|
default | 標準のカーソル |
サンプル
|
crosshair | 十字 |
サンプル
|
pointer | ポインタ |
サンプル
|
move | 移動 |
サンプル
|
text | 入力中 |
サンプル
|
vertical-text | 入力中(縦書き) |
サンプル
|
wait | 動作待ち |
サンプル
|
progress | 動作待ち(操作可) |
サンプル
|
help | ヘルプ |
サンプル
|
cell | Excelのセル選択 |
サンプル
|
not-allowed | 操作不可 |
サンプル
|
none | カーソル非表示 |
サンプル
|
n-resize | 上方向にサイズ変更 |
サンプル
|
s-resize | 下方向にサイズ変更 |
サンプル
|
w-resize | 左方向にサイズ変更 |
サンプル
|
e-resize | 右方向にサイズ変更 |
サンプル
|
nw-resize | 左上方向にサイズ変更 |
サンプル
|
ne-resize | 右上方向にサイズ変更 |
サンプル
|
sw-resize | 左下方向にサイズ変更 |
サンプル
|
se-resize | 右下方向にサイズ変更 |
サンプル
|
col-resize | 幅変更 |
サンプル
|
row-resize | 高さ変更 |
サンプル
|
all-scroll | 全方向スクロール |
サンプル
|
copy | コピー可 |
サンプル
|
no-drop | ドロップ不可 |
サンプル
|
古いブラウザでは対応していない場合がありますので、あらかじめご了承の上、参考にしていただけると幸いです。
オリジナルマウスポインタ(カーソル)
マウスポインタ(カーソル)にオリジナルの画像を使うことができます。
インパクトのある画像を使えば、オリジナリティ溢れる面白いウェブサイトが作れますね。
「cursor」プロパティで以下のように画像ファイルを指定するだけです。
corsor: url(image/XXX.gif);
上の例では、同じ階層の「image」フォルダに対象の画像ファイルがある場合です。
url( )内に表示した画像ファイルのパスを指定しましょう。
万が一、うまく表示されなかったことを考え、下のように複数の値をカンマで区切って指定することもできます。
corsor: url(image/XXX.gif), pointer;
この場合、先に指定した値から優先的にマウスポインタ(カーソル)の形が表示されます。
まとめ
今回は、マウスポインタ(カーソル)の形について、解説しました。
ちょっとした工夫でユーザビリティは向上するはずです。
ユーザビリティはウェブサイトのページビューやコンバージョンにも影響してきます。
ウェブアプリケーションでは業務効率などにも影響してくるでしょう。
マウスポインタ(カーソル)の形を駆使して、ウェブサイトやウェブアプリケーションのユーザビリティを少しでも改善していきましょう。