自動家計簿のMoney Forward。KPI11%アップを達成したiOSアプリの新UIデザインは、こうして作られた！

Goodpatchは自動家計簿サービスMoneyFowardのiPhone版アプリリニューアルを担当しました。今回はリニューアルプロジェクトを終えて振り返りを兼ねて、Money Forwardの取締役開発本部長 都筑貴之さん、サービス開発本部マネージャー 村里健太さんのお二人にインタビューをさせて頂きました。弊社からはプロジェクトに関わった、代表の土屋尚史、UIデザイナーの貫井伸隆、ディレクターの齋藤恵太の3人が参加しました。

資産の「見る、知る、貯める、増やす、使う」をまとめて提供したい

左から村里さん、都筑さん

――

まずはMoney Forwardの事業について教えてください。

都築

Money Forwardは、パーソナルファイナンスのサービスです。パーソナルファイナンスは「個人の資産をすべて一括で管理、活用する」というサービスで、まだ日本では新しい概念です。アメリカにMint.comというパーソナルファイナンスに特化したベンチャーがあるのですが、代表の辻とCOOの瀧がアメリカに留学したときにこのサービスを見て「これを日本にも普及させたい」と感銘を受けたそうです。それが我々の原体験になりますね。

村里

今まで、個人の資産はいろいろな口座にそれぞれ入っていて、一括して把握することができなかったんです。今回のアプリは、そのすべての情報をまとめて見ることができるというところに特化したものです。

都築

最終的には、お金に関しての「見る・知る・貯める・増やす・使う」の５本柱をすべて提供していきたいですね。今はまだ「見る」までしかリーチできていないのですが、資産に応じて運用のアドバイスや提案をするところまでいきたいと思っています。

土屋

資金調達も７億円弱されて、ものすごい勢いですよね。しかも、三菱東京UFJ銀行系のVCからも調達していて、信頼も厚い。

都築

おかげさまで、創業から2年経ってメンバーも40名になりました。メーカーやWeb系企業はじめ、セキュリティを専門にしていた金融機関出身の人間など、優秀で力強いメンバーが集まっています。

ユーザーテストで見えた、デザインの軸

左から土屋、貫井、齋藤

――

それでは、なぜ今回Money ForwardさんのアプリリニューアルにGoodpatchが携わることになったのか教えてください。

土屋

僕、実はMoney Forwardの存在はWeb版のランニングページをリリースした直後に気づいて、超初期のころから登録していたんですよ。

都築

え、そうなんですか！

土屋

COOの瀧さんとは同時期にアメリカにいたということもあり、ブログを読んだりTwitterでフォローしたりしていたんです。その後、偶然Money Forwardのサイトを見つけたら瀧さんのお名前があって驚いたんですが、他のメンバーを見てみたら揃いも揃って優秀な方ばかりで、「これは来る！」と思いました。さらに偶然、友人が開発を担当していたという縁もあり。

都築

当時、使ってみてどうでしたか？

土屋

UIひどいなあ、と（笑）。

一同

（笑）。

土屋

特にアプリがひどくて。だって、金額の表示しかなかったんですよ。真っ白なバックに金額だけ書いてあるんです。表もグラフもなくて。

都築

サービスリリース当初はWebメインで、スマホはビューワーの位置づけでしかありませんでした。スマホで入力なんてしないだろう、と。ところが、ユーザーから「アプリでも入力したい」という声が多くて、少しずつアプリの機能を加えていったんです。

土屋

機能は充実していくのにデザインはいま一歩で、こんなに面白いサービスなのに！と思っていました。そんなとき――2013年の10月、代表の辻さんと飲み会で知り合ったんですよ。偶然隣の席に座った辻さんに、「GoodpatchでUI改善、やらせてください！」と言って。すぐにデザインを作っていき、「いいですね、やりましょう」とそのまま11月にプロジェクトがスタートしました。

都築

実は、昨年の秋というと、ちょうどUIで行き詰まっていたころだったんです。「このままじゃどうしようもないな」と悩んでいたら土屋さんから声をかけていただいて、タイミングもバッチリでした。

土屋

ナビゲーションドロワー（注：別名ハンバーガーナビゲーション。普段は閉じられていて、クリックするとナビゲーションが現れるボタン）がものすごく多くて20個くらいあったんです。機能的にも被っているところがあって。

村里

そうそう、アイコンも同じパーチャートを無理やり2Dと3Dにしたりして（笑）。

都築

エンジニアは、新しい機能を思いつくとすぐに追加してしまうんです。どんどん機能が増えていき、気づいたらナビゲーションドロワーが長くなっていました。

土屋

そこで、今ある機能をすべて整理するところから始めたんですよね。まず、重要なものをグルーピングしてユーザー体験として直接的でないものを「その他」にまとめました。

土屋

提案段階で製作したデザインがこちらです。

土屋

ただ、プロジェクトが走り出した当時は、Money Forwardサイドとしてもコンセプトや改善の軸が決まっていなかったんですよね。

村里

その軸がないためデザインの決定打もなく、非効率になってしまいました。貫井さんにデザインの提案をしていただいて、それに対して細かいフィードバックをしたりしていたんですけど、「どうしてそうなのか」というところが曖昧のままで。

齋藤

そのような状態でできたデザインでユーザーテストを行いましたが、この「軸」が曖昧だったからか、クリティカルな問題がすぐにはあぶり出せませんでした。「私はオレンジが嫌いだから、青色にしてほしい」など、印象の話になってしまって。ユーザーにカスタマイズ欲求があるということはよくわかったのですが（笑）。

都築

ただ、そのとき、はっきりしたことが一つありました。それは、「資産を把握して全体の運用に活用したいユーザー」と「家計簿として日々の支出を手入力したいユーザー」は、まったくアプリの使い方の傾向が違うということ。

土屋

しかも、Money Forwardアプリのコンセプトは「個人の資産管理」なのに、家計簿として使っているユーザーが少なくなかったんですよね。

都築

アプリ名が「無料家計簿」なのが問題なのかもしれませんが（笑）。

土屋

このギャップを考えたときに、ひとつの仮説が浮かび上がってきました。ユーザーの多くは家計簿として使用することを目的にダウンロードしているのではないか、そして家計簿のみの使い勝手を見て離脱しているのではないか、と。Money Forwardのコンセプトは「個人の資産管理」なので、家計簿の「手入力」の使い勝手にそこまでフィーチャーしていたわけではありませんでしたから。

都築

そうですね、プロジェクトのKPIもユーザーのリテンション（継続率）ではなく、金融機関登録でしたし。

土屋

そこで、家計簿の使い勝手を向上させて「家計簿アプリ」で検索してくるユーザーを獲得し、その延長線上に金融機関登録を据える、という方向性が見えてきました。

都築

そこからリサーチしていくと、家計簿アプリとして一週間以内に７件以上の支出を手入力した人は金融機関登録率も上がるということがわかったんです。クリティカルな問題が分からなかったユーザーテストでしたが、これをきっかけにユーザーがどのように使用して何を求めているか、ということを把握することができました。

エンジニアとデザイナーを密につないだ「常駐」

――

そこからどのように開発は進んでいったのでしょうか？

都築

Money Forwardは代表・辻の経営判断で、なるべく早くリニューアルしたアプリを出したかったんです。ユーザーテストを経て軸が決まり、いざこれから作り込み、という段階に入ったものの、普通のプロジェクトのように週１回のミーティングでプロジェクトを進めていくのでは遅すぎるということになって。

土屋

都築さんは優しいので、「そこまでコミットしていただくのは申し訳ない、あとはなるべくこちらでやります」とおっしゃっていただいたですが、それを聞いてMoney Forwardさんに押し掛けたんです。「Goodpatchにとってお金やコミットの仕方は問題ではなく、ゴールは良いプロダクトを出すことだけです。最後までやらせてください」と。そこで……。

貫井

そのまま僕が常駐することになりました（笑）。そこから毎日Money Forwardさんに出勤しましたよ。普通に同じ島の中にデスクまで用意されていて、社員のような感じでしたね。

都築

これが、本当に良かった。コミュニケーションの量は週１回のミーティングのときから段違いになりましたね。気になることがあればすぐに意見を聞くことができましたし、実物を見せて確認できるというのは非常に効率が良かったです。それだけでなく、お互い気持ちよく仕事ができたのではないでしょうか。遠隔で「ダメ」と言われるだけでは、むっとしてしまうこともあるでしょうから。

齋藤

開発とデザインを同時に行わなければならないのがアプリの難しさですからね。エンジニアリングとデザインの人間がコミュニケーションを密に取って調整しないと、落としどころが見つからないんです。

都築

貫井さんにはとにかく厳しいことを言われました。「ちょっとこれは微妙ですね」とか。「ここは難しいからこれくらいでいいかな」と思って見せると、100%バレるんですよ（笑）

土屋

貫井はエンジニアをいじめることで有名ですからね。

村里

僕も最初はいろいろと言っていたんですが、同僚としてやっているとついつい甘くなってしまうんですよ。「ああ、都築さん死ぬほど忙しそうだし、こんな細かいところまで指摘したら悪いかな……」って。けれど、貫井さんはそんなの気にせずばんばん意見を言ってくださるわけです。うんうん頷きながら聞いていました（笑）。

土屋

外部だからこそ言えることはありますし、そういう立場の人間って大事ですよね。最終的な詰めの段階、つまりユーザーの気持ちよさとかインタラクションは、デザイナーとエンジニアが横にいないとダメだと今回改めて感じました。

貫井

僕もただダメ出しをしているわけではなく、開発とデザインの妥協点がどこかにあるはずだと思っていて。物理的に近くにいると「ここは重くても譲れない」「ここは軽くなるならそれでOK」など逐一相談することができたので、密なコミュニケーションの中で、良い塩梅を見つけていこうとしていました。

都築

貫井さんのすごいところは、エンジニアリングを理解しているだけでなく「なぜこのデザインなんですか？」と聞いたとき、必ず明確な答えが返ってくることです。なぜこのUIなのか、という根拠が揺るぎない。曖昧に濁されたことは、一度たりともないんです。

村里

僕もデザインをやっていたので「このデザインはどういうことですか？」と何度も聞きましたが、びしっと返ってくる。以前の仕事でデザインを外注していたことがありますが、「デザインの理由」を答えられないデザイナーさんって少なくないんです。「デザインってこうじゃないですか」となぜか私がデザイン論を説いたこともあるくらいで（笑）。

土屋

「ユーザー側に立つ」というのがGoodpatchのポリシーなんです。エンジニアサイドに立ったがゆえの妥協から生まれた、ほんの少しのぬるっとした不快な動きの積み重ねでユーザーは離れていってしまいますから。

金融機関登録11%アップを達成！

――

他に、ターニングポイントとなった出来事はありましたか？

土屋

ユーザーテストの後にデザインを作り込むとき、Money Forwardのアプリを使ったことがないGoodpatch社内の人にもテストに参加してもらいました。

齋藤

「どこにつまづいたか」「どこにイライラしたか」ということを、１画面ずつキャプチャをとりながら、コメントしてもらったんです。すると、早速新規登録からつまずきポイントが見つかったりして。

齋藤

たとえば、「新規登録じゃなくてログインにいってしまった」「パスワードの設定条件があるなら先に書いておいてほしい」などですね（左）。また、手入力の画面でも実際のレシートを渡してひとつずつ入力してもらって、「そもそもどこから入力していいのか分かりづらい」とか（中央）。これは「金融機関登録画面がスムーズに見つけられない」と（右）。

貫井

これらを改善して、デザインをがらっと変えました。振り返ると、11月にスタートしてから年末のユーザーテストを挟んで何回もデザインを修正し続けましたね。

土屋

紆余曲折を経ましたが、社内FBを入れ込んだデザイン開発は3月末に入ってから着手し、5/12には一部機能を残しながらもローンチすることができました。

リニューアルデザイン（上記はデザインデータのため実装版とは異なります）

――

新しいアプリを出して、ユーザーの反応やKPIはいかがですか？

都築

「動きが面白くなった」「見やすい」とか、ポジティブな声がものすごく増えましたね！　女性のファンが増えてきた印象もありますし、マイナスレビューからデザインに関するものがほとんどなくなりました。以前は結構、デザインへの意見が多くて。これは土屋さんが書き込んでたんじゃないかと……（笑）。

土屋

やってないです！書き込んでないですよ！（笑）

都築

ローンチ時にすべての機能が実装できなかったのと、旧UIユーザーからの拒否反応のクッションのため、今はまだ旧UIと新UIを共存させているんです。ようやくすべての機能が出揃ったこともあり、そろそろ次のアクションをとっていきたいと思っています。

村里

まだ「使えるけどあえてアップデートしていない」という旧UIのユーザーも少なくないので、そこは慎重に考えていかないといけないところですね。

土屋

なるほど。KPIにしていた「金融機関登録」はいかがですか？

都築

現状、プラス11％にものぼります。

土屋

それはすごいですね！

村里

最初、まったく変わっていないように見えてがっかりしたんですが、旧UIと新UIを使っている人を分けてみると11%アップしていたんですよ。実際に走らせる中で改善点も見えてきましたが、確実に数字に出てきていますね。

徹底的なコミットだからできたこと

――

Goodpatchとお仕事をして、いかがでしたか？

村里

Goodpatchさんと仕事をして驚いたのは、「ここまでやってくれるの！？」というところ。「ここまでが契約ですから」なんてことはまったくなくて、むしろお願いしたことよりもさらに深いところまでやってくれる。変な区切りがないんですよね。

都築

私自身、こんなにデザインについて考えた半年は今までありませんでした。他のアプリを見ながら「こんな感じかな」と開発しているところがあったのですが、それではダメだと気づきました。細かいアニメーションひとつでここまで反応がある、ということを目の当たりにして。とても勉強になりましたね。

齋藤

Money Forwardのアプリは、複雑な機能が多数存在していて、機能設計がかなり難しい部類だったのですが、Goodpatchとしては遠隔でやりとりできる限界が見えたのも大きな収穫でした。

貫井

僕としては、Money Forwardのサービスを理解してデザインに落とし込むのが大変でした。金融系の知識がない僕がキャッチアップして、本当に理解した上で作らなくちゃいけないので。だから、何かとMoney Forwardの方に聞きまくって、「こういうことですね」「いや、そうじゃなくて」というようなやりとりを何度も、何時間もしました。中の人ですらなかなかうまく説明できないような機能や知識を本当に理解できるまで粘ることで方向性が見つけられましたが、これは常駐したからこそできたことですね。

齋藤

実はデザインって、機能を理解していなくても要素さえあればなんとなくできてしまうんです。けれど、貫井はそうしない。徹底しているな、と感じます。そこまでやるデザイナーはなかなかいませんから。

貫井

機能をちゃんと理解していないと、しっかりした設計ってできないんですよ。逆を言えば自分がその機能を理解さえすれば、人が設計したものでもつながりのおかしさにも気づくことができるんです。

――

では、最後にMoney Forwardの今後の展望を教えてください。

都築

2年くらいを目標に、冒頭でお話した５つの要素の中で、現状の「見る」だけから５つ目の「使う」まで網羅していきたいですね。あと、iPad版も出したいんですが、とりあえず人手が足りなくて。でも、また何かするときはぜひGoodpatchさんと一緒にやりたいですね。

貫井

次は最初から常駐します（笑）。

長いインタビューでしたがいかがでしたでしょうか。今回のプロジェクトは、Goodpatchとしても非常に学びがあり、大きな資産となりました。弊社がこだわるインタラクションにここまで応えてくれる開発陣は滅多に存在するものでなく、こちらこそまた一緒にお仕事をさせていただきたいと思っています。快くインタビューを引き受けてくださった都築さん、村里さん、本当にありがとうございました！

無料家計簿-マネーフォワード 5.4（無料）
カテゴリ: ファイナンス, ユーティリティ
販売元: Money Forward, Inc. – Money Forward, k.k.