App Layout

iOS / Android アプリのレイアウト構造・ナビゲーション・画面パターンの設計判断基準を提供する。 React Native、Flutter、SwiftUI、Jetpack Compose いずれのフレームワークでも適用可能な プラットフォーム横断の設計原則をまとめている。 --- ## トリガー アプリ開発、モバイルアプリ、iOS設計、Android設計、アプリレイアウト、 ナビゲーション設計、タブバー、画面遷移、レスポンシブアプリ、 SwiftUI、Jetpack Compose、React Native、Flutter --- ## 1. アプリの基本構造（Anatomy） ### 3つの領域 ``` ┌──────────────────────────┐ │ System Bar │ ← ステータスバー（時刻・バッテリー等） ├──────────────────────────┤ │ Navigation Area │ ← アプリバー / ナビゲーションバー ├──────────────────────────┤ │ │ │ Body │ ← メインコンテンツ │ │ │ │ ├──────────────────────────┤ │ Navigation Bar / Tab Bar │ ← ボトムナビ / タブバー ├──────────────────────────┤ │ System Navigation │ ← ホームインジケーター / ナビバー └──────────────────────────┘ ``` ### Safe Area コンテンツを配置してよい安全領域。以下を避ける: | 要素 | iOS | Android | |------|-----|---------| | ノッチ / Dynamic Island / カットアウト | Safe Area Inset (top 54-68pt) | Display Cutout Inset | | ホームインジケーター | Safe Area Inset (bottom 34pt) | Navigation Bar Inset | | ステータスバー | 含まれる | System Bar Inset | | ソフトウェアキーボード | keyboard avoidance | IME Inset | **原則**: 主要コンテンツはSafe Area内に。背景・装飾はSafe Area外まで拡張（Edge-to-Edge）。 --- ## 2. グリッドシステム ### 共通原則: 8ptグリッド 両プラットフォーム共通で **8の倍数** を基本単位とする。 | グリッド | 増分 | 用途 | |---------|------|------| | 主要グリッド | **8pt / 8dp** | レイアウト、コンポーネント、スペーシング | | 小要素グリッド | **4pt / 4dp** | アイコン内部、細部の調整 | ### カラム数 | 画面サイズ | Android (dp) | iOS | カラム数 | |-----------|-------------|-----|---------| | スマートフォン縦 | = 840dp (Expanded) | iPad横 | **12列** | ### マージン・ガター | サイズクラス | マージン | ガター | |-------------|---------|--------| | Compact (スマートフォン) | **16dp / 16pt** | **8dp / 8pt** |

インストール

購入後にターミナルで実行してください。

正規購入者にはインストールコマンド再実行で最新版が配信されます。

評価とレビュー