家計ボードは日々の収支を記録するだけでなく、あとから収支を振り返りやすいよう設計した家計簿Webアプリです。
入力・分析・固定費管理などの機能を備えており、日常的な収支管理を一通り行えるようになっています。
カテゴリー管理にはちょっとした工夫を凝らしており、例えば飲み会は「交際費」でもあり「外食費」でもあるように、1つの支出・収入に対して複数のカテゴリーを紐付けられるようにしています。
これにより「何に使ったお金なのか」を自分の感覚に合わせて柔軟に管理できます。
サムネイルにもありますが、実際の画面はこんな感じです。
小遣い稼ぎのために開発したわけではないので、有料プランなどは設けておらず、すべての機能を無料で利用できます。
この記事では、家計ボードでできることや、設計・実装でこだわったポイントを紹介します。
イントロダクション
家計簿サービスと言えば、巷で有名なのは
- マネーフォワード ME
- Zaim
- Moneytree
の3つかなと思います。
これらは銀行口座・証券口座・クレジットカード明細などとの連携機能によって、自動で家計や資産を管理できることを売りとしています。
ですがどうでしょう、例えばAMAZON.CO.JPという名目でクレカの請求があったとして、これが日用品なのか趣味の買い物なのかを判定することはできるのでしょうか？
他にも、例えば飲食店からの請求があったとして、それがただの外食費なのか、旅行中の食事なのか、はたまたデート中の食事なのかを判定することはできるのでしょうか？
要するに、機械的に連携された支出や収入データからそのイベントに対する背景情報を読み取るのは非常に困難です。
自動で連携されたデータを結局自分で仕訳する必要があるのであれば、わざわざ口座やクレカとの連携機能をサービス側に持たせる意味は薄れます。
アプリケーションの使い方も複雑化しますし、知らない間に連携が解除されていて口座の再接続処理が必要…だけどそれが面倒で放置…なんてことも普通に起き得ます。 (みなさんも経験あるかもしれません)
そういうのを嫌ってシンプルな家計簿アプリ・サービスを探してみるのですが、
- そもそもWeb上で展開されている家計簿サービスはほぼ無い
- スマホアプリで探してみても、データの保存先が端末内のみでPCから読み書きできない
- UIが好みではなく使う気になれない
- 有料プランありきの機能
というように、使うまでに至らないアプリばかりでした。
仕方がないのでExcelやGoogleスプレッドシートといった表計算ソフトを用いて自分で家計簿を運用していたのですが、これって家計ボードのようなサービスを必要としている人が他にも沢山いそうだなと思い、開発・公開に至りました。
機能紹介
支出・収入記録
当月の支出や収入の管理ができます。サマリーも上部に表示されます。
ロック解除ボタンを押下するとテーブルが編集可能な状態になるので、後から修正したい項目がある場合や、削除したい記録がある場合はこちらからどうぞ。(※後述の固定費画面にも同じ機能があります)
再度ボタンを押下し、テーブルをロックすると編集が保存されます。
クイック支出登録
表示要素を必要最低限の物に絞った、出先でぱぱっとスマホから支出を登録する際に便利なページです。(※PCからも使えます)
https://kakei-board.com/quick-registerへの直接アクセスでも、PC版ページのヘッダーにあるQRコードからもアクセスできます。
クイック支出登録画面へのショートカットアイコンをホーム画面に置いておくのがおすすめの使い方です👍
固定費管理
家賃やサブスク、ローンといった固定費の管理ができます。
ここで入力した内容は記録画面で入力した支出(変動費)と自動的に合算されます。
いつからいつまでその固定費を払っていたかという指定もできるので、途中で引っ越して家賃が変わった、なんて場合でも過去の記録が勝手に変わらないように管理できます。
カテゴリー管理
支出や収入に紐づけるカテゴリーの管理ができます。
ちょっと色の選択肢を増やしすぎた感があるので、将来的に絞るかもしれません🫠
なお、既存のカテゴリーの内容を編集したい場合は、一覧から編集対象のカテゴリーを選択し、フォームから内容を更新します。
分析
入力した支出・収入から分析したデータを表示します。
ダッシュボード形式のレイアウトにするところまでは決めていて、2項目ほど分析情報を出せるようお試しで実装してみたものの、その他の項目(カード)をどういうデザインで表示しようかが固まりきっておらず、現状コンテンツとしては寂しい画面になってしまっています… (リリースを早めることを優先したため)
AIを使ってどうにかできないか工夫してみましたが、既存のトンマナを踏襲してダッシュボードの各カードのUIをマークアップ・スタイリングするのが彼らは苦手なようで、ここは結局人間の手で1項目ずつUIをデザインしていく必要がありそうです。
結局今分析画面に並んでいる2項目も、片方は自分でデザインしたもので、もう片方がAIがデザインしたものを自分が微調整したものになります🙄
分析画面はリリース後に少しずつ項目拡充を進めつつ、ユーザー数が増えてきたら、月ごとだけでなく年ごとの分析などもできるような追加開発をしていく方向性でイメージしています。
こだわりポイント
無料ですぐ使い始められる
お金を管理するためにお金を払うのって正直アホらしくないでしょうか？
というのは半分嘘で半分本当なのですが、そもそも小遣い稼ぎやビジネス目的でやっていないのが最大の理由です。
自分が頑張って開発したものをみんなにも使ってみてもらう、自己満足です。
家計ボードの利用者が増えてインフラ費用が高騰した場合は寄付を募ったり広告を貼らせていただく可能性がありますが、有料化しようとは考えていません。
複数端末対応
意外とこれが出来るアプリが無い…
家計ボードにはユーザー登録・サインインの概念がありますので、アカウントが同じであれば他の端末からもデータの閲覧や編集ができます。
スマホでタイトルと金額だけとりあえず登録しておいて、あとからPCでまとめてカテゴライズする、なんて使い方も当然可能です。
きれいなUI
記事冒頭にも書きましたが、巷にある家計簿アプリは基本的にUIが古臭いものばかりです。2010年代中盤〜後半あたりによく見られたようなUIで溢れています。
でも今はもう2026年。AppleもLiquid Glassを本格的に展開していたり、最近ではGoogle Workspaceのロゴが全体的に刷新されるニュースもありました。
家計簿サービスは基本的にダッシュボードを除きテーブルとフォームで構成されるので、どうしても情報密度の緩急がつけにくく、のっぺりした見た目になりがちと考えています。
家計ボードではそうなりにくいように、背景にNext.js v13の初期画面にあしらわれていたような抽象的な図形パターン(参考)をあしらい、かつパネルにグラスモーフィズムチックな半透明+背景ぼかしエフェクトをかけてみたりして、画面に奥行き感が出るように演出しています。
フォントも
- Noto Sans JP
- IBM Plex Sans JP
- LINE Seed JP
- BIZ UDPゴシック
- 源ノ角ゴシック
あたりを試してみましたが、結局一番しっくりくるのはヒラ角(Hiragino Sans)だったので、Apple端末ではヒラ角、それ以外のWindowsやAndroidはヒラ角がそのままでは使えないので(仕方なく)Noto Sans JPがあたるようにしています。
カラースキームに関してはTailwindのカラースキームを取り入れていて、中でもプライマリーカラーを青系にすることによってAppleっぽさを演出し(?)ヒラ角との調和を図っています。
バイブコーダーではなく現役のプロが開発
最近はAIの進化によって、プログラミング未経験者でもバイブコーディングでそれっぽいWebサービスを作れる時代になりました。
ですがその手のサービスの多くは
- 少し機能追加すると破綻する
- データ構造に無理がある
- UIや挙動に一貫性がない
- 作者自身がソースコードを理解していない
といったような問題を抱えています。
家計ボードは、このブログでの技術発信や個人開発を長年続けてきた現役Webエンジニアである筆者が、AIも開発補助として活用しつつ、生成コードをそのまま貼り付けるのではなく保守性や拡張性まで考慮しながらソースコードを理解した上で設計・実装しています。(※ミラーサイトが作られると困るのでソースコードは非公開とさせていただいています。)
〆
せっかく開発してリリースしたプロダクトなので、家計ボードを使ってみた感想などご自身のSNSアカウントにてシェアいただけると大変嬉しいです🙌
サービスへの感想・お問い合わせは、家計ボード内に貼ってあるフォームでも、このブログ記事のコメント欄でもどちらでも承ってますのでお気軽にどうぞ！
この記事は 2026/05/26 02:17:05 にビルドされました
