Tailwind CSSでカーソルの形状を指定する

## はじめに
プログラミングスクールRUNTEQで学習中のmana(@kumateq)と申します。
[RUNTEQ Advent Calendar 2024](https://qiita.com/advent-calendar/2024/runteq) 18日目を担当します。
今年のテーマ『プログラミングでの"ワクワク"』にちなみ、カーソル形状に関するユーザー体験（UX）≒ "ワクワク"について書きます！

## 環境
- ruby 3.2.3
- Rails 7.2.1.1
- Tailwind CSS + daisyUI

:::note warn
Tailwind CSSとdaisyUIの導入方法および基本的な使用方法には触れません
:::

### Tailwind CSSとは
CSSフレームワークの1つです。
HTML内にユーティリティクラスを記述することでスタイルを適用します。
カスタマイズ性が高く、直感的にデザインできるのが特徴です。

https://tailwindcss.com/

### daisyUIとは
Tailwind CSSを基盤としたコンポーネントライブラリです。
多彩なコンポーネントやテーマが用意され、モーダルやドロップダウンなどのUIパーツを簡単に実装できます。

https://daisyui.com/

## カーソル形状がUXに与える影響を考える
daisyUIのコンポーネント[Card](https://daisyui.com/components/card/)を使用し、2つの例を挙げます。
カードをクリックすると詳細ページに遷移する想定です。

### 例1
[![Image from Gyazo](https://i.gyazo.com/09b72792fb0e24b0386bf1c3e032a442.gif)](https://gyazo.com/09b72792fb0e24b0386bf1c3e032a442)

カード自体はクリックできません。
タイトルにホバーする（マウスを合わせる）とカーソルが変わり、詳細ページが開きます。

### 例2
[![Image from Gyazo](https://i.gyazo.com/b574c8ff07049a4a1f1a066396b5d290.gif)](https://gyazo.com/b574c8ff07049a4a1f1a066396b5d290)

カードにホバーしてもカーソルが変わりません。
カードをクリックした先に詳細ページがあることに気づきにくいです。

例1のようにクリックできそうでできない、例2のようにクリック可能だと分かりづらい状態では、ユーザー体験が損なわれるかもしれません。

## Tailwind CSSでカーソルの形状を指定
Tailwind CSSのユーティリティクラスでカーソルの形状を指定できます。
カーソルの種類は多くありますが、よく目にするのは以下の4つです。
| クラス | 形状 | 状態 | |
|:----------------|:------------|:------------|:------------|
| cursor-default  | 矢印 | 操作を必要としない |![名称未設定-1_アートボード 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3931393/972b5325-9019-a6b5-432e-cf4d7d8a1372.png)|
| cursor-pointer | 人差し指 | クリック可能 |![名称未設定-2_アートボード 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3931393/28c295af-b096-c7c4-f9ff-72f8fc02fcd7.png)|
| cursor-text | テキスト入力の縦線 | テキストを入力・選択可能 |![名称未設定-3_アートボード 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3931393/c2174c2c-e347-ec11-9c48-5a67c3268d4d.png)|
| cursor-move | 十字矢印 | ドラッグで移動可能 |![名称未設定-4_アートボード 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3931393/fee88d0b-9605-c819-87f3-eb96c12ea390.png)|

公式ドキュメント上でホバーすると、カーソルの変化を視覚的に確認できます。

https://tailwindcss.com/docs/cursor

## カーソル形状を指定する例

```ruby:◯◯◯.html.erb
<div class="card w-64 rounded shadow bg-base-100 relative">
  <div class="card-title w-full p-2 text-lg flex items-center justify-between relative">
    <div class="flex-grow pl-2 cursor-default">
      <h1>タイトル</h1>
    </div>
    <!-- アイコンとモーダル -->
    <span
      class="material-symbols-outlined z-10 absolute right-6 cursor-pointer"
      onclick="my_modal_1.showModal()"
    >
      more_horiz
    </span>
    <dialog id="my_modal_1" class="modal">
      <div class="modal-box">
        <h3 class="text-lg font-bold">タイトル</h3>
        <p class="py-4 text-sm font-normal">説明文</p>
        <div class="modal-action">
          <form method="dialog">
            <button class="btn">閉じる</button>
          </form>
        </div>
      </div>
    </dialog>
  </div>
  <figure>
    <%= link_to samples_path, class: "w-full" do %>
      <%= image_tag "sample.png", class: "w-64 h-32 object-cover" %>
    <% end %>
  </figure>
</div>
```

[![Image from Gyazo](https://i.gyazo.com/1060b851481ff60d26d63d6e9e5e7b04.gif)](https://gyazo.com/1060b851481ff60d26d63d6e9e5e7b04)

カードのクリック時は詳細ページ、アイコンのクリック時は[モーダル](https://daisyui.com/components/modal/)が開くようにしてみました。
タイトルにはcursor-default（矢印）を指定して操作が必要ないことを示し、アイコンにはcursor-pointer（人差し指）を指定してクリック可能であることを示しています。

### おまけ
カーソルの形状指定のほか、ホバー時に色や大きさを変更する、アニメーションを付けるなどの方法でクリック可能であることを視覚化するのも効果的です。

https://tailwindcss.com/docs/hover-focus-and-other-states

## おわりに
サービスを使っている時に気づくことがあり、作る時も意識するようになった点を記事にしました。
カーソル形状を適切に指定しクリック可能な範囲を明確にすることで、ユーザー体験を向上し"ワクワク"を持続できるのではないかと思います！