リンクでないUIならば、カーソルを指ポインタにするべきではない。

公開日：2026年11月08日

⚠️ そのはずでした。 しかし、執筆している間に話が変わってしまったかもしれません。

クリックできるUIならば、すべてカーソルは「指ポインタ」になる。世の中には、そういった考え方があるようです。

「指ポインタ」または「指カーソル」とは、右の手のひらを下に向けてから、拳を握って人差し指だけ伸ばした形をしているアレのことを指します。

筆者は「クリックできるからといって、なんでもかんでも指ポインタを採用するべきではない」と考えています。具体的には、button要素などにcursor: pointer;を指定するべきではない、ということですね。

そもそも、`cursor: pointer;`とは何か？

UI関連のCSSプロパティを定めるCSSの仕様「CSS Basic User Interface Module Level 3」では、指ポインタについて「リンクであることを示す」と説明されています。

pointer
The cursor is a pointer that indicates a link.

大抵のブラウザでも意図的に変更しない限り、マウスホバー時にカーソルが指ポインタになるのは、ハイパーリンクくらいです。

ここに、クリックできる要素をいくつかならべた、プレーンなHTMLを用意しました。今マウスカーソルを動かせる方は、ぜひカーソルをそれぞれの要素の上に乗せてみてください。

なお、Adam Silver氏の記事「Buttons shouldn’t have a hand cursor part 2」によると、Mosaic時代からリンクでのみ指ポインタを使うようになったと紹介されています。

「指ポインタにならないと、押せるのかどうかわからないじゃん！」

はたして本当にそうでしょうか？

実際に、視覚情報を頼りにしているスマートフォンなどのタッチデバイス利用者は、カーソルがなくてもUIが操作できることを理解できています。「操作できる」ということは、UIに添えられたテキストや、配置・形状などのシグニファイア^[1]によって示されます。

もし指ポインタがクリックできることを示すために必要ならば、タッチデバイスは成立しなくなるように思います。

つまり、カーソルの形状に頼らなければUIがクリックできるかわかりづらい場合、デザインを改善する必要があるはずです。

実際のところ普段PCを使っているみなさんも、ブラウザの外では指ポインタに頼らずUIが操作できることを認識できているのではないでしょうか。

それが、デザインが機能している状態だと筆者は考えています。

カーソルの形状でリンクとボタンを区別しているユーザにとっては、普段やっていることができないわけですから、単純に不便でしょう。

カーソルを合わせるたびに、画面左下にURLがでるかを気にしないといけないのはストレスかもしれません。

こうした話をすると、そういうのは「リテラシーの高い、一部のユーザだけの問題だ」と言われることがあります。なぜ、一部のユーザを犠牲にしてシグニファイアを整えない道を選ぼうとするのでしょうか。筆者は理解に苦しみます。

本質的には「リンクであること」がカーソルの形状だけで理解できればよいので、すべてを指ポインタにした上で、独自のカーソル変化でそれをポインティングデバイス利用者に通知する道もあります。

しかし、これまで整っていた「リンクならば指ポインタ」という整理を乱してまで、新しい表現を採用するにはかなり強い動機とユーザへのメリットを揃える必要があるでしょう。

ユーザ環境の多様化からかもしれないですが、昨今、古くからあるこうしたUIの慣例が徐々に薄まってきているように感じています。タッチデバイスが当たり前になり、「マウスホバー」について考える機会が減っていたりするのでしょうか。

職種にかかわらず、クリックできるUIをひとまとまりに「クリックできるUI」と認識している方も増えてきている印象です。

ビジュアルデザインを整えて、開発者も素直にCSSを書いていれば、こうした議論に悩む必要はないはずですし、OSのUIとも操作感の一貫性を保つことができます。

仕様に則ってHTMLを書くだけでアクセシビリティが向上するように、リンクではないなら指ポインタを採用しない。それだけで、UIは洗練されていくはずです。

よかったら、みなさんのプロダクトも含めて、世の中のカーソルがどう実装されているか、シグニファイアが十分かどうかをチェックしてみてください。