背景
昨年から会社でWeb開発の手法を学んできましたが、開発技術面がある程度理解できてきたので、設計面での勉強を開始しました(開始させられました)。Udemy「【入門】システム要件定義と基本設計」を視聴して、理解したことをアウトプットしていこうと思います。
Udemyの講義はこちら
https://www.udemy.com/course/digisaku_requirements_definitio
基本設計の進め方
基本設計では、要件定義で定めた要件を満たすシステムの全体完成イメージをビジネス側に伝えることが求められます。実際の業務フローと合わせるために、ビジネス側との連携が重要です。
基本設計の成果物は以下の通りです。
- 画面設計
- 機能設計
- データ設計
要件定義から画面設計、機能設計、データ設計の順で進めますが、要件定義の不備が見つかった場合は都度修正し、1~3の流れも何度か繰り返してブラッシュアップしていきます。
画面設計を最初に作成し、ビジネス側に確認してもらうことで要件定義の検討漏れを発見できます。
UI設計思想
はじめに、要件からタスク志向で作るべきかオブジェクト指向で作るべきかを検討する必要があります。
適切なものを選べないと無駄な動きが多くなります。
事前知識
タスク志向
ユーザーがやりたいことを起点に設計したUIです。
オブジェクトがメインで、操作手順(タスク)に意味があるときに有効です。
タスク志向は、動詞で表されるものに着目した設計思想です。
オブジェクト指向
ユーザーが知りたいことを起点にしたUIで、直観的で使いやすいUIです。
オブジェクトが豊富なパターンに多く、モノに着目した設計思想です。
データの種類
- マスタデータ
オブジェクト固有のデータ - トランザクションデータ
ユーザー操作によって変化するデータ
画面設計の進め方
- 項目の洗い出し
まずは画面に表示すべきオブジェクトとタスクを洗い出します。
オブジェクトを洗い出し、そのオブジェクトに対するタスク(メールに対しての送信、削除、送信など)が決まります。 - 骨組み作り
オブジェクト指向かタスク志向かを決定し、画面遷移図を作成します。 - 肉付け
洗い出したタスクを画面遷移図に当てはめ、すべてのタスクを網羅しているか確認します。
そして画面遷移図をもとにレイアウトを作成します。
このレイアウトをワイヤーフレームと呼びます。
ワイヤーフレームを使用してビジネス側とディスカッションを行い、ワイヤーフレームを作る中で気づいた必要なものも追加します。
※きれいなレイアウトはデザイナーの仕事であるため、大まかな要素と配置が分かればよいです。
機能設計の進め方
- 変動項目の洗い出し
画面設計から変動する項目は、データベース(DB)に保存する必要があります。
どの情報のDBが必要かを洗い出します。 - ユーザ操作の洗い出し
ユーザーが行う操作の処理内容、関連DB、トリガーを洗い出します。
例えば「初期表示」の処理、○○一覧のDB、ページアクセスのトリガーなどです。 - 機能説明
洗い出した操作とDBから機能一覧を作成します。
ユーザー操作の対象ページ、トリガーに加えて詳細な処理内容、必要なDBのデータ、データの渡し先を記載します。
その後、画面遷移図と機能一覧を紐づけます。
データ設計の進め方
機能設計で洗い出したDB情報からER図を作成します。
- データ構造
テーブルをマスタとトランザクションに分け、どのようなカラムが必要かを定義していきます。 - リレーション定義
テーブル間の参照関係を整理し、ER図に書き起こします。 - 全体の可視化
画面設計、機能設計、データ設計を紐づけます。