2026年6月1日（月）

今日やったこと

• TSUMOO-33 ダッシュボード画面コーディングと TSUMOO-34 タスク一覧画面コーディングの見た目調整を継続
• ダッシュボードPC画面の右カラムに、今日の達成状況と直近7日間サマリーを配置するレイアウトを調整
• サイドバー、下部ナビ、カード、フォーム、ボタン、ステータス表示の見た目を、ログイン後画面の基準として整理
• ダッシュボード背景に植物モチーフ画像を配置し、濃さ、位置、見え方を調整
• タスク一覧のチェックボックスの見た目と操作感を調整
  • 未完了時は四角いチェックボックス
  • 完了時は緑背景とチェックマーク
  • チェック時に左から右へ緑が広がるアニメーションを追加
• 未完了フィルター中にタスクを完了した場合、緑に変化したあと自然に一覧から消えるアニメーションを調整
• 今日の達成状況カードに、達成率に応じた見た目の変化を追加
  • 通常
  • 銅
  • 銀
  • 金
• 今日の達成状況の円グラフと数値が、ページ表示時や完了数変更時にアニメーションするよう調整
• PC / SP のタスクカードに、実施予定時刻や期限表示を追加
• タスク一覧のフィルター、日付条件、ステータス選択の見た目とフォーカス状態を調整
• SP / タブレット表示で、フォーム、ボタン、タスクカード、ステータス表示、ページングの見え方を細かく調整
• npm run lint を通しながら、画面コーディングの状態を確認

ロードマップ

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

進捗: 13 / 38件

今日対応したタスク

• 進行中 TSUMOO-33 ダッシュボード画面コーディング
• 進行中 TSUMOO-34 タスク一覧画面コーディング

完了したタスク

• TSUMOO-32 パスワードリセット画面コーディング
• TSUMOO-31 新規登録画面コーディング
• TSUMOO-30 認証画面コーディング
• TSUMOO-10 公開トップページ実装
• TSUMOO-9 開発環境・基本設定整備
• TSUMOO-8 アプリケーション初期構築
• TSUMOO-7 API設計
• TSUMOO-6 DB設計
• TSUMOO-5 画面詳細設計
• TSUMOO-4 UI方針整理
• TSUMOO-3 フェーズ1基本設計
• TSUMOO-2 フェーズ1要件定義
• TSUMOO-1 Tsumoo構想整理

次に取り組むタスク

• TSUMOO-33 ダッシュボード画面コーディングの最終調整
• TSUMOO-34 タスク一覧画面コーディングの最終調整
• ダッシュボードをアプリ画面全体のUI基準として整理する
• 次の画面として、タスク作成 / タスク編集 / 振り返り / 設定画面へ進む

考えたこと

今日は、ダッシュボードを単なる一覧画面ではなく、毎日使いたくなる画面にするための調整を進めました。

特に大きかったのは、タスクを完了したときの体験です。チェックボックスを押すだけの操作でも、緑に変化するアニメーションやチェックマークの動きがあることで、少し達成感が出ることが分かりました。Tsumooでは「小さなタスクを続ける」ことを大事にしたいので、この小さな気持ちよさはアプリのコンセプトにも合っていると感じました。

また、今日の達成状況カードに金・銀・銅のような控えめなご褒美表現を入れたことで、単なる数値表示ではなく、もう少し前向きに続けたくなるUIになりました。派手にしすぎると違和感がありますが、Tsumooらしいやさしい範囲であれば、達成感を後押しする要素として使えそうです。

PC画面では情報量が多くなりやすいため、右側にサマリーを置き、中央にはクイック登録とタスク一覧を置く構成がかなりしっくりきました。一方で、SPでは情報を詰め込みすぎると使いにくくなるため、必要な情報を絞って見せる方針がよさそうです。

決めたこと

• ダッシュボードは、ログイン後アプリ画面全体のUI基準として扱う
• アプリ画面のフォーム、カード、ボタン、フォーカス表現、ステータス色は、ダッシュボードで整えた見た目を基準にする
• タスク完了時のチェックアニメーションは、Tsumooの体験として重要な要素として残す
• 今日の達成状況カードには、達成率に応じた控えめなご褒美表現を入れる
• 進捗リングや達成率の数値は、ページ表示時や完了数変更時に自然に変化するようにする
• タスク一覧のステータス色は、各画面で一貫させる
• PCでは右カラムにサマリーを置き、SPでは必要な情報を絞って表示する
• 実データ取得、作成処理、編集処理、削除処理、認証ガードは後続タスクで扱う

次にやること

• ダッシュボードとタスク一覧のPC / SP / タブレット表示をさらに確認する
• スクロール領域、ページング、右サマリーの固定表示を調整する
• 不要なCSSや一時的な表示確認用コードを整理する
• TSUMOO-33 / TSUMOO-34 を完了扱いにできる状態まで仕上げる
• 次の画面として、タスク作成 / タスク編集 / 振り返り / 設定画面の設計とモックを確認する