家計簿アプリのデザイン:予算ダッシュボードのビフォーアフター改善

人が予算アプリを開く理由はひとつ。あといくら使えるか、です。下の最初の案はすべてを報告してきます。肝心の数字は、同じ大きさの4つの箱の最後にあって10 pxです。支出は8分割の円グラフで凡例は8 px、取引は9 pxの5列テーブルです。

修正版は機能をすべて残したまま、順番だけを変えます。数字を最初に、巨大に置き、円グラフは1本のフラットなバーに、テーブルは読みやすいシンプルな4行にします。

画面全体のビフォーアフター

新人のドラフト

修正版

左の画面では、何も主役になっていません。4つの箱、円グラフ、棒グラフ、フィルター行、テーブルがすべてほぼ同じ重さで並び、唯一の問いへの答えは4つ目の箱にある10 pxの数字です。目は画面全体を走査しないと見つけられません。

右の画面は順番に答えます。いくら残っているか、残りはどこへ行ったか、最近何があったか。大きいのは1つの数字だけで、ほかはシンプルな文字、要素ごとに色の役割は1つです。

変更点を数字で見る

修正1:使える残額を最初に置く

Before

After

横に並んだ同じ大きさの4つの小さな箱。収入$4,200は緑、支出$1,916は赤、貯蓄$1,000は青、残高$1,284は黒で、すべて10 px。対する修正版は、巨大な太字の$1,284と、その下にグレーで「$3,200のうち残り」「あと12日」。

4つの箱はどの数字も同じ大きさにするので、答えになる数字がありません。ユーザーは残高が重要だと知っていて、さらにそれを10 pxで読まなければなりません。

修正版は1つを選びます。$1,284は48 pxの太字で、その下の1行が意味を与える2つの事実を運びます。元になった予算$3,200と、月の残り日数です。予算のない数字は雑学です。予算があれば、ユーザーは心配すべきかどうかが分かります。

数字はきちんと合っていて、画面に合わせて作ったものはありません。収入$4,200から貯蓄$1,000を引くと予算$3,200、支出$1,916で残りは$1,284です。収入と貯蓄は統計タブに移しました。

再利用できるルール:画面が開かれる理由になる数字を1つ見つけ、画面で一番大きくして、文脈はその下の1行で書く。

修正2:円グラフではなく1本のフラットなバー

Before

After

家賃、食費、娯楽、交通、買い物、健康、公共料金、サブスクの8色に分かれた大きな円グラフ、小さな凡例とパーセンテージ。対する修正版は、インディゴ、コーラル、アンバー、ティールの1本の細い積み上げバーで、端は淡い色。凡例は家賃$1,100、食費$412、娯楽$186、その他$218の2×2で、下に細いバー付きの予算3行。

円グラフは最良の状況でも読みづらいものです。人は角度の比較が苦手だからです。8分割ならなおさらです。5つのスライスは数パーセントずつの細い切れ端で、それを説明する凡例は8 pxです。

バーは左から右に読みます。誰もがすでに分かっている進捗バーと同じです。$3,200の予算に対する縮尺で描かれているので、淡い端がまだ残っている$1,284にあたり、画面は同じ数字を2つの形で2回見せることになります。小さな5つのカテゴリは「その他」$218にまとめ、予算画面で開きます。内訳も合います。1,100 + 412 + 186 + 84 + 62 + 30 + 22 + 20 で$1,916です。

予算はそのすぐ下にシンプルな行で並びます。名前、「$600のうち$412」、4 pxのバー。バーは上限に向かって埋まるので、ユーザーが上限にどれだけ近いかが分かります。円グラフにはできません。

再利用できるルール:部分が足して全体になるなら1本のバーを使い、小さな部分は「その他」にまとめる。

修正3:テーブルではなく4行

Before

After

「Transactions」の見出しの下にAll、Income、Expensesのフィルターボタン、その下に日付、店名、カテゴリ、支払方法、金額の5列テーブル。9 pxの文字が10行並び、浮かぶコーラル色のプラスボタンが最後の金額を隠している。対する修正版は、コーラル色のSee All付きの「Recent」見出しと4行:Marlow Marketのティールの「M」、Reel Houseのバイオレットの「R」、緑で示した収入のAlder Studioのアンバーの「A」、Cityline Transitの緑の「C」。

9 pxの5列テーブルは表計算シートです。スマホでは目を細めて、行を横に追って読むことになり、さらに浮かぶプラスボタンが金額の列に乗っているので、最後の数字は隠れています。

ホーム画面なら4行で十分です。店名の頭文字を入れた36 pxの丸が目の拠り所になり、店名は15、カテゴリは13のグレー、金額は右に置きます。リストで緑なのは収入だけなので、ラベルなしでも給料が目立ちます。日付、支払方法、フィルターはSee Allと各行から開けるので、失うものはありません。

再利用できるルール:ホーム画面に出すのは直近の数件で、全履歴ではない。フィルターはSee Allの奥に置く。

修正4:月をタイトルにする

Before

After

メニューアイコン、コーラル色のPennyの文字、Dashboardの文字、November 2026のドロップダウン、エクスポートアイコン、赤い点付きのベルが並ぶヘッダー行。対する修正版は、小さなコーラル色のPennyロゴの下に、シェブロン付きで28ポイント太字のNovember、赤い点付きのベル、コーラル色のプラス。

ドラフトのヘッダーには6つのものが同じサイズで並んでいます。メニュー、ロゴ、何も語らない「Dashboard」のラベル、ドロップダウン、エクスポート、ベル。実際に人が使うコントロールはドロップダウンなのに、それが一番小さいのです。

修正版は画面にタイトルを与え、そのタイトルがコントロールになります。「November」は28の太字でシェブロン付き、ロゴは別の行に小さく置き、プラスは浮かぶボタンからヘッダーのベルの隣に移しました。メニューとDashboardのラベルはプロフィールタブへ、エクスポートは統計へ移しました。

再利用できるルール:主なコントロールがフィルターなら、それをタイトルにする。

そのほかの細かな修正

• 機能はすべて残す。 週ごとのグラフ、収入、貯蓄は統計に移します。小さな5つのカテゴリは「その他」にまとめ、目標と一緒に予算画面で開きます。フィルター、日付、支払方法はSee Allと各行から開きます。
• 均等な余白。 ドラフトは左14 px、右12 px。修正版は両側20です。
• 箱なし。 修正版にカード、タイル、影はありません。余白と文字が物事を分けます。
• タブを減らす。 塗りと線のアイコンが混在した5つの代わりに、ヘアライン付きのフラットな78 pxバーに4つ。
• 文字サイズの幅。 文字は13から48 pxで、ドラフトの8から13 pxに対して幅があります。
• コンテンツ下の余裕。 修正版はタブバーの67 px上で終わるので、切れたり隠れたりしません。ドラフトでは浮かぶプラスがテーブルに乗っています。

自分の予算画面を点検する

Figmaファイルを入手

無料ファイルには、新人のドラフト、修正した画面、そしてすべてのパーツがコンポーネントとして入っています。

無料のFigmaファイル

家計簿画面のリデザイン、ビフォーアフター

2つの画面とすべてのパーツをFigmaコンポーネントで収録。無料、閲覧専用、複製して自分のドラフトに入れられます。

Figmaで開く

FAQ

家計簿アプリのホーム画面はどうデザインすべきですか?

使える残額を大きく最初に置き、その下の1行に予算と残り日数を添えます。次に、お金がどこへ行ったかを示す1本のフラットなバー、シンプルな予算の行をいくつか、直近の取引4件を置き、残りはSee Allの奥に置きます。

支出カテゴリには円グラフと棒グラフのどちらが良いですか?

部分が足して全体になるなら、フラットな積み上げバーです。人は角度より長さを速く読めますし、小さなカテゴリも細い切れ端ではなくバーの一区間として見えます。一番小さいものは「その他」にまとめます。

予算のグラフには何カテゴリ表示すべきですか?

3つか4つです。この画面では、小さな5つのカテゴリを「その他」$218にまとめて予算画面で開けるようにしたので、バーが読みやすいままです。

金融アプリのメインの数字はどれくらい大きくすべきですか?

最初に目に入るほど大きく。ここでは残高が48 pxの太字で、月のタイトルが28 px、行が15 pxです。

ホーム画面には取引を何件表示すべきですか?

13から15 pxで4〜5行にし、全リスト、フィルター、支払方法はSee Allのリンクから見せます。

予算アプリのタブバーには何を入れるべきですか?

ホーム、統計、予算、プロフィールの4タブで十分です。目標は予算の中に置きます。

出典

• 両方の画面は自作で、Figmaでデザインし計測したものです。アプリのPenny、店名、金額は架空です。数字は両画面で整合しています。収入$4,200から貯蓄$1,000を引くと予算$3,200、支出$1,916で残り$1,284、あと12日は最新の取引の日付である11月18日を意味します。
• 参考にしたパターン:Copilot MoneyとMonarch。使える残額が1つの数字、カテゴリは1本のバー、シンプルな行、フラットなタブバーです。
• アイコンはPhosphor(MIT)のものです。写真は使っていません。
• 最初はApp Brainyでカルーセルとして公開しました。