![見出し画像](https://assets.st-note.com/production/uploads/images/86509980/rectangle_large_type_2_b5a6b44485b74cf9fa5ec1152928f81a.png?width=800)
マネーフォワード MEのナビゲーションを5年かけて改善したよ!
自動家計簿・資産管理アプリ『マネーフォワード ME』のデザイナー池内です。私はマネーフォワード入社して以来、約5年かけてマネーフォワード MEアプリのナビゲーションを改善してきました。その改善プロセスをご紹介します。
ナビゲーションとは
ナビゲーションとは、超簡単にいうと「目的地までの道筋やその道筋の案内」のことです。
たとえば、リアルなナビゲーションだと、下記画像のように、案内版や道などがナビゲーションになります。
![](https://assets.st-note.com/img/1661848746063-NWwx1ZugBw.png?width=800)
ではアプリやWebサービスでのナビゲーションはどういうものかというと、具体的なアプリのコンポーネントだと、「タブバー(ボトムナビゲーション)」「ナビゲーションンバー(アップバー)」「ナビゲーションドロワー」「ボタン」などです。
たとえば、マネーフォワード MEアプリではメインのナビゲーションとして「タブバー(ボトムナビゲーション)」を使っています。
![](https://assets.st-note.com/img/1661848753424-WaWb6gseOv.png?width=800)
リアルのナビゲーション同様、アプリやWebサービスでもナビゲーションが悪いと、ユーザーさんは道に迷ってしまいます。
Before / After
プロセスの前に、先にこの5年でマネーフォワード MEのナビゲーションがどう変わったのか紹介します。
iOS版
大きく変わったのはタブバーで、「入出金」「資産」タブを追加しています。
また、タブバーにあった「入力」は、FAB(Floating Action Button)として、ホーム画面などに移動しています。FABはiOSを利用の方にはなじみの薄いコンポーネントなので、慎重にABテストして、使い心地やKPIに影響がないことを確認してから、全ユーザーに展開しました。
![](https://assets.st-note.com/img/1661848643280-YQzp4TNzXM.png?width=800)
Android版
Android版の大きな変更点は、ナビゲーションドロワーを廃止し、ボトムナビゲーションを追加したことです。
![](https://assets.st-note.com/img/1661848667442-kKfFPzJZL2.png?width=800)
その他にも大小様々なナビゲーションの変更がありました。その5年間に及ぶ、ナビゲーションの変更の軌跡が下の画像です。当時の開発体制の都合などで、Android先行で変更していました。
![](https://assets.st-note.com/img/1661848778044-GsJlK0OFO9.png?width=800)
以前のナビゲーションの問題点
以前のナビゲーションでは、画面遷移が複雑に入り組んでいて、見たい情報・使いたい機能がどこにあるかわからないという状況でした。
プロダクト開発の初期フェーズでは、どんどん機能追加して、プロダクト・マーケット・フィットを目指さなければ行けないため、これは仕方ないことではあります。
ただ、中長期的にはこの問題を解決しないといけません。新たに機能を追加しても、誰もその機能を見つけられなくなってしまいます。
![](https://assets.st-note.com/img/1661848888946-pry4nF2IIW.png?width=800)
大きな問題の1つは、目的の情報や機能が、どの分類に入っているか予測できないことが要因でした。
![](https://assets.st-note.com/img/1661848943884-GPUEhEhAyd.png?width=800)
また、ナビゲーションに使うコンポーネント自体が不適切だったことも問題でした。
![](https://assets.st-note.com/img/1661848951556-vcxkTLmR58.png?width=800)
調査
ナビゲーションの改善にあたり、以下の流れでマネーフォワード MEユーザー複数人に、カードソートのワークショップをしてもらいました。
このワークショップを行うことで、ユーザーにとって適切な各情報・機能の分類や、その分類の適切なラベリングがわかりました。
![](https://assets.st-note.com/img/1661936536210-osDqxO0b3A.png?width=800)
![](https://assets.st-note.com/img/1661936541326-iREudcWm3B.png?width=800)
![](https://assets.st-note.com/img/1661936548872-7ABEwjozaV.png?width=800)
再設計
先程の調査結果をもとに、大きな情報・機能レベルで分類とラベリングを再設計しました。
![](https://assets.st-note.com/img/1661849079703-CzgkZ6Ky0E.png?width=800)
その設計を元にプロトタイプを作成しました。
![](https://assets.st-note.com/img/1661849107229-bFdRcXfDl5.png?width=800)
このプロトタイプを元に、実際のアプリに少しずつ実装していきました。
残る課題
これまでの改善でトップ階層のナビゲーションはかなり改善できましたが、下層でのナビゲーションや、コンポーネントレベルの問題はまだまだ残っています。
これからも、マネーフォワード MEに新機能の追加がどんどんされていくと思います。それと並行して、さらなるナビゲーションの改善も行っていければと思います。
※このnoteは、ミクシィさんとマネーフォワードが共同で行ったイベント、「ミクシィとマネーフォワードがデザインを本気で語ったら#2 デザインプロセス」の登壇内容を元に執筆しました。
【マネーフォワード MEへのお問い合わせ窓口】
マネーフォワード MEへのご意見・ご要望はマネーフォワード MEのお問い合わせ窓口よりお送りください。参考にさせていただきます。
【マネーフォワードではデザイナー募集中】
マネーフォワード Home事業のデザイン部が気になる方、デザイナーとラフに話してみたい人は、こちらからご連絡ください!