はじめに
約1ヶ月前、Claudeを使って家計簿WebアプリをHTML/CSS/JavaScriptで作りVercelに公開しました。
【シンプル家計簿】https://kakeibo-khaki.vercel.app/
公開後も機能追加・改善を続け、現在はこんな機能を持つアプリになっています。
- 月別収支管理
- カテゴリ別円グラフ
- 予算設定・超過アラート
- 固定費の自動追加
- CSVエクスポート
- カテゴリのカスタマイズ
- ダークモード対応
この記事では1ヶ月運用して気づいたことをまとめます。
技術面でわかったこと
① localStorageの限界
データをlocalStorageに保存しているため、複数端末での同期ができません。スマホで入力したデータがPCで見られない、という制限があります。
将来的にはSupabaseなどのサーバーサイドに移行する予定です。
② CSSのメンテナンスコスト
最初は各HTMLファイルに<style>タグでCSSを書いていました。ページが増えるにつれて同じCSSが6ファイルに重複する状態になりました。
style.cssに共通化してからは、デザイン変更が1ファイルの修正で完結するようになりました。
<!-- 変更前：各ファイルに<style>タグ -->
<style>
/* 300行のCSS */
</style>
<!-- 変更後：1行で済む -->
<link rel="stylesheet" href="style.css">
③ ユーザー視点で使ってみることの大切さ
実際に自分で使ってみると「不便だな」と感じる点がたくさん出てきます。
- カテゴリが固定で使いにくい → カスタマイズ機能を追加
- 夜に画面が眩しい → ダークモードを追加
- 毎月同じ固定費を入力するのが面倒 → 自動追加機能を追加
「使ってみて不便に感じたこと」を一つずつ直すのが、アプリ改善の一番の近道でした。
SEO・収益化面でわかったこと
Search Consoleのデータ（1ヶ月後）
| 指標 | 数値 |
|---|---|
| 表示回数 | 39回 |
| クリック数 | 2回 |
| 平均掲載順位 | 7.2位 |
せっかく作ったのに誰も見てくれない…それは当たり前！
まだまだ知名度も低く、クリック数も少ないですがこれからも更新していこうと思います。
AdSenseはまだ審査中
公開と同時に申請しましたが、3週間経過した現在も「準備中」のままです。アクセス数が増えれば承認される可能性が上がると判断し、引き続き記事投稿を続けています。
開発面でわかったこと
AIとの開発は「壁打ち」が大事
Claudeにコードを生成してもらうだけでなく、「なぜこの実装にしたのか」を聞いたり、コードの意味を問題形式で確認したりすることで、少しずつ自分の理解が深まってきました。
小さく作って少しずつ改善する
最初から完璧なものを作ろうとしないことが大事でした。シンプルな状態で公開して、使いながら改善を繰り返すほうがモチベーションも続きます。
まとめ
| 気づき | 内容 |
|---|---|
| 技術面 | localStorageの限界・CSS共通化の重要性 |
| 改善面 | 自分で使うことで不便な点が見つかる |
| SEO面 | 記事投稿が被リンクになって効果が出た |
| 収益化 | AdSenseはアクセスが増えてから通りやすくなる |
| 開発面 | 小さく作って少しずつ改善が正解 |
2本目のアプリ（スイスドロー対戦管理アプリ）の開発も始めているので、またレポートします！
★開発したアプリ
【シンプル家計簿】https://kakeibo-khaki.vercel.app/