#画面遷移図
どの画面でどんな操作をしたらどのページに移動するかを表記した図のことです。
サービスの全体像を捉えたり、画面間の相互関係を把握しやすいといったメリットがあります。
紙に描いたり、draw.ioなどのツールを使ったりします。
まず、アプリケーションで必要な画面を洗い出します。
- 記事一覧（トップページ）
- 新規登録ページ
- ログインページ
- ユーザー情報詳細ページ
- ユーザー情報編集ページ
- ユーザー情報削除ページ
- プロフィール登録ページ
- プロフィール詳細ページ
- プロフィール編集ページ
- 記事投稿ページ
- 記事詳細ページ
- 記事編集ページ
- 記事削除ページ
- いいね後のページ
- いいねしたユーザー 一覧
- フォロー後のページ
- フォローしたユーザー 一覧
洗い出しが終わったら、図にしていきます。
ー 完成形 ー
ー 画面遷移図の種類 ー
- 画面名だけで作る
- 画面名と機能で作る
- 画面デザインを使って作る
上記は「画面名だけで作る」になります。
ー おすすめツール ー
- Overflow
- Prott
- Draw.io
今回は「Draw.io」を使いました。