02. Figma と画面カタログ
02. Figma & screen catalog
Figma が一次情報源。画面数は全 32（基本 25 + サブ 7）。 Figma is the source of truth. 32 screens total (25 base + 7 sub).
画面のピクセル・配色・タイポグラフィの一次情報源は Figma です。 本ページはその上に乗る「画面一覧・状態・ナビゲーション」の補完ドキュメントです。 動きは埋め込みモックで確認できます。
Figma is the source of truth for pixels, color, and typography. This page complements it with the list of screens, their states, and navigation. The embedded mockup shows how it behaves.
Figma Figma
🎨 Figma でデザインを開く ↗
🎨 Open design in Figma ↗
📱 動きを確認するモック
📱 Interactive mockup
📖 画面ごとの仕様詳細
📖 Per-screen spec detail
Figma の閲覧権限が必要です。アクセスできない場合は Parky 運営に連絡してください。
読み取り権限はプロジェクト契約後に付与します。
Viewing requires access to the Figma file. If you don't have it, please contact Parky.
Read access is granted after the engagement is signed.
デザインシステム（Figma 側で定義） Design system (defined in Figma)
色・タイポグラフィ・コンポーネント規約は Figma のライブラリに含まれています。
Flutter 実装時は lib/theme/ 相当の層に全て Figma のトークンを反映してください。
アプリ内でピクセル直打ちしないこと。
Color, typography, and component specs live in the Figma library.
On the Flutter side, mirror those tokens into a theme layer (e.g. lib/theme/) —
no hard-coded pixel values in screen code.
- カラー：ブランドパープル／ブルーのグラデーションが基調。Figma の
Colorsスタイル参照 - Colors: Purple/blue brand gradient is the backbone. See the
Colorsstyles in Figma - タイポグラフィ：日本語は Noto Sans JP、英数字は Inter（詳細は Figma）
- Typography: Noto Sans JP for Japanese, Inter for Latin (see Figma for sizes)
- アイコン：Lucide 系を採用。Flutter では
flutter_lucide相当 - Icons: Lucide set. Use
flutter_lucide(or equivalent) on Flutter - コンポーネント：ボタン、カード、入力フィールドなどの亜種は Figma で定義済み。1 画面 = 複数コンポーネントの合成
- Components: Buttons, cards, fields, and their variants are all defined in Figma. Screens are compositions of these components
画面一覧（全 32 画面） Screen list (32 in total)
基本画面 25 + サブ画面 7 = 合計 32 画面。各画面の詳細仕様は 画面カタログ詳細（mobile-app/pages.html） を参照してください。
25 base + 7 sub = 32 screens. For the full per-screen spec, see the detailed catalog (mobile-app/pages.html).
基本画面（25 画面） Base screens (25)
| # | 画面名Screen | 分類Category | 目的Purpose | |||
|---|---|---|---|---|---|---|
| 01 | スプラッシュ | Splash | 起動 | Boot | 認証状態の初期判定 | Initial auth check |
| 02 | オンボーディング | Onboarding | 認証 | Auth | 初回アプリ説明 | First-use walkthrough |
| 03 | 権限リクエスト | Permissions | 認証 | Auth | 位置情報・通知・カメラ権限の取得 | Ask for location / notifications / camera |
| 04 | 認証（Sign up / Sign in） | Auth (sign up / sign in) | 認証 | Auth | メール + パスワード認証 | Email + password |
| 05 | ホーム（Map） | Home (Map) | 検索 | Search | 地図で駐車場を俯瞰、検索起点 | Map overview, search entry point |
| 06 | 検索結果 | Search results | 検索 | Search | 条件に合う駐車場の一覧とソート | Matching lots with sort options |
| 07 | 駐車場詳細 | Lot detail | 検索 | Search | 料金・設備・レビュー表示、保存／駐車開始への導線 | Fee, amenities, reviews; save / start parking |
| 08 | 検索絞り込み | Search filters | 検索 | Search | フィルタ条件の詳細設定 | Set detailed filters |
| 09 | プリセット選択 | Preset picker | 検索 | Search | 保存済み検索条件から選ぶ | Pick from saved criteria |
| 10 | 駐車開始 | Start parking | 駐車 | Parking | 車両・時間確定、セッション開始 | Confirm vehicle / time, start session |
| 11 | 駐車管理（セッション中） | Parking manager | 駐車 | Parking | 駐車中の時間・料金・位置の監視 | Monitor time, fee, location while parked |
| 12 | 駐車詳細 | Parking detail | 駐車 | Parking | メモ・写真の追加 | Add notes and photos |
| 13 | 駐車終了 | End parking | 駐車 | Parking | 出庫処理、最終金額の確認 | Finalize session, confirm charge |
| 14 | レビュー投稿 | Review | レビュー | Review | Good/Bad 評価と感想投稿 | Good/Bad rating and feedback |
| 15 | 駐車履歴詳細 | History detail | レビュー | Review | 過去履歴の確認とメモ編集 | Review past sessions, edit memos |
| 16 | Saved（お気に入り） | Saved (favorites) | 保存 | Saved | 保存駐車場一覧 | List of saved lots |
| 17 | 通知一覧 | Notifications | 通知 | Notifications | 受信済み Push / アプリ内通知 | Received push / in-app notifications |
| 18 | プロフィール | Profile | 設定 | Settings | プロフィール表示 + 各サブ画面への導線 | Profile + links to sub-screens |
| 19 | プロフィール編集 | Edit profile | 設定 | Settings | 表示名・アバター・車種の変更 | Change name / avatar / vehicle |
| 20 | プレミアム | Premium | 課金 | Billing | プラン選択・IAP 購入 | Plan selection / IAP purchase |
| 21 | サポート | Support | サポート | Support | 問い合わせ・FAQ | Inquiries / FAQ |
| 22 | ポリシー／規約 | Policies / terms | サポート | Support | プライバシーポリシー・利用規約・特商法表記 | Privacy policy / terms / JP commerce-law notice |
| 23 | 検索履歴 | Search history | 設定 | Settings | 過去の検索条件一覧 | Past search queries |
| 24 | メディア一覧 | Media list | メディア | Media | 記事コンテンツ一覧（TOKYO CAR LIFE） | Article list (TOKYO CAR LIFE) |
| 25 | エラー | Error | 横断 | Cross-cutting | ネットワーク・権限エラー等の表示 | Network / permission / generic error screen |
サブ画面（7 画面） Sub-screens (7)
| # | 画面名Screen | 親画面Parent | 目的Purpose | ||
|---|---|---|---|---|---|
| 06a | AI 検索 | AI search | 05 Home | 自然言語で検索条件を入力 | Natural-language query input |
| 06b | AI 検索結果 | AI search results | 06a | LLM 解釈後の条件で検索 | Search with LLM-interpreted criteria |
| 06c | プリセット管理 | Preset management | 09 | プリセットの保存／編集／削除 | Save / edit / delete presets |
| 18a | 設定 | Settings | 18 Profile | 通知／プライバシー／ログアウト | Notifications / privacy / logout |
| 18b | パスワード変更 | Change password | 18a | Supabase Auth 経由でパスワード変更 | Change password via Supabase Auth |
| 18c | プライバシー設定 | Privacy settings | 18a | 位置情報・分析データの送信可否 | Location / analytics opt-in |
| 18d | メディア詳細 | Media detail | 24 | 記事本文表示（WebView で実装。下記注記参照） | Article body (implemented as a WebView; see note below) |
メディア詳細のスコープ（確定）Scope of the media detail screen (confirmed):
メディア（TOKYO CAR LIFE）の記事本文は
web/home/src/pages/media/ の Astro ページを WebView で表示 します。
ネイティブレンダは採用しません。一覧は GET /v1/articles で取得し、本文は Web へリンクします。
これにより、SEO 側と編集フローが一本化されます。
The article body for the media section is rendered as Astro pages at web/home/src/pages/media/ and embedded via WebView.
Native rendering is not used. The list is fetched via GET /v1/articles, and the body links out to the web.
This keeps SEO and editorial flows unified.
画面遷移マップ Screen navigation map
flowchart LR Splash([01 スプラッシュ]) --> Auth([04 認証]) Splash --> Onb([02 オンボーディング]) Onb --> Perm([03 権限]) Perm --> Auth Auth --> Home([05 ホーム/Map]) Home --> AISearch([06a AI 検索]) Home --> Filter([08 フィルタ]) Home --> Result([06 検索結果]) AISearch --> Result Home --> Detail([07 駐車場詳細]) Result --> Detail Home --> Preset([09 プリセット選択]) Preset --> PresetMgr([06c プリセット管理]) Detail --> ParkStart([10 駐車開始]) ParkStart --> ParkMgr([11 駐車管理]) ParkMgr --> ParkDetail([12 駐車詳細]) ParkMgr --> ParkEnd([13 駐車終了]) ParkEnd --> Review([14 レビュー]) ParkEnd --> History([15 履歴詳細]) Home --> Saved([16 Saved]) Home --> Notif([17 通知一覧]) Home --> Profile([18 プロフィール]) Profile --> Edit([19 編集]) Profile --> Premium([20 プレミアム]) Profile --> Support([21 サポート]) Profile --> Policy([22 規約]) Profile --> Settings([18a 設定]) Settings --> ChangePw([18b パスワード]) Settings --> Privacy([18c プライバシー]) Profile --> SearchHist([23 検索履歴]) Home --> Media([24 メディア一覧]) Media --> MediaDetail([18d メディア詳細]) Home --> Err([25 エラー])
アクセシビリティの最低要件 Accessibility baseline
Flutter 実装時に必ず満たす最低要件。詳細なチェックリストは 06. 非機能要件とストア対応 に掲載しています。
Must-have accessibility requirements for the Flutter build. The full checklist lives in 06. NFR and store submission.
- WCAG 2.1 AA — テキストと背景のコントラスト比 4.5:1 以上
- WCAG 2.1 AA — at least 4.5:1 contrast between text and background
- Dynamic Type — OS のフォントサイズ設定を尊重（最大 200% まで破綻しないこと）
- Dynamic Type — respect the OS font-size setting (must hold up to 200%)
- VoiceOver / TalkBack — ボタン・アイコンに
Semantics属性をつける - VoiceOver / TalkBack — expose
Semanticson buttons and icons - タップターゲット — 最小 44×44 pt（iOS HIG）／ 48×48 dp（Material）
- Tap targets — min 44×44 pt (iOS HIG) / 48×48 dp (Material)
次のステップNext:
画面を把握したら、03. API 契約と認証 で実装契約を確認してください。
Next, check the implementation contract in 03. API contract & auth.