フィンテック/金融 デザインインスピレーション
金融プロダクトのデザインは「信頼」の上に成り立つ。1pxのズレが信頼を毀損し、1msの遅延がユーザーの不安を増幅する。Wise、Robinhood、Mercury -- これらのフィンテックプロダクトに共通するのは、数値の正確な表示と、操作の確実なフィードバックを最優先にする設計哲学だ。
このページは、Wise/Robinhood のデザイン言語から抽出したフィンテックテーマを、インラインHTMLのビジュアル例とともに解説する。銀行アプリ、投資ツール、送金サービス、会計ソフト -- 金融データを扱うあらゆるプロダクトに応用できる。
このページの使い方
残高表示、取引一覧、金額入力など、金融特有のコンポーネントを視覚的に確認できます。特に数値の表示ルール（tnum、通貨フォーマット、正負の色分け）に注目してください。
デザイン哲学 -- 信頼が通貨
信頼が通貨。1pxのズレ、1msの遅延が信頼を毀損する。
金融プロダクトのユーザーは「自分のお金」を預けている。UIの小さな不具合が「このサービスは大丈夫なのか?」という疑念を生む。だからこそ、金融UIは他のどのジャンルよりも精密さが求められる。
フィンテック設計の3原則
- 数値は聖域: 全金額に tabular-nums、通貨記号、桁区切りを厳守。1桁のズレも許さない
- 緑と赤は金融の共通言語: 上昇/入金=緑、下落/出金=赤。この規約は世界共通
- 操作は確認付き: 送金・売買など取り消せない操作には必ず確認ステップを設ける
カラーパレット -- Slate系ダークと金融セマンティック
背景サーフェス（Slate系）
Slate Background Hierarchy
金融セマンティックカラー
Financial Semantics
Positive
#22c55e
Negative
#ef4444
Accent
#3b82f6
Pending
#f59e0b
Neutral
#94a3b8
ボタン / バッジ
Buttons
Send MoneyConfirmCancelDetails
Transaction Status Badges
CompletedPendingFailedProcessing
ブルーティント影の比較
推奨: ブルーティント影
Balance
¥1,200,000
rgba(15,23,42,0.40) -- 品格ある深度
避ける: 純黒影
Balance
¥1,200,000
rgba(0,0,0,0.60) -- 安価で無機質な印象
使い方ガイド
このテーマが適するプロダクト
- 銀行・送金アプリ
- 投資・証券ツール
- 会計・経費管理ソフト
- 暗号資産ウォレット
- 家計簿アプリ
金融UI必須ルール
| ルール | 詳細 |
|---|---|
| tabular-nums | 全金額・パーセンテージに適用。列揃えは金融UIの絶対条件 |
| 通貨フォーマット | \123,456 -- 通貨記号+カンマ区切り |
| 正負の色分け | 緑(+)・赤(-)は世界共通の金融言語 |
| 確認ステップ | 送金・売買には必ず確認ダイアログ |
Stitch向けプロンプト例
このDESIGN.mdに従って、ウォレットダッシュボードを作成してください。
Slate系ダーク背景（#1e293b）、残高表示は36px tnum weight700。
取引一覧は左にアイコン+名前+日時、右に金額（入金=#22c55e、出金=#ef4444）。
送金ボタンは #3b82f6 背景、ブルーティント影付きです。