マウスポインタの形状に関する私見

枝葉末節ではありますが、ウェブサイト閲覧中におけるマウスポインタの形状について、のお話です。

各ブラウザでは、リンク箇所ではない HTML テキストにマウスオーバーすると、マウスポインタの形状がI字型になります。一見問題なさそうですが、テキスト部分にマウスポインタが置かれている状態で、いざマウスポインタを探そうとしたとき、やや見つけにくいかな、という気がします。

たとえば Google の検索結果ページで、テキスト部分にマウスポインタが置かれている場合。I字型になったマウスポインタをすぐに見つけられるでしょうか？
I字型マウスポインタの表示例

そもそもなぜI字型なのか？

そもそも、HTML テキスト上でマウスポインタがI字型になるのはなぜなのでしょうか (テキストをドラッグ選択できるという手がかりをユーザーに提示するため、かもしれませんね)。ウェブブラウザ以外の PC アプリケーションでマウスポインタがI字型になるケースをいくつか見てみると、共通点として、「そこが編集可能」であることを示していると言えます。ウェブサイトのテキストは、本来は読むためのものであって、編集できるものではありません。その意味では、ブラウザにおいて HTML テキスト上でマウスポインタがI字型になってしまうのは、他のアプリケーションのインタラクションデザインのマナーと合致しない、と言えそうです。

もちろん、ウェブページ上のテキストをコピーしたいなど、ドラッグ選択が必要な場合もあることは理解していますが、一般的なユーザーにとってはメインのニーズではないように思います。テキストがコピー可能であることを学習によって理解している比較的リテラシーの高いユーザーが、必要に応じてコピーできればよい、くらいのものではないでしょうか。

マウスポインタの形状に関する私案

そう考えると、マウスポインタの形状が HTML テキスト上でI字型に変わってしまうことについて、個人的にはあまり必然性を感じません。そこで勝手な私案なのですが、各ブラウザにおいては、マウスポインタの形状に関する仕様を、以下のようにしてはどうかな、などと思っています。

  • 非リンクのテキストにマウスオーバーした場合は、マウスポインタの形状は矢印型のまま維持される。
  • 非リンクのテキスト上でマウスボタンを押すと、マウスポインタの形状がI字型になる。わかる人には「ドラッグ選択してコピーできるんだな」ということが伝わる。

上記に近い挙動のシミュレーションとして、当サイトでは、リンク箇所ではない HTML テキストにマウスオーバーしてもマウスポインタの形状を矢印型のままキープする実装にしてみました (CSS で、body セレクタに「cursor:default;」を追記しています)。非リンクのテキスト上でマウスボタンを押してもポインタの形状はI字型にならない (実際にドラッグ操作を始めないとI字型にならない) ので、上記を厳密に再現しているとは言えませんが、それでも、この状態で記事本文テキストを選択しようとドラッグ操作してみたところで、挙動としては特に違和感は無いのではないでしょうか。そのうえ、テキスト部分にマウスポインタが置かれている状態でも、マウスポインタが格段に見つけやすくなっています。

「そこが編集可能」であればI字型でよい

ところで、フォームのテキストボックスやテキストエリアにマウスオーバーした際は、各ブラウザとも、マウスポインタの形状はI字型になる、というのが標準的な挙動となっています (当サイトのように、CSS で body セレクタに「cursor:default;」を指定していても、テキストボックスやテキストエリアではマウスポインタはI字型になります)。これについては、そのままで仕様を変えないのが適切と考えます。というのも、テキストボックスやテキストエリアというのは、文字列を入力したり、入力された文字列を改変したりすることができる、まさに「そこが編集可能」なエリアだからです。