「個人事業主向けの出納帳をWebで作って！」
簿記の知識がなくても、AIの力で自分専用の業務アプリを作れる時代になりました。面倒なインストールは不要、ブラウザで完結、しかも無料！
「個人事業主向けの出納帳をWebで作って！」
既製品の帳簿を利用したり、手書きもアリですが、Web（ブラウザー）で普段使いができるのは良いですよ！
そもそもGeminiとは？
Geminiは、Googleが提供する生成AI。
Google AI Studioを使えば、Geminiに指示（プロンプト）を与えるだけでHTMLやJavaScriptのコードも簡単に生成してくれます。
今回は、この機能を使って「収入・支出を記録し、合計を自動計算してくれるHTML出納帳アプリ」を作っていきます。
個人事業主向けの出納帳を作成したいです。HTMLとJavaScriptで以下の機能を実装してください。
ステップ① Geminiにプロンプトを入力
Google AI Studioにアクセスし、以下のようなプロンプトを入力します
個人事業主向けの出納帳をWebで作って！
・日付、項目、収入、支出の入力欄
・追加ボタンを押すと、入力内容が表に追加される
・収入と支出の合計を自動で計算・表示
・ローカルストレージに保存（次回開いた時にも残っている）
ステップ② Geminiが生成したコードをコピペ
数秒でGeminiがコードを生成してくれます。生成されたHTMLコードをメモ帳などにコピペし、.htmlファイルとして保存しましょう。
ファイルをブラウザで開くと、もう動く出納帳が完成しています。
メニューで「プレビュー」を選択すると
この画面の仕様では印刷やデータ保存に検索等が出来ません。
そこで、違う仕様でお願いしてみました。
【変更点】
個人事業主向けの出納帳を作成したいです。HTMLとJavaScriptで以下の機能を実装してください。
・日付、項目、収入、支出の入力欄
・追加ボタンを押すと、入力内容が表に追加される
・収入と支出の合計を自動で計算・表示
・ローカルストレージに保存（次回開いた時にも残っている）
・シンプルでモバイル対応のCSS付き
カスタマイズ内容
方法（例）
消費税自動計算機能を追加
JSに税率を追加
印刷ボタンを追加
window.print()をJSで記述
テーマカラー変更
CSSで変更
CSVエクスポート機能
Blob APIを使って実装可能
【出力】
公開リンクを取得できるので、実際にテストも出来ます。
カスタマイズポイント
Geminiで作成されたコードは、基本的に以下のような構造になります
- <input>で収入・支出を入力
- <table>で一覧表示
- <script>で追加・削除・保存処理を管理
- localStorageでデータ保存
少しHTML/CSSの知識がある人は、以下のようなカスタマイズも可能です
注意点と活用例
✅ 注意点
- セキュリティ的にはローカル用途向けです（Webアップロードには注意）
- データ消去されないよう、バックアップはこまめに！
💡 活用例
- 月ごとの帳簿管理
- レジの売上記録
- イベントの出費記録
まとめ
Geminiを使えば、非エンジニアでも業務ツールを自作できます。
今回は「個人事業主向け出納帳」を例に紹介しましたが、他にも「見積書作成アプリ」「簡易ToDo管理表」「在庫チェックツール」など、アイデア次第でいろいろ作れます。
あなたも作ってみよう！
「作ることでしか見えない景色がある」
Geminiを使って、あなた専用の業務アプリを一緒に作ってみませんか？
コメント