{ "id": "2026-04-18-fintech-mobile-dashboard", "schemaVersion": 2, "title": { "ja": "フィンテックのモバイルダッシュボード", "en": "Fintech Mobile Dashboard" }, "summary": { "ja": "ポートフォリオ推移 + 取引履歴を 1 画面で見せる、チャート主役の個人資産アプリ", "en": "A personal-finance app that fits portfolio chart and transactions onto a single screen" }, "capturedAt": "2026-09-01", "categories": [ "mobile", "dashboard" ], "tags": [ "data-viz", "minimal", "bold" ], "useCases": [ "kpi" ], "format": "mobile", "density": "medium", "layout": { "kind": "stack", "canvas": { "w": 390, "h": 844 }, "margin": { "top": 60, "right": 20, "bottom": 34, "left": 20 }, "emphasis": { "row": 2, "via": [ "scale" ] } }, "type": { "figure": { "size": 34, "weight": 700, "leading": 1.2, "numeric": "tabular" }, "label": { "size": 13, "weight": 400 }, "delta": { "size": 13, "weight": 500, "numeric": "tabular" }, "name": { "size": 14, "weight": 400 }, "amount": { "size": 14, "weight": 500, "numeric": "tabular" } }, "colors": { "ground": "#0E1116", "surface": "#1C2230", "ink": "#F4F5F7", "muted": "#8B949E", "accent": "#4C8BF5", "rule": "#232B39", "series": [ "#25D88A" ] }, "rules": [ { "ja": "数字は等幅（tabular）に切り替える。それだけで精度の印象が変わる", "en": "Switch figures to tabular numerals — it alone changes how precise the screen reads" }, { "ja": "増減を色に頼らない。「+」「−」と強弱で示す（色覚配慮と海外展開の両方に効く）", "en": "Signal gain and loss with + / − and weight, not red and green" }, { "ja": "チャートの初画面占有率を 30〜45% に置く。視線の起点が固定される", "en": "Give the chart 30–45% of the first screen so the eye has a fixed entry point" } ], "cover": "https://design-vault.pages.dev/_astro/cover.BRiDnuYu.png", "assets": [], "shortlist": true, "status": "published", "relations": { "similar": [ "2026-04-15-gradient-saas-landing" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "mobile", "density": "medium", "layout": { "kind": "stack", "canvas": { "w": 390, "h": 844 }, "margin": { "top": 60, "right": 20, "bottom": 34, "left": 20 }, "emphasis": { "row": 2, "via": [ "scale" ] } }, "type": { "figure": { "size": 34, "weight": 700, "leading": 1.2, "numeric": "tabular" }, "label": { "size": 13, "weight": 400 }, "delta": { "size": 13, "weight": 500, "numeric": "tabular" }, "name": { "size": 14, "weight": 400 }, "amount": { "size": 14, "weight": 500, "numeric": "tabular" } }, "colors": { "ground": "#0E1116", "surface": "#1C2230", "ink": "#F4F5F7", "muted": "#8B949E", "accent": "#4C8BF5", "rule": "#232B39", "series": [ "#25D88A" ] }, "rules": [ "Switch figures to tabular numerals — it alone changes how precise the screen reads", "Signal gain and loss with + / − and weight, not red and green", "Give the chart 30–45% of the first screen so the eye has a fixed entry point" ] }, "prompt": { "ja": "以下の仕様でモバイル画面を 1 枚作ってください。\n\n- 版面 390 × 844\n- 余白 上 60 右 20 下 34 左 20\n\n## 強調\n2 行目のみ。手段は 拡大 だけ。ほかは変えない\n\n## 文字（版面 390px に対する px）\nfigure 34px / 700 / 行送り 1.2 / 等幅数字\nlabel 13px / 400\ndelta 13px / 500 / 等幅数字\nname 14px / 400\namount 14px / 500 / 等幅数字\n\n## 配色\n地 #0E1116 / 面 #1C2230 / 文字 #F4F5F7 / 補助 #8B949E / 強調 #4C8BF5 / 罫 #232B39 / #25D88A\n\n## 外すと崩れる点\n- 数字は等幅（tabular）に切り替える。それだけで精度の印象が変わる\n- 増減を色に頼らない。「+」「−」と強弱で示す（色覚配慮と海外展開の両方に効く）\n- チャートの初画面占有率を 30〜45% に置く。視線の起点が固定される\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/2026-04-18-fintech-mobile-dashboard/pattern.html", "en": "Produce one mobile screen to the following specification.\n\n- Canvas 390 × 844\n- Margin top 60 right 20 bottom 34 left 20\n\n## Emphasis\nrow 2 only, by scale and nothing else\n\n## Type (px against a 390px canvas)\nfigure 34px / 700 / leading 1.2 / tabular numerals\nlabel 13px / 400\ndelta 13px / 500 / tabular numerals\nname 14px / 400\namount 14px / 500 / tabular numerals\n\n## Colour\nGround #0E1116 / Surface #1C2230 / Ink #F4F5F7 / Muted #8B949E / Accent #4C8BF5 / Rule #232B39 / #25D88A\n\n## Constraints — dropping these breaks it\n- Switch figures to tabular numerals — it alone changes how precise the screen reads\n- Signal gain and loss with + / − and weight, not red and green\n- Give the chart 30–45% of the first screen so the eye has a fixed entry point\n\nReplace the content with [your content]. Keep the measurements and colours as given.\nFor an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/2026-04-18-fintech-mobile-dashboard/pattern.html." }, "code": { "html": "\n\nフィンテックのモバイルダッシュボード\n\n\n\n
\n
\n
\n

総資産

\n

3,482,900

\n

+ 42,180今月

\n
\n\n
\n

推移 — 直近 6 か月

\n \n \n \n \n \n
4月5月6月7月8月9月
\n
\n\n
\n

直近の取引

\n
積立買付− 30,000
\n
配当金+ 4,120
\n
口座振替+ 80,000
\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/2026-04-18-fintech-mobile-dashboard/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/2026-04-18-fintech-mobile-dashboard/font.css", "https://design-vault.pages.dev/designs/2026-04-18-fintech-mobile-dashboard/font-0.woff2", "https://design-vault.pages.dev/designs/2026-04-18-fintech-mobile-dashboard/font-1.woff2", "https://design-vault.pages.dev/designs/2026-04-18-fintech-mobile-dashboard/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/2026-04-18-fintech-mobile-dashboard", "en": "https://design-vault.pages.dev/en/designs/2026-04-18-fintech-mobile-dashboard" }, "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。編集するのは `pattern.html`\nだけで、寸法を手で書き直すことはない。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it, so the three cannot drift apart.\nEdit the artboard, never the numbers.\n\n### Techniques\n\n- 数字は等幅（tabular）に切り替える。桁が揃うだけで「精度」の印象が変わる\n- 増減は緑 / 赤に頼らず「+」「−」と太さで示す。色覚配慮と印刷の両方に効く\n- チャートを初画面の 40% に置くと、視線の起点がそこに固定される\n\n### Apply to\n\n- 個人資産 / 経費 / 健康データなど、数値が主役のモバイルアプリ\n- 社内向けの KPI モバイルビュー（Slack モバイルから飛ばす系ダッシュボード）" }