【個人開発】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開発との相性が抜群でした。

デザインも使い勝手も、個人開発の計算ツールとしてはかなり便利に仕上がっていると思うので、ぜひ一度触ってみてください！🙌

🔗 マネーシミュ | 無料のお金計算ツール集