2026年5月30日（土）

今日やったこと

TSUMOO-10 公開トップページ実装の最終調整を行い、完了扱いにできる状態まで整理
TSUMOO-30 認証画面コーディングとして、ログイン画面の UI 実装を進めた
認証処理は後続タスクに残し、まずは画面コーディングとしてフォーム、ボタン、リンク、エラー表示枠を用意
PC / SP それぞれでログイン画面の見え方を確認しながら、余白、カード幅、文字サイズ、ボタン色、リンク色を調整
ログイン状態を保持するチェックボックス、パスワード表示切り替え、Google ログインボタンの見た目を追加
Font Awesome を導入し、メールアドレス、パスワード、表示切り替えアイコンを CSS 手書きではなくアイコンとして扱う形にした
トップページと認証画面で、オレンジやブラウンの色味が大きくずれないように調整
認証画面で使う画像アセットを整理し、不要な画像を削除しやすい構成にした
npm run lint を通して、ログイン画面実装後の状態を確認

ロードマップ

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

進捗: 11 / 38件

今日対応したタスク

完了 TSUMOO-10 公開トップページ実装
完了 TSUMOO-30 認証画面コーディング

完了したタスク

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-31 新規登録画面コーディング
TSUMOO-32 パスワードリセット画面コーディング
画面コーディングを一通り進めたあと、認証や登録などの処理実装に入る

考えたこと

今日は、公開トップページで作った Tsumoo らしいやわらかい雰囲気を、認証画面にもつなげる作業をしました。

ログイン画面は、処理としてはまだ何もしない状態ですが、ユーザーが最初にアカウントへ入る入口になるため、見た目の安心感とフォームとしての分かりやすさを優先しました。モックを参考にしつつ、トップページと同じブラウン、ベージュ、オレンジ、植物モチーフのトーンから外れないようにしています。

また、今回から画面コーディングを先にまとめて進める方針に切り替えました。登録処理やログイン処理を先に作り込むよりも、アプリ全体の画面体験を先に見える形にすることで、実装のスケジュールを調整しやすくするためです。

決めたこと

認証処理、Google 認証、パスワードリセット処理は、今回の画面コーディングでは実装しない
ログイン画面には、ログイン状態を保持するチェックボックスを置く
/register と /forgot-password への導線は、ページ未実装の段階でも先に配置する
フォームのフォーカス色は強いオレンジではなく、植物モチーフに合うグリーン寄りの色にする
認証画面のボタンやリンクの色味は、トップページの CTA と同じ基準に寄せる
画像アセットは、後から差し替えや削除がしやすいように用途が分かる名前で整理する
next/image の最適化キャッシュで画像の見え方がぶれる場合は、必要に応じて対象画像だけ最適化を外す

次にやること

新規登録画面の画面コーディングに入る
パスワードリセット画面の画面コーディングに入る
ログイン画面で整えたフォーム、ボタン、リンクの見た目を、後続画面の基準として使う
画面コーディング系タスクの進め方に合わせて、必要に応じて公開ロードマップの表記も整理する