教材ページにAIチャットを埋め込んだら、生徒の「わからない」が変わるかもしれない
この記事でわかること
教材ページにAIチャットを埋め込んだら、生徒の「わからない」が変わるかもしれない
この記事でわかること
- なぜ「拙い質問」がうまく機能しないのか
- プリセットプロンプトという考え方
- Next.js + Claude API で作るイメージ
- 実装ロードマップ（5ステップ）
- 使ってみたいシステムプロンプトの例
「わかりません」と打てない生徒たち
教室でよく起きること。
生徒：「あの、なんか、うまくいかなくて」
先生：「何が？」
生徒：「えっと、ここの、なんか、ボタン？」
先生：「どこのボタン？」
言語化が苦手な生徒は、AIにも同じような質問をする。
生徒 → AIチャット：「わかりません」
AI：「何がわからないか教えてください」
生徒：「全部です」
AI：「もう少し具体的に…」
これは生徒の問題ではなく、AIへの渡し方の問題だと思う。
プリセットプロンプトという考え方
ここで試してみたいのが、教材ページごとにシステムプロンプトをあらかじめ設定しておく仕組み。
イメージはこう。
教材ページ（例：四則演算の単元）
↓
ページに埋め込まれたチャット欄を開く
↓
裏側では「あなたは小学4年生向けの算数の先生です。
今は四則演算の単元を学習しています。
専門用語は使わず、身近な例えで説明してください」
というプロンプトが自動でセットされている
↓
生徒が「わかんない」と打っても
AI がその文脈から引き取って丁寧に答えてくれる
生徒は「わかんない」でいい。その「わかんない」を正確な問いに変えるのが、プリセットプロンプトの仕事。
なぜ Next.js で作るのか
最初に思い浮かんだのは Laravel だった。でも、こういう構造のものは Next.js の方が相性がいい。
Laravel の場合：
フロント（HTML/CSS/JS）と バックエンド（PHP）を
別々に組み立てる必要がある
→ チャットのリアルタイム性を出すのが手間
Next.js の場合：
フロントとAPIが同じプロジェクト内に共存
→ /api/chat というエンドポイントをすぐ作れる
→ Claude API へのアクセスもサーバーサイドで完結
→ Vercel にデプロイすれば公開も即日
あと、チャットUIのコンポーネントを React で作ると自然に動くものができる。教材ページ自体も React で管理できる。全体の一貫性が高い。
実装ロードマップ（5ステップ）
Step 1：最小チャットを動かす（1〜2日）
まず Next.js プロジェクトを作って、Claude API と繋がる /api/chat を作る。
やること：
・npx create-next-app@latest で雛形を作る
・.env.local に ANTHROPIC_API_KEY を設定
・/api/chat/route.ts を作って Claude API を呼ぶ
・フロントにチャット欄を置いて送受信を確認
この時点で「入力した文字が Claude に届いて、返事が来る」状態を作る。
Step 2：プリセットプロンプトを差し込む（1日）
ここが核心。ページごとに systemPrompt を定義して、API 呼び出し時に渡す。
// 教材ページ側
const systemPrompt = `
あなたは小学4年生向けの算数の先生です。
今は「四則演算」の単元を学んでいます。
難しい言葉は使わず、おかし屋さんや遠足の例えを使って説明してください。
生徒が「わからない」と言ったときは、
まず「どこまではわかった？」と優しく聞いてください。
`
// API ルートに渡す
const response = await claude.messages.create({
model: 'claude-sonnet-4-20250514',
system: systemPrompt,
messages: conversation,
})
このプロンプトをページの種類ごとに用意するだけで、チャットの性格が変わる。
Step 3：教材ページに組み込む（2〜3日）
チャットコンポーネントを汎用化して、どの教材ページにも貼れるようにする。
// 使い方イメージ
<LessonChat
unitTitle="四則演算"
gradeLevel="小学4年生"
systemPrompt={arithmeticPrompt}
/>
ページの内容に応じて systemPrompt を差し替えるだけで、専用の AI 先生が現れる。
Step 4：教師側の管理画面を作る（オプション）
授業前に「今日のプロンプト」を設定できる画面。
教師がログインして：
・今日の単元を選ぶ
・補足事項（例：今日は掛け算の筆算まで進んでいる）を追記
・生成されたプロンプトを確認して保存
これがあると、毎回コードを触らなくても授業に合わせて調整できる。
Step 5：会話ログを振り返る（オプション）
生徒がどんな質問をしたかを教師が後から見られる仕組み。
「この生徒は "掛け算の意味" について3回質問していた」
「このページの滞在時間が長いクラスがある」
授業改善のヒントになる。
システムプロンプト、こう書いてみたい
汎用的なテンプレートとして、こんな構成を想定している。
あなたは [教科・科目] の先生です。
対象は [学年・レベル] の生徒です。
現在学んでいる単元は [単元名] です。
【応答のルール】
・専門用語はなるべく使わず、[具体的な言葉の制約] で話してください
・生徒が「わからない」と言ったときは、まず [問い返しの仕方] を聞いてください
・正解を直接教えるのではなく、[誘導のスタイル] で導いてください
・励ましの言葉を [頻度・タイミング] で入れてください
【この単元の範囲】
[今回の授業でカバーしている内容を箇条書きで]
【範囲外の話題が来たら】
「今日はここまでを一緒に考えましょう」と優しく引き戻してください。
このテンプレートに単元の情報を入れていくだけで、その授業専用の AI 先生ができる。
まとめ：生徒の「拙い言葉」を受け止める仕組み
生徒に「正確に質問しろ」と言うのは難しい。でも AI に「この文脈で来る質問はだいたいこういう意図だ」と教えておくことはできる。
プリセットプロンプトの役割：
生徒の拙い言葉
↓
AI がシステムプロンプトの文脈から意図を補完
↓
的確な、その単元に合った回答
↓
生徒の満足度が上がる
これが機能すれば、AI チャットは「答えを教えてくれる機械」ではなく「その授業に合わせた伴走者」になれる気がする。
あとがき
まだ作っていない。でも、作ってみたい。
Claude Code と一緒に Step 1 から始めれば、動くものは数日でできるはず。
まずは自分が使う教材の1ページに、試しに入れてみるところから始めようと思っている。
ロードマップ（一覧）
| Step | 内容 | 目安 |
|---|---|---|
| 1 | Next.js + Claude API 最小チャット | 1〜2日 |
| 2 | プリセットプロンプトの差し込み | 1日 |
| 3 | 教材ページへの組み込み | 2〜3日 |
| 4 | 教師用管理画面（オプション） | 3〜5日 |
| 5 | 会話ログの振り返り（オプション） | 3〜5日 |
