2026年5月29日（金）

今日やったこと

• TSUMOO-10 公開トップページ実装を進め、トップページの実装とビジュアル調整を大きく前進
• Next.js の公開トップページを、モックの雰囲気に合わせて PC / SP / タブレット幅で調整
• 再現が難しい装飾やイラストを画像アセット化し、Tsumoo らしいやわらかい見た目に寄せた
• ヒーロー、機能紹介、使い方、フェーズ案内、下部 CTA、フッターの構成を整理
• 管理画面プレビュー画像を PC / SP で出し分ける構成に変更
• Chrome console に出ていた preview 画像の preload 警告を解消
• npm run lint と Next.js build を通して、表示調整後の状態を確認

ロードマップ

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

進捗: 9 / 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-10 公開トップページ実装の最終確認・修正
• TSUMOO-11 認証画面実装
• TSUMOO-12 登録処理実装

考えたこと

今日は、Tsumoo の公開トップページを実装しながら、デザインの基準をかなり丁寧に作り込みました。

最初は HTML / CSS だけでモックの雰囲気を再現しようとしましたが、イラストやカード内の細かな見え方は、手組みだけだとどうしても印象がぶれやすいことが分かりました。そこで、振り返り画面のプレビュー、植木鉢、芽、カレンダー、グラフ、フェーズ案内の芽と旗などは画像アセットとして扱う方針にしました。

また、PC、SP、タブレット幅で見え方を確認しながら、ヒーローの文字、ボタン、プレビュー画像、植木鉢の位置を調整しました。特に SP では、モックに合わせて左側に説明文とボタン、右側に画面プレビューが見える構成にし、トップページの第一印象が崩れないようにしました。

決めたこと

• 公開トップページの 無料ではじめる は /register へ遷移する
• ログイン / ログインする は /login へ遷移する
• 認証済みユーザーの /app/dashboard リダイレクトは、TSUMOO-10 では実装しない
• 公開トップページの管理画面プレビューは、実 UI を再現するのではなく紹介用画像として扱う
• PC / SP の管理画面プレビューは <picture> で出し分ける
• 画像アセットは、モックの雰囲気を保つために必要な範囲で利用する
• 下部 CTA の装飾画像は、不要な preload / LCP 警告を避けるため CSS 背景として扱う
• ロゴ、大見出し、本文、ボタン、カードでフォント方針を分ける
• フッターには ログイン / 新規登録 リンクを置かず、コピーライトを中心にシンプルに見せる

次にやること

• 公開トップページを PC / SP / タブレット幅で最終確認する
• 問題がなければ TSUMOO-10 を完了に変更し、次の認証画面実装へ進む
• TSUMOO-11 認証画面実装に入る前に、認証画面の設計書と UI 方針を再確認する
• トップページ実装で見えてきた設計変更点があれば、設計書側にも反映する