ChatGPTでつくる！図形学習アプリの挑戦
こんにちは、HEARTSHEART Labの村田です。
前回はChatGPTを使って「小学生向け漢字ワーク」を自動生成する方法をご紹介しました。今回はその続編として、図形学習アプリをChatGPTの力を借りて作ってみたお話です。
漢字ワークから図形アプリへ
漢字ワークの試作は、プロンプトを工夫することである程度すぐに実用的な教材を形にできました。通常なら数日かかるプログラムも、AIを活用すれば半日程度で仕上がる──これが大きな驚きでした。
この流れを受けて、「図形感覚を育てる学習アプリも作れるのでは？」と考えたのが今回のチャレンジのきっかけです。
プロンプトから始めるアプリ作成
まずはChatGPTに次のように指示を出しました。
- 小学生向けに丸・三角・四角を表示するアプリを作りたい
- 図形を動かして学習できるようにしたい
- HTMLとJavaScriptで構成し、ブラウザ上で動作する形にしたい
ChatGPTは提案を返してくれ、その内容を元に改良を重ねていきました。まるでエンジニアに指示を出すように「ここを直してください」「この機能を加えてください」とやり取りする形で進んでいきます。
出来上がったアプリの機能
試行錯誤の結果、次のような機能を持つ図形学習アプリができました。
- 図形の操作：丸・三角・四角を移動・回転・拡大縮小できる
- 外観の調整：色や線の太さを変えたり、角を丸くしたりできる
- 座標の操作：X・Y軸を固定または移動可能に
- 保存機能：作成した図形をPNG画像として保存できる
実際に遊び感覚で図形を動かすことができ、タブレットでは指で直感的に操作できる点も魅力です。
学習への応用
このアプリは単に図形を動かすだけではなく、学習に直結する可能性を持っています。
- 空間感覚の育成：回転や拡大縮小を体験することで直感的な理解が進む
- 教科学習：算数の図形問題、美術・デザインの基礎教育に応用可能
- 探究活動：自由研究や創作活動のツールとして活用できる
また、子どもにとって「親や先生が作った教材に触れる」という体験自体が、既存のサービスを使うのとは違った学びやモチベーションにつながります。
バイブコーディングとしての価値
今回の取り組みは「バイブコーディング（生成AIを通じた対話的なプログラミング）」の実例でもあります。自分の意図を言語化し、AIに伝え、修正を繰り返しながら形にしていく。この過程そのものが、AI時代の新しい学び方・開発の在り方を象徴しています。
これは「AIエージェント自作」の第一歩でもある
今回の図形学習アプリづくりは、実は「AIエージェント自作」の初歩的な実践でもあります。
AIエージェントとは、与えられた目的に応じてAIが自律的に判断・行動する仕組みを指します。その基本要素は、
- タスクの定義：「丸・三角・四角を操作できる学習アプリを作る」
- 入出力の仕組み：プロンプトで指示 → ChatGPTがコードを生成 → 実行して動作確認
- 現実世界への接続：子どもが実際に触って学習に使える
という流れに表れています。
現段階では「人が都度プロンプトを入力」している段階ですが、これを発展させれば：
- 入力フォームから条件を指定 → 自動で教材が生成される
- 生徒の学習履歴に応じて出題内容を変える
- 作成した教材を即座に配布できる
といった、自律的に働く教育エージェントへと進化させることが可能です。
つまり、今回の図形アプリは単なる「算数教材」ではなく、AIを活かしてエージェントを育てる入り口でもあるのです。
おわりに
ChatGPTを使って漢字ワークに続き図形学習アプリを作ってみました。AIの進化はこれからさらに加速し、GPT-6、GPT-7と進むにつれて、今は難しいことも実現できるようになるでしょう。
教育、家庭、そしてビジネスの場においても、「小さな目的からAIで実際に形にしてみる」ことは、AI活用の入り口として非常に有効です。ぜひ皆さんも試してみてください。
よくある質問（FAQ）
A. はい。ChatGPTにプロンプトを与えると、HTMLやJavaScriptなどのコードを自動生成してくれます。完全に完成品を一度で出力するわけではなく、指示を繰り返しながら修正していく形で仕上げていきます。
A. 基本的な操作は可能です。コードの意味を細かく理解できなくても、ChatGPTに「ここを直して」と伝えれば修正してくれます。プログラミング経験があると調整がスムーズになりますが、初心者でも十分取り組めます。
A. ブラウザ上で動かせるので、パソコンやタブレットで図形を移動・回転・拡大縮小しながら学べます。子どもが遊び感覚で空間認識を養ったり、算数や美術の授業補助に活用できます。
A. はい。アプリ作成のプロセス自体がAIエージェントの初歩的な実践です。タスクを定義し、AIがコードを生成し、現実の教材として利用する流れはエージェントの構造そのものです。将来的には、学習者に合わせて自動で教材を最適化する教育エージェントへ発展させることも可能です。
A. 教師が授業用にオリジナル教材を素早く作れる点が大きな利点です。例えば「図形の面積学習」「立体感覚トレーニング」など、授業に合わせたアプリを短時間で準備できます。教材研究やICT研修の題材にも適しています。
A. 可能です。子どもと一緒に「アプリを作る・使う」体験をすることで、親子のコミュニケーションにもつながります。既製品の教材では得られない「親が作った教材に触れる」という特別感もあります。
A. はい。ビジュアル表現や空間感覚を扱うビジネス（デザイン、建築、プレゼン支援など）に応用可能です。また「小さなアイデアをAIで形にする体験」自体が、社員研修や発想力トレーニングに役立ちます。
著者
村田正望（むらた まさみ）
工学博士／HEARTSHEART Labo 所長。脳科学とAIを融合した発想力教育・活用支援を行う。研究と実務経験をもとに、ビジネス・生活・子育てに役立つ「脳×AI」の学びを発信中。
HEARTSHEART Laboの活動
HEARTSHEART Laboでは、さまざまな立場の方を対象にした研修・プログラムを提供しています。
- 企業・ビジネス向け：「脳×AI」でAIを「第二の脳」とする発想力・企画力講座
- 教師・教育関係者向け：「脳×AI」で授業改善や教材づくりにAIを活用する実践研修
- 個人向け（子育てパパママ）：「脳×AI」で子育てや家庭学習に役立つオンライン講座
- 個人向け（社会人・高校・大学生）：「脳×AI」でAIを「第二の脳」とするオンライン講座
「ビジネス」「個人」それぞれの場で、脳とAIをつなぐ実践をサポートしています。