UI設計・機能設計をやってみる
前書き
前回、こんな感じで要件定義をしました。
今回はUI設計・機能設計（処理内容・データ・操作)をやっていきます。
melheaven.hatenadiary.jp
UI設計
必要最低限の画面は以下の3つ。加えてログイン画面・マイページ（パスワード変更など）とかですかね。
- 社員・学生メイン画面
- 個人ページ画面
- 個人ページ編集画面（Qiitaっぽく）
製作はFigmaを用いました。
www.figma.com
機能設計
1. 社員・学生メイン画面
機能名：「タグ別に登録個人ページを表示する」
【必要なデータ】
- フォームで取得したい情報：タグ情報
- タグ情報と個人記事のURL、タイトル
【処理内容】
- 検索フォームからタグ情報を受け取る
- DBにて検索結果に該当する上位20〜30件を取得
- 続きの20〜30件を取得
【ユーザー入力】
- 「続き」ボタンをクリック
2. 個人ページ画面
機能名：「個人のページを表示する」
【必要なデータ】
- 記事の中身（マークアップ形式→HTML形式）
【処理内容】
- DBからマークアップで記載されたHTMLを取得
- 「いいね！」を押すとDBに格納される
- DBに格納されたいいね数を非同期で取得
【ユーザー入力】
- いいね！ボタンをクリック
3. 個人ページ編集画面
【必要なデータ】
- 記事の編集過程（マークアップ言語で）
- 記事の編集を非同期でプレビューにて表示
- 公開 or 非公開の情報
- ログイン情報
【ユーザー入力】
- 記事の編集
- マークアップでの記述をサポートする機能
- 公開 or 非公開ボタンをクリック
4. タイトルバー
機能名：「重要ページへの遷移」
【処理内容】
- アカウント作成ページに遷移
- ログインページに遷移
- マイページに遷移
【ユーザー入力】
- アカウント作成ページをクリック
- ログインページをクリック
- マイページをクリック
5. マイページ
【処理内容】
機能名：「いいね！」したページの表示
- 「いいね！」したページを上位10件を取得
- 続きの10件を取
【必要なデータ】
- ユーザーがいいね！した記事
- ユーザー情報
【ユーザー入力】
- 「いいね！」ページのクリック
- マイページのパスワード変更のクリック
最終的なイメージ
次回
次回はデータ設計をしていきます。
データの具体的中身・データベース設計・データフローを設計してER図に落とし込みます。
