【個人開発】AIとペアプロして12種の「お金シミュレーター」を爆速開発し、SEOとE-E-A-T対策まで自動化した話
はじめに
「手取りっていくら？」「住宅ローン組んだら月々いくら？」「新NISAでどれくらい増える？」
こういったお金の計算って、皆さんどうしてますか？
既存のシミュレーターサイトは広告だらけだったり、デザインが古かったり、会員登録が必要だったり...。
「自分好みの分かりやすいシミュレーターサイト、AIに作らせたら早いのでは？」 と思い立ち、実際にやってみました。
結果、AIとの対話（プロンプトエンジニアリング）だけで、12種類のシミュレーターを備えたサイトが爆速で完成しました。
🔗 サイト：マネーシミュ | 無料のお金計算ツール集
完成したもの（12種類のツール）
| カテゴリ | ツール | 概要 |
|---|---|---|
| 💰 給与 | 手取り計算 | 年収から手取り額を計算 |
| 🎉 給与 | ボーナス手取り | ボーナスの実際の手取り額 |
| 📊 税金 | 所得税・住民税 | 年収から税金額を計算 |
| 💼 税金 | 副業の確定申告 | 副業収入の税金額 |
| ₿ 税金 | 仮想通貨の税金 | 暗号資産の利益にかかる税金 |
| 🏠 ローン | ローン返済計算 | 住宅ローンの月々返済額 |
| 🏦 投資 | 新NISA積立 | S&P500等の将来資産を計算 |
| 📈 投資 | 複利計算 | 複利の力で将来の資産額 |
| 🥇 投資 | 金(ゴールド)投資 | 金の資産推移シミュレーション |
| 🏡 節税 | ふるさと納税 | 控除上限額を計算 |
| 🧱 制度 | 103万・130万の壁 | 壁を超えた時の手取り変化 |
| 👴 年金 | 年金シミュレーター | 将来受け取れる年金額 |
すべて 完全無料・登録不要・スマホ対応 で、入力するとリアルタイムに結果がグラフ付きで更新されます。
フレームワーク不使用という選択（バニラJSの逆襲）
今回、AIに生成させたのは 素のHTML / CSS / Vanilla JS です。React や Vue などは一切使っていません。
これが結果的に大正解でした。
- ⚡ 表示が爆速 — バンドルサイズゼロ。HTMLをそのまま配信。
- 🔧 ビルド不要 —
npm installもnpm run buildも不要。即座にデプロイ。 - 📦 依存ゼロ —
node_modulesのブラックホールが存在しない幸せ。 - 🎨 グラスモーフィズムUI — 「モダンでカッコいい感じ」という雑な指示だけで、洗練されたダークモードUIをAIが組んでくれました。
🚫 立ちはだかる「AdSense審査」の壁
意気揚々とGoogle AdSenseに申請したものの、結果は**「有用性の低いコンテンツ」**で不合格。
計算機ツール単体だけでは「独自の価値がない（ただのプログラム）」と判断されてしまうためです。
そこでAIを使ってE-E-A-T（経験、専門性、権威性、信頼性）対策を徹底的に行い、個人ブログとしての価値を跳ね上げました。
1. 専門的で実用的な「解説コラム」の追加
単なる計算機能の下に、「源泉徴収とは？」「副業の20万円ルールと住民税申告の違いとは？」といった専門的で実用的な解説テキストをAIに生成させ、全ページに配置しました。
2. 「CSSだけで作る」ダミー書類の図解
文字だけだと読まれないため、ふるさと納税や副業のページに「源泉徴収票」や「住民税決定通知書」のダミー図解を追加。
ポイントは、AIの画像生成ではなく**「HTMLとCSSのテーブル」で本物そっくりにコーディング**したことです。（AI画像生成だと日本語が文字化けしてしまうためです）。
▼ 実際にAIに投げたプロンプト例
「AIだと日本語の書類画像が文字化けしてしまうので、代わりにHTMLのtableタグとCSSだけで、『住民税決定通知書』のダミー図解を作成してください。ユーザーが確認すべき『総所得金額等』のセルだけを、CSSで太い赤枠と吹き出しをつけて目立たせてください。」
出来上がったスニペットの一部がこちらです。
<tr>
<th style="background: rgba(239, 68, 68, 0.1); color: #dc2626;">総所得金額</th>
<th style="position: relative;">
4,060,000
<!-- 見るべき数字をCSSの赤枠と吹き出しでハイライト -->
<div style="position: absolute; border: 3px solid #ef4444;"></div>
<div style="position: absolute; background: #ef4444; color: #fff;">👆シミュレーターにはこの数字を使います</div>
</th>
</tr>
スマホで拡大しても一切解像度が落ちず、SEO的にも「質の高い専門テキストが含まれている」と見なされるようになったため一石二鳥のハックでした。
🚀 グロースハック：回遊率と流入を爆増させる2つのハック
さらにサイトを伸ばすため、AIに自動化スクリプトを書かせて以下の2つの施策を打ちました。
1. プログラマティックSEO（入り口の量産）
普通は「手取り計算」というビッグキーワードでしか検索ヒットしませんが、世の中には**「年収400万 手取り」「年収500万 手取り」**と検索する人が山のようにいます。
そこで、ベースとなる手取り計算のHTMLをテンプレートとし、年収の値やmeta要素（title, description等）を置換して35個の専用ランディングページ（静的HTMLファイル）を一気に出力するPythonスクリプトを作成しました。
Next.jsなどの動的ルーティングを使わず、あえて静的ファイルをベタ置きで生成・デプロイすることで、設定不要で瞬時にインデックスされる戦略です。一気に検索の入り口を50倍に増やし、ロングテールキーワードを総取りする狙いがあります。
2. 「次のおすすめ」相互リンクの自動挿入
ユーザーが「手取り計算」をしたあとに、「👇 次は『ふるさと納税』や『103万の壁』も計算してみませんか？」 と、各ツールと相性の良い別ツールへのサジェストを画面下部に表示する仕組みです。
これもSEO評価を最大化させるため、クライアントサイドのJSで動的に表示するのではなく、デプロイ前にPythonスクリプトを実行し、全12個の静的HTMLファイルに対して静的に要素（DOM）を直接追記・書き換えを行いました。Googleのクローラーが確実にすべての関連リンクを辿れる（インデックスされる）状態にしています。
これにより、ユーザーの回遊率と滞在時間が飛躍的に高まりました。
まとめ
プログラミングの深い知識がなくても、「何を作りたいか」「どうグロースさせるか」という指示（ディレクション）さえ的確であれば、AIは最強の相棒になります。
特に今回のような「ロジックが明確な計算ツール」×「泥臭いSEO対策」は、AI開発との相性が抜群でした。
デザインも使い勝手も、個人開発の計算ツールとしてはかなり便利に仕上がっていると思うので、ぜひ一度触ってみてください！🙌