2020/07/18

マネーフォワードMEはまずUIから語りましょう

_当Blogでは、マネーフォワードMEについてはWebサイトのリニューアルが見込まれていたことにより記事の掲載を見送っておりましたが、例のリニューアルのロールバック事件で当面の仕様変更が考えにくくなったため、いよいよ取り上げることにしたいと思います。連載の初回として語るべきは、やはり大問題になったUI(ユーザーインターフェース)についてでしょう。

1.マネーフォワードMEの旧来の/現在のWeb版ホーム画面

_マネーフォワードMEのWeb版ホーム画面↓は、このように多くの情報を一画面に表示するようになっています。これを運営側では「古くさい」と考えていたようなのですが…筆者はむしろこの情報量の多さこそを好ましく思っていました。

_ただ、いずれにしてもこの画面は概要(サマリー)であり、より詳細な情報が必要であればユーザーはそれぞれの機能にアクセスするわけです。であれば、そもそもサマリーを表示せず、それぞれの機能へのリンクだけを貼っておいて画面をすっきりさせるべきではないか…というのが今時のスマホアプリ的な考え方のようです。

_しかし…この画面も、実は余計な情報が多いです。その最たるものは、API連携している金融機関とのトークン情報で、こんなものをここで表示されても全く無意味です。連携している金融機関が多いと、画面を長々と下までスクロールさせなければならないのも苦痛です。

マネーフォワードのリニューアル前のホーム画面

2.7月7~8日だけマネーフォワードのホーム画面はこうなった

_リニューアルしたホーム画面です↓。すでにロールバックの予告が出ており、慌ててスクリーンショットを撮りました。

_この画面から読める運営側の基本方針は、明らかに資産管理から家計管理へのシフトですね。ポートフォリオに関する情報が見事に一掃され、これまでに無かった「今月の費目別支出割合の円グラフ」と、「予算総額に対する消化率グラフ」が出現しています。情報量が削減されたのは、まあ別の画面でフォローできるのですが…この2つのグラフは、実は家計管理にもあまり役に立たないんですよね…

_ただ、筆者は、このリニューアルで余計な情報が表示されなくなったことには好感を持っており、「前の方が良かった」とまでは思いませんでした。あくまでホーム画面に関しては。

マネーフォワードがリニューアルに失敗したホーム画面

_ちなみに、4月末に一部ユーザーに公開されたベータ版では、↑赤枠で囲った取引情報にはメモ欄が表示されていなかったのです。これはさすがに困るので改善を要望したところ、そこは本番では修正されていました。

3.マネーフォワードMEの入力UI

_マネーフォワードMEは、

  • ユーザーがデータを手入力する口座
  • 金融機関連携機能によりデータを得る口座

_を全く別に取り扱っており、入力UIも異なります。

(1)ユーザーがデータを手入力する口座

_財布(現金管理)等の口座は、月間の取引データ一覧を表示する「収入・支出詳細」が↓のようになり、すべてのデータ項目にペンマーク(ユーザーが編集可能であることを示す)が付きます。マネーフォワードMEはこの画面だけで全データ項目が編集でき、新規に入力するには【手入力】ボタンを叩きます。

マネーフォワードの入力UIその1

_【手入力】ボタンを叩くと↓のようなダイアログでデータを手入力できます。費目(マネーフォワードでは項目と呼んでいる)が二階層対応のドロップダウンリストでの入力になっており、この点は競合相手のZaimを上回っています。

_なお、ホーム画面最上部の「カンタン入力」では、支出しか入力できず、繰り返し入力(日付・口座が同じデータを連続して入力する)もできないという制限が付きますが、入力可能なデータ項目そのものは同じです(つまり、このダイアログでもカンタン入力でも、メモ欄は入力できない)

マネーフォワードの家計簿入力ダイアログ

(2)金融機関連携機能によりデータを得る口座

_金融機関連携口座については、↑のような入力用ダイアログは出現せず、入力UIは↓の画面のみとなります。日付・内容・金額・金融機関を変更することはできず、費目の変更と、メモ欄の入力、そして振替取引への変更のみが可能です。データの削除もできません。Moneytreeと同じく「連携で得たデータの改竄は許さない」という設計思想であり、Zaimとは決定的に異なります。

_この仕様により、↓のようにモバイルSuicaと連携させた口座では、内容欄が、モバイルSuicaのサイトが出力する「物販」のオンパレードになってしまいます。これを筆者は「物販の嵐」と呼んでいます。この問題をなんとか補完するため、筆者はメモ欄に (内容)(@店名)(※メモ) のいわゆるMFF書式で情報を入力することをお奨めしています。いずれ解説する、マネーフォワードMEのデータをMFF形式に変換する際に利便性が向上します。

マネーフォワードの入力UIその2

4.先日のリニューアルに関して考察しますと

_マネーフォワードMEは、金融機関連携で取り込んだ取引データをこの画面↑で修正して家計簿を記帳していく、という使い方がメインになります。つまり、普段はこの画面さえ触っていれば、標榜する「自動家計簿」(実態は半自動ですけど)が実現できます。

_3年ほど前まで、この画面は何かデータをいじる度にページ全体のリロードが発生し、非常にウザったい動作をしていましたが、現在はリロードせずに複数のデータを連続的にいじれるように改良されており、入力UIとしては非常に優れています。

_ところが、先日実施したリニューアルでは、データの修正を一つ一つ個別のダイアログ上で行うUI、すなわちZaimMoneytreeのようなUIに変えようとしたわけです。運営側はそれを「スマートフォンアプリに寄せて操作性を統一した」と考えていたようですが、特に古参ユーザーから見れば、優れたUIをわざわざ面倒な方式に改悪しやがって…と反発するのも当然であります。と言うより、今回の件で、従来のUIが実は優秀であったことを再発見させられた、というべきかもしれません。

_では、マネーフォワードMEはどういうところを改善すれば良かったのか? まず、↑の画面の赤枠で囲った説明文をスマートに隠すことでしょう。そして、金融機関連携で得られたデータであっても、せめて「内容欄」の修正は出来るようにする。

_細かい部分の修正を積み重ねていけば、自然に洗練されたUI・UXになっていきます。そしてそれはPCソフトではできないWeb版のメリットであり、しかも運営側が以前からできていたことなのですから…何でもかんでもスマホアプリと同列に考える必要は無いと思いますよ?

_また、話が逸れますが、筆者が当Blogの記事の整理に活用しているEVERNOTEも、Web版・PCソフト・スマホアプリの操作性統一を目論んでいるようです。今回のマネーフォワードMEのように大失敗を犯さなければよいのですが。両方とも有料サービスであり、運営側の失敗は課金ユーザーにとっての損失です。運営側はこの点を肝に銘じていただきたいものです。


次回はマネーフォワードMEの費目構成について触れます。

注目の記事

家計簿アプリとデータをやりとりする際のファイル形式のまとめ

_今回の主題は…家計簿アプリとデータをやりとりするときに使用するファイルの形式について、です。筆者がこれまで MFFマクロ に対応させてきた家計簿アプリは27種類(Money通帳とあっと家計簿は別カウント)。まず、家計簿アプリからエクスポートする方向では↓のようになります。...

最近の人気トップ3