Daily Cocoda - ストイックに貯金ができる家計簿アプリ制作

Rio Azuma
UI, Web Designer

Overview

Date : 2019年11月
Time : 1.5日
Type : practice
Tools : figma
Challenge : 既存家計簿アプリのリサーチと新規家計簿アプリの制作（支出入力画面とメッセージ画面）


Process

1. リサーチ
※長くなるので最後に記載しました。


2. コンセプトメイキング

●ステートメント / コンセプト

貯金が出来るようになるストイックな家計簿アプリ


●ユーザーの特徴

・貯金ができない男性

・貯金ができる程度の給料を貰っている（サラリーマン）

・未婚で、お金を自分で管理している

・貯金願望はあり、貯金の必要性を感じている

・気付くと、いつの間にかお金がなくなっている

・家計簿アプリは使ったことがないし、少し面倒くさい

・支出を見せることのできる信頼できる恋人や友達などがいる（ここ大事）


●ユーザーの課題

・貯金ができない

・何にお金を使っているのか把握していない


●ペルソナ像 / ユーザーのニーズ

・貯金の必要性　＝ 感じている

・お金を何に使っているか　＝ 把握していないが把握したい

・家計簿アプリ　＝ 面倒臭そうだが、簡単に入力できるなら使ってもいい


●コア体験

『モニタリング役のアドバイスをもとに、自分の支出を見直しつつ、ストイックに貯金ができる』


●コア機能

・給料日を起点に、1ヶ月ごとに目標金額を決めて貯金ができる

・モニタリング役を招待してアドバイスが貰える（＋α 口座からの引き落としに制限をかけたい）

・カテゴリごとに支出のレポートを閲覧できる

・支出管理がメイン





3. 理想の行動シナリオ

＜普段の行動サイクル＞

給料が入る

→引き落とす

→使う

→引き落とす

→使う

→銀行からいつの間にかお金がなくなっている


＜このアプリを利用するようになってからの行動サイクル＞

給料が入る

→お金を引き落とす

→毎日、支出を記載する

→どのカテゴリの支出が多いのか可視化される

→分析グラフを自分で閲覧する＆モニタリング役からのアドバイスやアプリ側からの忠告メッセージを受ける

→自分の金遣いを見直すようになる

→家計簿を付ける習慣ができる

→貯金できる額が毎月UPしていく

→貯金の習慣ができる





4. 操作シナリオ / フロー

●初期設定

給料日の設定（その日を起点に1ヶ月をカウントする）

今月の給料を入力する

今月の目標貯金額を入力する

毎月の固定費を入力する（電気代、住居費など）

モニタリング役を招待する


●家計簿をつける -プッシュ通知などによって、毎日の日課として家計簿をつける習慣付けが必要

1週間ごとのカレンダーから今日の日付をタップする

カテゴリの選択

支出額の入力

メモなどあれば入力


●モニタリング役とのメッセージタブ

- モニタリングする側

    ○招待を受ける

    ○相手の家計簿を閲覧する

　- 基本的に分析タブとメッセージタブの閲覧が可能

　- カレンダータブは相手が閲覧の制限をかけることができる（プライバシーの観点的に）

    ○相手にアドバイスのメッセージを送る

    ○相手が今月利用できる額を超過してお金を引き下ろそうとした場合、口座を差し押さえることも可能にしたい笑（どうにかして、モニタリング役がアプリを通して何かしらの手続きをすると、相手が銀行からお金引き下ろせないような設定ができるようにしたい）


- 家計簿を付ける側

モニタリング役からアドバイスが届く

いつでもモニタリング役にメッセージが送れる

運営からのお知らせが届く

　- 「今月使える額は残り○円です」などのメッセージ

運営やモニタリング役からのアドバイスを受け止める（大事！）

　

●タブ

HOMEタブ：家計簿を入力

メッセージタブ：モニタリング役とのメッセージ

カレンダータブ：1ヶ月ごとの収支が一目で分かる

分析タブ：収支の分析グラフなど





5. UI flows / オブジェクトへの落とし込み


ワイヤーフレーム

●初期設定画面（1/2）

・給料日、今月の給料、今月の目標貯金額、毎月の固定費入力


●初期設定画面（2/2）

・モニタリング役の招待


●HOMEタブ

・1週間ごとのカレンダー（画面上部に）

・カテゴリ選択

　- 最低限のカテゴリを用意し、自由にカスタマイズ可能にする

・メモ欄

・支出入力

・支出入力電卓（日付をタップしたら半モーダルで下から出てくる）

　　- 『0』だけでなく、『00』も必須

・設定アイコン（右上）

・収入管理＆貯金額管理アイコン（左上）

　　- 支出管理がメインのアプリなので、収入はこのアイコンからサブ的な要素として入力する

　　- 給料日が来たら、このアイコンから今月の給料額と目標貯金額を入力するように誘導される

　　-  給料日が来なくても、臨時の収入などはこのアイコンからいつでも入力可能


●メッセージタブ　-  LINEのようなメッセージUIを想定

・双方のアイコンとメッセージ吹き出し

・運営からののメッセージ

・メッセージ受送信の日時

・既読表示

・メッセージへのスタンプ（messengerのようなUI）

・スタンプ

　- モニタリング役から鬱陶しいアドバイスが来てメッセージを送りたくない場合に、スタンプで対応するため笑

・メッセージ入力

・画像送信（何に使ったの？など聞かれた時に、写真を送れるように）


※分析タブ、カレンダータブは既存の要素から真新しさがないため、今回は省きます。





6.ビジュアルデザイン

習慣として家計簿をつけてもらえるように、堅苦しいデザインではなく、少し遊び心を取り入れた、気分がワクワクするなるようなデザインに


- 家計簿入力画面の支出を入力する際の画面
（支出を入力する時以外は電卓は表示されていない）


- モニタリング役とのメッセージ画面


Research

＜家計簿アプリの考察＞

●支出は赤色、収入は青色で表示する場合が多い

●金額を入力する場合は電卓キーボードになっている場合が多い

　　○電卓と通常のキーボードで切り替えができるアプリもある

　　○電卓の『＋』などの要素の位置はアプリによって異なる（個人的に『.』の必要性を感じない）

●収支の予算（目標額）を設定して、残額を表示してくれるアプリもある

●カレンダー機能やグラフ、メモは必須機能

●Zaim/MoneyForward/Moneytreeのみ、カードや銀行と連携ができる

●カテゴリは自分でアイコンや種類をカスタマイズできることが多い

●『振替』という、自分の財布や銀行間のお金の移動を管理できるが、Zaim/MoneyForward/Moneytree以外

●日付の選択は、ピッカーorカレンダーUIのどちらか

（どちらが良いのでしょうか・・・？）


- 支出入力画面


- 分析グラフ画面

- 収支を一覧として閲覧できる画面

◼︎MoneyNote 家計簿 / komorebi.inc  

シンプルな家計簿アプリ

マネタイズ：プレミアム課金 860円買い切り（広告削除やバックアップ可能）

・テーマカラーやカテゴリーなど自分好みにをカスタマイズ可能

・パスワードロックやバックアップ可能

・登録や課金なしで全機能使える

・入力画面に電卓機能あり

・日程はピッカーで選択

└支出の決済方法の追加

└カード決済の時に引き落とし日の入力が可能にしてほしい

└金額の文字のカラーの統一


◼︎おとなのおこづかい帳　家計簿/個人で開発

komorebiのアプリに激似

マネタイズ：プレミアム課金 370円買い切り（広告削除可能）▶︎広告はあるがkomorebiより邪魔にならない位置

・テンプレート化して自動入力も可能

→例えば、毎月給料日や金額を指定しておくと自動で入力される

・日程はカレンダーから選択

・テーマカラーやカテゴリーなど自分好みにをカスタマイズ可能

・支出を書くときに、財布、銀行などどこからの資産なのか入力できる

・入力画面に電卓機能あり


◼︎カナヘイ家計簿/UNITED.inc

楽しみながら家計簿を付けれる▶︎キャラクターの使い方が上手

マネタイズ：広告収益（バナーも動画広告もあり）▶︎広告が頻繁に出てきて無理

＋120円で広告削除可能（月額課金ではない）

・記録するごとにカナヘイのストーリーが読める（1日1ストーリー）

・登場したキャラクターをダウンロードして壁紙にできる

・カテゴリを自由に追加できる

・日程選択はピッカー

・履歴のグラフとブロック表示の切り替えが分かりやすい

・支出グラフのみで収入グラフはなさそう

・パスワードロック可能

・言語選択可能


◼︎家計簿　簡単お小遣い帳 / 個人開発？

シンプルで可もなく不可もなく

マネタイズ：広告非表示課金 250円 or アップグレード 490円

・初期設定でテーマカラーを設定できる

・入力時、電卓キーボードか通常のキーボードか選択可能


◼︎Monelyze / monelyze inc.

マネタイズ：月額課金280円 & アプリ内広告（課金しないと使えない機能多い）

・支出と収入が一貫してアイコン表示

・アニメーションが凝ってる

・グラフの種類が豊富▶︎収支の分析を丁寧にやりたい人にはいいかも

・HOME＝カレンダー＝入力画面で、カレンダーから収支を入力する▶︎個人的には好き


◼︎Zaim / Zaim.inc 評価3.6と低め

マネタイズ：月額課金 480円 &アプリ内広告（広告非表示、連携機能、グラフ表示など）

・銀行やカードの連携

・レシートの読み取り

・新規登録必須

・デザインが可愛いし見やすい

・世帯収入や家族構成などを入力すると、月額予算を提案してくれる

・キャッシュレス還元機能

・初めて使ったが欲しいと思っていた機能が満載で感動した、今後も使う

・日時選択はピッカー、時間まで指定できる


◼︎Moneytree / Money tree.inc

マネタイズ：月額課金 最低360円〜プランが3つある

・利用するまでの設定が長い、新規登録必須、パスコードも自然な流れで設定されてしまった

・グラフに切り替わると横画面になる

・グラデーションが多用されている& UIが洗練されていない箇所があって見にくい

・個人と法人の口座を切り替えられる


◼︎Money forward

マネタイズ：月額課金480円 & アプリ内広告

・課金しないとグラフ見れなかったり、できないことが多い

・日程選択はカレンダーから

・この中では一番機能が多い家計簿アプリ