Skip to content

家事一覧画面UI/UX刷新(スワイプ対応・日付チップ・トースト通知実装案) #69

@stotic-dev

Description

@stotic-dev

関連する問題

家事一覧画面にて、現状は日付やステータスの切り替え操作が直感的ではなく、ユーザー体験に課題があります。

  • 日付ページング(前日・翌日)のスワイプ操作不可
  • ステータスの切替がセグメントタップのみで単調
  • タスクが別ステータスへ移動した際に、現在タブから消えることでユーザーが不安を感じやすい
  • 直感操作やフィードバックが不足し、他のToDo系アプリに比べUI/UXが弱い
現状画面

提案する解決策

推奨UI/UX構成案

  • 日付指定(水平チップストリップ)

    • 上段に日付チップ(±数週間分のアイコン)を横スクロール表示。選択日を常にセンターにスナップ。
    • [今日へ] [カレンダー]ショートカットも併設し柔軟に日付ジャンプ
    • 月跨ぎはカレンダーや月セパレータで補助
    • チップはタップ領域44pt以上・祝日色分け対応
  • ステータスページング(TabView横スワイプ)

    • 未完了/承認待ち/完了は、横スワイプまたはセグメントタップで即時に切替
    • セグメント下にインジケータ表示、現在地を明示
  • タスク移動時のフィードバック

    • ステータス変更時はトースト+Undoボタンを表示(5秒以内ならロールバック可能)
    • 項目はフェードアウトやマッチドアニメーションで「消えた」感を軽減
  • 空状態・ガイダンス

    • 空リストには操作ガイド文+追加CTA(FAB)を明示
    • アイコンやカラーの工夫で親しみやすく
  • アクセシビリティ

    • ヒット領域やコントラスト、VoiceOver案内も考慮

ワイヤーフレーム(Mock)

  • メイン一覧画面

新UIワイヤーフレーム

  • ステータス移動時のトースト+Undo

トーストUndoワイヤーフレーム

  • 空状態

空状態ワイヤーフレーム

代替案

  • 日付は従来型の左右矢印+ポップアップ式DatePickerのみに限定(水平チップ非採用)
  • ステータス切替はセグメントタップのみで横スワイプ非対応
  • トーストやアニメーション無し・現状維持で分かりづらさは残る

その他の情報

  • 構成案・モック画像は要件議論やデザイン確認用。Figma高精細モックも要望あれば追加作成可。
  • 実装メモ・競合ジェスチャ検討、アクセシビリティ・ロケール対応など仕様細部は要すり合わせ。
  • 上記内容で進行・議論し、詳細詰め、フィードバックを基に実装タスクに分割予定。

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions