Works -

これまで作成した実績

サイトイメージ

scroll

サイトイメージ
個人開発

貯金習慣化アプリ「がまん貯金」

概要
日常の節約を“我慢の可視化”によって習慣化することを目的に開発した個人アプリ。Next.js(App Router構成)とSupabaseを用いて、認証・データ管理・グラフ表示などを実装。React Hook FormやZodを活用し、入力バリデーションやユーザー体験を重視した設計。UI/UXデザインにも注力し、モバイル中心の直感的な操作性を追求。
ターゲット
節約意識はありながらも貯金を継続することが苦手な、20〜30代の一人暮らし社会人を想定。
課題
自分自身、貯金を習慣化することが苦手で、続けられる仕組みがほしいと感じていた。既存の家計簿アプリは数多くあるものの、どれも継続できなかった。原因は「貯金の習慣化」にあると考え、日々の我慢を可視化できるアプリを開発した。
目的
日常の中で我慢した支出を“見える化”することで、貯金を楽しみながら習慣化できる仕組みをつくること。
主な機能
ユーザー認証(ログイン・サインアップ)
Supabase Authで認証管理を実装。
目標設定機能
目的・金額・期限を登録し、達成率を表示。
我慢記録の登録
金額・カテゴリ・メモを入力して記録。
進捗グラフ表示
円グラフ・棒グラフで貯金の推移を可視化。
カレンダー表示
日別の記録をカレンダーで一覧表示。
ユーザー設定
アドレス・名前・画像の変更に対応。
今後の更新
PC画面へのレスポンシブ対応
PCでも快適に操作できるレイアウトへ最適化。
フォルダ管理機能の追加
目標ごとに記録内容を整理できるフォルダを作成。
達成バッジ機能の実装
貯金額や記録日数に応じてバッジを付与。
カテゴリー追加機能
ユーザー自身でカテゴリーを作成・編集可能に。
ダークモード対応
好みに合わせて配色を切り替え可能に。
担当領域 / 制作期間
構成 / デザイン作成
30時間
コーディング
161時間
合計
191時間
使用技術
Next.jsReactTypeScriptTailwindSassSwiperReact Hook FormzodReact Hot Toast
使用ツール
デザイン
CanvaFigma
開発環境
Visual Studio Code
開発支援
Chrome DevToolsTerminal (zsh)ESLintPrettier
コーディング
GitHubnpm
バックエンド
SupabaseZustand
デプロイ
Vercel
デモアカウント
Email
demo@demo.com
PW
demo1234

Other Works -

その他、作成サイト実績

サイトイメージ画像pc
サイトイメージ画像pc
サイトイメージ画像pc
サイトイメージ画像pc
サイトイメージ画像pc
サイトイメージ画像pc
サイトイメージ画像pc
サイトイメージ画像pc
サイトイメージ画像pc
サイトイメージ画像pc
サイトイメージ画像pc
サイトイメージ画像pc
デコレーション