ページフローの作成

このレッスンでは、ページフローを作成します。まずはその前に、ページフローを作成する為に必要なユーザーフローについて学びましょう。

 

 

• ページフロー
• ユーザーフローを考える
• 課題

 

ページフロー

以下はユーザーフローの例です。複数のユーザーの動きを想定して、それぞれのユーザーの遷移パターンやページを図にしています。また、この図はIllustratorで一枚にすべて描いています。

 

このように、IllustratorやPhotoshopなどでも良いですが、手書きでもまったくかまいません。有名なアジャイル本ではこのような手書きが手軽で良いと解説されています。

しかし、IllustratorやPhotoshopなどで作成するとなるとかなり時間がかかりそうですし、手描きであってもどの程度作りこめば良いのでしょうか。

 

 

 

https://pragprog.com/book/rails5/agile-web-development-with-rails-5

 

ユーザーフローを考える

ユーザーがとる行動のことをユーザーフローと言います。今回の場合は大きく2つのユーザーフローが考えられます。

• 記事の投稿フロー
• 記事の閲覧フロー

 

これをページフローに落とし込みます。今現在、考えつく範囲でページフローを作成していきましょう。投稿フローの例は以下です。

クリップは、ログインしているユーザーのみが投稿できるようにします。ログイン後に、URLをフォームに貼り付けて投稿します。投稿後は、クリップの詳細ページに遷移します。このページには、オピニオン投稿フォームが表示されています。

 

記事閲覧フローは以下のようになります。記事一覧からは、オピニオンを閲覧する事も出来ます。オピニオンをクリックすると、詳細ページにアクセスする事が出来ます。

 

課題

Newsableのページフローを描きましょう。余力があればオリジナルサイトのフローも描いてみましょう。

ページフローの作成には、Googleスライドを使用します。以下サイトにアクセスして、Googleスライドを使うをクリックします。ログインは、教程１で取得したGoogleアカウントを使用して行って下さい。

https://www.google.com/intl/ja_jp/slides/about/

 

作成を始めるには、以下赤枠の＋アイコンをクリックします。

 

この画面で、ページフローを作成していきます。

 

今回のレッスンは、アプリの表側ともいえる部分の設計についてでした。次のレッスンでは、データフローを作成していきます。これは、アプリ内部の設計になります。では、次のレッスンに進みましょう！