モバイルデザインシステム

哲学: タッチファースト。バッテリー意識。プラットフォーム尊重。オフライン対応可能。 コア原則: モバイルはデスクトップの小さい版ではありません。モバイルの制約を考え、プラットフォームの選択を問いかけてください。

---

🔧 ランタイムスクリプト

検証用に実行してください（読むのではなく、実行するだけ）:

スクリプト	目的	使用方法
scripts/mobile_audit.py	モバイルUX・タッチ監査	python scripts/mobile_audit.py <project_path>

---

🔴 必須: 作業前に参照ファイルを読んでください!

⛔ 関連ファイルを読むまで開発を開始しないでください:

ユニバーサル（常に読む）

ファイル	コンテンツ	ステータス
mobile-design-thinking.md	⚠️ 暗記排除: 思考を強制し、AI既定値を防止	⬜ 最初に重要
touch-psychology.md	フィッツの法則、ジェスチャー、ハプティクス、サムゾーン	⬜ 重要
mobile-performance.md	RN/Flutterパフォーマンス、60fps、メモリ	⬜ 重要
mobile-backend.md	プッシュ通知、オフラインシンク、モバイルAPI	⬜ 重要
mobile-testing.md	テストピラミッド、E2E、プラットフォーム固有	⬜ 重要
mobile-debugging.md	ネイティブ vs JS デバッグ、Flipper、Logcat	⬜ 重要
mobile-navigation.md	タブ/スタック/ドロワー、ディープリンク	⬜ 読む
mobile-typography.md	システムフォント、Dynamic Type、a11y	⬜ 読む
mobile-color-system.md	OLED、ダークモード、バッテリー対応	⬜ 読む
decision-trees.md	フレームワーク/状態/ストレージ選択	⬜ 読む

🧠 mobile-design-thinking.md が優先! このファイルは、AIが暗記されたパターンを使うのではなく、思考することを保証します。

プラットフォーム固有（対象に基づいて読む）

プラットフォーム	ファイル	コンテンツ	読む時期
iOS	platform-ios.md	Human Interface Guidelines、SF Pro、SwiftUIパターン	iPhone/iPad向けビルド
Android	platform-android.md	Material Design 3、Roboto、Composeパターン	Android向けビルド
クロスプラットフォーム	上記両方	プラットフォーム相違点	React Native / Flutter

🔴 iOS向けビルド → platform-ios.md を最初に読んでください! 🔴 Android向けビルド → platform-android.md を最初に読んでください! 🔴 クロスプラットフォーム → 両方読んで条件付きプラットフォームロジックを適用してください!

---

⚠️ 重大: 仮定する前に問いかけてください（必須）

停止! ユーザーのリクエストが曖昧な場合、好みに頼らないでください。

指定されていない場合は問う必要があります:

側面	質問	理由
プラットフォーム	「iOS、Android、または両方?」	すべての設計決定に影響
フレームワーク	「React Native、Flutter、またはネイティブ?」	パターンとツールを決定
ナビゲーション	「タブバー、ドロワー、またはスタックベース?」	コアUX決定
状態	「状態管理は? (Zustand/Redux/Riverpod/BLoC?)」	アーキテクチャ基盤
オフライン	「これはオフラインで機能する必要がある?」	データ戦略に影響
対象デバイス	「スマートフォンのみ、またはタブレット対応?」	レイアウト複雑性

⛔ AI モバイルアンチパターン（禁止リスト）

🚫 これらはAIのデフォルト傾向であり、避けなければなりません!

パフォーマンス罪

❌ 絶対しないこと	何が悪いのか	✅ 常にすること
長いリストにScrollView	すべてのアイテムをレンダリング、メモリ爆発	FlatList / FlashList / ListView.builder を使用
インライン renderItem 関数	毎回新しい関数、すべてのアイテムが再レンダリング	useCallback + React.memo
keyExtractor 欠落	インデックスベースキーはリオーダーで不具合	データから一意の安定ID
getItemLayout スキップ	非同期レイアウト = カクカクスクロール	固定高さの場合は提供
setState() 乱用	不要なウィジェット再構築	対象状態、const コンストラクタ
Native driver: false	アニメーションがJSスレッドでブロック	useNativeDriver: true は常に
本番環境で console.log	JSスレッドを激しくブロック	リリースビルド前に削除
React.memo/const スキップ	すべてのアイテムが変更時に再レンダリング	リストアイテムを常にメモ化

タッチ/UX罪

❌ 絶対しないこと	何が悪いのか	✅ 常にすること
タッチターゲット < 44px	正確にタップ不可、フラストレーション	最小44pt (iOS) / 48dp (Android)
ターゲット間間隔 < 8px	隣接部への誤タップ	最小8-12px ギャップ
ジェスチャーのみインタラクション	運動機能障害ユーザーを除外	常にボタン代替案を提供
ローディング状態なし	ユーザーがアプリクラッシュと思う	常にローディングフィードバック表示
エラー状態なし	ユーザーが止まって、復旧パスなし	エラー表示と再試行オプション
オフライン処理なし	ネットワーク喪失時にクラッシュ/ブロック	グレースフルデグラデーション、キャッシュ
プラットフォーム規約無視	ユーザー混乱、筋肉記憶破損	iOSはiOS、AndroidはAndroid

セキュリティ罪

❌ 絶対しないこと	何が悪いのか	✅ 常にすること
AsyncStorage にトークン	簡単にアクセス可能、ルート化デバイスで盗難	SecureStore / Keychain / EncryptedSharedPreferences
APIキーをハードコード	APK/IPAから逆エンジニアリング可能	環境変数、セキュア保存
SSL ピニング スキップ	MITM 攻撃が可能	本番環境でサーティフィケート固定
機密データをログ	ログ抽出可能	トークン、パスワード、PII をログしない

アーキテクチャ罪

❌ 絶対しないこと	何が悪いのか	✅ 常にすること
UIにビジネスロジック	テスト不可、保守不可	サービスレイヤー分離
すべてにグローバル状態	不要な再レンダリング、複雑性	ローカル状態がデフォルト、必要時にリフト
ディープリンクを後付け	通知、共有機能破損	初日からディープリンク計画
dispose/cleanup スキップ	メモリリーク、ゾンビリスナー	サブスクリプション、タイマーをクリーンアップ

---

📱 プラットフォーム決定マトリックス

統一 vs 分岐

                    統一（両方で同じ）          分岐（プラットフォーム固有）
                    ───────────────────           ──────────────────────────
ビジネスロジック    ✅ 常に                       -
データレイヤー      ✅ 常に                       -
コア機能           ✅ 常に                       -
                    
ナビゲーション      -                             ✅ iOS: エッジスワイプ、Android: バックボタン
ジェスチャー        -                             ✅ プラットフォーム native フィール
アイコン           -                             ✅ SF Symbols vs Material Icons
日付ピッカー       -                             ✅ ネイティブピッカーが最適
モーダル/シート     -                             ✅ iOS: ボトムシート vs Android: ダイアログ
タイポグラフィ     -                             ✅ SF Pro vs Roboto (またはカスタム)
エラーダイアログ   -                             ✅ プラットフォーム規約 |

クイックリファレンス: プラットフォーム既定値

要素	iOS	Android
プライマリフォント	SF Pro / SF Compact	Roboto
最小タッチターゲット	44pt × 44pt	48dp × 48dp
バックナビゲーション	左エッジスワイプ	システムバックボタン/ジェスチャー
ボトムタブアイコン	SF Symbols	Material Symbols
アクションシート	UIActionSheet(下から)	ボトムシート / ダイアログ
進捗	スピナー	リニア進捗 (Material)
プルリフレッシュ	ネイティブ UIRefreshControl	SwipeRefreshLayout

---

🧠 モバイルUX心理学（クイックリファレンス）

タッチ用フィッツの法則

デスクトップ: カーソルは正確 (1px)
モバイル:    指は不正確 (~7mm 接触面積)

→ タッチターゲットは最小44-48px必須
→ 重要アクションはサムゾーン内 (画面下部)
→ 破壊的アクションは容易アクセス外

サムゾーン（片手使用）

┌─────────────────────────────┐
│      リーチ困難              │ ← ナビゲーション、メニュー、戻る
│       (ストレッチ)          │
├─────────────────────────────┤
│      リーチ可能              │ ← セカンダリアクション
│       (自然位置)             │
├─────────────────────────────┤
│      容易リーチ              │ ← プライマリ CTA、タブバー
│    (親指の自然弧内)        │ ← メインコンテンツインタラクション
└─────────────────────────────┘
        [  ホーム  ]

モバイル固有認知負荷

デスクトップ	モバイル差異
複数ウィンドウ	一度に一つのタスク
キーボードショートカット	タッチジェスチャー
ホバー状態	ホバーなし (タップまたは何もなし)
大きいビューポート	限定スペース、垂直スクロール
安定した注意	常に中断

詳細: touch-psychology.md

---

⚡ パフォーマンス原則（クイックリファレンス）

React Native 重要ルール

// ✅ 正解: メモ化された renderItem + React.memo ラッパー
const ListItem = React.memo(({ item }: { item: Item }) => (
  <View style={styles.item}>
    <Text>{item.title}</Text>
  </View>
));

const renderItem = useCallback(
  ({ item }: { item: Item }) => <ListItem item={item} />,
  []
);

// ✅ 正解: すべての最適化を伴う FlatList
<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}  // 安定ID、インデックスではなく
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  windowSize={5}
/>

Flutter 重要ルール

// ✅ 正解: const コンストラクタが再構築を防止
class MyWidget extends StatelessWidget {
  const MyWidget({super.key}); // CONST!

  @override
  Widget build(BuildContext context) {
    return const Column( // CONST!
      children: [
        Text('静的コンテンツ'),
        MyConstantWidget(),
      ],
    );
  }
}

// ✅ 正解: ValueListenableBuilder での対象状態
ValueListenableBuilder<int>(
  valueListenable: counter,
  builder: (context, value, child) => Text('$value'),
  child: const ExpensiveWidget(), // 再構築されない!
)

アニメーションパフォーマンス

GPU加速化 (高速):     CPU結合 (低速):
├── transform         ├── width、height
├── opacity           ├── top、left、right、bottom
└── (これらのみ使用)  ├── margin、padding
                      └── (これらをアニメートしない)

完全ガイド: mobile-performance.md

---

📝 チェックポイント（モバイル作業前に必須）

モバイルコードを書く前に、このチェックポイントを完了する必要があります:

🧠 チェックポイント:

プラットフォーム:   [ iOS / Android / 両方 ]
フレームワーク:     [ React Native / Flutter / SwiftUI / Kotlin ]
読むファイル:       [ 読んだスキルファイルのリスト ]

適用する3つの原則:
1. _______________
2. _______________
3. _______________

回避するアンチパターン:
1. _______________
2. _______________

例:

🧠 チェックポイント:

プラットフォーム:   iOS + Android (クロスプラットフォーム)
フレームワーク:     React Native + Expo
読むファイル:       touch-psychology.md、mobile-performance.md、platform-ios.md、platform-android.md

適用する3つの原則:
1. すべてのリストで FlatList + React.memo + useCallback
2. 48px タッチターゲット、プライマリ CTA はサムゾーン
3. プラットフォーム固有ナビゲーション (iOS エッジスワイプ、Android バックボタン)

回避するアンチパターン:
1. ScrollView リスト → FlatList
2. インライン renderItem → メモ化
3. AsyncStorage トークン → SecureStore

🔴 チェックポイント記入できない? → スキルファイルに戻って読んでください。

---

🔧 フレームワーク決定ツリー

何を構築していますか?
        │
        ├── OTA更新 + 高速反復 + ウェブチーム必要
        │   └── ✅ React Native + Expo
        │
        ├── ピクセルパーフェクトカスタムUI + パフォーマンス重視
        │   └── ✅ Flutter
        │
        ├── ディープなネイティブ機能 + シングルプラットフォームフォーカス
        │   ├── iOSのみ → SwiftUI
        │   └── Androidのみ → Kotlin + Jetpack Compose
        │
        ├── 既存RNコードベース + 新機能
        │   └── ✅ React Native (ベアワークフロー)
        │
        └── エンタープライズ + 既存Flutterコードベース
            └── ✅ Flutter

完全な決定ツリー: decision-trees.md

---

📋 開発前チェックリスト

モバイルプロジェクト開始前に

• プラットフォーム確認済み? (iOS / Android / 両方)
• フレームワーク選択済み? (RN / Flutter / ネイティブ)
• ナビゲーションパターン決定済み? (タブ / スタック / ドロワー)
• 状態管理選択済み? (Zustand / Redux / Riverpod / BLoC)
• オフライン要件明確?
• 初日からディープリンク計画済み?
• 対象デバイス定義済み? (スマートフォン / タブレット / 両方)

すべてのスクリーン前に

• タッチターゲット ≥ 44-48px?
• プライマリ CTA がサムゾーン内?
• ローディング状態が存在?
• リトライありのエラー状態が存在?
• オフライン処理を検討?
• プラットフォーム規約に従順?

リリース前に

• console.log 削除済み?
• 機密データに SecureStore 使用?
• SSL ピニング有効?
• リストが最適化済み (memo、keyExtractor)?
• アンマウント時メモリクリーンアップ?
• ロウエンドデバイスでテスト済み?
• すべてのインタラクティブ要素にアクセシビリティラベル?

---

📚 参照ファイル

特定領域のより詳しいガイダンス:

ファイル	使用時期
mobile-design-thinking.md	最初! 暗記排除、コンテキストベース思考を強制
touch-psychology.md	タッチインタラクション、フィッツの法則、ジェスチャー設計を理解
mobile-performance.md	RN/Flutter最適化、60fps、メモリ/バッテリー
platform-ios.md	iOS固有設計、HIG準拠
platform-android.md	Android固有設計、Material Design 3
mobile-navigation.md	ナビゲーションパターン、ディープリンク
mobile-typography.md	タイプスケール、システムフォント、アクセシビリティ
mobile-color-system.md	OLED最適化、ダークモード、バッテリー
decision-trees.md	フレームワーク、状態、ストレージ決定

---

忘れずに: モバイルユーザーは急いで、中断され、小さい画面で不正確な指を使っています。最悪条件向け設計: 悪いネットワーク、片手、日差し、低バッテリー。そこで機能すれば、どこでも機能します。