バンキングアプリのデザイン:ホーム画面リデザイン、ビフォーアフター

バンキングアプリのホーム画面は、「今いくら持っているのか?」という問いに1秒以内で答えなければなりません。下の最初のドラフトは見栄えのするグラデーションカードですが、残高の次に大きいのがカード番号で、アクションは6色、取引はほぼ全部が赤です。まるでクレジットカードの広告です。

修正版はブランドのパープルも機能もそのまま残します。ただし、色は重要な数字だけに使い、それ以外は静かにします。

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

新人のドラフト

修正後

左では、カードがただのカードです。残高、伏せ字のカード番号、名義、有効期限、VISAロゴがすべて1つのグラデーションに載っています。その下に6色の丸いアクションが並び、さらに取引のフラットなリストが続きます。支出にはすべて赤が使われ、加盟店ごとに独自のロゴカラーが付いています。

右では、カードは残高そのものです。口座名、ドルの数字、今月の増減を示す1行、そして隅にそっと置いた下4桁だけ。その下はすべて落ち着いていて、視線が最初に着地するのは残高の1か所です。

修正1:パープルは残高に使う

ビフォー

アフター

明るいグラデーション上に、目のアイコン付きの「Total Balance」と同じサイズの$12,450.80、アスタリスクの列と4821、Card HolderとExpires、VISAロゴがある状態から、隅に「Main account」と4821、小さな.80を添えた$12,450、そして濃いパープル上の「今月 +$320.50」のピルに変わります。

ドラフトはブランドのグラデーションを、いかにもカードらしいカードに使っています。そのため第一印象は「これはクレジットカードだ」。残高は最大の文字ですが、カード番号、名義、有効期限、VISAロゴが同じ領域で張り合っています。その大半は本人がすでに知っている情報か、オンライン決済のときにしか要らない情報です。

修正版は同じパープルと青の系統を保ちつつ、1つの考えのためだけに使います。ドルは42pt、セントは22pt。読むべき数字は$12,450で、.80は細部だからです。ピルは今月の増減を示します。これは残高について人が次に知りたいことです。カード番号は隅の伏せ字の「4821」に縮め、どの口座かが分かる程度にとどめます。

再利用できるルール:ブランドカラーが主張の強い色なら、仕事は1つだけ与えます。

修正2:アクションは6つではなく3つ

ビフォー

アフター

青、緑、オレンジ、ピンク、紫、グレーの6つの丸いアイコン(送金、請求、チャージ、支払い、両替、その他)から、塗りつぶしの「送金」と、白いプレーンな「請求」「チャージ」という3つの幅広ボタンに変わります。

6つの色は「どれも同じくらい重要で、しかも全部違う」と言っています。実際はどちらでもありません。残した3つは、どの口座にも必要な送金、請求、チャージです。支払い、両替、その他はこの画面から外し、新しい「支払い」タブがその種のアクションの居場所になります。

さらに、この3つには階層も与えました。送金はブランドカラーで塗りつぶします。人が目的にして来るアクションだからです。請求とチャージはプレーンで、叫ばずにそこにいます。ボタンは幅広で押しやすく、ラベルはアイコンの下ではなく横に置きました。

修正3:取引は日ごとにまとめ、色には意味を持たせる

ビフォー

アフター

色付きのブランド円、「Oct 22, 2026 at 09:41 AM」のような長いタイムスタンプ、赤か緑の金額が付いた5件のフラットなリストから、「今日」と「昨日」の2グループに変わります。各グループは1枚の白いカードで、紫の文字タイル、名前の下のカテゴリ、黒い金額、そして緑の+$2,500.00が1つだけ。

赤は「止まれ」の意味です。支出をすべて赤にするバンキングアプリは、動画配信の料金、タクシー、コーヒーといった普通の暮らしを、小さな警報の列に変えてしまいます。修正版は出金をプレーンなテキストにして、唯一の良いニュース、つまり入金にだけ緑を使います。

タイムスタンプも変えました。全行に日付と時刻をフルで載せるのは、ほとんど重複情報です。「今日」「昨日」でまとめれば日付は1回で済み、各行の2行目には何の支払いかを書きます。「サブスクリプション」「交通」「給与」。リストをざっと見るとき、人が実際に知りたいのはそこです。

加盟店のブランドカラーも消しました。赤いN、黒いU、緑のS、オレンジのAは活気があるように見えますが、リストを何も語らない虹色にしてしまいます。文字1つの同じ色味のタイルなら行が揃い、読まれるのは金額と名前になります。

修正4:タブは4つ、浮遊するプラスはなし

ビフォー

アフター

ホーム、カード、大きな浮遊するプラスボタン、統計、プロフィールから、ホーム、カード、支払い、プロフィールに変わり、選択中のタブは紫になります。

浮遊するプラスボタンは「何を追加するの?」と問いかけます。バンキングアプリでは送金、請求、カード追加、チャージのどれにもなり得て、開いてみないと分かりません。しかもコンテンツの上に載り、タブバーを真っ二つに割ります。

修正版では、これを中身が分かる「支払い」というタブに置き換えました。統計はタブバーから外れ、残高カードが、そこから人が毎日見る唯一の数字、今月の増減を引き受けます。

細かな修正

• ヘッダーのアイコンは1つ。 ドラフトでは挨拶の横にQRコード、ベル、設定のアイコンが並んでいました。修正版はベルだけ残します。
• ちゃんとしたイニシャルのアバター。 「AM」の紫の円はブランドパープルのベタ塗りで、背景から際立ちます。
• 余白は1種類、間隔のスケールも1つ。 行は20ptのマージンに載り、ギャップは短いリストから選びます。
• 落ち着いた挨拶。 大文字のMと感嘆符が付いた「Good Morning, Alex Moreno!」は、「Good morning」と名前だけになりました。
• まとまるカード。 日ごとの取引は1つの白いコンテナに収まり、行の間には細い区切り線、グループの間には区切り線なし。

自分のバンキングアプリを点検する

Figmaファイルを入手する

無料ファイルには、両方の画面、修正した全パーツのビフォーアフターのコンポーネント、UIカラーの変数、iOSのテキストスタイル、クレジット入りの説明書きが入っています。

無料のFigmaファイル

バンキングのホーム画面、ビフォーアフター

両方の画面と、修正した全パーツをFigmaコンポーネントにしました。無料、閲覧専用。複製して下書きに保存してください。

Figmaで開く

FAQ

バンキングアプリのホーム画面では、最初に何を見せるべき?

残高を大きく、今月の増減を一言添えて見せます。次にクイックアクション、そして最近の取引です。

バンキングアプリのクイックアクションはいくつが適切?

3つがちょうどいいです。送金、請求、チャージ。最もよく使うものを塗りつぶしにして他はプレーンにし、使用頻度の低いアクションは「支払い」タブに移します。

バンキングアプリで支出は赤にすべき?

いいえ。赤は警告に見えますが、普通の支出は警告ではありません。出金の金額はプレーンなテキストにして、緑は入金にだけ使います。

バンキングアプリのホーム画面で、カード番号はどう見せる?

伏せ字で小さく、下4桁だけにします。どの口座を見ているかが分かれば十分です。詳細は「カード」画面に置きましょう。

バンキングアプリに浮遊するプラスボタンは必要?

基本的には不要です。プラスは何を追加するのかを語りません。「支払い」のようなラベル付きのタブに置き換えましょう。

出典

• 両方の画面は自作で、Figmaでデザインし寸法を測りました。加盟店名は一般的な例です。
• 最初は App Brainy でカルーセルとして公開しました。