モバイルUIモックアップ Mobile UI mockup
Parky モバイルアプリの Web プロトタイプをこのページに埋め込んでいます。
右側のスマホフレーム内を直接タップ/スクロールして、実機に近い操作感で UI を確認できます。
元ファイルは mobileapp/prototype/web/index.html で、docs 配信時に
docs/portal-admin/mock/ 配下に同一オリジンとしてステージングされます。
The Parky mobile app web prototype is embedded right on this page. Interact with the phone frame on the
right exactly as you would on a real device. The source lives at mobileapp/prototype/web/index.html
and is staged into docs/portal-admin/mock/ at deploy time so it serves from the same origin as the docs.
操作パネル Controls
デバイスサイズを切り替えたり、モックを再読み込みしたり、別タブで開いたりできます。
Switch device presets, reload the mock, or pop it out into a new tab.
デバイスDevice preset
アクションActions
ヒントTip:
モック側で地図を表示するには Mapbox トークンがインラインで含まれている必要があります。動作しない場合はリロードしてみてください。
The mock uses an inline Mapbox token to render maps. If the map fails to appear, try reloading.
モックを読み込めませんでした
Failed to load the mockup
ネットワーク／Mapbox トークンの問題の可能性があります。ページを再読み込みするか、しばらく経ってからお試しください。
それでも表示されない場合はプロジェクト管理者に連絡してください。
This may be a network or Mapbox-token issue. Reload the page or try again shortly.
If it still does not appear, please contact the project administrator.
このモックの位置づけ What this mockup is (and isn't)
重要Important:
このモックは動きの参考（ナビゲーション・モーダル・地図操作などのインタラクション）を共有するためのものです。
ピクセルや配色・タイポグラフィの正は Figma
（Parky | Mobile app ↗）
を参照してください。
This mockup is for sharing interaction behavior (navigation, modals, map gestures).
Figma is the source of truth for pixels, color, and typography
(Parky | Mobile app ↗).
- 動作参考：実機相当のタッチ・スクロール・遷移を確認できます。
- Behavioral reference: Touch, scroll, and navigation work like the real device.
- 配信元：単一 HTML + Mapbox GL JS。オフラインでは地図が表示されません。
- Delivery: Single HTML + Mapbox GL JS. Maps require an online connection.
- 更新：モックはプロトタイプ実装に合わせて更新されます。Figma のデザイン更新とは連動しません。
- Updates: The mock follows the prototype code, not the Figma design directly.
どう使う?How to use it:
デザイン確認は Figma、動きの確認はこのモックを使うと認識のずれが起きにくくなります。画面間のナビゲーション、モーダル表示、地図操作のような動的な部分は特にこのモックを基準にしてください。
Use Figma for design review and this mockup for interaction review — that split keeps everyone aligned. For navigation between screens, modals, and map gestures, treat this mockup as the reference.