# IOS UX Audit

> iPhoneユーザー向けのUX監査を実行し、問題点と改善案をレポートする。「UX監査して」「iOS UXチェック」「画面を監査」などのリクエストで使用する。

- Skill: `majiayu000/ios-ux-audit` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/ios-ux-audit`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/ios-ux-audit/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Security
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/ios-ux-audit

---


# iOS UX 監査スキル

指定された画面（または全画面）を走査し、iPhoneユーザーのUX品質を監査する。

## デザイン前提: Liquid Glass

本プロジェクトは Apple iOS 26 の **Liquid Glass** デザインを前提とする。
監査時は `@callstack/liquid-glass` (`LiquidGlassView`, `LiquidGlassContainerView`) の使用状況も確認する。

## 監査対象

対象ファイル:
- `src/screens/**/*.tsx` — 画面コンポーネント
- `src/components/**/*.tsx` — UIコンポーネント
- `src/App.tsx` — ナビゲーション構造

引数が指定された場合はその画面のみ、省略時は全画面を対象とする。

## 監査チェックリスト

以下の7カテゴリを順にチェックし、問題があれば具体的なファイル名・行番号と改善案を報告する。

### 1. Safe Area & デバイス対応

- [ ] `SafeAreaView` がルートで使用されているか
- [ ] ノッチ / Dynamic Island 領域に要素が被っていないか
- [ ] ホームインジケータ領域（画面下部）にボタン等が被っていないか
- [ ] `useSafeAreaInsets()` で動的にパディングを取得しているか
- [ ] ステータスバーのスタイル（`light` / `dark`）が背景色と適切か

### 2. キーボード処理

- [ ] `TextInput` を含む画面に `KeyboardAvoidingView` があるか（iOS: `behavior="padding"`）
- [ ] `ScrollView` に `keyboardShouldPersistTaps="handled"` が設定されているか
- [ ] `returnKeyType` が適切に設定されているか（`done`, `next`, `search` 等）
- [ ] キーボードを閉じる手段があるか（`Keyboard.dismiss()` 等）

### 3. ハプティクス

- [ ] ボタンのプレスに触覚フィードバックがあるか
- [ ] 破壊的アクション（削除等）に `notificationAsync(Warning)` があるか
- [ ] タブ切り替え・トグルに `selectionAsync()` があるか
- [ ] 成功・完了時に `notificationAsync(Success)` があるか

### 4. アクセシビリティ

- [ ] すべての `Pressable` / `TouchableOpacity` に `accessibilityLabel` があるか
- [ ] アイコンのみのボタンに `accessibilityLabel` があるか
- [ ] 画像に `accessibilityLabel` または `accessible={false}`（装飾的）があるか
- [ ] `accessibilityRole` が適切に設定されているか（`button`, `link`, `header` 等）
- [ ] 絵文字アイコンがアクセシビリティラベルで補完されているか

### 5. パフォーマンス

- [ ] リスト表示に `FlatList` / `SectionList` を使っているか（`.map()` ではなく）
- [ ] 画像に適切な `resizeMode` と遅延読み込みがあるか
- [ ] 不要な再レンダリングを防ぐ `React.memo` / `useMemo` / `useCallback` があるか
- [ ] `key` prop に配列のインデックスではなく一意のIDを使っているか

### 6. iOS HIG 準拠

- [ ] 絵文字ではなくアイコンライブラリ（`@expo/vector-icons` 等）を使っているか
- [ ] 戻るボタンがiOS標準のシェブロン（`<`）スタイルか
- [ ] モーダル/シート表示が適切か（設定画面等）
- [ ] タッチターゲットが最低44x44ptあるか
- [ ] フォントサイズがiOSの推奨範囲内か（本文: 17pt, キャプション: 12pt以上）

### 7. Liquid Glass デザイン準拠

- [ ] カード・ツールバー・モーダルに `LiquidGlassView` が適用されているか
- [ ] 近接するガラス要素が `LiquidGlassContainerView` でグループ化されているか
- [ ] `effect` プロパティが適切か（カード: `regular`, オーバーレイ: `clear`）
- [ ] ガラス背景上のテキストが十分なコントラストを持つか（WCAG AA以上）
- [ ] `isLiquidGlassSupported` で非対応デバイスにフォールバックがあるか
- [ ] フォールバック時に半透明背景色（例: `rgba(255,255,255,0.8)`）が設定されているか
- [ ] 全画面ガラス背景を避け、アクセント的に使用しているか
- [ ] ガラス要素に `borderRadius` が設定されているか
- [ ] 「透明度を下げる」設定 (`AccessibilityInfo`) を尊重しているか
- [ ] ガラス要素の高さが65px超の場合、テキストに `PlatformColor('labelColor')` を使用しているか

### 8. ジェスチャー & インタラクション

- [ ] スワイプバック（←方向）でナビゲーション戻りができるか
- [ ] リストにプルトゥリフレッシュ (`RefreshControl`) があるか
- [ ] ロングプレスでコンテキストメニューが出るか（必要な箇所）
- [ ] ボタンにプレス状態のフィードバック（opacity/scale）があるか

## 出力フォーマット

```
## iOS UX 監査レポート

### 対象: [画面名 or 全画面]

#### 🔴 Critical（即座に修正すべき）
- **[カテゴリ]** `ファイル名:行番号` — 問題の説明
  → 改善案: ...

#### 🟡 Warning（改善推奨）
- **[カテゴリ]** `ファイル名:行番号` — 問題の説明
  → 改善案: ...

#### 🟢 Good（問題なし）
- [カテゴリ]: ✓ 適切に実装済み

#### 📊 スコア: X / 8 カテゴリ合格
```

## ルール

- コードの変更は行わない。監査とレポートのみ
- 問題箇所は必ずファイルパスと行番号を含める
- 改善案は具体的なコード例を含める
- プロジェクトの `src/theme/tokens.ts` のデザイントークンを考慮する
- 既存の依存パッケージで対応可能な改善を優先する