こんにちわ【-_-】

通販サイトのデザインをするときには「カートに追加」ボタンを大きくボタンらしくすると購買に繋がると言われています。その結果、どんどんボタンは大きくなって、つるつるテカテカでベタなボタンが溢れかえっていますよね(-_-;)売れちゃうので仕方ない流れではあるのですが。。

ですが、今回紹介するのはボタンを大きくするのではなくて・・

カートに追加できません

カーソルを大きくしてみてはどうでしょうか?

以前、Webのユーザービリティとアクセシビリティを調査する機会があったのですが驚くことに、「自分が操作しているマウスカーソルを見失う」という意見が多いことに驚きました。

最近のパソコンは大画面化してきて表示領域が広くなったにも関わらず、マウスカーソルが小さいままで自分が操作しているカーソルがどこにいったのかわからなくなるという人が増えているようです。

Windows 8/8.1で、マウスの操作中に見失ったマウスポインターを見つける方法について教えてください。

マウスポインターの位置を表示する設定を行うと、マウスポインターを中心に円が表示されて見つけやすくなります。

パソコンメーカーのヘルプ項目にも必ずと言っていいほど掲載されています。ということは、いくらボタンを目立たせた所で、肝心のマウスカーソルがどこにあるのかわからないお客様もいるということです。ボタンも大きく、さらにカーソルも拡大することで「押せますよ!押してください!」と後押しすることができるのではないでしょうか?

想定ユーザーが使いやすいかどうか、つまり「使いにくい」状態を「使いやすい」状態にすることに焦点を絞っています。

fujitsu ユーザビリティとアクセシビリティより

カーソルを大きくするCSS

やりかたはびっくりするくらい簡単です。

HTML側
<a class=”bigc(任意のクラス)” href=””〜

CSS側
.bigc{cursor: url(‘画像のパス’), default;}

マウスが乗ったら、カーソルを画像に置き換えているだけです。
昔から使えたCSSのタグですが、IEのサポートが微妙だったせいであまり利用されていませんでした。javascriptを使えばもっと高度な表現が可能かもしれませんが、HTMLとCSSをちょっと追加するだけで ユーザビリティ向上 = コンバージョン率アップ できるのでぜひ、LPや商品ページに使ってみてくださいね(^ω^)