iOS UX 監査スキル

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 のデザイントークンを考慮する
• 既存の依存パッケージで対応可能な改善を優先する