非エンジニアのRyoです。自分が学んだ内容を、同じように悩む非エンジニアの方のためになるように記事を作っていきます。
今回は、投資が好きな私がAIを使って投資シミュレータを開発した体験談を書いてみました。正直、最初は「AIでアプリが作れるって本当？」って半信半疑だったんですが、実際にやってみると想像以上にすげーことができて、マジで感動しました。
投資について他の人に説明するときに、銀行・貯蓄型保険・NISAの違いを言葉で説明するのがマジで大変だったんです。でも、50年間の資産推移を比較できるツールがあったら一番簡単に説明できるなと思って、Claude Codeで挑戦してみたんです。結果的に、非エンジニアの私でも6時間で高機能なWebアプリが完成しました。
開発のきっかけと動機
投資説明が大変だった経験
投資が好きで、周りの人に投資について説明することがあるんですが、銀行・貯蓄型保険・NISAの違いを言葉で説明するのがマジで大変だったんです。
「複利効果って何？」「NISAって本当にお得なの？」って聞かれても、数字を見せないと伝わりにくいんですよね。
特に、学資保険や生命保険などの貯蓄型保険に入っている人が多いから「もったいない！NISAが良いよ」と話すんですが、利率の話をしても、あまりしっくりこないみたいで、ネットの複利計算の図を見せると理解してくれるんです。
だから、自分で一瞬で出るツールを作ってみたんです。
参考にしたWebPコンバーターのデザイン
最初は、あるWebPコンバーターツールのデザインが気に入って、同じような感じで投資シミュレータを作りたいと思ったんです。
「50年間の資産推移を比較できるツールがあったら、説明するときに一番簡単だよな」って思ってたところに、AIを使えば非エンジニアでもアプリが作れると聞いて、Claude Codeで挑戦してみることにしました。
使用したAIツールと技術スタック
メインAI：Claude Code (Anthropic)
Claude Codeを使ったんですが、これがマジで優秀でした。参考HTMLを渡して「同じようなツールが作りたい」って相談したら、プラン作成モードになって実装前に計画を立ててくれたんです。
副業を考えている素人の非エンジニアでも、専門用語なしで理解できるように作ってくれました。
技術スタック
・HTML5（単一ファイル）→ ホームページを作るための基本言語（1つのファイルに全部入ってる）
・CSS3（レスポンシブデザイン）→ デザインを整える言語（スマホでも見やすく調整）
・JavaScript（ES6+）→ 動きを付ける言語（計算やグラフ表示を担当）
・Chart.js（グラフライブラリ）→ グラフを簡単に作れる道具箱
・開発環境：ブラウザのみ（完全クライアントサイド）→ パソコンだけで完結、サーバー不要
完全クライアントサイドだから、サーバーいらずで動くのがすげー便利でした。
開発過程での苦労と解決方法
最初の段階：プラン作成から実装まで
最初は50年固定で作ろうとしてたんですが、後から期間を自由に設定できるように変更しました。Claude Codeがプラン作成モードになって、実装前に計画を立ててくれたのがすげー助かりました。
デザイン・レイアウトの調整
最初は縦並びのフォームだったんですが、「スクロールしたくない」って伝えたら横並びに変更してくれました。参考HTMLのデザインを維持しながら投資ツールに適用して、レスポンシブ対応で携帯でも使いやすくしました。
機能追加・改善の流れ
初期は結果が即表示されてたんですが、「ボタンで実行したい」って要望を伝えたら対応してくれました。一度実行後はリアルタイム更新に変更して、文字化け問題もUTF-8エンコーディングで解決しました。
パフォーマンス最適化で苦労した点
大きな数値（月100万×100年）で重くなる問題があったんですが、これがマジで大変でした。
解決方法：
・デバウンス処理（500ms遅延）→ 入力が止まってから0.5秒後に計算開始（連続入力で重くならない）
・計算キャッシュ（Map使用、最新20件保持）→ 同じ計算は覚えておいて、すぐに答えを出す
・計算中表示とUIブロック防止→ 計算中は「処理中…」と表示して、画面が固まらないようにする
これで快適に使えるようになりました。
完成したアプリの機能
基本機能
・毎月の積立額入力（1円〜100万円）
・投資期間入力（1年〜100年）
・3つの投資パターン比較：
- 銀行預金（利率0%）
- 貯蓄型保険（年1%複利）
- NISA（年7%複利）
グラフ機能
・Chart.jsを使った美しい折れ線グラフ→ グラフを簡単に作れる道具箱で美しい線グラフを作成
・3パターンの資産推移を色分け表示→ 銀行・保険・NISAをそれぞれ違う色で表示
・ツールチップで詳細表示→ グラフの線にマウスを乗せると詳しい数字が表示
・レスポンシブ対応→ スマホでも見やすいように自動調整
UX改善
・初期画面はシンプル（入力欄のみ）→ 最初は入力欄だけのシンプルな画面
・ボタン実行→リアルタイム更新の流れ→ ボタンを押すとすぐに結果が変わる
・大きな数値での計算中表示→ 大きな数字を入力したときは「計算中…」と表示
・デバウンス処理で快適な操作感→ 入力が止まってから計算するので快適に操作できる
実際のアプリ
完成した投資シミュレータはこちらで公開しています：
投資シミュレータ
副業を考えている素人の非エンジニアでも、専門用語なしで投資の違いを理解できるように作りました。
SEO対策もバッチリ実装
参考HTMLのSEO実装を分析して、以下の対策を実装しました：
・Open Graphタグ、Twitter Card対応→ SNSでシェアしたときにタイトルと画像が表示される設定
・JSON-LD構造化データ→ Googleがページの内容を理解しやすくする設定
・Google Analytics GA4統合→ アクセス数を調べるツールを組み込み
・アクセシビリティ属性追加→ 障害のある方にも使いやすくする設定
これで検索エンジンにも見つけてもらいやすくなりました。
学んだことと次への活かし方
AIとの協働について
・Claude Codeはプラン作成→実装の流れが明確
・具体的な要望を伝えると的確に対応してくれる
・エラーや改善点も段階的に解決してくれる
技術的な学び
・単一HTMLファイルでも高機能なアプリが作れる→ 1つのファイルだけで複雑なアプリが作れる
・Chart.jsは非エンジニアでも扱いやすい→ グラフライブラリは初心者でも使いやすい
・パフォーマンス最適化の重要性→ 動作を軽くする工夫が大切
・SEO対策の実装方法→ 検索エンジンに見つけてもらうための設定方法
開発プロセスの発見
・参考デザインがあると開発がスムーズ→ 真似したいデザインがあると作りやすい
・ユーザビリティを意識した段階的改善→ 使いやすさを考えて少しずつ良くしていく
・レスポンシブデザインの重要性→ スマホでも見やすいデザインが大切
・完全クライアントサイドの利便性→ パソコンだけで完結する便利さ
開発時間の内訳
・初期バージョン完成：約2時間
・機能追加・改善：約3時間
・SEO対策・最適化：約1時間
・合計：約6時間
非エンジニアでも6時間でここまでできるなんて、マジで驚きました。
次への活かし方
・他の計算ツール開発にも応用可能→ 他の計算アプリも同じ方法で作れる
・プロンプト作成術の向上→ AIへの指示文を上手に書く技術
・AIとの効果的なコミュニケーション方法→ AIと効率的に会話するコツ
・段階的な機能改善アプローチ→ 少しずつ機能を追加していく方法
まとめ
投資が好きな非エンジニアでもAIの力を借りれば、他の人に投資を説明するための便利なツールが作れることに驚きました。特に段階的な改善プロセスが楽しく、「もっとこうしたい」という要望を伝えるとすぐに実現してくれるのが感動的でした。
副業を考えている素人の非エンジニアの方も、Claude Codeを使えば専門用語なしで理解できるアプリが作れます。同じように「AIでアプリを作りたいけど、非エンジニアだから無理かな」って思ってる方は、ぜひ挑戦してみてください。マジで世界が変わりますよ！
