
小学生の学習をサポート!「算数クイズアプリ」をAIで作ってみた
こそだて×生成AI (byこそぷろ👶) Advent Calendar 2024の19日目の記事です。
早いもので、2024年も終わってしまいますね。
子どもが小学3年生になり、あと3か月で小学校生活も折り返しか・・・と思うと感慨深いです。
普段はフルタイムで仕事をしていてあまり余裕がないのですが、冬休みこそは子どもとの遊びや勉強に向き合う時間にしたいと思っています。
小学校の個人面談にて・・
・・・というのも実は、先日小学校の個人面談がありました。
そこでの担任の先生からの言葉がこちらです。
〇〇くんは、算数の割り算(2桁÷1桁)が理解できてないようで心配です。
ちょうど学校を休んでいた時期に習った部分なので、分からないだけだと思いますが・・・3学期からは、この基礎が当たり前に出てくるので、冬休みに学習をサポートしてあげてください。
言われてみれば確かに・・・
3年生になって不登校の時期があったので、心当たりがある。けれど、ちゃんと勉強を見てあげられてなかったなぁ、と反省しました。
「算数」を楽しく学習できる教材がほしい
いざ子どもの勉強をサポートしようとすると、親が教えたり、塾に通わせたり、市販の総復習ドリルを買ってみたりなど、たくさんの方法があります。
ただ、うちの子は本当に勉強へのモチベーションが湧きません。
一方で、ゲームがとにかく大好きな息子。
自分好みの楽しく遊べる「計算アプリ」を作ったら、モチベーションをもって取り組んでくれるかも?と思いました。
AIに「算数クイズアプリ」を考えて作ってもらった!
最近、知人に教えてもらった「Vercel V0」というサービスが気になっており、せっかくなので使ってみようと思いました。(2024.12時点では、無料プランあり)
「Vercel V0」とは?
AIを用いて開発されたジェネレーティブUIシステム。従来のAIツールのようにプロンプトを入力することで、UI の生成・JavaScript や Python でコードを自動的に記述して実行するなど、Webページを作成できます。
試しにチャット欄にやりたいことを入力してみたところ、一瞬(10秒くらい)で実際に動くアプリケーションが作られました!

実際に書いたプロンプトは、こちらです。
小学3年生が習う算数のうち、2ケタ÷1ケタの割り算の問題が出てくるクイズアプリを作りたい。 サンプル問題を、10問入れて作ってほしい(80÷4など) 小学生が思わず使いたくなるような遊び心をプラスしてほしい
試しに動かしてみたところ、
・問題に正解すると、画面上に紙吹雪のアニメーションが表示される
・ランダムに励ましのメッセージが表示される
・回答の最後にスコアが確認できる
など、AIがアイデアを考えて、実装まで自動で行ってくれました!
すごい・・・
自分の子ども向けにカスタマイズすると?
せっかくなら、ゲーム大好きである自分の子どもに使ってもらいたいので、以下のように壁打ちをしてみました。すると、一瞬でゲーミフィケーションの要素(ポイント/レベルアップ)が加わったアプリが生成されました。


最後に
AIでここまで簡単に実装ができるなんて、感動しました!
プロンプトを打ち込んでからリアルタイムでアプリ画面が作成されるので、サクッとプロトタイプを検証する際にもぴったりです。
(今回の作成にあたっても、子どもに実際に画面を見てもらいながらプロンプトを書き、意見を聞きながら修正を加えていました)
さらに子どもの好みやオーダーに合わせてAIと壁打ちすれば、もっと素敵なアプリができるかも?可能性が広がりますね!