家計管理アプリの UI テンプレート。
家計管理と支出管理のアプリの、完成した UI デザインです。概要や予算から統計、口座まで、1 か月分のリアルなお金のデータを入れたスマートフォン画面を 8 つ用意しました。合計はどの画面でもぴったり合い、どの画面も素の HTML と Tailwind なので、Codex や Claude Code がクローンして、あなたのアプリに仕立てられます。
2026年11月6日 更新
Mobile app · 8 screens · Free and open source
01概要 
02取引の追加 
03取引 
04取引の詳細 
05予算 
06統計 
07口座 
08プロフィール
Clone it
npx degit ummydev/ui-templates/apps/budgeting my-app
Copies just this template into a new folder, without the rest of the repository.
Make it yours
This is the 家計管理アプリ template from codexdesign.io. Rename it to [your product], replace the sample data with [your features], and keep every screen on the design system in DESIGN.md.
Paste this into Codex or Claude Code in the new folder.
Design system
Walletアプリわかりやすい残高、穏やかなグリーン、信頼できる数字。見出しは Manrope- Built with
- HTML · Tailwind CSS v4 · Lucide icons · SVG charts
テンプレートの内容
| 画面 | 内容 |
|---|---|
| 概要 | 今月の残高、収入と支出、予算の進捗、最近の取引 |
| 取引の追加 | 支出か収入か、金額のテンキー、カテゴリ、口座、日付、メモ |
| 取引 | 検索、フィルター、日ごとにまとめて日別の合計を表示する取引 |
| 取引の詳細 | 金額、カテゴリ、口座、日付、メモ、レシート、割り勘 |
| 予算 | 今月あといくら使えるか、カテゴリごとの予算、使いすぎのアラート |
| 統計 | カテゴリ別の支出、直近 6 か月、支出の多い店舗 |
| 口座 | 銀行、貯蓄、現金、クレジット、投資の口座をまたいだ純資産 |
| プロフィール | プロフィール、連続記録、通貨、リマインダー、データのエクスポート、設定 |
サンプルデータは、ある人の 11 月を米ドルで記録したものです。収入は $5,500.00、支出は $2,674.38、8 つの予算の合計は $3,020.00、純資産は各口座の合計と一致します。収入は緑でプラス記号付き、支出は文字色でマイナス記号付きで、赤は予算を超えたカテゴリにだけ使っています。
どの画面も 390×844 の HTML ファイル 1 つで、Tailwind CSS v4 と共通の tokens.css でスタイルし、グラフは SVG で描いています。ブラウザでファイルを開くだけで見られ、インストールもビルドも不要です。
Codex や Claude Code で使う
ui-templates リポジトリから、このテンプレートだけをコピーします。
npx degit ummydev/ui-templates/apps/budgeting my-budget-app
そのうえで、エージェントに自分のものにしてもらいましょう。
このフォルダは、家計管理アプリの UI テンプレートです。これを [アプリ名] に作り替えてください。対象は [想定するユーザー] です。DESIGN.md と tokens.css はデザインシステムとして残し、通貨は [自分の通貨] に、カテゴリは [自分のカテゴリ] に変更し、すべての合計が画面をまたいでそろうようにしてください。そのうえで、これらの画面を [Expo / SwiftUI / 自分のスタック] で作ってください。
デザインシステムは DESIGN.md に書かれているので、エージェントが新しく追加する画面、たとえば貯蓄目標や定期的な支払いのページも、すでにある 8 画面とそろいます。
Wallet デザインシステムが土台
このテンプレートは、金融アプリ向けのデザインシステム Walletを使っています。等幅数字で組んだ Manrope のわかりやすい残高、落ち着いた 1 色のグリーン、18px の角丸、48px のタッチ領域が特徴です。Wallet のページには、ライブプレビュー、DESIGN.md の全文、shadcn テーマがあります。
よくある質問
この家計管理アプリのテンプレートは無料ですか？
はい。MIT ライセンスのオープンソースで、個人のプロジェクトにも商用のプロジェクトにも使えます。
数字は本当にそろっていますか？
はい。残高、予算、グラフのパーセンテージ、純資産は、8 画面すべてでそろっています。そのため、あなたやエージェントが 1 つの数字を変えて、それを全体に反映させても、デザインの筋が通ったままです。
ダークテーマはありますか？
はい。どの画面でも <html> タグに class="dark" を追加すると、Wallet のダークテーマに切り替わります。