画面一覧表とは
画面一覧表(Screen List)は、システムが提供する全画面のURLパス・画面名・画面種別・認証要件を一覧化した設計書です。機能一覧表の「小機能」と1対1または1対Nで対応します。
画面一覧表は以下のドキュメントの入力情報として使用されます。フロントエンド開発者はこの一覧を見てルーティング設定を実装し、テスト担当者はこの一覧をもとに画面テストシナリオを作成します。
💡 画面一覧表の用途
① 画面詳細設計書(ワイヤーフレーム)の洗い出し ② フロントエンドルーティング設定の根拠 ③ 認証・認可設計(どの画面が認証必要か) ④ 画面テスト計画書の画面網羅リスト ⑤ サイトマップXMLの生成元
① URL設計の方針
URL設計は、直感的に意味が分かり、RESTful原則に従った命名にすることが重要です。後からのURL変更はSEO・ブックマーク・外部連携に影響するため、設計段階で確定させます。
URL設計のルールとして以下を定義します。
- リソース名は複数形の名詞:
/products/(/getProduct/は不可) - 小文字・ハイフン区切り:
/order-details/(キャメルケース不可) - IDはパスパラメータ:
/products/{id}/ - 操作はHTTPメソッドで表現:GET=参照、POST=作成、PUT=更新、DELETE=削除
- 検索・フィルタはクエリパラメータ:
/products/?category=food&page=2
② 画面種別の分類
画面を種別で分類することで、共通コンポーネントの洗い出しと実装コスト見積に活用できます。
| 画面ID | 画面名 | URLパス | 画面種別 | 関連機能ID | 認証 | 備考 |
|---|---|---|---|---|---|---|
| S001 | ログイン画面 | /login/ | 認証 | F000 | 不要 | 未ログイン時のデフォルトリダイレクト先 |
| S002 | ダッシュボード | /dashboard/ | 一覧(集計) | F001〜 | 必要 | ログイン後のトップページ |
| S010 | 商品一覧 | /products/ | 一覧 | F001 | 必要 | ページング・検索フィルタ付き |
| S011 | 商品詳細 | /products/{id}/ | 詳細参照 | F002 | 必要 | — |
| S012 | 商品登録 | /products/new/ | 入力フォーム(新規) | F003 | 必要 | 担当者ロール以上 |
| S013 | 商品編集 | /products/{id}/edit/ | 入力フォーム(更新) | F004 | 必要 | 担当者ロール以上 |
| S020 | 受注入力 | /orders/new/ | 入力フォーム(ウィザード) | F010 | 必要 | ステップ式入力(3ステップ) |
| S021 | 受注確認 | /orders/confirm/ | 確認 | F010 | 必要 | 入力内容の最終確認 |
| S022 | 受注完了 | /orders/complete/ | 完了 | F010 | 必要 | 直接URLアクセス不可(POST後リダイレクト) |
| S090 | エラー 404 | /404/ | エラー | — | 不要 | 共通404ページ |
| S091 | エラー 500 | /500/ | エラー | — | 不要 | 共通500ページ |
③ 認証・認可要件の定義
各画面に対して認証(ログイン必須か)と認可(アクセスできるロール)を定義します。これは後のセキュリティ実装の設計根拠となります。
- 認証不要:ログインページ・公開ページ(エラーページなど)
- 認証必要・全ロール:一般的なシステム機能ページ
- 認証必要・特定ロール:管理機能・承認機能などロール制限があるページ
⚠️ 直接URLアクセスへの対応を明記する
確認画面・完了画面など、特定のフロー(POSTリクエスト後のリダイレクト)経由でのみアクセスを許可すべき画面は、「直接URLアクセス不可」として明示します。実装時にPRG(Post/Redirect/Get)パターンやセッションチェックを実装する根拠になります。
④ 画面遷移の定義
画面一覧表に加えて、主要な画面遷移フローを表形式またはフロー図で定義します。特に「ウィザード形式(ステップ式)」の画面は、各ステップ間の遷移条件(バリデーション通過・戻るボタン)を明記します。
| 遷移元 | 操作・イベント | 遷移先 | 遷移条件 |
|---|---|---|---|
| S012 商品登録 | 「登録」ボタンクリック | S010 商品一覧 | 入力バリデーション通過 + DB登録成功 |
| S012 商品登録 | 「キャンセル」ボタン | S010 商品一覧 | 無条件 |
| S020 受注入力 | 「次へ」ボタン | S021 受注確認 | 入力バリデーション通過 |
| S021 受注確認 | 「確定」ボタン | S022 受注完了 | DB登録成功 |
| S021 受注確認 | 「戻る」ボタン | S020 受注入力 | 入力値を保持して戻る |
⑤ レスポンシブ対応要件
各画面のレスポンシブ対応(PC/タブレット/スマートフォン)要件を定義します。全画面対応が原則ですが、管理画面はPC専用とするケースも多いです。
| 画面グループ | PC(1024px〜) | タブレット(768px〜) | スマートフォン(〜767px) |
|---|---|---|---|
| 一般ユーザー向け画面 | ○ 必須 | ○ 必須 | ○ 必須 |
| 管理者向け画面 | ○ 必須 | △ 参照のみ対応 | × 対応不要 |
| 認証系画面 | ○ 必須 | ○ 必須 | ○ 必須 |
Python Tips — Djangoのルーティングを一覧出力する
DjangoなどのWebフレームワークでは、既存アプリのルーティング設定から画面一覧を自動生成できます。以下はDjangoのURL設定を解析して画面一覧CSVを出力するスクリプトです。
"""
Djangoプロジェクトのルーティングを一覧出力して画面一覧表の作成に活用する。
Django管理コマンドとして実行: python manage.py show_urls --format=csv
または直接実行する場合は下記スクリプトを使用。
pip install django
"""
import os
import sys
import csv
def get_django_urls(settings_module: str) -> list[dict]:
"""
Django URLパターンを再帰的に収集する。
settings_module: 'myproject.settings' などの設定モジュールパス
"""
os.environ.setdefault("DJANGO_SETTINGS_MODULE", settings_module)
import django
django.setup()
from django.urls import URLPattern, URLResolver
from django.urls import get_resolver
result = []
def collect(patterns, prefix=""):
for p in patterns:
if isinstance(p, URLResolver):
collect(p.url_patterns, prefix + str(p.pattern))
elif isinstance(p, URLPattern):
url = prefix + str(p.pattern)
name = p.name or "(no name)"
callback = getattr(p.callback, "__name__", str(p.callback))
module = getattr(p.callback, "__module__", "")
result.append({
"URLパス": "/" + url.lstrip("^").rstrip("$").lstrip("/"),
"View名": callback,
"URLName": name,
"モジュール": module,
})
collect(get_resolver().url_patterns)
return result
if __name__ == "__main__":
SETTINGS = "myproject.settings" # 自プロジェクトの設定モジュールに変更
urls = get_django_urls(SETTINGS)
# コンソール出力
for u in urls:
print(f"{u['URLパス']:<40} {u['URLName']:<30} {u['View名']}")
# CSV出力
with open("screen_list.csv", "w", newline="", encoding="utf-8-sig") as f:
writer = csv.DictWriter(f, fieldnames=["URLパス", "View名", "URLName", "モジュール"])
writer.writeheader()
writer.writerows(urls)
print(f"\nscreen_list.csv に {len(urls)}件 出力しました")
✅ Flaskの場合
Flaskでは app.url_map を使ってルートを一覧取得できます。for rule in app.url_map.iter_rules(): print(rule.endpoint, rule.rule, rule.methods) で全エンドポイントを出力可能です。
定義チェックリスト
| チェック項目 | 確認ポイント |
|---|---|
| □ 全機能に対応する画面が定義されているか | 機能一覧表の小機能と画面が1対1以上対応しているか |
| □ URLパスが一意で意味のある命名か | RESTful設計原則に従ったURL設計になっているか |
| □ 全画面の認証・認可要件が定義されているか | 未認証アクセス時のリダイレクト先が定義されているか |
| □ 画面遷移が定義されているか | ウィザード形式・確認→完了フローの遷移条件が明記されているか |
| □ 共通画面(エラー・ログイン)が含まれているか | 404・500・ログイン画面などシステム共通画面が網羅されているか |
| □ レスポンシブ対応要件が定義されているか | デバイス別の対応要否が画面グループごとに定義されているか |