🦁

1分でわかる & 具体で学ぶ設計工程

に公開
設計
tech

家計簿アプリの「設計工程」で作るべきアウトプット

『プロジェクトマネジメントの基本が全部わかる本』を読み、設計工程の重要性を改めて整理した。
設計とは“作る前の完成見取り図”。実装を迷子にしないために、家計簿アプリを題材にまとめる。

画面遷移図

  • ホーム → 入力 → 明細 → 月次レポート → 設定
  • 分岐も明示：現金入力 / レシート撮影 / 銀行連携

画面設計（ワイヤー＋UI）

  • 入力画面
    • 金額（日付・カテゴリ・メモ・支払方法を入力）
    • 金額はテンキー入力、カテゴリは最近使った順に表示
  • 明細画面
    • 日付グルーピング、スワイプで編集・削除、無限スクロール

デザインシステム

  • ボタン / 入力フォーム / カード / タグ / 色・タイポのトークン
  • 金額は等幅フォント
  • 収支カラー（収入＝+、支出＝-）は色覚多様性に配慮

ER図・テーブル定義

  • Users, Accounts, Categories, Transactions, Budgets, RecurringRules, Receipts
  • Transactions(金額, 日付, 税区分, カテゴリID, アカウントID, メモ, 添付ID)

API仕様（OpenAPI）

  • POST /transactions
    • バリデーション：金額 > 0、日付 <= 今日
  • GET /reports/monthly?yyyymm
    • 集計はサーバー側、ページング必須

シーケンス図

  • レシートOCR → 一時保存 → 候補カテゴリ推定 → ユーザー確定 → 確定登録
  • 失敗時のロールバックも明記

バリデーション & エラー設計

  • 金額未入力、未来日、カテゴリ未選択、重複連携明細
  • トースト文言まで定義しておく

権限・セキュリティ

  • 認証：メール＋パスワード、SSO、端末生体認証
  • セキュリティ：CSRF対策、Rate Limit、監査ログ（誰が何円編集）

非機能要件

  • 月次集計 < 1s
  • 家計明細一覧 P95 < 300ms
  • 可用性 99.9%
  • 暗号化 (At-Rest / Transit)

同期・連携設計

  • 銀行API（OAuth2リフレッシュ対応）
  • 重複判定キー：取引ID＋金額＋時刻
  • 再取得戦略を設計

バッチ / スケジュール

  • 定期支出の自動起票（毎月1日 9:00）
  • 月次サマリ再計算

通知設計

  • 予算超過時にプッシュ通知
  • 未分類取引が24h残存でリマインド

監視・計測

  • 登録成功率、OCR成功率、月次継続率、エラー比率
  • Alert条件を定義

データ移行

  • カテゴリの初期セット
  • CSVインポートのマッピング仕様

受け入れ条件（テスト観点）

  • 家賃などの定期支出が自動起票され、月次レポートに反映されること

ここまでを一式に揃えて「設計完了」。
実装はこの地図どおりに進めるだけになる。

Discussion