はじめに
「手取りっていくら？」「住宅ローン組んだら月々いくら？」「新NISAでどれくらい増える？」
こういったお金の計算って、皆さんどうしてますか？
既存のシミュレーターサイトは広告だらけだったり、デザインが古かったり、会員登録が必要だったり...。 「自分好みのシミュレーターサイト、AIに作らせたら早いのでは？」 と思い立ち、実際にやってみました。
結果、AIとのペアプログラミングだけで12種類のシミュレーターを備えたサイトが完成しました。
🔗 サイト：https://money-simu.com/
完成したもの
カテゴリ ツール 概要
💰 給与 手取り計算 年収から手取り額を計算
🎉 給与 ボーナス手取り ボーナスの実際の手取り額
📊 税金 所得税・住民税 年収から税金額を計算
💼 税金 副業の確定申告 副業収入の税金額
₿ 税金 仮想通貨の税金 暗号資産の利益にかかる税金
🏠 ローン ローン返済計算 住宅ローンの月々返済額
🏦 投資 新NISA積立 S&P500等の将来資産を計算
📈 投資 複利計算 複利の力で将来の資産額
🥇 投資 金(ゴールド)投資 金の資産推移シミュレーション
🏡 節税 ふるさと納税 控除上限額を計算
🧱 制度 103万・130万の壁 壁を超えた時の手取り変化
👴 年金 年金シミュレーター 将来受け取れる年金額
すべて 完全無料・登録不要・スマホ対応 で、入力するとリアルタイムに結果が更新されます。
AIとどうやって作ったか
使ったAIツール
開発にはAIコーディングアシスタントを使用しました。コードエディタ上でAIとチャットしながら、指示を出してコードを書いてもらうスタイルです。
開発の流れ
実際の開発フローはこんな感じでした：
- 「手取り計算シミュレーターを作って」と指示
- AIがHTML/CSS/JSを一式生成
- ブラウザで確認 → 「ここもっとカッコよくして」
- AIが修正 → 確認 → 「テーブルも追加して」
- 繰り返し...
- 1ツール完成 🎉
- 次のツールへ（以下ループ）
自分がやったのは「何を作りたいか」を伝えることと、出来上がったものを確認してフィードバックすることだけです。
AIへの指示の例
実際にどんな指示を出していたかの例です：
「年収を入力したら、所得税・住民税・社会保険料を差し引いた
手取り額をリアルタイムで計算するWebページを作ってください。
ダークモードベースのモダンなデザインで、スマホ対応もお願いします」
「このサイトに新NISAの積立シミュレーターを追加してください。
S&P500やオルカンの想定利回りで積立投資した場合の
将来資産をグラフ付きで表示してほしいです」
「SEO対策として、全ページにsitemap.xml、OGPタグ、
構造化データ（JSON-LD）、canonical URLを追加してください」
こんな感じの日本語の指示だけで、AIがコードを書いてくれます。
技術的にどうなっているか
フレームワーク不使用
AIが生成したのは 素のHTML/CSS/JavaScript でした。React や Vue は使っていません。
これが結果的に良かったポイント：
⚡ 表示が爆速 — バンドルサイズ0、HTMLをそのまま配信
🔧 ビルド不要 — npm install も npm run build も不要
📦 依存ゼロ — node_modules がない幸せ
🧠 コードが読みやすい — フレームワーク固有の知識が不要
デザインもAI任せ
「モダンでカッコいい感じにして」という雑な指示でも、AIは以下のようなデザインを実装してくれました：
🌙 ダークモードベースの洗練されたUI
🫧 背景にフローティングオーブのアニメーション
🔮 グラスモーフィズム（すりガラス風）のヘッダー
✨ ホバーで光るカードエフェクト
📱 レスポンシブ対応
デザインセンスに自信がなくても、AIがいい感じに仕上げてくれるのは本当にありがたいです。
SEO対策もAIに丸投げ
「SEO対策して」と言ったら、以下を全ページに一括で実装してくれました：
sitemap.xml
/
robots.txt
canonical URL
OGP・Twitter Card メタタグ
JSON-LD 構造化データ
セマンティックHTML
カスタム404ページ
手動でやったら丸一日かかる作業が、AIに指示するだけで数分で完了しました。
AIで開発して感じたこと
良かった点
ポイント 詳細
🚀 圧倒的なスピード 1ツールあたり数十分で完成。12ツールでも驚くほど早い
🎨 デザイン力の補完 デザイナーでなくてもプロっぽいUIが手に入る
📚 税計算ロジックの実装 累進課税・社会保険料など複雑なロジックもAIが正確に実装
🔄 修正が楽 「もう少しこうして」で即座に修正してくれる
注意が必要な点
ポイント 詳細
✅ 検算は必須 税金計算など、AIの出力をそのまま信用するのは危険。必ず検算する
🔍 細かい調整は人間の目 全体的な統一感やUXは、最終的に人間がチェックすべき
📝 指示の出し方が重要 曖昧な指示だと曖昧な結果になる。具体的に伝えるほど精度が上がる
まとめ
AIコーディングアシスタントを使って、12種類のお金シミュレーターサイト を個人開発しました。
感じたのは、AIは「何を作りたいか」が明確な人にとって、最強のツールになるということ。プログラミングの知識が浅くても、AIとの対話を繰り返すだけでちゃんと動くWebサイトが完成します。
特に今回のような「ロジックが明確な計算ツール」はAI開発との相性が抜群でした。
ぜひ使ってみてください！フィードバックもお待ちしています 🙌