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 widgets

---

🚫 タッチ操作とUX上の禁忌

❌ 禁止事項	理由	✅ 必ず実施すること
タッチ領域が44～48px未満	タップを逃す	最小タッチ領域を確保
ジェスチャーのみの操作	ユーザーを排除する	ボタンによる代替操作
読み込み状態がない	壊れているように感じる	明確なフィードバック
エラーからの復旧手段がない	行き止まりになる	再試行 + メッセージ
プラットフォームの慣習を無視する	操作の慣れが損なわれる	iOS ≠ Android

---

🚫 セキュリティ上の禁忌

❌ 禁止事項	理由	✅ 必ず実施すること
AsyncStorageにトークンを保存する	簡単に盗まれる	SecureStore / Keychain
シークレットをハードコードする	リバースエンジニアリングされる	Env + セキュアストレージ
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 – クラッシュとパフォーマンスのテレメトリー

---

最終原則： モバイルユーザーは気が散りやすく、中断されやすく、せっかちです。通信環境が悪く、バッテリー残量が少ない状態で、片手だけで使うこともよくあります。 その現実に合わせて設計しなければ、アプリはひっそりと失敗します。

---