デザインシステムに学ぶ、ボタンの「cursor: pointer」問題
Tailwind CSS v4のUpgrade guideを眺めていたところ、ボタンのデフォルトスタイルがcursor: pointerからcursor: defaultに変更されていることに気づきました👀
一見些細な変更ですが、ボタンのcursor指定は意見が分かれるポイントでもあります。
そこで今回は、国内外の著名なデザインシステムが実際にどのような指定をしているのか調査してみました！
各デザインシステムにおけるcursor指定の実態
使い分ける派
ボタンとして同一の見た目を持ちつつも、用途（アクション or リンク）に応じてcursor指定を使い分けてるパターンです。
| デザインシステム名 | 画像 | デザインシステム名 | 画像 |
|---|---|---|---|
| Spindle - CyberAgent |
 
|
デジタル庁デザインシステム - デジタル庁 |
 
|
cursor: pointer派
今回調査した中でもっとも多くみられたのが、cursor: pointerを明示的に指定しているパターンです。
cursor: default派
ブラウザ標準のボタンの挙動（cursor: default）に合わせているパターンです。
| デザインシステム名 | 画像 | デザインシステム名 | 画像 |
|---|---|---|---|
| LINE Design System - LINE |  |
Spectrum - Adobe |  |
各デザインシステムにおけるcursor指定の方針
cursor指定の方針について、公式ドキュメントやIssueなどで言及しているものを集めてみました。
使い分ける派
デジタル庁デザインシステム - デジタル庁
ブラウザの標準的な挙動では、リンクテキストにマウスカーソルを乗せると指のカーソル（pointer）に変化しますが、ボタンの上にマウスカーソルを乗せてもマウスカーソルはデフォルト（通常は矢印）のまま変化しません。これは、CSSのcursorプロパティにおいて「pointer」はリンクを示す値だと決められているからです。
出典: ボタン（アクセシビリティ）｜デジタル庁デザインシステムβ版
基本的には、ブラウザ標準の挙動やCSS仕様に合わせる方針を採用していそうです。
しかしながら、こんにちのウェブサイトでは、ボタン押下がページ遷移のトリガーとして機能する場合があります。(中略)ユーザーはそのページ遷移が、リンクだから起きることなのか、ボタン押下イベントの結果として遷移するものなのかを、視覚的に判別することが事前事後を問わず困難であることが多く、また、判別できることに意義はそれほどありません。このことから、ページ遷移をもたらすボタンについては、マウスカーソルを乗せた時に指のカーソルに変更しても良いでしょう。
ただし、これはブラウザの標準的な挙動を妨げるものではありません。ウェブサイトの性質やコンテンツの表示内容に応じて、ページ遷移をもたらすボタンのhover時にマウスカーソルをpointerにするか、ブラウザの標準的な挙動のままの取り扱いとするかを決定してください。
出典: ボタン（アクセシビリティ）｜デジタル庁デザインシステムβ版
一方で、ページ遷移を伴うボタンについてはcursor: pointerを使用しても良く、その判断はプロダクトやコンテンツの特性に応じて決めて良いとされています。
cursor: pointer派
Carbon Design System - IBM
I think most users in a browser setting have come to expect the pointer cursor with buttons and other interactive elements. We run the risk of users thinking an element is not clickable.
出典: Pointer cursor usage · Issue #1712 · carbon-design-system/carbon
「ほとんどのユーザーはインタラクティブ要素に対してポインターカーソルを期待しているはず」という前提のもと、クリック可能を示唆する目的でcursor: pointerを採用していそうです。
cursor: default派
Microsoft Learn
Always use the arrow cursor (arrow cursor) for clickable elements. don't use the pointing hand cursor (pointing hand cursor) for links or other interactive elements. Instead, use hover effects (described earlier).
出典: Mouse interactions - Windows apps | Microsoft Learn
カーソルの見た目を変更するのではなく、視覚的なホバー効果によってクリック可能を示唆する方針を採用していそうです。
Fluent（Microsoftのデザインシステム）はcursor: pointerになってる気が...
Spectrum - Adobe
The intent is to better match native browser <button> behavior, the CSS spec, Microsoft interface guidelines and Apple interface guidelines.
出典: Frequently Asked Questions (FAQs) · adobe/react-spectrum Wiki
ブラウザ標準の挙動やCSS仕様、MicrosoftやAppleのインターフェイスガイドラインに合わせる方針を採用していそうです。
さいごに
調査する中でとても学びになった記事をシェアして締めくくりたいと思います！
Discussion