資産管理アプリ開発記録 – 1.要件定義とデザイン

はじめに

前回、ことはじめとして個人開発の目標、作りたいもの、そしてロードマップを立てたので、今回はロードマップに沿って「1. 要件定義とデザイン」をやっていく。

デザインはなんとなくわかるが要件定義に関しては、何をすればいいのかなんて正直全然わからないので、Chat GPTの力も借りつつとりあえずやってみる。

現時点だと抜け漏れも多くあるだろうけど、個人開発なので開発進めながら柔軟に対応していこうと思う。

１．プロジェクト目標

※以後、引用部分はChatGPTが返してくれたもの。

プロジェクトの目的を整理し、具体的なゴールを明確に定義します。どのようなアプリケーションを作成するのか、どのような機能や特性を持つべきかを明確にします

資産管理アプリを開発して、アシタカ家の資産（財産や投資、負債など）を追跡し、グラフィカルに管理することを目指す。

今までGoogleスプレッドシート管理してきたものを本アプリに移管する。

めんどくさがりやなので、プラス収支、マイナス収支を都度入力するのではなく月に一度のタイミングで口座ごとの残高を入力し、総資産や推移を確認できるような機能を持つアプリを開発する。

２．ユーザストーリー

ユーザーの視点から、アプリケーションの使用例をストーリー形式で考えます。例えば、「ユーザーはログインしてアカウント情報を編集できる」といったユーザーストーリーを作成します。

ユーザアカウントの作成
- ユーザーとして、アプリケーションに新しいアカウントを作成したい。
  - アカウント作成時には、ユーザー名、メールアドレス、パスワードを入力し、アカウントを作成するボタンを押す。
  - アカウント作成が成功すると、ログインページにリダイレクトされる。
ログインとログアウト
- ユーザーとして、既存のユーザーでログインしたい。
  - ログインページにて、登録済みのメールアドレスとパスワードを入力し、ログインボタンを押す。
  - ログインが成功すると、ダッシュボードページにリダイレクトされる。
- ユーザーとして、ログアウトしたい。
  - ダッシュボードページにて、ログアウトボタンを押す。
  - ログアウトが成功すると、ログインページにリダイレクトされる。
アカウント（口座）の追加と編集
- ユーザーとして、新しいアカウントを追加したい。
  - ダッシュボードページにて、「新しいアカウントを追加」ボタンを押す。
  - アカウントの詳細情報（アカウント名、カテゴリー、所有者、残高など）を入力し、保存ボタンを押す。
  - アカウントが追加され、ダッシュボードの一覧に反映される。
- ユーザーとして、既存のアカウントを編集したい。
  - アカウント詳細ページにて、「編集」ボタンを押す。
  - アカウントの情報を編集し、保存ボタンを押す。
  - アカウントの情報が更新され、アカウント詳細ページに反映される。
アカウント残高の登録と編集
- ユーザーとして、アカウント毎の残高情報を追加したい。
  - アカウント詳細ページにて、「新しい残高履歴を追加」ボタンを押す。
  - 残高履歴の詳細情報（日付、残高、メモなど）を入力し、保存ボタンを押す。
  - 残高履歴が追加され、アカウント詳細ページの残高履歴一覧に反映される。
- ユーザーとして、既存のアカウント毎の残高情報を編集したい。
  - アカウント詳細ページにて、「編集」ボタンを押す。
  - 残高履歴の詳細情報を編集し、保存ボタンを押す。
  - 残高履歴の詳細情報が更新され、アカウント詳細ページに反映される。

3. 機能要件

ユーザーストーリーやプロジェクトの目標に基づいて、具体的な機能や要件を洗い出します。必要なページ、データのフロー、ユーザーが行えるアクションなどを定義します。

ユーザー関連の要件:
- ユーザーは新しいユーザを作成できる。
- ユーザーは既存のユーザでログインできる。
- ユーザーはパスワードをリセットできる。
- ユーザーはログアウトできる。
アカウント情報関連の要件:
- ユーザーは複数のアカウント情報を追加できる。
- アカウント情報には、アカウント名、タイプ、所有者、残高などの属性が含まれる。
- ユーザーは登録済みのアカウント情報を編集できる。
- ユーザーは登録済みのアカウント情報を削除できる。
アカウントごとの残高履歴関連の要件：
- ユーザはアカウントの残高情報を追加できる。
- 残高情報には、対象アカウント、登録日付、残高および特記事項をメモするための属性などが含まれる。
- ユーザは登録済みの残高情報を編集できる。
- ユーザは登録済みの残高情報を削除できる。
データの可視化関連の要件:
- ユーザーは資産の残高の変化をグラフやチャートで表示できる。
- ユーザーは資産の総額を集計して表示できる。
- ユーザーはカテゴリー別、ユーザ別の資産の割合を可視化できる。
データのエクスポート関連の要件:
- ユーザーはデータをCSVやExcelなどのフォーマットでエクスポートできる。
セキュリティとプライバシー関連の要件:
- ユーザーのパスワードは安全な方法でハッシュ化して保存される。
- ユーザーの個人情報や資産情報は適切に保護され、他のユーザーにはアクセスできないようになる。

4.画面一覧

要件に基づいて、画面遷移のフローを検討します。ページ間の関係やナビゲーション、ユーザーエクスペリエンスを考慮して、画面遷移図やワイヤーフレームを作成します。

graph TD;
    subgraph ユーザーアカウント関連
        A[ログイン画面]  -->|新規アカウント作成| C[ユーザ作成画面]
        A -->|パスワードリセット| D[パスワードリセット画面]
    end

    subgraph ダッシュボード関連
        A -->|ログイン成功| B[ダッシュボード画面]
        B -->|新しいアカウント追加| E[アカウント追加/編集画面]
        B -->|アカウント編集| E
        B -->|アカウント削除| B
    end

    subgraph アカウント詳細関連
        B -->|アカウント詳細表示| F[アカウント詳細画面]
        F -->|新しい残高情報登録| G[残高追加/編集画面]
        F -->|残高情報編集| G
        F -->|残高情報削除| F
    end

    subgraph ユーザ一覧
        H[ユーザ一覧画面]
    end

    subgraph アカウント一覧
        I[アカウント一覧画面]
    end

ログイン画面:
- ログインボタンをクリックすると、ログインが成功した場合はダッシュボード画面にリダイレクトされる。
- 「アカウント作成」リンクをクリックすると、ユーザ作成画面に遷移する。
- 「パスワードを忘れた方はこちら」リンクをクリックすると、パスワードリセット画面に遷移する。
ユーザ作成画面:
- ユーザ作成が成功した場合は、ログイン画面にリダイレクトされる。
パスワードリセット画面:
- パスワードリセットが成功した場合は、ログイン画面にリダイレクトされる。
ダッシュボード画面:
- ダッシュボードにはユーザーが登録したアカウント情報の一覧および総資産情報が表示される。
- グラフやチャートで資産の残高の変化を可視化する。
- 「新しいアカウントを追加」ボタンをクリックすると、アカウント追加・編集画面に遷移する。
- 「アカウント編集」ボタンをクリックすると、アカウント追加・編集画面に遷移する。
- 「アカウント削除」ボタンをクリックすると、アカウントが削除される。
- アカウント情報をクリックすると、対象アカウントの詳細画面に遷移する。
アカウント追加・編集画面:
- 追加の場合、アカウント情報を入力し、「保存」ボタンをクリックすると、アカウントが追加されてダッシュボードに戻る。
- 更新の場合、アカウント情報を更新し、「保存」ボタンをクリックすると、アカウントが更新されてダッシュボードに戻る。
アカウント詳細画面:
- 「残高情報新規登録」ボタンを押下すると残高登録・編集画面に遷移する
- 「残高情報編集」ボタンをクリックすると、残高登録・編集画面に遷移する。
- 「残高情報削除」ボタンをクリックすると、残高情報が削除される。
- グラフやチャートで資産の残高の変化を可視化する。
残高登録・編集画面:
- 日付、金額、メモを入力し、「保存」ボタンをクリックすると、残高情報が保存されてアカウント詳細画面に戻る。
- 日付、金額、メモを編集し、「変更」ボタンをクリックすると、残高情報が更新されてアカウント詳細画面に戻る。
アカウント一覧画面
- ダッシュボード上に表示されるアカウント一覧情報と同等の情報がテーブル形式で表示される
- 新規追加・更新・削除ができる
ユーザ管理画面
- ユーザの一覧がテーブル形式で表示される
- 新規追加・更新・削除ができる

5.デザイン

ユーザーインターフェースのデザインについて検討します。カラーパレット、フォント、レイアウトなどのデザイン要素を決定し、デザインガイドラインを作成します。

必要な画面と画面毎にどんな機能が必要なのかは分かったのでデザインに移る。

ただ、デザインセンスが絶望的なので、今回は pinterest でよさげなデザインを広いあつめ今回作るアプリの画面と配色のイメージをまず膨らませた。

そして、ある程度イメージが固まってきたらiPadを使って、手書きでどこにどんな要素を配置するのかといったことを全画面分スケッチした。（iPadで書いたものを持ってくるのはめんどくさいので割愛。。。）

おわりに

以上で、要件定義とデザインは一旦完了。（非機能要件とか盛り込めていないけど。。。）

まあこんなんで要件定義と言えるのかって感じではあるけど、個人開発かつ個人利用なので一旦いいでしょう。

ここであーだこーだ悩み過ぎてるとそれだけでモチベ下がってしまいそうなので、やめちゃったら元も子もないので、さっさと実装にうつってそこで足りないものがあれば適宜対応していく方針にする。