shield_lock
JinDaGe
← Back to skills
extension
Category: Development & EngineeringNo API key required

ios-ux-audit

Perform a UX audit for iPhone users and report on issues and improvement suggestions. To be used for requests such as 'conduct a UX audit', 'iOS UX check', 'audit the screen', etc.

personAuthor: jakexiaohubgithub
open_in_newRepositorydownloadDownload package

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