Codexで授業アプリを作る方法｜プログラミングなしで特別支援学校のかけ算教材を作った全手順

「自分の授業のねらいに合うアプリが、市販にはない」
と感じたことはありませんか。九九アプリはいくらでもあるのに、いま目の前の生徒に必要なものだけが見つからない。

実は私も、九九は言えるのにかけ算の意味がわからない生徒を前に、同じ壁に当たりました。

そこで選んだのが、自分で作るという道です。

ただし、コードを書いたわけではありません。授業計画を先に作り、必要最小限の機能（MVP）に絞り、OpenAIのコーディングエージェント「Codex」に実装させました。

アプリ一覧のリンクです↓
https://apps.hayakuoshi.com/math

順番はアプリが先ではなく、授業が先。この順番が、この記事のいちばんの主張です。

この記事では、実際にCodexへ渡した指示の7項目、特別支援教育向けに付けたUIの17条件、文章題を「文章にしなかった」設計判断まで、そのまま公開します。教員として30年以上教壇に立ち、生成AI講師としても登壇する筆者が、特別支援学校の授業のために実際に作った記録です。

読み終えたら、あなたの授業の「困り」を一文にするところから始めてみてください。

この記事を読めば、プログラミング経験がなくても、自分の授業のねらいに合った教材アプリをCodexで形にする手順がわかります。

この記事では、次の流れで解説します。

それでは、順番に説明していきましょう。

---

Codexで授業アプリを作ろうと思った理由｜出発点は授業の困りごと

出発点は、Codexでもアプリでもありませんでした。

特別支援学校高等部のかけ算の授業で、ずっと引っかかっていた課題です。九九の暗唱はできる。

それなのに、かけ算の意味がつかめていない生徒がいる。この課題をどう解くかを考えた先に、結果としてアプリがあっただけです。

この節では、次の3点を説明します。

まずは、なぜ「自作」という選択になったのかから見ていきましょう。

九九は言えるのに「3×4＝3+3+3+3」がわからない生徒がいた

この授業のねらいは、九九を覚えさせることではありません。かけ算を「同じ数のたし算」として理解させることです。

九九を暗唱できる生徒は、たしかにいます。しかし「3×4」が「3が4つ分」であることをわかっていないと、九九を忘れた瞬間に手が止まります。逆に、3×4を「3+3+3+3」に戻せる生徒は、九九を忘れても自分の力で答えにたどり着けます。

だから、育てたかったのは「たし算に戻れる力」です。九九が出てこなくても、たし算に戻れば必ず答えが出る。その安心感を持って、かけ算を使えるようになってほしい。これが、すべての出発点になりました。

市販の九九アプリが授業のねらいに合わなかった

市販の九九アプリも、いくつか試しました。ただ、その多くは「速く正確に答える」ための設計です。私の授業のねらいである意味理解とは、向いている方向が違いました。

タイムアタックやランダム出題は、答えを暗記している生徒には効果的です。しかし、たし算に戻って考える過程を飛ばしてしまいます。答えを当てる練習はできても、「1つ分はいくつか」「それがいくつ分あるか」を考える場面が、そもそもないのです。

アプリより先に4時間の授業計画を作った

ここで私が最初にやったのは、アプリの設計ではなく、授業計画づくりでした。アプリを先に考えるのではなく、授業を先に考える。この順番を守ったことが、あとの工程すべてを軽くしてくれました。

4コマの流れは、次のとおりです。

• 第1時：「3×4＝3+3+3+3」を知る
• 第2時：絵から「1つ分」と「いくつ分」を見つける
• 第3時：九九が分からなければ、たし算に戻る
• 第4時：生活場面や図を見て、かけ算を使う

4コマの流れが決まると、アプリに必要な機能はおのずと絞られます。第1時に必要なのは「式をたし算に変えて見せる」機能。第2時に必要なのは「絵からまとまりを見つけさせる」機能。それ以外は、少なくとも今は要りません。

授業計画が、そのままアプリの仕様書の土台になりました。

---

Codexで授業アプリを作る前に、ChatGPTで設計を固める

Codexに指示を出す前に、もう一段階あります。ChatGPTと対話しながら、「何を作るか」と、それ以上に「何を作らないか」を決める工程です。ここで決めた「作らないもの」のリストが、あとの開発を驚くほど軽くしてくれました。

この節では、次の3点を説明します。

順番に見ていきましょう。

ChatGPTに授業用アプリのアイデアを相談する

最初に決めていたのは、「AIに全部作らせる」のではなく、教育的なねらいは授業者が決め、形はAIと一緒に考える、という分担です。

ねらいさえ定まっていれば、ChatGPTは案出しの相手として非常に優秀です。4時間の授業計画を渡して「この授業で使えるアプリの案を出して」と頼むと、次のような案が返ってきました。

• かけ算をたし算に変えて見せる
• 丸をまとまりごとに表示する
• 絵から式を作る
• 「わからない」から、たし算に戻る
• 生活場面から式を作る

これを授業計画の4コマに当てはめていくと、どの案がどの時間に対応するかがはっきりします。「かけ算をたし算に変える」は第1時、「絵から式を作る」は第2時、「わからないからたし算に戻る」は第3時。授業計画があるから、案を取捨選択できるのです。

いきなり完成版を作らず「MVP」に絞る

案が出そろっても、全部を最初から作りはしませんでした。最初に作ったのは、たった1本の流れだけです。

3×4 → 3+3+3+3 → 丸で見る → 12

これだけです。1つの式が「たし算」に変わり、「丸の図」に変わり、答えが出る。その1本道だけのアプリを、まず作りました。

この考え方を、開発の世界ではMVP（Minimum Viable Product）と呼びます。日本語にすれば「必要最小限の機能を持った完成版」です。完成版と言っても、豪華である必要はありません。授業で使えて、ねらいが達成できる。それだけの機能を備えていれば、MVPとしては完成です。

小さく作る最大の利点は、すぐ授業で試せることです。授業で使ってみて、生徒の反応を見て、直す。この繰り返しを前提にすると、最初から完璧を目指す必要がなくなります。

最初に入れなかった機能と、その理由

MVPを決めたということは、同時に「入れないもの」を決めたということでもあります。今回、あえて外した機能は次のとおりです。

• 全九九（1の段から9の段まで）
• 成績管理
• 先生モード
• ゲーム機能
• ランダム出題

どれも、九九アプリとしては「あって当然」の機能です。それでも入れなかったのは、機能が増えるほど、生徒が「意味を考える」以外のことに注意を取られるからです。

とくにゲーム機能やランキングは、生徒を「速く当てる」方向へ引っ張ります。それは、たし算に戻ってじっくり考えてほしいというねらいと、正反対です。

---

Codexに授業アプリを作らせる指示（プロンプト）の作り方

設計が固まったら、いよいよCodexの出番です。開発の流れは、次のようになりました。

授業のアイデア → ChatGPTで仕様を整理 → Codex CLI用のプロンプトを作る → Antigravity上でCodexに実装させる

ポイントは、Codexに渡す指示文そのものも、ChatGPTと一緒に作ったことです。

この節では、次の3点を説明します。

実際の指示文の一部も載せながら説明します。

ChatGPTでCodex CLI用のプロンプトを整理する

授業者の言葉で書いたアイデアを、そのままCodexに渡してもうまくいきません。Codexは、指示が曖昧だと意図と違うものを作ります。だから、ChatGPTに「開発用の仕様」へ翻訳させる工程を挟みました。

最初のMVP用のプロンプトは、この一文から始めました。

特別支援学校高等部の数学授業で使う、かけ算の意味を理解するためのWebアプリを作成してください。

この一文のあとに、対象生徒、学習目標、画面構成、ボタンの大きさ、間違えたときの対応、使用技術、動作確認項目まで、細かく指定していきます。

ここでの分担は明確です。ChatGPTは仕様の整理役、Codexは実装役。授業者は、ねらいを言葉にして、出てきたものを検品する役です。

実際にCodexへ渡した指示の7項目

ここからは、2つ目に作った文章題アプリ「ずをみて かけざん」のプロンプトを例にします。最終的に32の見出しを持つ仕様書になりましたが、骨格は次の7項目です。

項目	プロンプトに書いた内容（抜粋）
対象生徒	「特別支援学校中学部2段階程度の生徒を対象とした」
学習目標	「問題文から数字を拾って式を作るのではなく、図や状況から数量関係を理解して式を作ること」
画面構成	1問を「図を見る → 1つ分を考える → いくつ分を考える → 式を作る → 答えを求める」の段階に分ける
ボタンの大きさ	「ボタンを大きくする」「ボタン同士の間隔を十分に取る」「選択肢は3択程度」
間違えたときの対応	「『この 1つを みてみよう』と表示し、1グループだけ枠などで強調」「『×』『不正解！』などの強い否定表現は使わない」
使用技術	「HTML、CSS、JavaScriptのみで実装」「インターネット接続がなくても使用できる」
動作確認項目	「10問すべて表示できる」「『たしざんで かんがえる』が機能する」など16項目

なぜここまで書くのか。「誰に」「何を」「どう動くか」まで書くと、Codexの出力が最初から授業向けになるからです。

とくに「間違えたときの対応」は、指定しないと一般的な「不正解！」表示になります。これは特別支援の授業では使えません。

「対象生徒」は、学年ではなく学習指導要領上の段階（中学部2段階程度）で指定しました。高等部の生徒でも、学習内容の段階は生徒ごとに異なります。「ひらがな中心」「3択程度」といった判断の根拠を、Codexにも共有するためです。

この7項目は、他教科のアプリにもそのまま転用できる型です。国語でも、生活単元学習でも、「対象生徒・学習目標・画面構成・ボタン・間違えたとき・技術・動作確認」の7つを埋めれば、Codexに渡せる指示になります。

特別支援教育向けだからこそUIに付けた17の条件

このプロンプトで、いちばん特別支援らしい部分がここです。生徒の実態を、そのままUIの条件として指示に落とし込みました。プロンプトの「UIの重要条件」には、次の17項目を並べています。

• 1画面に情報を詰め込みすぎない
• 1画面で1つの質問だけする
• 図を大きくする
• 文字を大きくする
• ボタンを大きくする
• 選択肢は3択程度
• ボタン同士の間隔を十分に取る
• ひらがな中心
• 難しい漢字を使わない
• 数字と図の対応が見やすい
• 背景はシンプル
• 不要な装飾を付けない
• タイムアタックなし
• 制限時間なし
• ランキングなし
• 効果音なし
• 派手なアニメーションなし

「なし」で終わる項目が5つもあります。一般的なアプリなら「あったほうが盛り上がる」とされる要素を、意図的に外しました。

理由は一つ。「動くアプリ」と「生徒が使えるアプリ」は別物だからです。効果音や派手なアニメーションは、注意の切り替えが苦手な生徒には刺激が強すぎます。制限時間やランキングは、焦りを生んで「たし算に戻る」余裕を奪います。

さらに、図の作り方にも注文を付けました。4つのまとまりを「●●● ●●● ●●● ●●●」と横一列に並べるだけでは、生徒が「●が12個ある」としか認識できないおそれがあります。だから「3個で1つのまとまり」であることが、枠やカードで明確にわかるデザインを指定しました。

---

Codexで作った授業アプリの中身｜文章題と問題データの設計

最初のMVP（3×4をたし算と図で見る）が授業で使えることを確かめたあと、次に作ったのが「X×4」の文章題アプリ「ずをみて かけざん」です。教材としての設計判断が、いちばん詰まっているのがここです。

この節では、次の3点を説明します。

教材の中身を順に見ていきましょう。

文章題をそのまま文章にしなかった理由

文章題を作るとき、最初に決めたのは「文章に答えの数字を書かない」ことでした。

たとえば、こう書いたとします。

「5個ずつ入った皿が4枚あります」

この文章では、5と4という数字を見つけて並べるだけで「5×4」と答えられてしまいます。数字を2つ探して並べる作業になっていて、「1つ分」と「いくつ分」の意味を考えていません。

だからプロンプトには、はっきりこう書きました。

問題文の中には、原則として「X個ずつ4つあります」のように、答えとなる2つの数字をそのまま文章で書かないでください。

文章題の目的は、式を当てることではありません。まとまりを見つけることです。

「1つ分×いくつ分」を図から見つけさせる画面

文章に数字を書かない代わりに、図を見せます。いちごなら、4枚のお皿にいちごが3個ずつ載った図です。問題文は「いちごは ぜんぶで なんこ？」だけ。「3個ずつ」「4枚」とは、どこにも書きません。

そのうえで、1問を次の段階に分けて進めます。

1. 図を見る：「よく みてみよう」
2. 1つ分を考える：お皿1枚を強調して「1つぶんは なんこ？」（3択）
3. いくつ分を考える：4皿全体を見せて「おなじ まとまりは いくつ？」（3択）
4. 式を作る：「1つぶん × いくつぶん」の下に「3×4」「4×3」「3+4」の3択
5. 答えを求める：「こたえは いくつ？」→ 正解すると「3こが 4つぶんで 12こ」

図から数えるほうが、文章よりも「まとまり」が目に見えます。しかも、式を選んだあとに「3の下に『1つぶん』、4の下に『いくつぶん』」と表示させ、数字の意味を視覚的に確認できるようにしました。

そして、九九がわからない生徒のために「たしざんで かんがえる」ボタンを必ず置くよう指示しました。押すと「3+3+3+3」が現れ、図の各まとまりと対応し、「3+3=6、6+3=9、9+3=12」と段階的に表示されます。九九を暗唱できなくても、自分で答えを求められる設計です。

10問を問題データと画面に分けて管理する

問題は10問。いちご・えんぴつ・ジュース・クッキー・ボール・車のタイヤ・コップ・色紙・みかん・チームと題材を変えながら、式はすべて「X×4」の形にそろえました。

ここで、少し技術的な指示を一つだけ入れています。10問の内容をJavaScriptの配列としてまとめて管理し、表示部分と問題データを分離してほしい、という指示です。

プロンプトでは、問題ごとに持たせる項目まで示しました。

• 問題番号
• テーマ（いちご、えんぴつ など）
• まとまりの数（今回はすべて4）
• 1つ分の数
• 単位（こ、ほん、まい など）
• 正しい式
• 答え

理由は単純で、問題を増やしてもプログラム本体を大きく変えなくてよい構造にしたかったからです。将来「X×3」や「X×5」に変えるときも、データの「まとまりの数」を変えるだけで済みます。

技術を知らなくても、心配はいりません。「問題データと画面を分けて、あとから問題を増やしやすくしてください」。この一言で、Codexは増やせる構造にしてくれます。

---

Codexで授業アプリを作ってわかったメリットと注意点

Antigravity＋Codex CLIを実際に使ってみて、感じたことを正直に書きます。良い面だけでなく、AI任せにできない部分もあります。

この節では、次の2点を説明します。

順番に見ていきましょう。

授業者の言葉で直せる5つのメリット

最大のメリットは、修正を「授業者の言葉」で指示できることです。

• HTML/CSS/JavaScriptを自分ですべて書かなくてよい
• 自然言語で修正を指示できる
• 「ボタンを大きくして」など授業者の言葉で直せる
• 教育的なアイデアをその日のうちに形にできる
• 小さく作って何度も改善できる

「ボタンを大きくして」「この文字はひらがなにして」「間違えたときの表示をもっと穏やかにして」。これらは、コードの用語ではなく、教室で使っている言葉そのままです。それでCodexは直してくれます。

放課後に思いついたアイデアが、翌日の授業に間に合う。この速さは、これまでの教材づくりにはなかったものです。

AI任せにできない3つの注意点

一方で、AI任せにはできない部分もはっきりしました。

• 最初の指示が曖昧だと、意図と違うものになる
• AI任せにせず、授業者が実際に触る必要がある
• 「動くこと」と「生徒に使いやすいこと」は別

とくに3つ目は重要です。Codexは、動作として正しいものを作ります。しかし、ボタンが小さい、文字が多い、選択肢の間隔が狭い。こうした「生徒にとっての使いやすさ」は、授業者が実際に触ってみて初めてわかります。

だからプロンプトの最後には、16項目の動作確認リストを付けました。「10問すべて表示できる」「『たしざんで かんがえる』が機能する」「間違えてもやり直せる」「PCとiPad幅でレイアウトが崩れない」。Codexに自分で確認させたうえで、さらに授業者である私が、生徒の目線で触って検品する。この二重の確認は、省けません。

Codexは実装を担います。しかし、検品は授業者の仕事です。

---

まとめ｜Codexで授業アプリを作るとき一番大切だったこと

まずやるべきなのは、「生徒に何を分かってほしいか」を一文にすることです。今回なら「3×4を3+3+3+3として理解してほしい」。アプリの設計は、この一文から始まりました。

Codexはコードを書いてくれますが、「3×4をどう理解させたいのか」は教師が決めなければならないからです。ここが空白のままでは、どれだけ指示を細かくしても、授業で使えるものにはなりません。

まずは4時間分でかまいません。授業の流れを書き出し、そのうえで「この時間に必要な機能は何か」を問うてください。授業計画があれば、アプリの仕様は自然に絞られます。

もう一つ大切なのは、小さく作って、生徒と一緒に直していくことです。今回のMVPは「3×4→3+3+3+3→丸で見る→12」の1本道だけでした。

最初から全九九やゲーム機能を入れていたら、授業で試すまでに時間がかかり、直すのも大変になっていたはずです。小さく作ったからこそ、その日のうちに授業で試し、「ボタンを大きくして」と授業者の言葉で直せました。

判断の基準は、「その機能はどの授業時間で使うのか」に答えられるかどうか。これだけです。

Codexに指示を書く前に、まず授業計画を4コマぶん書く。

そのうえで、対象生徒・学習目標・画面構成・ボタン・間違えたときの対応・技術・動作確認の7項目を埋めれば、意図と違うものが出てきて途方に暮れる心配もありません。

生成AIは、あなたが授業のために考えた教材を、確実に形にするツールになるのです。

あわせて読みたい：アプリづくりの土台になった「授業を先に考える」進め方は、ChatGPTで単元計画を作る方法で手順まで解説しています。教材を作る前に、単元の流れをAIと一緒に組み立ててみてください。

この記事が役に立ったと感じたら、Xのフォローとブックマークをお願いします。教室で実際に使った教材と、うまくいかなかった記録も、これからも公開していきます。

---

よくある質問（FAQ）

プログラミングの知識がまったくなくても、Codexで授業アプリは作れますか？

作れます。今回もHTMLやJavaScriptは一行も書いていません。ただし「何を作るか」を言葉にする作業と、できたものを生徒の目線で触って確かめる作業は、授業者にしかできません。コードは書けなくても、この2つだけは省かないでください。

Codex CLIとAntigravityは、両方そろえないと始められませんか？

Codex CLIだけでも開発はできます。Antigravityは、Codexに指示を出してファイルを作らせる作業環境として使い、できたアプリの動作確認はChromeで開いて行いました。まずはCodexだけで小さく始め、必要を感じたら環境を足していく順番で十分です。

作ったアプリは、生徒のタブレットや電子黒板でも使えますか？

使えます。今回はHTML・CSS・JavaScriptだけで作り、インターネット接続なしで動く条件を付けました。Mac・Windows・Chromebook・iPad横向きに対応するよう、プロンプトで指定しています。電子黒板に映す前提で、図と文字を大きくしておくのがポイントです。

生徒の個人情報や成績は、アプリに入れなくても大丈夫ですか？

大丈夫です。今回のMVPには成績管理を入れておらず、生徒の情報は一切扱いません。画面に「できた問題数」を小さく出す程度です。記録が必要になっても、まずは紙でメモする運用から始め、アプリに個人情報を持たせるのは最後の選択肢にしてください。

他の単元や教科でも、同じ手順で作れますか？

作れます。「授業計画を先に書く」「MVPに絞る」「7項目でCodexに指示する」という手順は、教科を問いません。問題データを画面と分けておけば、題材を入れ替えるだけで別の単元にも転用できます。まずは1本道のMVPから始めてください。