Help us understand the problem. What is going on with this article?

画面遷移図の作成

はじめに

自分自身でアプリの構想をしている時に考えたり、実施したことのまとめを書いていきます。

画面推移図とは?

そもそも画面推移図とはどんなものなのでしょうか?

画面遷移図はサービスの全体像を捉えたり、画面間の相互関係を示す時に使われます。

「画面遷移図の作り方とおすすめのツール」より引用
https://webdesign-trends.net/entry/7313

上記のように画面を操作した際に画面がどのように動いていくのかということを表したものということです。

作成前の準備やること

私が自分自身で考えるにあたってやったことは下記の通りです。

  • 自分の作りたいものをある程度イメージする。
  • 参考になるサイトを見つけて自分で考える。

上記のことが大体できていれば準備は完了です。

作成手順〜手書きの場合〜

A4の紙に自分自身で構想した、ページを書いてみました。
簡単なものから少しずつ書いてあとでHTMLとしてどう動かしていくのかということをCSSフレームワーに当てはめるベースにしていきました。

作成手順〜図表での場合〜

手書きで書いたものがある程度溜まって、CSSフレームワークにも当てはめられた時には「Excel」で細かく分けていきました。

図表を作成することで他の人にも共有できるようにしていきました。

おわりに

今回は手書きとExcelでのまとめになりましたが、他にもアプリで作る方法などもあるので自分自身に合うものを探していくといいかもしれません。

私も他のものも今後試していきたいと思っています。

参考サイト・引用サイトの一覧

「画面遷移図の作り方とおすすめのツール」
https://webdesign-trends.net/entry/7313

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした