mobile-design

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

(モバイルファースト · タッチファースト · プラットフォーム尊重)

哲学: タッチファースト。バッテリーに配慮。プラットフォームを尊重。オフライン対応。 核心原則: モバイルは小さなデスクトップではない。 運用ルール: まず制約を考え、美しさは二の次に。

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

---

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

あらゆるモバイル機能や画面を設計または実装する前に、実現可能性を評価してください。

MFRI の評価軸 (1〜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. 作業前に必須の思考

⛔ STOP: 前提を置く前に質問する (必須)

以下のいずれかが明示されていない場合、進める前に必ず質問しなければなりません:

項目	問い	理由
プラットフォーム	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
インラインの renderItem	すべての行が再レンダリング	useCallback + memo
キーにインデックスを使用	並べ替えのバグ	安定した ID
JS スレッドのアニメーション	カクつき	ネイティブドライバー / GPU
本番環境での console.log	JS スレッドのブロック	ログの除去
メモ化なし	バッテリーとパフォーマンスの消耗	React.memo / const ウィジェット

---

🚫 タッチと UX の罪

❌ 決してしないこと	理由	✅ 常にすること
タッチ領域 <44–48px	タップの失敗	最小タッチターゲット
ジェスチャーのみの操作	ユーザーを排除	ボタンのフォールバック
ローディング状態なし	壊れているように感じる	明示的なフィードバック
エラーからの復帰なし	行き止まり	再試行 + メッセージ
プラットフォームの慣習を無視	筋肉記憶が壊れる	iOS ≠ Android

---

🚫 セキュリティ上の罪

❌ 決してしないこと	理由	✅ 常にすること
AsyncStorage にトークン	簡単に盗まれる	SecureStore / Keychain
ハードコードされたシークレット	リバースエンジニアリングされる	環境変数 + 安全なストレージ
SSL ピンニングなし	MITM リスク	証明書ピンニング
機密データのログ出力	個人情報の漏洩	シークレットを決してログに残さない

---

5. プラットフォームの統一と分岐のマトリックス

UNIFY                          DIVERGE
──────────────────────────     ─────────────────────────
Business logic                Navigation behavior
Data models                    Gestures
API contracts                  Icons
Validation                     Typography
Error semantics                Pickers / dialogs

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

要素	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 Principles I Will Apply:
1.
2.
3.

Anti-Patterns I Will Avoid:
1.
2.

❌ 完了できない → 戻って読み直してください。

---

9. フレームワークの決定木（正規）

Need OTA + web team → React Native + Expo
High-perf UI → Flutter
iOS only → SwiftUI
Android only → Compose

正当な根拠なく議論しないこと。

---

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

出荷前

• タッチターゲット ≥ 44–48px
• オフライン対応済み
• 安全なストレージを使用
• リストを最適化済み
• ログを除去済み
• 低スペック端末でテスト済み
• アクセシビリティラベルあり
• MFRI ≥ 3

---

11. 関連スキル

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

---

最終法則: モバイルユーザーは気が散り、中断され、せっかちです—しばしば片手で、悪いネットワークと少ないバッテリーの中で操作しています。 その現実に合わせて設計しなければ、あなたのアプリは静かに失敗します。

---

使用するタイミング

このスキルは、概要に記載されたワークフローまたはアクションを実行する場合に適用できます。

制限事項

• タスクが上記の範囲に明確に一致する場合にのみ、このスキルを使用してください。
• 出力を環境固有の検証、テスト、または専門家によるレビューの代替として扱わないでください。
• 必要な入力、権限、安全境界、または成功基準が欠けている場合は、停止して確認を求めてください。