予算プランナー
月次収入と支出を追跡し、カテゴリー別の支出を視覚化して、予算をCSVにエクスポートします。
このツールについて
ラベルと金額を付けて収入と支出のアイテムを追加します。支出はカテゴリーでタグ付けされます：住宅、食費、交通、娯楽、その他。ライブサマリーには収入合計、支出合計、純残高が表示されます（プラスの場合は緑、マイナスの場合は赤でハイライト）。SVGパイチャートがカテゴリー別の支出を一目で分解します。すべてのデータはlocalStorageに自動保存されるため、訪問をまたいで予算が保持されます。ワンクリックでCSVにエクスポートまたはすべてをクリアできます。
使い方
- 1 ラベルと金額を入力し、「収入を追加」をクリックして収入アイテムを追加してください。
- 2 ラベル、金額を入力してカテゴリーを選択して支出アイテムを追加してください。
- 3 サマリーバーで収入合計、支出、純残高を確認してください。
- 4 パイチャートでビジュアルな内訳を確認するか、「CSVをエクスポート」をクリックしてデータをダウンロードしてください。
What a budget planner actually does
A budget is a comparison: money coming in against money going out. This planner lets you add named income items (salary, freelance, interest) and named expense items, each tagged with a category. From those lists it computes three headline numbers and a visual breakdown. The arithmetic is deliberately simple — that is the point of a budget — but seeing it laid out and categorised is what turns a vague sense of your finances into a decision you can act on.
The three summary figures are:
- Total income = the sum of every income amount.
- Total expenses = the sum of every expense amount.
- Net balance = total income − total expenses.
A positive net balance is a surplus (you can save or invest it); a negative one is a deficit (you are spending more than you earn). The planner colours the net green when it is at or above zero and red when it falls below, so the health of your month is visible at a glance.
A worked example
Suppose you add one income item, Salary $3,000, and three expenses: Rent $1,200 (Housing), Groceries $400 (Food), and Bus pass $90 (Transport). The planner shows:
| Figure | Calculation | Result |
|---|---|---|
| Total income | 3000 | $3,000.00 |
| Total expenses | 1200 + 400 + 90 | $1,690.00 |
| Net balance | 3000 − 1690 | $1,310.00 (surplus) |
The pie chart then splits the $1,690 of expenses by category: Housing is 1200 ÷ 1690 ≈ 71.0%, Food ≈ 23.7%, and Transport ≈ 5.3%. Each slice's percentage is its category total divided by total expenses, which is exactly how the legend labels them.
Why categories and the pie chart matter
The net balance tells you whether you are overspending; the category breakdown tells you where. Grouping expenses into Housing, Food, Transport, Entertainment, and Other reveals the shape of your spending. A common benchmark many people use is the 50/30/20 guideline — roughly 50% of after-tax income on needs, 30% on wants, 20% on saving and debt repayment. With the pie chart you can sanity-check your own ratios: if Housing alone is eating well over half your income, that is the lever with the most impact.
Your data stays on your device
This planner saves your income and expense lists in your browser's local storage, not on any server. That has two practical consequences. First, your numbers are private — nothing financial is uploaded or transmitted. Second, the data persists in that browser on that device: close the tab and your budget is still there when you return, but it will not appear on a different computer or after clearing site data. Use the Export CSV button to keep a copy you can open in a spreadsheet or move between machines.
Practical tips
- Normalise to one period. Put everything on the same timescale — all monthly, or all weekly. Mixing a monthly salary with a weekly grocery figure makes the net balance meaningless.
- Include irregular costs. Annual bills (insurance, subscriptions) are easy to forget. Divide them by 12 and add the monthly slice so a "good" month does not hide a yearly hit.
- Name items specifically. "Streaming $45" tells you more than "Entertainment $45" when you later look for cuts.
- Export regularly. Because storage is per-browser, export a CSV snapshot if you want a backup or a record across months.
Common mistakes
- Counting gross instead of net income. Budget with take-home pay after tax, not your headline salary, or your surplus is fictional.
- Leaving everything in "Other". An uncategorised pie chart hides the very information that makes the tool useful — assign a real category to each expense.
- Forgetting it is per-device. Clearing browser data or switching computers loses an un-exported budget. Treat the CSV export as your durable copy.