【AI活用】複利計算サイト作ってみた！

2026年現在、AIは急激な進化を遂げています。最近は特に、一定の職種において「仕事が奪われるのではないか」という不安が広がっているのを肌で感じでいます。

AIとのかかわり方として、必死に進化を追う人、全くAIと関わらない人、一旦進化を待って趣味に励む人など、AIとの距離感は人それぞれではありますが、とりあえず「どんなことができるか」はある程度知っておいた方がいいと思っています。

一例として、10分くらいで「複利計算シミュレーター」を作成してみましたので、紹介いたします！（いや記事書く方が時間かかるホント）

作り方

というか発端は、いきなりClaudeから「見た目で分かりやすく作れるものあるよ？3択あるけどどれにする？」って提案されました。（スクショを失念しました・・・）

新NISAデビュー勢で投資に興味があるので、「複利の仕組み」をクリックしたら、プロンプトが入力されまして。

するといきなり、スライダーを動かして数字の変化を体感できるシミュレーターが出てきました。えぐ。

普段僕は、イオン銀行さんの「つみたてシミュレーション」を利用しているので、毎月の積立額も追加したいなあ、と。追加でお願いしてみる。

でき。スライダーで数字を変えるたびにグラフがリアルタイムで動くのが、ツールとしてめちゃくちゃ良きです。

WordPressへの組み込み

もしかしなくても、このブログサイトに埋め込めるなら、もうイオン銀行さんとはお別れですね。サヨナラバイバイ。てなわけでそのままClaudeにお願いしてみる。

あ、ちなみに僕がプロンプトを送っているような見た目ですが、実際はClaudeから質問と選択肢を提示されて、クリックしただけです。ひとまず「HTMLブロックに直貼り」でなんとかなるかな、と思い。

コーヒーを淹れて帰ってくると。。。

WordPressで「/html」って打って「カスタムHTML」をクリックして、貼り付けると・・・

でき！！！

これは、、、そこらへんのちょっと技術をかじっただけのエンジニアは淘汰されるかもしれませんね・・・（バックエンドは今回考慮しないものとする）

あ、これ動かせるんで、是非動かしてみてください。

おわりに

今回は、Claudeで複利計算シミュレーターを作成してWordPressで自分のサイトに組み込むまでの流れを紹介しました。

もう、簡単。コードなんか全く分からなくても、やりたいことを日本語で伝えるだけでできちゃいます。ぜひ、まずは何か一つ作ってみてください！

今回作成した（してもらった）シミュレーターは、もうちょっとブラッシュアップしてから別ページにアップしますね！公開できたら是非ご利用くださいませ！

最後までご覧いただきありがとうございました。
また次回！

コフィー

なんちゃって情シス

XInstagramYouTube

5歳からPCと戯れているアラフォーメガネ。
毎日大阪へ出稼ぎをする奈良県民。

主にWindowsPCで浅ーく広ーくなんでもやります。
得意領域で言うとショートカットキー。

情報発信は2025年9月から始めたばかりのクソ雑魚ナメクジですので、温かい目で見守っていただけますと幸いです。