フィンテックのモバイルダッシュボード

Why I saved this / なぜ保存したか

モバイル 1 画面に「総資産」「推移チャート」「直近取引」の 3 ブロックを積んでいるが、チャートを 画面高の 40% まで大胆に確保することで視線の起点を固定している。数字は Tabular Lining 書体、 増減は緑 / 赤を使わず「+」「-」記号と強弱だけで示している（色覚配慮）。

A single mobile screen stacks “total assets”, “portfolio chart”, and “recent transactions”. The chart owns 40% of the screen height to anchor the eye. Figures use tabular lining numerals, and gains/losses are signalled with ”+” / ”-” glyphs and weight — not red/green — to stay accessible.

Techniques

• 数字主役 UI は Tabular (等幅) 数字に切り替えるだけで “きちんと感” が跳ね上がる
• 増減の色分けに頼らない設計は、色覚アクセシビリティと海外展開の両方で効く
• チャートの “最初の 1 画面占有率” を 30〜45% に置くと “データ駆動” の印象が立つ

Apply to

• 個人資産 / 経費 / 健康データなど、数値が主役のモバイルアプリ
• 社内向けの KPI モバイルビュー（Slack モバイルから飛ばす系ダッシュボード）