2026年6月2日（火）

今日やったこと

• TSUMOO-33 ダッシュボード画面コーディングと TSUMOO-34 タスク一覧画面コーディングの最終調整を実施
• PC画面のダッシュボード構成を整理
  • 左サイドバーを固定表示
  • 右側の今日の達成状況 / サマリーを固定表示
  • 中央のダッシュボード本体は通常のWebページのようにスクロールできる構成に調整
• タスク一覧のスクロール体験を調整
  • タスク項目部分は内部スクロールできるように維持
  • 件数表示、前へ、次へ、表示件数ボタンはスクロール対象から外す
  • 表示領域は画面の高さに合わせて変わるよう、CSS中心の調整に変更
• PC / SP / タブレットで、タスクカードの表示幅、文字サイズ、余白、ステータス位置を調整
• SP画面のタスク一覧カードを整理し、クイック登録とタスク一覧の見出し、背景色、paddingを近づけた
• SP / タブレット向けに、今日の達成状況カードをタスク一覧の上へ配置
• SP画面では下部の補助サマリーを削除し、主要な情報だけに絞った
• 今日の達成状況カードの表示を調整
  • PC右カラムの達成状況カード
  • SP / タブレット向けの横長達成状況カード
  • 達成率バー、完了数、達成率の見え方
• タスク完了時のアニメーションを調整
  • チェック時に左から右へ緑が広がる動き
  • 未完了フィルター中に完了したタスクが、緑に変化してから自然に消える動き
  • 消えるときに薄くなる表現を追加
• 達成状況カードのご褒美表現を調整
  • 通常
  • 銅
  • 銀
  • 金
• サイドバー / 下部ナビゲーションのアイコンをSVGに差し替え、currentColor で色が追随するよう整理
• 直近7日間サマリーのアイコンを差し替え、カード内のレイアウトを調整
• サイドバー下部に「小さな一歩が、未来の自分をつくる。」のメッセージ画像を配置
• npm run lint を通しながら、画面コーディングの状態を確認

ロードマップ

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

進捗: 15 / 38件

今日対応したタスク

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

完了したタスク

• TSUMOO-34 タスク一覧画面コーディング
• TSUMOO-33 ダッシュボード画面コーディング
• 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-35 タスク作成画面コーディング
• TSUMOO-36 タスク編集画面コーディング
• TSUMOO-37 振り返り画面コーディング
• TSUMOO-38 設定画面コーディング
• ダッシュボードで整えたフォーム、カード、ボタン、ステータス表示を、他のアプリ画面の基準として展開する

考えたこと

今日は、ダッシュボードとタスク一覧を「見た目が整っている画面」から、「実際に使ったときに気持ちよく操作できる画面」に近づける調整を進めました。

特に大きかったのは、タスクを完了したときの動きです。チェックボックスを押すと緑が左から右へ広がり、未完了一覧ではそのあと自然に消えていくようにしたことで、ただの状態変更ではなく、完了した感覚が残る操作になりました。小さなタスクを続けるアプリとして、この「押したくなる」「全部緑にしたくなる」感覚は大事にしたいです。

また、PC画面ではサイドバーと右サマリーを固定し、中央のダッシュボード本体だけを通常のページとしてスクロールできるように整理しました。タスク一覧の中だけでスクロールできる部分と、ページ全体としてスクロールする部分の役割が分かれたことで、かなり使いやすくなりました。

SP画面では、情報を詰め込みすぎず、クイック登録、今日の達成状況、タスク一覧の順で自然に見られる構成にしました。PCと同じ情報をそのまま置くのではなく、SPでは必要な情報だけを見せる方が、日常的に使いやすいと感じました。

決めたこと

• ダッシュボードとタスク一覧は、TSUMOO-33 / TSUMOO-34 として一旦完了扱いにする
• ダッシュボードで整えた見た目を、今後のアプリ画面のUI基準にする
• PCではサイドバーと右サマリーを固定し、中央コンテンツは通常のページとしてスクロールさせる
• タスク一覧の項目部分は内部スクロールを維持し、ページング部分は固定表示に近い扱いにする
• SPでは補助サマリーを置きすぎず、今日の達成状況とタスク一覧を中心に見せる
• タスク完了時のアニメーションは、Tsumooの体験として重要な要素として残す
• サイドバー / 下部ナビ / サマリーのアイコンは、今後も currentColor 前提で差し替えやすくする
• 実データ取得、タスク登録、編集、削除、認証ガードなどの処理実装は後続タスクで扱う

次にやること

• TSUMOO-35 タスク作成画面コーディングに進む
• タスク作成画面で、ダッシュボードのフォームや任意項目表示の方針をどこまで共通化できるか確認する
• タスク編集画面、振り返り画面、設定画面のモックと設計書を確認する
• 画面コーディングが進んだ段階で、不要なCSSや一時的な表示確認用コードを整理する