2026年5月25日（月）

今日やったこと

• フェーズ1 MVP の画面詳細設計書を作成
• UI 方針書をもとに、画面ごとの目的、主役、表示要素、操作、状態表示を整理
• 認証後共通レイアウトとダッシュボードの画面構成を具体化
• ダッシュボードの PC / SP モックを作成し、採用する方向性を整理
• チェック型タスクとステータス型タスクのクイック作成 UI を整理
• ステータス型タスクの一覧表示、ステータス変更、完了扱いの方針を整理
• タスク詳細画面は独立させず、タスク編集画面に確認・編集・削除を集約する方針にした
• 画像生成用プロンプトと生成モックを、画面詳細設計の補助資料として整理
• すべての画面を同じ密度でモック化せず、実装判断に効く画面を優先する方針にした

ロードマップ

フェーズ1: タスク管理MVP

進捗: 5 / 30件

今日対応したタスク

• 完了 TSUMOO-5 画面詳細設計

完了したタスク

• TSUMOO-5 画面詳細設計
• TSUMOO-4 UI方針整理
• TSUMOO-3 フェーズ1基本設計
• TSUMOO-2 フェーズ1要件定義
• TSUMOO-1 Tsumoo構想整理

次に取り組むタスク

• TSUMOO-6 DB設計
• TSUMOO-7 API設計
• TSUMOO-8 アプリケーション初期構築

考えたこと

今日は、UI 方針書で決めた見た目や操作感を、実際の画面に落とし込む作業を進めました。

画像モックを作りながら確認したことで、文章だけでは見えにくい余白、ボタン位置、カードの大きさ、スマホでの操作感をかなり具体的に確認できました。特にダッシュボードは Tsumoo の中心画面になるため、PC と SP の両方で、作成、一覧確認、完了、振り返りの流れが自然につながるかを重点的に見ました。

一方で、すべての画面を同じ粒度でモック化すると時間がかかりすぎるため、画面詳細設計では「実装判断に効く画面を優先して作り込む」方針にしました。

Tsumoo は毎日触る道具なので、見た目の良さだけでなく、操作の軽さも大事にしていきたいです。

決めたこと

• 画面詳細設計書は、UI 方針書をもとに作成する
• ダッシュボードは、今日のタスク確認、作成、完了、達成状況確認の起点画面として扱う
• SP のダッシュボードでは、チェック型タスクとステータス型タスクを直接クイック作成できるようにする
• チェック型タスクのクイック作成では、任意項目は必要なときだけ開く
• ステータス型タスクのクイック作成では、ステータス選択欄を表示し、下の画面要素を自然に押し下げる
• タスク一覧上で、ステータス型タスクのステータス変更を扱えるようにする
• ステータス型タスクを完了にした場合は完了日を記録し、完了以外に戻した場合は完了日を解除する
• タスク詳細画面は独立させず、タスク編集画面に内容確認、編集、削除を集約する
• 画像生成用プロンプトは、画面詳細設計書とは別の補助資料として管理する
• モック作成は全画面を対象にせず、体験や実装判断に影響する画面を優先する

次にやること

• DB設計に進む
• タスク種別、ステータス、完了日、任意の日付項目の持ち方を整理する
• 画面詳細設計で決めた操作が、DB と API で無理なく扱えるか確認する