スマホとWebで同じタスクがあるなら、地図・一覧・切り替え方など「学び直し不要」の対応関係を保つ
デバイスが変わっても、同じ概念の操作を同じメンタルモデルで使えるように揃える。
どんな問題を解決するか / いつ使うか
モバイルアプリとWebアプリを併存させるプロダクト。エージェントに「Web版も作って」と頼むとき、モバイルの情報設計をそのまま崩さないための指針。
やり方
- 両デバイスで共通の中核概念を列挙する（例: 地図、自分のリスト、場所の詳細、ビュー切り替え）。
- ラベル・並び・主な遷移を揃え、「Webだから別の置き方」を安易に増やさない。
- DESIGN.mdや画面要件に「モバイルとWebで対応する画面／コンポーネント対応表」を1枚書いてエージェントに渡す。
- 実装後は、同じタスクを両デバイスで辿るチェックリストで確認する。
注意点・対応状況
- 画面サイズの差でレイアウトは変えてよい。変えてはいけないのは情報の意味と主要な操作の対応関係。
- 投稿は特定アプリ事例の所感。一般原則として再利用する。
出典
- 投稿者: @adriankuleszo
- 投稿: @adriankuleszo · 2026-10-09
- 収集日: 2026-10-10（JST）