僕がGeminiの力を借りて作った、金種計算ツール「Money Counter」の開発記録です。枚数の入力や合計の表示など、小さな機能をどう使いやすくしていったかを紹介します。
「アイデアはあるけど、どうすればいいかわからない」
個人開発に興味はあるけど、なかなか踏み出せない——そんな状態が続いていました。
プログラミングは少し勉強したことがある。でも「自分の力でWebアプリを一本作り切る」なんて、まだまだ無理だと思っていました。
そんなとき試したのが、AIを使いながら開発するという方法です。
結果、ちゃんと動くWebアプリを作ってインターネットに公開することができました。この記事では、そのときの体験を全部正直に書きます。「個人開発やってみたいけどどうすれば？」という方に届けばうれしいです。
作成したのはこちら↓
公開したアプリ：Money Counter（金種計算ツール）を開けます。
きっかけは「あったら便利なのに」という小さな不満
作ったのは Money Counter、日本円の金種計算ツールです。
レジ締めや現金集計のとき、「10,000円が3枚・5,000円が2枚・1,000円が5枚…」と数えて、それぞれ掛け算して、全部足す、という作業があります。慣れれば早いのですが、疲れているときや急いでいるときはミスが出やすい。
「枚数を入力したら合計が出るだけのシンプルなページがあれば十分なのに」と思ったのが出発点です。
既存のアプリを探してみたのですが、ちょうどいいものが見つかりませんでした。それなら作ってしまおう、と決めました。テーマはシンプルで、機能も最小限。「金種計算アプリの個人開発」にちょうどいい規模だと思ったことも、このテーマを選んだ理由のひとつです。
AIに頼ることに、最初は少し抵抗があった
正直に言うと、最初は「AIに書いてもらったコードって、自分で作ったと言っていいのか？」という気持ちがありました。
でも考え方が変わったのは、「AIはあくまで道具」だと気づいてからです。
大工さんが電動工具を使っても「自分で作った」と言いますよね。AIも同じで、使いこなせるかどうかが重要なのだと思うようにしました。「何を作りたいか」を考えること、Geminiに正確に伝えること、出てきたコードを確認して動かすこと——これは全部自分でやることです。
ファイルの編集まで手伝ってもらう方法は、Claude CodeをVS Codeで使う手順で紹介しています。
実際の開発の流れ
まず「作るもの」を言葉で整理した
いきなりコードを書こうとするのではなく、最初に紙に書き出しました。
- 誰が使う？ → レジ締めをする人、現金を集計する人
- 何ができる？ → 金種ごとに枚数を入力したら合計が出る
- どんな画面？ → 金種名・入力欄・合計金額が並んでいるシンプルなもの
これをやっておくと、Geminiへの指示がずっとスムーズになりました。「なんかいい感じのアプリ作って」では曖昧すぎて、回答も曖昧になります。具体的に伝えるほど、返ってくるコードの質が上がると感じました。
Geminiとの会話でコードを作っていった
最初にGeminiに伝えたのはこんな内容です。
「Next.jsを使って、日本円の金種（10,000円・5,000円・2,000円・1,000円・500円・100円・50円・10円・5円・1円）ごとに枚数を入力できるWebアプリを作りたいです。入力するたびに合計金額をリアルタイムで表示してください。紙幣と硬貨でセクションを分けてください。」
するとベースとなるコードを出してくれました。コピーしてファイルに貼り付けて動かしてみる。うまく動いたり、エラーが出たりします。
エラーが出たときは、そのエラー文もそのままGeminiに貼り付けて「このエラーはどういう意味ですか？どう直せばいいですか？」と聞きました。これを繰り返すうちに、少しずつ形になっていきました。
細かい部分が意外と時間がかかった
大枠の機能はわりとすぐできました。でも「使いやすさ」を詰めていくのが思った以上に時間がかかりました。
たとえば、入力欄に枚数が0のときに「0」と表示するか、空白にするか。「0」が10個並んでいると見づらいので空白にしたかったのですが、これだけで何度かGeminiとやり取りしました。
「合計金額をスクロールしても常に見えるようにしたい」という要望も、実装してみたら想定と違う動きになって、修正を繰り返しました。
こういった細かいUXの調整こそ、自分がこだわりを持って進める部分だと感じました。AIが出してくれるコードはベースであって、「使う人のことを考えて磨く」のは自分の仕事です。
公開まで
コードができたら、GitHubというサービスにアップロードして、Vercelというサービスと連携させました。この2つを使うと、ほぼ自動でインターネット上に公開されます。
独自ドメイン（自分のURL）の設定も、画面の指示に従えばできました。公開ボタンを押したあと、自分のスマホで開いて動作確認したときは、素直にうれしかったです。
開発を終えて気づいたこと
完璧なスキルがなくても、個人開発はできます。
今回はGeminiの力を借りながらでしたが、「アイデアを決める」「言葉で整理する」「動作確認する」「使いやすさを考える」という工程はすべて自分でやりました。それだけでも十分な達成感がありました。
また、AIとのやり取りを続けるうちに、コードの読み方が少しずつわかってきた感覚もあります。「この部分がボタンの処理なのか」「ここで計算しているのか」と理解が積み重なっていきました。
「自分には無理」と思っていたことが、小さく始めることで意外とできた——これが一番大きな収穫です。
Money Counterで考えた、入力・計算・URL共有のつながり
作るものはシンプルでも、入力欄の扱いで使い心地が変わりました。枚数が0の欄を空白にしたい、という前半の話もその一つです。見た目では空欄にしておき、計算するときは0枚として扱えれば、入力欄をすっきり見せながら合計を出せます。空欄をそのまま数値へ足して表示がおかしくならないよう、入力から計算へ渡す境目をそろえる考え方です。
たとえば1,000円札を3枚、500円玉を2枚なら、3,000円と1,000円を足して4,000円です。入力を変えるたびにこの結果が追いかけて変わると、利用者は計算ボタンを探さずに済みます。一方、枚数に小数やマイナスが入った場合をどう扱うかは、合計が出ることとは別に決めたい部分です。似たツールを作るなら、空欄、0、複数の金種を順に入れ、期待する合計を紙でも計算してみてください。
共有は、いまの入力を別の画面へ引き継ぐための仕組みとして考えられます。URLへ値を含める方式なら、リンクを開いた相手も同じ入力を読み取れるので便利です。その分、コピーする前にURLの中身を見て、誰に見せる数字なのかを考えます。人数や金額の例を小さく試し、空のURLで開く場合と、値を持つURLで開く場合の表示を比べると、復元する値の扱いも追いやすいです。
合計が見える位置、0の欄の見せ方、共有したときの分かりやすさ。こうした小さな部分を一つずつ詰めるのが、僕にとって初めての個人開発でした。AIからコードを受け取った後に、自分が使う人として触ってみる時間が、アプリの形を決めていったと思います。
同じ金種計算を作るなら、表示する数字の桁区切りも試してみてください。4000より4,000のほうが金額を読み取りやすくても、計算の途中にカンマ入りの文字列を混ぜると扱いにくくなります。計算では数値の4000を持ち、画面へ出すときに4,000円へ整える、と分けると考えやすいです。入力欄の見た目と、計算に使う値の役割を分ける点では、0を空欄にする話ともつながります。
最後は、スマホで上から順に枚数を入れてみます。最後の金種を入力したときにも合計を見られるか、数字を消して入れ直しやすいかを、自分が使う場面に沿って触ってみてください。こうした操作を一つずつ言葉にすると、次にGeminiへ頼む修正も具体的になります。
個人開発をやってみたい人へ
もし「自分もやってみたいけど不安」という方がいれば、こんな順番をおすすめします。
- 「あったら便利なのに」という小さな不満を探す（テーマ選びが一番大事）
- 機能を絞る（最初は「これだけできればいい」という最小限で）
- AIに具体的に伝えながら作る（曖昧な指示は曖昧な結果になる）
- とにかく公開する（完璧じゃなくていい）
最初から機能を増やしすぎず、小さく作って動作を確かめると進めやすくなります。公開前には、入力や計算の誤り、秘密情報が含まれていないかも確認してください。
次の開発では準備済みの土台を使いました。続きはMaskSheetで実務の表に合わせて改善した記録にまとめています。
おわりに
今回作った Money Counter は、ブラウザで無料で使えます。レジ締めや現金集計の際にぜひ使ってみてください。
この記事が「やってみよう」と思うきっかけになれば、とてもうれしいです。
感想やフィードバックは X（旧Twitter）@katasukeee08 までどうぞ！
