家計簿アプリをデザインしてみた【マネーフォワード×cocoda! 】

こんにちは。東京のデザイナになりたい神戸の新社会人m（@maima_1107）です。
先週日曜日は、cocoda!×マネーフォワードさんのワークショップに参加しました！💰今回はワークショップ、その後の自主制作で作ったアプリを過程と一緒にまとめてみます。 

今回のワークショップのお題は...

💰家計簿アプリのホーム画面を作ろう！

でした！

📌全体の流れ
⑴ 事前課題
・ユーザーインタビューひとり１名分
・家計簿アプリの考察 × ５個
⑵ ワークショップ
・ユーザーインタビューのシェア（５人１チーム）
・設計〜ペーパープロトタイプ（コア機能３つ）
・FBとカイゼン
⑶ 事後課題
・ペーパープロトをUIまで作ってみる
・他の機能画面も作ってみる

①ユーザーインタビュー
私は周りに既婚の方が少なかったので、同じ職場で席が近い人材営業の元ギャルなお姉さん(30)に聞いてみました。　※ 中身は⑵の写真参照

②家計簿アプリの考察
５つの家計簿アプリを使ってみて、特徴や強みを整理しました。
（Moneyforward・Zaim・家計簿・Monelyze・Moneytree）

📌アプリ考察メモ（今回はTOP画面×機能に絞っています）

各アプリ、それぞれ独自の機能をもっているというよりは、
どの機能を手前にもってくるか、に違いがある印象でした。
一番大きな違いだと感じた点は以下です。
------------------------------------------------------------------------
①TOP画面に予算と使える残金を表示 👉 Zaim 、レシーピ
「予算を意識してお金を使うため」という目的を持って管理・節制したい人に合っている印象です。

②TOP画面に収支を表示 👉 家計簿、monelys、Moneytree 、Money Forward「お金の動きを把握したい」という人向けで、ミニマムな機能を好む人に合っている印象です。予算の表示はオプションでつけられるものもありました（Money Forward）
------------------------------------------------------------------------

①ユーザーインタビューのシェア（５人１組）

５人分のインタビューをシェアすると、
家計は完全に奥さんが管理する夫婦、エンジニアの夫がアプリの機能を駆使して管理する夫婦、子供がいないこともありそれぞれ個別に管理する新婚夫婦、などさまざまなケースが出てきました。

ここで、みんな「なぜお金を管理しているの？」という観点で見てみると、

・ライフイベント（結婚式など）に備えて
・家具を揃えるため
・とにかく節約するため
・なんとなくある程度貯金は維持したほうがいいと思うから
・夫がパチンコが趣味で全然お金は管理しないから

といった理由が出てきました。

ここから、みんな「結婚式の準備金が足りなかったらどうしよう」「子供が生まれたときに苦労したくない」「なんとなく赤字になるのは怖いから」といった、漠然としたお金に関する「不安」が管理のモチベーションになっているのでは、という結論に至りました。

なるほど、それなら漠然と「貯金しなきゃ」と不安にかられながら貯金するよりも、２人で「共通の目標」をもって、一緒に貯金していけたら、楽しくお金を貯められるのでは？（せっかくの幸せな結婚生活の中で、お金の管理もポジティブなイメージをもって取り組んでもらえたら素敵だな〜 💐）

ということで、コア機能選定、ペーパープロトタイプ作成に入ります！

② ペーパープロトタイプ作成（個人ワーク）

📌ステイトメントシート

◼︎ユーザー
20代 結婚１〜２年目の新婚夫婦、同棲カップル。
将来のライフイベントに備えて、２人で貯金した方がいいとは思っているものの、そもそも家計管理もしたことがないし、どう進めたらいいかわからないな〜と少し不安。とはいえまだ先のことだし、「Excelで管理しよう！」ほどの意識の高さはない。
◼︎ステートメント
夫婦、カップルで共通で支払う金額目標／月を設定して、それに向けて一緒に貯金をしていくサービス。
🐷コンセプトは「２人の貯金箱💰」
◼︎コア機能
① リアルタイムで個人口座から共通の貯金箱への送金が可能
② ２人の目標設定、目標の編集が共同でできる
③  個人ページで自分の収支確認ができる

③ FB タイム

ペーパープロトタイプで、たくさんの人からFBをいただけました...！
大きく３つ、FB内容を書いてみます。

⑴ 貯金って、口座に振り込まないと反映されないよね？
引き落としはカード連携をしたらリアルタイムで反映されますが、振込は口座に行かないと反映されない...ですね？とツッコミが入り、「リアルタイムで振込を反映」は不可能...！だと気づいてしまいました。どうしよう...

⑵ 長期的視点がない
月単位での目標設定はできるけれど、長期的な視点が見えない、というFBもありました。今回はそもそも、ユーザーの設定は「お金を２人で管理することに慣れていく」段階なので、がっつり長期計画を立てる想定はなかったのですが、それでも「今月の目標達成できなかった〜（失敗）」となったあとに「どうするの？」という視点はもてていなかったなあと気づきました。

⑶ 履歴の画面がちょっと見にくい
プロトタイプ３枚目の画面ですが、個人の収支画面と２人の履歴が一緒の画面になっているのでユーザーが混乱するかも、というFBがありました。


そしてカイゼンしたプロトタイプがこちらです…！

④ カイゼンver.

⑴ 投げ銭機能
LINEPayなどでおなじみの「投げ銭機能」により、リアルタイムで個人口座から共通の貯金箱への送金できるようにしました。
※ 別の案としては従来の家計簿アプリと同様「予算設定して使用額を引く」案もあったのですが、感情として引き算的な表現は悲しいな...（ふたりで楽しくお金を貯める、というコンセプトからは外れてしまう）という抵抗感が残り、モヤモヤしているとことにチームメンバーの方からこのアイデアをいただきました（神）

⑵今月の目標を修正＋来月の目標を設定できる
今月の目標達成度を修正、並行して来月分の目標設定もできるようにして、お金の管理を小さく改善していけるように工夫しました。
また、目標設定とはいえ、「だいたいどれくらいが貯金額として普通なんだろう？」と迷ってしまいそうなので、サブ機能として、同世代のカップル、夫婦の貯金データを参考にできる機能があってもいいね、という話もしていました。

⑶ 表示は履歴だけ
１画面で伝える情報は１つでいいな、と思い、初期画面では履歴のみ表示、個人の収支はボタンを押して必要なときに確認できるようにしました。



ここでワークショップは終了！です。
プロトタイプを作ってすぐに皆さんからFBをいただけて、さらに自分にない観点からのアドバイスもセットでもらえたので、ひとり作業の５倍はスピード感もって進めることができた気がします !!!!!

⑤ UIデザイン作成

ワークショップで作ったペーパープロトタイプをもとにUIデザインを作成しました。

◼︎トンマナ
「信頼 × 生活によりそう」

💰信頼感を出すようにしました
お金を扱うサービスということで信頼は必須、ということで、全体的に柔らかいカラーの中、「投げ銭」など送金関係のボタンは「青」で統一し、信頼感を出しました。

💰生活に自然に馴染むような親しみやすい印象にしました
お金の管理が自然と夫婦の日常に馴染んで、当たり前のものになるように、という狙いです。具体的には配色を暖色系にしたり、数字のフォントを丸ゴシックにしたり、TOPの背景にドットを敷いて、紙を連想するデザインにしたりました。

💰２人がたのしく使える工夫をしました
目標の文言を自由に設定できたり（「ふたりで10万円！」の部分）、目標欄にフリーコメントを書けたり（ハワイ行こ〜！の部分）、こまかいですが旦那や奥さんのキャラが反映されるようにして、２人がたのしみながら使えるように工夫しました。

📌ステイトメントシート（ブラッシュアップ）

◼︎ユーザー
20代 結婚１〜２年目の新婚夫婦、同棲カップル。
将来のライフイベントに備えて、２人で貯金した方がいいとは思っているものの、そもそも家計管理もしたことがないし、どう進めたらいいかわからないな〜と少し不安。とはいえまだ先のことだし、「Excelで管理しよう！」ほどの意識の高さはない。

◼︎ステートメント
夫婦、カップルで共通で支払う金額目標／月を設定して、それに向けて一緒に貯金をしていくサービス。
🐷コンセプトは「２人の貯金箱💰」

◼︎コア機能
① リアルタイムで個人口座から共通の貯金箱への送金が可能（投げ銭）
② ２人の目標設定、目標の編集が共同でできる
③ 個人の収支管理

◼︎ユースケース
① 新婚の２人が、食卓で談笑しながら「この夏、旅行いこうよ〜」「じゃあ今からこれくらいがんばって貯金しようか！」とポジティブなイメージで貯金の話ができる
② その延長線上で、出産などのライフイベントに向けても、２人の貯金の話を自然にできるようになる
③ それぞれ都合がいいタイミングで、無理なく貯金ができる

◼︎大切にしたこと💐
ユーザーインタビューのシェアをする中で、「夫がお金の管理をしてくれない」「同棲を始めてからお金の話をするようになり、彼女との喧嘩が増えた」など、夫婦がお金の管理をするとき、お金の話をすることに対してネガティブなイメージをもっていたり、それゆえ深く話し合わず、どちらかが黙って我慢しているような印象を受けました。
本来、お金の管理は夫婦が一緒に暮らす上で大切で、生活の中で当たり前に話し合って決めることが自然なはずなので、アプリでは２人が共通の目標をもって、コミュニケーションを取りながらお金に対してポジティブな気持ちで一緒に貯金ができるような機能とトンマナを選ぶことを大切にしました。

🌿プロトタイプ（InVision）
プロトタイプもつくったので良かったら触って見てください！！！
ここに載せているより画質も綺麗です！笑
https://projects.invisionapp.com/share/ETP0POSJ4PF#/screens

以上で一旦完成です〜！
まだ矛盾点もあるかと思うので、FBなどもあったらいただけると嬉しいです〜！また、今回は１から家計簿アプリを考えてみましたが、せっかく家計簿アプリの分析も事前課題にあったので、Moneyforwardのリデザインもやってみたいな〜と思います。

今回のワークショップでは、デザインが大好きな人たちと一緒に意見を出し合いながらお題に取り組めて、マネーフォワードのデザイナさんやcocoda!のデザイナさんにも直にFBがもらえて、本当に贅沢な時間でした !!! 

https://twitter.com/Yuichi_Y_JAPAN/status/1059024095797436416

また、当日はワークショップ前にマネーフォワードさんのサービスの説明や、実際にアプリを作るまでの過程を見せていただいたりもして、それもとてもとても勉強になりました....とくにMoneyForwardの実物のペーパープロトタイプを見せていただいたときには、実際の開発現場ではいかにスピード感を重視しているかが伝わり驚き...！です。

” ペーパーでのワイヤーで重要なのは
・数を出し
・抽象的な要件を具体で考えて
・アイデアの成功確率を上げること
なので、全く違う方向性を考える力と、パターン力、スピードが大事 ”
by タクミ＝カイ さん
（https://twitter.com/takumii_kai/status/1060307675643330563）

長々と書いてしまいましたが、以上でおしまいです。
ここまで読んでいただいた方、本当にありがとうございました！
cocoda！ワークショップ濃くて楽しくてまた行きたいです！（誰かまた一緒に行きましょう〜！）

🐦Twitterやっています！
「m」でやっております！デザイン好きな方、駆け出しのデザイナさん、よかったらフォローいただけると嬉しいです〜！！お仕事も探しています！
https://twitter.com/maima_1107

- fin -