要件定義書の作成のコツ5（一覧画面の仕様検討の仕方）
私は、WEBシステムの要件定義書を作成したり、他の人が作成した要件定義書をレビューすることがあり、その過程で指摘することも多く、自分で作成する際にもどのように記載すればよりわかりやすい仕様書となるのか？を日々試行錯誤しております。
「要件定義書の書き方をまとめたい！」という思いもあり、今回要件定義書の書き方をまとめてみることにしました！
まだ一部分ですが、要件定義書を作成する参考になれば嬉しいです。
要件定義書とは、サイトをどのような仕様にするかまとめたドキュメントのこと
要件定義書についてざっくり説明すると、WEBのシステム開発をする上で、サイトを作る（プログラミングする）前に、まずどのような仕様にするかをドキュメントにまとめます。このドキュメントのことを要件定義書と呼びます。
家電の取扱説明書には、ボタンを押すとどのような挙動となるかが記載されていますが、そのようなイメージに近いです。
今回のテーマは、「一覧画面にて次ページを表示する際の仕様検討」について
一覧画面には、すべてのデータを1ページに表示させず、何件かのページにわけて表示させる仕様が一般的です。
今回のテーマは、「一覧画面にて次ページを表示する際の仕様検討」について解説していきます。
Step1.ページャー対応をするか、しないか
1-1.「ページャー」とは、以下のようなイメージ
1-2.ページャー対応をするか、しないかは、一覧画面の表示件数で判断
その一覧画面には何件ほど表示する機能なのかによって、ページャー対応するのかを検討していきます。
常時100件未満であれば、ページャー機能は不要で、100件以上表示する一覧画面であればページャー対応はした方が良いかと思います。
1-3.ページャー対応せずに表示件数が多いと、画面表示が遅くなる
一覧に1000件ほど表示してしまうと、画面表示が遅くなってしまいユーザビリティが悪くなってしまいます。
1-4.工数的に問題ないのであれば、ページャー対応しておくのが無難
表示件数が際どく、工数的に余力があるのであれば、今後のことも考慮しページャー対応をしておくのが無難かと思います。
Step2.次ページを表示する際には、次のページリンクを押下で表示？自動で次のページを読み込む？
次ページを表示する際に、
次のページリンクを押下させるのか？
画面下部に到達すると自動で次のページを表示するか？
を検討していきます。
2-1.自動で次のページを読み込む挙動について
まずは、自動で次のページを読み込む挙動についてのおさらいですが、以下のようなイメージとなります。
（次のページリンクの押下については上記で説明した通り。）
2-2.次ページを表示する際には、次のページリンクを押下させる場合
次のページリンクを押下し次ページを表示する場合、次のページリンクを押す手間はあるものの、画面をしばらく放置したのちに表示してもそのページから再開できたり、一覧の詳細データをクリックし、戻ってきた際にもそのページから再開できます。
2-3.画面下部に到達すると自動で次のページを表示させる場合
画面下部に到達すると自動で次のページを表示させる場合、スクロールしていくと次のページが自動で表示されるので手間は省けます。
ただし、一覧画面の詳細データをクリックし、ブラウザバックで戻ってきた際には、自動読み込みしたエリアが消えてしまうことがあり（※）、再度最初のページからスクロールをしていく必要があるため、ユーザビリティは悪くなってしまいます。
※自動読み込みは、基本JavaScriptでエリアをレンダリングするため、ブラウザバックで一覧画面で戻った際に、ブラウザによっては自動読み込みしたエリアが消えてしまう可能性があります。
Step3.一覧画面の詳細画面遷移時には新規ウィンドウ？塗り変わり遷移？
詳細画面から一覧画面に戻り方について、もう少し深掘っていきます。
一覧画面に100件する前提で、詳細画面へ遷移し、再度一覧画面に戻った際には、詳細画面を押下した箇所に戻ってもらいたいものです。
3-1.新規ウィンドウにした場合
新規ウィンドウにした場合は、一覧画面を残しつつ、別ウィンドウで詳細画面を表示するため、一覧画面を再度表示しても、詳細データをリンクした箇所をそのまま表示することが可能です。ただしブラウザのタブが多くなってしまいます。
3-2.塗り変わり遷移にした場合
塗り変わり遷移にした場合、同一ウィンドウで詳細画面を表示するため、一覧画面に戻る際に、元いた位置に戻れない可能性が高く、一覧画面の最初の位置に戻ってしまう場合があります。
おわりに
以上で終わりとなります。
要件定義書には、仕様を漏れなく記載し、わかりやすく、認識誤りがないようにまとめていく必要がありますので、なかなか大変な作業です。
ですが、気を付けるポイントを意識し、どのような目的のドキュメントなのかを考えながら、日々作成に取り組むと徐々に良いドキュメントになってくるかと思います。
最後まで読んで頂き、ありがとうございました！
前回までの記事
おまけ
デザインに関しては素人なのですが、最近canvaでサイトのデザインを実験的に作ってみてます！
もしよければ以下の記事も読んで頂けると嬉しいです！