スマホアプリのデザインシステム — Apple HIG を主軸に
確認日: 2026-09-05。対象プロファイル: mobile-app。ブランド: Fluxion Partners。
iOS / iPadOS を中心に、文字・意味色・素材・部品・状態・画面遷移・直接操作を一つのシステムとして扱う。Apple の標準部品を選ぶだけでなく、次の基盤とレシピを使って実際の画面を組み立てる。スマホで閲覧する LP・Web アプリには、それぞれの Web プロファイルを使う。
制作時に読む順序
| 資料 | 決めること |
|---|---|
| iOS 基盤 | 11段階の文字スタイル、意味色、light / dark、Liquid Glass の層、余白・操作領域 |
| iOS 部品・画面レシピ | navigation、tab、検索、一覧、ボタン、switch、segment、sheet、alert、progressと状態 |
| iOS の動きと操作 | Emil の Apple Design 17節の採用、spring・速度・中断・境界・3種のアクセシビリティ設定、出典とMIT |
| 動かせるiOS見本 | 案件一覧→詳細、検索、設定、編集・保存を操作して確認 |
| 本文末の Android 対応 | 同じ情報構造を Material 3 へ対応させる |
実装は基盤の役割を SwiftUI / UIKit へ割り当て、部品表から必要な状態を選び、画面レシピ A〜D でつなぐ。HTML の見本は .fpm-kit / --fpm-* に分離している。CSS と 操作実装 はブラウザ参照キットで、ネイティブ SDK ではない。
iOS の基本形
FP採用規約:
- 文字の階層: 最上位は Large Title、詳細は inline title、通常行は Body、副題は Footnote。根拠は iOS / iPadOS の Dynamic Type
Large (default)表。ネイティブでは semantic text styles を使う。 - 情報の面: グループ背景に、複数の行をまとめた surface を置く。行は主ラベル・副題・値・accessory を意味で使い分け、全件を独立した影付きカードにしない。
- 操作の層: toolbar / tab bar をコンテンツから分ける。Liquid Glass は操作・ナビゲーションに限定して活かし、読む面をすべてガラスにしない。
- 遷移: 一覧→詳細は push、短い編集は sheet、重大な判断は alert。単なる保存成功は文脈内に表示する。
- タブと状態: 「概要 / 案件 / 設定」を見本の基本とし、glyphと短いラベルを表示。タブ間で各画面の状態を保つ。
- 直接操作: 押下 feedback はすぐに、保存等の確定は activate 時に行う。独自の gesture は現位置と速度を引き継ぎ、途中で操作し直せる。ネイティブ標準の動きは OS に任せる。
- ブランド: ブルー系を操作 tint、ライムを控えめなブランド表現に使う。OS の意味色・システム字体・外観設定を優先する。
Apple公式: 標準コンポーネントは対応 OS の外観・動作に適応する。コンテンツとナビゲーションを階層として分ける。Apple HIG、Liquid Glass
公式・独自規約・近似値の区別
| 区分 | このシステムでの扱い |
|---|---|
| Apple公式 | 公式出典と適用条件を示す。文字サイズ表は標準の Dynamic Type 条件を明記 |
| 上流の参考資料 | Emil Kowalski の Apple Design は WWDC の Web 向け翻案。原文・MIT・commitを保存し、Apple公式と分ける |
| FP採用 | ブランド・業務画面向けのルール。例: 主操作一つ、原則44×44 pt、4.5:1の文字コントラスト |
| HTML近似 | 表示用の CSS px / rem、近似の色・寸法・blur。実機の pt、SF フォント、Liquid Glass とは区別 |
優先順位は「OS のアクセシビリティと操作慣習 → 標準コンポーネント → 本プロファイル → ブランド装飾」。旧 Web の白背景、Outfit / Noto、ブルーとライムの同時使用、ダーク背景不採用は旧 Web の表現規約として保持する。iOS のシステム字体や Dark Mode を妨げるルールにはしない。
最低対応 OS と安定版 SDK を案件で記録する。新 API・SF Symbols の availability と代替を用意し、ベータ版や実験 API を共通の必須条件にしない。
共通の受入基準
- [ ] 画面が基盤・部品・レシピのどれを採用したか分かる。通常 / 読込 / 空 / 失敗、編集 / 保存中 / 保存失敗を定義した。
- [ ] iOS は原則44×44 pt以上、Androidは48×48 dp以上。CSS px、pt、dp、spを混同していない。
- [ ] light / dark / increased contrast で読みやすい。通常文字4.5:1、識別に必要なUI3:1というFP基準を確認した。
- [ ] Dynamic Type の最大アクセシビリティサイズで主な作業を終えられる。safe area / keyboard / 回転で重要情報と操作が隠れない。
- [ ] 一覧→詳細→戻る、タブの状態保持、編集sheetの保存・取消・未保存変更、alertの取消を確認した。
- [ ] VoiceOver等に名前・役割・値・選択・無効を伝える。読み順が適切で、スワイプ・長押し以外の操作手段もある。
- [ ] Reduce Motion / Reduce Transparency 等のOS設定に追従し、色・動き・音・振動だけで状態を伝えない。
- [ ] 独自 gesture がある場合、1:1追従・速度による行先予測・途中の掴み直し・境界・cancel・代替操作を確認した。Reduce Motion / Reduce Transparency / Increase Contrastを独立して扱う。
- [ ] SF Symbolsは対象OSで利用できる。ロゴや共通Web / Androidアセットに転用していない。
- [ ] HTML近似の確認とネイティブ実機の検証を区別して記録した。
各案件で実装後に確認・記録する規約であり、この文書だけで実機適合を保証しない。
付録: Android への対応
同じブランド・情報構造を持つ Android アプリは、iOS のバー・戻る操作・書体をそのまま複製せず、Material 3 と Android の慣習へ対応させる。新規実装は Jetpack Compose Material 3 を第一選択とする。既存フレームワークの移行は別途判断する。Google: Material Design 3 in Compose
| iOSでの役割 | Androidでの対応 |
|---|---|
| Tab bar | compactでNavigationBar、広い画面ではrail等へ適応 |
| NavigationStack / split view | 標準back挙動を保つnavigation、list-detail等のadaptive layout |
| system background / label | surface / onSurface、grouped surfaceとcontainer roles |
| brand tint | primary / onPrimary を対で検証 |
| 補助文字 / separator | onSurfaceVariant / outlineVariant等の適切な役割 |
| エラー / destructive role | error / onError / error containerと明示ラベル |
| Dynamic Type / Body | font scaleに追従するsp、Material bodyLarge等 |
| safe area | WindowInsets、system bars、IME、cutoutを扱う |
| Form / switch / picker | Material text field / switch / selection control |
| Sheet / alert / progress | 対応するMaterial部品 |
| SF Symbols | Material系アイコンまたは独自ベクター |
| 文脈内の短い通知 | 必要に応じSnackbar。必須対応の失敗は消える通知だけにしない |
Android の navigation bar は同じ階層の3〜5行先に向く。画面が広くなればrail等に適応する。Google: Navigation bar、Layouts and navigation patterns
操作領域は48×48 dp以上をFP基準にする。Bodyの開始点はMaterial bodyLarge（16 sp / 行高24 sp）。システムの文字・表示サイズとTalkBackで主要な作業を確認する。Google: Accessibility、Window insets
色は役割名で参照し、light / darkの静的テーマを用意する。Dynamic colorを採用する場合も未対応環境のfallbackを定義する。元のブランドHEXと生成されたprimaryを同一視しない。M3 Expressiveや実験APIは採用する個別機能の安定性を確認する。Google: Android color