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

(Mobile-First · Touch-First · Platform-Respectful)

Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable. Core Law: Mobile is NOT a small desktop. Operating Rule: Think constraints first, aesthetics second.

このスキルは、モバイルアプリケーションの設計または構築時にデスクトップ思考、AIのデフォルト、そして不安全な前提を防ぐために存在します。

---

1. モバイル実行可能性・リスク指数 (MFRI)

任意のモバイル機能またはスクリーンを設計または実装する前に、実行可能性を評価します。

MFRI の5つの次元

次元	質問
プラットフォーム明確性	ターゲットプラットフォーム(iOS / Android / 両方)は明確に定義されているか?
インタラクション複雑性	ジェスチャー、フロー、またはナビゲーションの複雑さはどのレベルか?
パフォーマンスリスク	リスト、アニメーション、重い状態、またはメディアは含まれているか?
オフライン依存性	ネットワークなしではこの機能が壊れたり機能低下するか?
アクセシビリティリスク	これは運動、視覚、または認知的アクセシビリティに影響するか?

スコア計算式

MFRI = (Platform Clarity + Accessibility Readiness)
       − (Interaction Complexity + Performance Risk + Offline Dependence)

範囲: -10 → +10

解釈

MFRI	意味	必要なアクション
6–10	安全	通常通り進める
3–5	中程度	パフォーマンス + UX 検証を追加
0–2	リスク高	インタラクションまたはアーキテクチャを簡素化
< 0	危険	実装前に再設計が必須

---

2. 着手前の必須思考

⛔ 一時停止: 前提を置く前に確認 (必須)

以下のいずれかが明示的に記載されていない場合、進める前に必ず確認します:

項目	質問	理由
プラットフォーム	iOS、Android、またはその両方か?	ナビゲーション、ジェスチャー、タイポグラフィに影響
フレームワーク	React Native、Flutter、またはネイティブ?	パフォーマンスとパターンを決定
ナビゲーション	タブ、スタック、ドロワー?	コア UX アーキテクチャ
オフライン	オフラインで動作する必要があるか?	データ & 同期戦略
デバイス	スマートフォンのみまたはタブレットも?	レイアウト & 密度ルール
対象ユーザー	コンシューマー、エンタープライズ、アクセシビリティニーズ?	タッチと可読性

🚫 お気に入りのスタックやパターンにデフォルト化しないでください。

---

3. 必須参考資料 (強制実施)

ユニバーサル (常に最初に読む)

ファイル	目的	ステータス
mobile-design-thinking.md	反暗記、文脈強制	🔴 最初に必須
touch-psychology.md	フィッツの法則、親指ゾーン、ジェスチャー	🔴 必須
mobile-performance.md	60fps、メモリ、バッテリー	🔴 必須
mobile-backend.md	オフライン同期、プッシュ、API	🔴 必須
mobile-testing.md	デバイス & E2E テスト	🔴 必須
mobile-debugging.md	ネイティブ vs JS デバッグ	🔴 必須

プラットフォーム別 (条件付き)

プラットフォーム	ファイル
iOS	platform-ios.md
Android	platform-android.md
クロスプラットフォーム	上記両方

❌ プラットフォームファイルを読んでいない場合、UI設計は許可されません。

---

4. AI モバイルアンチパターン (ハード禁止)

🚫 パフォーマンス違反 (譲歩不可)

❌ 禁止事項	理由	✅ 常に
長いリストの ScrollView	メモリ爆発	FlatList / FlashList / ListView.builder
インラインレンダリング	すべての行を再レンダリング	useCallback + memo
キーとしてインデックス	並べ替えバグ	安定 ID
JS スレッドアニメーション	ジャンク	ネイティブドライバ / GPU
本番環境での console.log	JS スレッドブロック	ログを削除
メモ化なし	バッテリー + パフォーマンス消費	React.memo / const widget

---

🚫 タッチ & UX 違反

❌ 禁止事項	理由	✅ 常に
タッチ <44–48px	タップを外す	最小タッチターゲット
ジェスチャーのみのアクション	ユーザーを除外	ボタンフォールバック
ローディング状態なし	壊れているように感じる	明示的なフィードバック
エラー回復なし	行き止まり	リトライ + メッセージ
プラットフォーム規範を無視	筋肉記憶が失われる	iOS ≠ Android

---

🚫 セキュリティ違反

❌ 禁止事項	理由	✅ 常に
AsyncStorage のトークン	容易に盗まれる	SecureStore / Keychain
ハードコードシークレット	リバースエンジニアリング	Env + セキュアストレージ
SSL ピンニングなし	MITM リスク	証明書ピンニング
機密データをログ出力	PII 漏洩	シークレットはログしない

---

5. プラットフォーム統一 vs 分散マトリックス

統一                          分散
──────────────────────────     ─────────────────────────
ビジネスロジック               ナビゲーション動作
データモデル                   ジェスチャー
API コントラクト               アイコン
検証                           タイポグラフィ
エラーセマンティクス           ピッカー / ダイアログ

プラットフォームデフォルト

要素	iOS	Android
フォント	SF Pro	Roboto
最小タッチ	44pt	48dp
戻る	エッジスワイプ	システム戻る
シート	ボトムシート	ダイアログ / シート
アイコン	SF Symbols	Material Icons

---

6. モバイル UX 心理学 (オプション不可)

フィッツの法則 (タッチの現実)

• 指 ≠ カーソル
• 精度は低い
• リーチが精密性より重要

ルール:

• プライマリ CTA は親指ゾーンに配置
• 破壊的なアクション は遠くに配置
• ホバー想定は禁止

---

7. パフォーマンス教義

React Native (必須パターン)

const Row = React.memo(({ item }) => (
  <View><Text>{item.title}</Text></View>
));

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

<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={(i) => i.id}
  getItemLayout={(_, i) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * i,
    index: i,
  })}
/>

Flutter (必須パターン)

class Item extends StatelessWidget {
  const Item({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Static');
  }
}

• 可能な限りconstを使用
• 対象を絞った再構築のみ

---

8. 必須モバイルチェックポイント

任意のコードを書く前に、以下を完成させます:

🧠 MOBILE CHECKPOINT

Platform:     ___________
Framework:    ___________
Files Read:   ___________

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

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

❌ 完成できない → 戻って読み直す。

---

9. フレームワーク決定ツリー (正規)

OTA + Web チーム必要 → React Native + Expo
高パフォーマンス UI → Flutter
iOS のみ → SwiftUI
Android のみ → Compose

正当化なしに議論なし。

---

10. リリース準備チェックリスト

リリース前に

• タッチターゲット ≥ 44–48px
• オフライン処理完了
• セキュアストレージ使用済み
• リスト最適化完了
• ログ削除済み
• ロースペックデバイスでテスト済み
• アクセシビリティラベル表示済み
• MFRI ≥ 3

---

11. 関連スキル

• frontend-design – ビジュアルシステム & コンポーネント
• frontend-dev-guidelines – RN/TS アーキテクチャ
• backend-dev-guidelines – モバイル対応 API
• error-tracking – クラッシュ & パフォーマンステレメトリ

---

最終法則: モバイルユーザーは気が散りやすく、中断されやすく、せっかちです。多くの場合、片手で悪いネットワーク接続と低バッテリーの状態で使用しています。 その現実に合わせて設計してください。そうしないと、アプリは静かに失敗します。

---

使用時期

このスキルは、上記の概要で説明されたワークフローまたはアクション実行する際に適用されます。

制限事項

• このスキルは、上記で説明されたスコープに明確に一致するタスクの場合のみ使用してください。
• 出力を環境固有の検証、テスト、または専門家の確認の代替として扱わないでください。
• 必要な入力、権限、セキュリティ境界、または成功基準が不足している場合は、一時停止して明確化をお求めてください。