💰

家計簿・お金管理アプリ

収支を記録してグラフで見える化。毎日使える実用アプリ

Webアプリ・サイト 初級 ⏱ 目安 2〜3日

どんなもの?

収入と支出を記録して、月ごとの収支やカテゴリ別の割合をグラフで見られる家計簿アプリ。市販アプリでは物足りない「自分専用の集計」を作れるのが自作の魅力。データ入力・保存・集計・グラフ表示という、実用アプリの基礎が一通り学べます。

こんな人におすすめ

自分の生活で毎日使うアプリを作りたい初心者

🎯 完成すると手に入るもの

収入と支出を記録して、月ごとの収支やカテゴリ別の割合をグラフで見られる家計簿アプリが手に入ります。市販アプリでは物足りない「自分専用の集計」を作れ、スマホから毎日記録できます。

おすすめの技術スタック

家計簿は「手早い入力」と「分かりやすい集計」が核。データはSupabaseに保存し、グラフ表示のあるフロントをCursorで実装、Vercelで公開。毎日スマホから使うのでレスポンシブ対応も重要です。

費用の目安

✓ 完全無料で始められます

完全無料で作って公開できます。Supabase・Vercelの無料枠は個人の家計簿アプリには十分です。

項目費用補足
Cursor無料プランでOK無料枠で作れます
Supabase(DB+ログイン)無料枠でOK個人利用は無料枠内
Vercel(公開先)無料個人利用は無料
GitHub無料個人利用は無料

必要なアカウント

開発を始める前に、下のサービスの無料アカウントを用意しておきましょう。

Cursor 必須 無料プランあり

AIに指示してコードを書いてもらうエディタ。開発の主役です。

登録ページを開く →
Supabase 必須 無料枠あり

データの保存とログイン機能をまとめて提供。アプリの裏側を担います。

登録ページを開く →
Vercel 必須 無料枠あり

作ったアプリをインターネットに公開する場所。

登録ページを開く →
GitHub 必須 無料

コードを保存し、公開先へ自動連携するための土台。開発の必需品です。

登録ページを開く →

必要なAPIキー・設定

APIキーとは、外部のサービスを自分のアプリから使うための「合鍵」です。下記を取得・設定します。

Supabase URL と APIキー 取得先: Supabaseプロジェクトの設定画面 アプリからデータベースに接続するための情報。プロジェクト作成時に自動発行されます。

作り方: まずこのプロンプトをClaudeに送る

細かい手順を覚える必要はありません。下のプロンプトをコピーして、Claude(やCursorのAIチャット)にそのまま貼り付けてください。 あとはClaudeが1ステップずつ伴走してくれます。詰まったら、エラー文や状況をそのまま伝えれば解決に導いてくれます。

📋 最初に送るプロンプト
あなたはプログラミング初心者の私に、家計簿・お金管理アプリの作り方を最初から最後まで伴走してくれるメンターです。以下の前提と要望をふまえて、私が迷わないように「一度に1ステップずつ」教えてください。 【私の状況】 - プログラミングはほぼ未経験です。専門用語は都度かんたんに説明してください。 - パソコンはWindows(またはMac)を使っています。※実際のOSに置き換えて伝えてください - AIエディタ「Cursor」をインストール済みです。 - 必要な無料アカウント(このページに記載のもの)は作成済みです。 【作りたいもの】 - 収入と支出を記録して、月ごとの収支やカテゴリ別割合をグラフで見られる家計簿アプリ。 - 金額・カテゴリ・日付・メモを素早く入力できるようにしたい。 - Supabaseにデータを保存し、メールでログインできるようにしたい。 - ログインユーザーが「自分のデータだけ」見られるようセキュリティ(RLS)も設定したい。 - 月ごとの収支サマリーと、支出のカテゴリ別円グラフを表示したい。 - 最終的にVercelで公開して、スマホから毎日使えるようにしたい。 【進め方のお願い】 1. まず全体像(何をどの順でやるか)を、専門用語なしで箇条書きで教えてください。 2. そのあと、最初のステップだけを具体的に指示してください。私が「できた」と言ったら次へ進んでください。 3. 各ステップでは、私が実行するコマンドや操作を省略せずに書き、それが「何のための作業か」も一言添えてください。 4. エラーが出たら私がその文面を貼るので、原因と対処をやさしく説明してください。 5. データベースやログインを扱う場合は、セキュリティ(他人にデータが見えない設定)も忘れずに教えてください。 6. 途中で必要なファイルの中身は、コピーして貼れる完全な形で提示してください。 まずは【1】の全体像から教えてください。

※ 【私の状況】の部分(OSや、まだ登録していないアカウント)は、あなたの環境に合わせて書き換えてから送ると精度が上がります。

つまずきやすいポイント

収益化のヒント

Supabase・Vercelなど開発に使うツールの紹介が導線。家計・節約系の読者にも届きます。

関連する作りたいもの

← 他の「作りたいもの」を見る