画面カタログ (全25画面) Screen catalog (25 screens)

モバイルアプリに存在する全画面の一覧です。分類・目的・主要UI・ユーザー操作・ 呼び出される API を記載しています。太字エントリには詳細カードを下部に添付しています。 画面設計の一次情報源は Figma となりますが、本書は仕様＋実装観点の補完ドキュメントです。

A complete inventory of every screen in the mobile app — with category, purpose, key UI elements, user actions, and the APIs each screen calls. Selected screens have detailed cards underneath. Figma remains the source of truth for visual design; this document complements it from a spec and implementation perspective.

画面マップ Screen map 

flowchart LR
  Splash([スプラッシュ]) --> Onb([オンボーディング])
  Splash --> Auth([認証])
  Onb --> Auth
  Auth --> Home([ホーム/Map])
  Home --> Filter([検索絞り込み])
  Home --> Result([検索結果])
  Home --> Detail([駐車場詳細])
  Result --> Detail
  Detail --> ParkStart([駐車開始])
  ParkStart --> ParkMgr([駐車管理])
  ParkMgr --> ParkDetail([駐車詳細])
  ParkDetail --> ParkEnd([駐車終了])
  ParkEnd --> Review([レビュー投稿])
  ParkEnd --> History([駐車履歴詳細])
  Home --> Saved([Saved])
  Home --> Notif([通知一覧])
  Home --> Profile([プロフィール/設定])
  Profile --> Premium([プレミアム])
  Profile --> Support([サポート])
  Profile --> Policy([ポリシー/規約])
  Profile --> SearchHist([検索履歴])
  Home --> Media([メディア一覧])
  Media --> MediaDetail([メディア詳細])
  Home --> Register([駐車場登録])
  Auth --> Perm([権限リクエスト])
  Home --> Err([エラー])

全画面一覧表 Full screen list

# 画面名Screen 分類Category 種別Type 目的Purpose 主要APIKey APIs
01 スプラッシュ画面Splash screen 認証/初期化Auth/init 全画面Full screen 初期化・ログイン状態判定・必須マスター取得Bootstrap, session check, essential master data supabase.auth.getSession(), codes
02 オンボーディング画面Onboarding 認証Auth 全画面Full screen 初回利用者への価値訴求（3〜5枚のスライド）Value pitch for first-time users (3–5 slides) —
03 認証画面Auth screen 認証Auth 全画面Full screen サインイン / サインアップ / OTP / PW再設定Sign-in / sign-up / OTP / password reset signInWithPassword, signUp, verifyOtp
04 ホーム（Map）画面Home (Map) 検索Search 全画面Full screen 地図上で駐車場を検索・閲覧、アプリのエントリーポイントMap-based parking search and the app's main entry point nearby_parking_lots RPC, Mapbox
05 検索絞り込み設定画面Search filter settings 検索Search モーダルModal フィルタ・検索条件の詳細設定Detailed filter and search-criteria settings —（ローカル状態のみ）— (local state only)
06 検索結果一覧画面Search results list 検索Search タブ/ボトムシートTab / bottom sheet 検索結果をリスト形式で表示Search results rendered as a list nearby_parking_lots RPC
07 駐車場詳細画面Parking lot detail 検索Search 全画面Full screen 駐車場の詳細・料金・レビューをタブで表示Lot details, pricing, and reviews shown via tabs parking_lots, parking_reviews, parking_lot_pricing_rules
08 駐車開始画面Start parking 駐車Parking モーダルModal 駐車開始前の確認・条件設定Pre-parking confirmation and options create_parking_session RPC
09 駐車管理画面Parking management 駐車Parking 全画面Full screen 駐車中・過去の駐車履歴を一覧Current and past parking sessions parking_sessions
10 駐車詳細画面Parking detail 駐車Parking 全画面Full screen 駐車中の詳細情報（経過時間・料金・グラフ）Live session details (elapsed time, fare, graph) parking_sessions, Realtime
11 駐車終了フロー画面End parking flow 駐車Parking 全画面Full screen 終了確認〜Good/Bad 評価〜レビュー導線Confirm → Good/Bad rating → review entry finalize_parking_session RPC
12 レビュー投稿画面Post review レビューReview モーダルModal 評価・コメント・写真投稿Star rating, comment, and photo upload parking_reviews INSERT, R2 upload
13 駐車履歴詳細画面Parking history detail 駐車Parking 全画面Full screen 過去履歴の確認・メモ編集Review past sessions and edit memo parking_sessions UPDATE
14 メディア一覧画面Media list メディアMedia 全画面Full screen 記事コンテンツ一覧Article content list articles
15 メディア詳細画面Media detail メディアMedia 全画面Full screen 記事詳細表示（WebView or ネイティブ）Article detail view (WebView or native) articles
16 Saved（お気に入り）画面Saved (favorites) 保存Saved 全画面Full screen 保存した駐車場一覧List of saved parking lots user_saved_parkings
17 通知一覧画面Notifications list 通知Notifications 全画面Full screen アプリ内通知を時系列で表示In-app notifications in chronological order user_notifications, Realtime
18 プロフィール/設定画面Profile / settings 設定Settings 全画面Full screen プロフィール編集・各種設定Profile editing and app settings app_users
19 駐車場登録画面Parking lot registration 投稿Submission 全画面Full screen 新規駐車場の登録申請Apply to register a new parking lot owner_applications or parking_new_registrations
20 プレミアムプラン画面Premium plan 課金Billing 全画面Full screen プラン登録・契約状況・解約Subscribe, view status, cancel StoreKit / verify-iap-receipt
21 サポート画面Support サポートSupport 全画面Full screen 問い合わせ作成・履歴・チャットCreate inquiry, history, chat support_tickets
22 ポリシー / 規約画面Policy / terms その他Other 全画面Full screen 利用規約・プライバシーポリシーTerms of use and privacy policy 静的 or CMSStatic or CMS
23 検索履歴 / 保存条件画面Search history / saved conditions 検索Search 全画面Full screen 過去の検索履歴と保存した検索条件Past search history and saved conditions ローカル (Isar)Local (Isar)
24 権限リクエスト画面Permission request システムSystem モーダルModal 位置情報・通知の権限を説明・要求Explain and request location / notification permissions permission_handler
25 エラー画面Error screen システムSystem 全画面Full screen 通信エラー・位置情報取得失敗・メンテナンス時Network error, geolocation failure, maintenance —

代表的な画面の詳細 Detailed anatomy of key screens

04. ホーム（Map）画面 04. Home (Map)

目的Purpose

Parky の中心画面。地図上で駐車場をピン表示し、フィルタ・並び替え・AI 検索のエントリーポイントとなる。

The heart of Parky. Parking lots appear as pins on a map, and this screen is the entry point for filtering, sorting, and AI search.

主要UIKey UI

  • 上部：検索バー（目的地入力 / AI検索切替）
  • Top: search bar (destination input / AI search toggle)
  • 右上：現在地ボタン、表示オプション
  • Top-right: current-location button, display options
  • 中央：Mapbox 地図、駐車場ピン（通常 / ランキング 🥇🥈🥉 / 広告プロモ）
  • Center: Mapbox map with pins (normal / ranking 🥇🥈🥉 / promoted)
  • 下部：ボトムシート（検索結果リスト、並び替えチップ、フィルタチップ）
  • Bottom: bottom sheet (results list, sort chips, filter chips)
  • フローティング：駐車中のセッションがあれば「駐車中バブル」
  • Floating: active-session "parking bubble" when one exists
  • タブバー：ホーム / Saved / 通知 / プロフィール
  • Tab bar: Home / Saved / Notifications / Profile

主要操作Key operations

  • 地図パン／ズーム → デバウンス250ms後に再検索
  • Pan / zoom the map → re-query after a 250 ms debounce
  • ピンタップ → ボトムシートに詳細プレビュー
  • Tap a pin → preview appears in the bottom sheet
  • ピンダブルタップ or プレビュータップ → 駐車場詳細画面へ遷移
  • Double-tap a pin or tap the preview → navigate to the lot detail screen
  • 検索バータップ → 検索ボックス展開、入力中は候補表示
  • Tap the search bar → expand with live suggestions while typing
  • フィルタチップ → 検索絞り込み設定モーダル
  • Filter chip → open the search-filter settings modal

状態States

  • loading / success / empty（該当駐車場なし） / error
  • loading / success / empty (no matching lots) / error
  • GPS 未許可：許可ダイアログを1回表示後、拒否継続時は現在地ボタンを無効化
  • GPS not granted: show the permission dialog once; keep the current-location button disabled while denied

呼び出しAPICalled APIs

  • nearby_parking_lots(lat, lng, radius_m) RPC
  • nearby_parking_lots(lat, lng, radius_m) RPC
  • Mapbox Geocoding（目的地入力時）
  • Mapbox Geocoding (when entering a destination)
  • ads・boosts（広告プロモピン）
  • ads / boosts (promoted pins)
07. 駐車場詳細画面 07. Parking lot detail

目的Purpose

駐車場1件の情報を全て表示し、駐車開始・保存・レビュー投稿の導線を提供する。

Shows everything about a single parking lot and acts as the entry point for starting a session, saving, and posting a review.

タブ構成Tabs

  • 基本情報：名前、住所、座標、収容数、構造、営業時間、車両制限（高さ/幅/長さ/重量/最低地上高）、決済手段
  • Basics: name, address, coordinates, capacity, structure, hours, vehicle limits (height/width/length/weight/clearance), payment methods
  • 料金：時間帯/曜日別ユニット料金＋最大料金。リアルタイム計算機付き（入出庫時刻を指定して想定料金を算出）
  • Pricing: time-of-day / day-of-week unit charges plus cap rules, with a live calculator (enter arrival/departure times for an estimate)
  • レビュー：星評価の分布、レビュー一覧（新着順/評価順）、写真ギャラリー
  • Reviews: star-rating distribution, reviews list (newest / top-rated), photo gallery
  • 画像：施設の外観・入口・内部写真をスワイプ表示
  • Images: swipeable photos of the exterior, entrance, and interior
  • タグ/属性：24h・屋根付き・EV・大型車対応等のタグ
  • Tags / attributes: tags such as 24h, covered, EV, large-vehicle friendly

主要操作Key operations

  • 「駐車開始」ボタン → 駐車開始モーダル
  • "Start parking" button → start-parking modal
  • ハートアイコン → Saved に追加/削除
  • Heart icon → add to / remove from Saved
  • 「誤情報を報告」 → 誤情報報告モーダル
  • "Report incorrect info" → error-report modal
  • 「レビューを書く」 → レビュー投稿画面
  • "Write a review" → post-review screen
  • 共有ボタン → Deep Link 共有
  • Share button → share via deep link

呼び出しAPICalled APIs

  • parking_lots SELECT（parking_lot_images, parking_lot_tags, parking_lot_attributes, parking_lot_pricing_rules, parking_lot_payment_methods 含む）
  • parking_lots SELECT (including parking_lot_images, parking_lot_tags, parking_lot_attributes, parking_lot_pricing_rules, parking_lot_payment_methods)
  • parking_reviews SELECT
  • parking_reviews SELECT
  • user_saved_parkings INSERT/DELETE
  • user_saved_parkings INSERT/DELETE
10. 駐車詳細画面（駐車中） 10. Parking detail (active session)

目的Purpose

駐車中の状態をリアルタイムに可視化。経過時間・累計料金・ルール適用内訳を表示し、アラート設定を行う。

Visualizes an active parking session in real time — elapsed time, running fare, rule-by-rule breakdown — and lets users configure alerts.

主要UIKey UI

  • 大きなタイマー（経過時間 / 予定時刻まで）
  • Large timer (elapsed time / time until planned end)
  • 累計料金（1分ごとに更新）
  • Running fare (updated every minute)
  • 料金推移グラフ（時間帯ごとのユニット料金を折れ線表示）
  • Fare-trend graph (line chart of per-period unit charges)
  • 料金ルール適用内訳リスト
  • List of which pricing rules were applied
  • アラート設定カード（料金閾値 / 予定時刻）
  • Alert-settings card (fare threshold / planned end time)
  • 「駐車終了」ボタン（確認ダイアログ付き）
  • "End parking" button (with a confirmation dialog)
  • メモ・写真編集
  • Edit memo and photos

更新戦略Update strategy

  • 料金計算はクライアントローカル（純関数）で1分ごとに再計算
  • Fare is recomputed every minute on-device via a pure function
  • Realtime 購読で他端末からの変更を受信
  • Realtime subscription receives changes from other devices
  • Push 受信時にフォアグラウンドへ戻ったらローカル状態を即再同期
  • On returning to foreground after a push, local state is re-synced immediately
11. 駐車終了フロー画面 11. End parking flow

遷移Transitions

  1. 「駐車終了」タップ → 確認ダイアログ
  2. Tap "End parking" → confirmation dialog
  3. 確定 → Edge/RPC finalize_parking_session で最終金額確定
  4. Confirm → Edge/RPC finalize_parking_session locks in the final amount
  5. Good/Bad 評価画面（個人評価、1タップ）
  6. Good/Bad rating screen (one-tap personal rating)
  7. 駐車後メモ入力（任意）
  8. Optional post-parking memo entry
  9. 「レビューを書く」導線 → レビュー投稿画面 or スキップで履歴詳細へ
  10. "Write a review" entry → post-review screen, or skip to history detail
18. プロフィール / 設定画面 18. Profile / settings

セクションSections

  • プロフィール：表示名、アバター、メール、車種（vehicle_type コード）、プレミアムステータス
  • Profile: display name, avatar, email, vehicle type (vehicle_type code), premium status
  • ゲーミフィケーション：現在レベル、総EXP、獲得バッジ、テーマ
  • Gamification: current level, total EXP, earned badges, themes
  • 通知設定：Push 種別ごとの ON/OFF、静音時間
  • Notification settings: per-push-type on/off, quiet hours
  • 一般設定：言語、単位、検索半径デフォルト、地図スタイル
  • General settings: language, units, default search radius, map style
  • データ：検索履歴、駐車履歴エクスポート（CSV / PDF、Premium 限定）
  • Data: search history, parking-history export (CSV / PDF, Premium-only)
  • アカウント：パスワード変更、メール変更、退会
  • Account: change password, change email, delete account
  • サポート：問い合わせ、FAQ、規約、プライバシーポリシー
  • Support: inquiries, FAQ, terms, privacy policy
  • アプリ情報：バージョン、ライセンス
  • App info: version, licenses
17. 通知一覧画面 17. Notifications list

構成Structure

  • タブ：全て / 未読 / システム / プロモーション
  • Tabs: All / Unread / System / Promotions
  • リスト：アイコン、タイトル、本文、日時、既読/未読バッジ
  • List: icon, title, body, timestamp, read/unread badge
  • タップ → 対応する画面へ遷移（駐車セッション / 駐車場詳細 / 記事等）
  • Tap → navigate to the matching screen (parking session / lot detail / article, etc.)
  • スワイプで既読化 / 削除
  • Swipe to mark as read / delete

データData

user_notifications（Realtime 購読）。Push 経由の通知も同じテーブルに記録される。

user_notifications (Realtime subscription). Push-delivered notifications are recorded into the same table.

09. 駐車管理画面 09. Parking management

目的Purpose

駐車中のセッションと過去履歴を横断的に一覧する。

A unified list of the active session and past history.

構成Structure

  • 上部：駐車中カード（あれば）
  • Top: active-session card (if any)
  • リスト：過去セッション（日付降順、月グループ）
  • List: past sessions (newest first, grouped by month)
  • 各行：駐車場名、入出庫時刻、利用時間、合計金額、Good/Bad
  • Row: lot name, arrival/departure time, duration, total fare, Good/Bad
  • フィルタ：期間、駐車場、Good/Bad
  • Filters: period, lot, Good/Bad
  • 「エクスポート」ボタン（Premium）
  • "Export" button (Premium)
20. プレミアムプラン画面 20. Premium plan

構成Structure

  • ヒーロー：Premium で得られる価値訴求
  • Hero: value pitch for going Premium
  • プラン選択：月額 / 年額（年額に割引バッジ）
  • Plan picker: monthly / yearly (discount badge on yearly)
  • 機能比較表：Free vs Plus（AI検索使い放題、広告非表示、履歴エクスポート、優先サポート）
  • Feature comparison: Free vs Plus (unlimited AI search, ad-free, history export, priority support)
  • 現在の契約状況（契約中なら更新日・解約ボタン）
  • Current subscription status (renewal date and cancel button when subscribed)
  • 利用規約・特商法リンク
  • Links to the terms of use and the Specified Commercial Transactions Act disclosure
24. 権限リクエスト画面 24. Permission request

対象権限Target permissions

  • 位置情報：使用中（Always は駐車中 Live Activity で必須）
  • Location: while-in-use (Always is required for the Live Activity during a session)
  • 通知：Push 受信
  • Notifications: for receiving pushes
  • 写真/カメラ：レビュー・メモ写真投稿時に要求
  • Photos / camera: requested when attaching photos to reviews or memos
  • モーション：駐車自動検出（将来）
  • Motion: automatic parking detection (future)

挙動Behavior

  • 最初にアプリ内説明画面 → その上で OS ダイアログを要求（UX ベストプラクティス）
  • Show an in-app explainer first, then trigger the OS dialog (UX best practice)
  • 拒否時は設定アプリへの導線を表示
  • If denied, show a deep link to the system Settings app