touch-ipad-review

タッチ操作と iPad のレビュー

iPad やタッチスクリーンで、指での操作を優先したインタラクションになっているか、React + Tailwind アプリを監査します。一般的なアドバイス（セマンティック HTML を使う、レスポンシブにする、など）は省き、見落とされやすい問題点のみを指摘します。

チェックリスト： references/tailwind-touch-checklist.md

実施するタイミング

ユーザーのプロンプトが「アプリをタッチ／iPad での使用についてレビューして」や「このユースケース向けにアプリをレビューして」のように、タッチ／タブレットの利用を含む場合です。

レビューワークフロー

1. インタラクティブな UI を確認する — ボタン、リンク、アイコンボタン、タブ、地図コントロール、ドロップダウン／メニュー／Listbox、選択可能なインラインのサイドバー行、ドラッグハンドル、フォームコントロール、独自のクリック対象（ボタン以外の要素にある onClick）。
2. チェックリストに沿って確認する — リストを Bucket A（Headless UI / Radix）と Bucket B（カスタム <button> 行）に分類します。grep が役立ちます（hover:, data-focus:, focus &&, MenuItem, ListboxOption, onClick, cursor-, group-hover）。
3. iPad での動作を想定してテストする — Split View による幅の変化、解除されないホバー、タッチ中のハイライト（開いたメニューやインラインリストで、押したままドラッグして指を離す操作）、ダブルタップによるズーム、キーボードによる入力欄の覆い隠し、主要なアクションへの親指の届きやすさ。
4. 以下のテンプレートを使ってレポートを作成する — 各指摘には必ず 場所、問題点、具体的な Tailwind／React の修正方法を記載します。

一般的な対策のうち、問題のないものは列挙しないでください。重複する指摘（例：「12 個のアイコンボタンに min size がない」）は、代表的なファイルを挙げて 1 つにまとめてください。

レポートテンプレート

この構成を回答にコピーしてください。

# Touch / iPad review — [app or scope]

## Summary

[2–3 sentences: overall risk, top themes]

## Findings

### Critical

| #   | File / component | Issue | Suggested fix                   |
| --- | ---------------- | ----- | ------------------------------- |
| 1   | `path:line`      | …     | Tailwind classes or code change |

### Warning

| #   | File / component | Issue | Suggested fix |
| --- | ---------------- | ----- | ------------- |

### Nice to have

| #   | File / component | Issue | Suggested fix |
| --- | ---------------- | ----- | ------------- |

## FMC conventions verified

- [ ] All `<a>` and `<button>` (and tappable custom controls) use `cursor-pointer` on desktop
- [ ] Interactive controls use `select-none` where text selection would flash on iPad
- [ ] Hover-only affordances gated with fine-pointer media (see checklist)
- [ ] Menu/list rows: touch-over via `data-focus:` / `focus` (Headless UI) or `data-[highlighted]:` (Radix) — not `hover:` alone
- [ ] Inline sidebar pickers flagged if hover-only (Bucket B)

## Passed (non-obvious)

[Only items you explicitly checked and that are correct — keep short]

重大度

レベル	該当する状況
Critical	タッチで動作しない、タップできない、機能が隠れている、主要な操作フローで誤操作のリスクがある
Warning	基準未満だが使用可能。ホバーが解除されない、ターゲットがやや小さい、フィードバックがない
Nice to have	一貫性、親指の届く範囲の改善、Web では触覚フィードバックは該当なし

FMC のデフォルト設定（必ず確認）

すべてのレビューで適用します。

ルール	Tailwind／コード
リンクとボタンでのデスクトップポインター	<a>、<button>、タップ可能なカスタムコントロールに cursor-pointer を指定
コントロールで iOS のテキスト選択時のフラッシュを防止	コントロールとして使うボタン、アイコンボタン、タブ、チップに select-none を指定
細かいポインターでのみホバーを使用	必須の UI に単独の hover: を使わないでください。[@media(hover:hover)_and_(pointer:fine)]:hover:… を使います（またはプロジェクトのバリアント。チェックリストを参照）

grep のヒント

# Hover without fine-pointer guard (manual triage)
rg 'hover:' --glob '*.{tsx,jsx}'

# Small tap targets
rg '<(button|a)[^>]*(size-[0-9]|h-[0-9]|w-[0-9])' --glob '*.tsx'

# Div click traps
rg 'onClick' --glob '*.tsx' | rg -v '<button|<a '

# Missing cursor on interactives (heuristic)
rg '<(button|a) ' --glob '*.tsx' | rg -v 'cursor-pointer'

# Headless UI menus: hover without touch-over styling
rg 'MenuItem|ListboxOption|menuItemClasses' --glob '*.tsx'
rg 'hover:bg' --glob '*Menu*.tsx' --glob '*Listbox*.tsx' --glob '*Dropdown*.tsx'

# Inline sidebar rows: hover-only selection feedback
rg "hover:bg.*onClick|onClick.*hover:bg" --glob '*.tsx'

外部リファレンス

• Apple HIG — アクセシビリティ（44×44 pt のターゲット）
• Apple HIG — iPadOS 向けデザイン
• WCAG 2.2 — ターゲットサイズ（2.5.8）
• タッチターゲットの実践ガイド（Capi Product）
• タッチ操作向けのデザイン（Design+Code / iOS ハンドブック）
• モバイルアプリのデザインに関するベストプラクティス（RapidNative）