こんにちは！ヒカリナ学生インターンの町山です。
今回は、優れたユーザビリティが評判の家計簿アプリ「Zaim」のサービスとアプリUIについて紹介します。

Zaimは「毎日のお金も、一生のお金も、あなたらしく改善。」というモットーを持つ、ダウンロード数1000万超の人気家計簿アプリです。
「みんなの家計改善アイデア集」「みんなの貯金事情」など、実際にユーザーがどのような使い方をしているのか紹介するページがあったり、アンケートの結果をもとに新機能を開発したりと、ユーザーの声を反映させながらサービスを作っている印象があります。

このようなユーザーを大切にする姿勢は、アプリUIにも見られます。
Zaimのアプリでは、直感的な操作やカスタマイズが可能で、面倒なイメージのある家計簿管理を楽しく便利にできる工夫がなされています。

では、どのようなUIになっているのか、アプリのホーム画面、残高画面、履歴画面を見てみましょう。

ZaimのアプリUI

ホーム画面

まずは、アプリ起動時に表示されるホーム画面から見ていきましょう。

【使ったお金】
ここでは、現時点で予算のうちどのくらいお金を使ったか確認できます。
グレーのピンは現時点の支出額を表していて、予算に対して余裕があれば緑色に、オーバーしてしまっていると赤色になります。

　　　　　

【これまでの歩み】
記録回数や日数、連続記録日数が表示されます。
がんばりを可視化することで、ユーザーのモチベーションを上げる工夫がなされています。

残高画面

次に、各口座の状況を確認できる残高画面を見てみましょう。
ホーム画面から残高画面には、画面下部のメニューバーで遷移できます。
他の画面についても同様です。

1. 残高のトップ画面
ここでは、アプリに連携している銀行口座、クレジットカード、証券などの残高が一覧で表示されます。
アイコンの種類や色は選べるので、ユーザーが管理しやすいようにカスタマイズできます。

2.履歴タブ
トップ画面で口座名をタップすると、その口座の入出金履歴を確認することができます。
タイムラインで表示されており、カテゴリや金額が一目でわかりやすくなっています。

3.推移タブ
2.の画面で「推移」をタップするか、または画面をスワイプすると、タブを切り替えられます。
この画面では、選択した金融口座の残高の推移が表示されます。
グラフでは、推移の様子が直感的にわかるだけでなく、グラフのバー（点線）を左右にスライドすると各時点の残高額を確認できます。

履歴画面

次に、過去の入出金を確認できる履歴画面です。

1. 一覧タブ
ここでは、入出金の履歴が項目ごとに一覧で見られます。
丸いアイコンは入出金のカテゴリ（例：医療費）を表しており、ブロック内の右側には金融口座のアイコンも表示されています。

2.カレンダータブ
1.の画面で「カレンダー」をタップするか、または画面をスワイプすると、タブを切り替えられます。
カレンダー上に入出金額が表示されており、日ごとの入手金が一目でわかります。
また、「デイリーメモ」機能で入出金の詳細やその日の出来事をメモしたり、例えばお金を使いすぎた日の背景の色を赤に変えるなどして、日々の記録を残すこともできます。

分析画面

最後に、予算や出費の傾向を把握できる分析画面です。

1. 予算比タブ
ここでは、カテゴリごとにあとどれくらい予算が残っているかを視覚的にチェックできます。
右側に並んでいる棒グラフには縦に点線が入っており、これを超すと予算オーバーであることを示します。

2.収支タブ
1.の画面で「収支」をタップするか、または画面をスワイプすると、タブを切り替えられます。
このタブでは、支出や収入の内訳を円グラフやリストで確認できます。
画像ではカテゴリごとに支出の内訳が表示されていますが、ドロップダウンで口座ごとの表示に変更したり、円グラフをタップして収入の内訳に変更することもできます。

まとめ

以上、ZaimのTOP画面、残高画面、履歴画面のUIを見てきました。
特に履歴画面については、縦にタイムラインで表示されているので履歴が見やすいですね。
必要な動作に対してタップ数が少なく、家計簿の面倒で手間がかかるというネガティブなイメージが簡単手軽なイメージに変わりそうですね。