mobile-design

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

（モバイルファースト・タッチファースト・プラットフォームを尊重）

理念： タッチファースト。バッテリーに配慮。プラットフォームを尊重。オフライン対応。 基本原則： モバイルは小さなデスクトップではありません。 運用ルール： まず制約を考え、見た目はその次です。

このスキルは、モバイルアプリの設計や開発におけるデスクトップ中心の考え方、AI のデフォルト設定、安全でない前提を防ぐためのものです。

---

1. 範囲とリスク

既存のプロジェクトやプラットフォームの要件を使用し、その規約を維持してください。 実装に影響する不足情報についてのみ質問してください。対象を絞った修正のために、 ヒアリングやフレームワークの切り替えを必須にしてはいけません。以前の MFRI スコアは、 次元や範囲に一貫性がない未検証のヒューリスティックであり、安全性やリリースの判定基準ではありません。 代わりに、具体的なインタラクション、データ、アクセシビリティ、パフォーマンスのリスクを記録してください。

2. 関連するチェック項目を選ぶ

新しいアプリでは、プラットフォーム、フレームワーク、対象ユーザー、デバイスの種類、ナビゲーション、 オフライン要件、実際の出力を確認してください。既存の作業では、そのコンテキストを再利用してください。 変更する動作に必要な参考資料だけを読んでください。ユーザーの範囲指定とリポジトリの指示は、 このスキルが提案する手順より優先されます。

3. 必須の参考資料の確認（必須）

参考資料一覧（タスクに必要なものを確認）

ファイル	目的	ステータス
mobile-design-thinking.md	暗記の防止、コンテキストの明確化	コンテキスト資料
touch-psychology.md	フィッツの法則、親指ゾーン、ジェスチャー	タスクに応じて
mobile-performance.md	60fps、メモリ、バッテリー	タスクに応じて
mobile-backend.md	オフライン同期、プッシュ通知、API	タスクに応じて
mobile-testing.md	デバイスおよび E2E テスト	タスクに応じて
mobile-debugging.md	ネイティブと JS のデバッグ	タスクに応じて

プラットフォーム固有（条件付き）

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

プラットフォーム固有の動作を変更する前に、該当するプラットフォームのガイダンスを確認してください。

---

4. AI モバイルのアンチパターン（厳禁）

🚫 パフォーマンス上の誤り（絶対に避ける）

❌ 絶対にしないこと	理由	✅ 必ず行うこと
長いリストに ScrollView を使う	メモリの急増	FlatList / FlashList / ListView.builder
計測せずに行を頻繁に更新する	避けられる処理が発生する可能性	ID や状態の更新をプロファイルし、有用な場合に限ってメモ化する
キーにインデックスを使う	並べ替え時の不具合	安定した ID を使う
JS スレッドのアニメーション	カクつき	ネイティブドライバー / GPU
本番環境で console.log を使う	JS スレッドをブロック	ログを除去する
一律にメモ化が有効だと主張する	利点がないまま複雑さが増す可能性	プロファイルを行い、対象を絞って最適化する

---

🚫 タッチと UX に関する誤り

❌ 絶対にしないこと	理由	✅ 必ず行うこと
タップ領域が小さすぎる	タップを外しやすい	プラットフォームの論理単位を使う：通常は iOS で 44pt、Android で 48dp
ジェスチャーだけで操作する	ユーザーを排除する	ボタンも用意する
読み込み状態を表示しない	動作していないように見える	明確なフィードバック
エラーから復帰できない	行き止まりになる	再試行とメッセージ
プラットフォームの慣習を無視する	身体で覚えた操作が崩れる	iOS ≠ Android

---

🚫 セキュリティ上の禁忌

❌ 絶対にしないこと	理由	✅ 常に行うこと
AsyncStorage にトークンを保存する	簡単に盗まれる	SecureStore / Keychain を使用する
アプリに秘密情報を埋め込む	抽出される可能性がある	サーバーの秘密情報はサーバーに保管し、ユーザーごとの認証情報は安全に管理する
TLS 検証を無効にする	MITM のリスク	プラットフォーム標準の TLS を使用し、正当な管理対象の脅威モデルがある場合に限りピンニングを使用する
機密データをログに記録する	PII の漏えい	秘密情報は絶対にログに記録しない

---

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. 実装の根拠

対象プラットフォーム、変更した動作、実際に行ったチェックを明記してください。代表的なデバイスとデータでプロファイリングしてください。静的なパターンのスキャンでは、タッチ領域、コントラスト、フレームレート、バッテリー、プラットフォームのナビゲーション、セキュアストレージの動作を測定できません。

9. フレームワークの選択

変更を求められていない限り、既存のスタックを維持してください。新しい作業では、チームの経験、ネイティブ連携、アクセシビリティ、デプロイポリシー、測定されたワークロードの制約を比較してください。Expo OTA はランタイムの互換性とストアポリシーの範囲内に限られます。審査を回避したり、任意のネイティブコードを配信したりすることは許可されません。あらゆる状況で最速または最小となるフレームワークはありません。

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

リリース前

• プラットフォームの論理単位でタップ領域を確認済み
• オフライン時の動作に対応済み
• セキュアストレージを使用済み
• リストを最適化済み
• ログを削除済み
• ローエンドデバイスでテスト済み
• アクセシビリティラベルを設定済み
• 具体的なリスクと、実施できなかったチェックを文書化済み

---

11. 関連スキル

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

---

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

---

使用する場面

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

制限事項

• このスキルは、タスクが上記の説明に明確に合致する場合にのみ使用してください。
• 出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、成功基準が不足している場合は、作業を中断して確認を求めてください。

監査ヘルパーと制限事項

対象プロジェクトのディレクトリで、python scripts/mobile_audit.py . --json を実行してください。 このヘルパーは読み取り専用で、検査範囲が限定されており、参考情報を提供します。プロジェクトのコードをインポートすることはなく、準拠を宣言することもありません。compliant は null です。終了コード 2 は、検査が不完全、またはモバイルソースが検出されなかったことを意味します。ソースパターンのヒントはコメントにも一致する場合があり、複数のファイルにまたがる動作を見落とす場合もあります。編集前に検出結果を検証してください。このカタログのレビューでは、シミュレーター、実機、スクリーンリーダー、GPUでの実行は行っていません。

詳細な確認には、タッチ操作のガイダンス、タイポグラフィ、カラー、ナビゲーション、意思決定を参照してください。コードブロックはバージョンに依存する断片であり、完全性が認定されたアプリではありません。実行前に、最新の API を確認してください。