🏫 先生向けガイド

例⑤「AIにゲームを作ってもらおう」

対象中学1年〜（高校でも可）時間45分×1（50分でも同じ配分）教科技術・家庭技術分野「D 情報の技術」／情報Ⅰ 段階⑥ 自分で作る端末1人1台・キーボード必須。生成AIが使える環境（下の注意を参照）

ねらい

作りたいものを、他人（AI）に伝わる条件の箇条書きに分解できる
出てきたコードが動かないとき、エラーの内容をそのまま伝えて直してもらうという往復ができる
「曖昧に頼むと曖昧なものが返る」ことを体験し、頼み方を改善できる

AIを「答えをもらう道具」ではなく「うまく頼む相手」として扱う回です。コードを1行も書きませんが、要件を分解して伝える力とエラーを読んで対処する力は、コードを書くときと同じものです。技術分野「D 情報の技術」(4)「社会の発展と情報の技術」で、これからの技術との付き合い方を考える材料にもなります。

⚠️ 生成AIの利用について（先に確認）

生徒が直接AIに入力するかどうかは、学校・自治体の生成AI利用方針に従ってください。生徒が使えない場合は、先生の端末でAIに頼む場面を映し、生徒は「頼み方の文章」を考えて先生に渡す形にすると同じねらいで実施できます。本サイトのプレイグラウンド（コードを貼って動かす場所）はAIを内蔵しておらず、貼ったコードはサーバーに送られません。

準備

プレイグラウンド：https://hinata-ya.tech/games/tutorials/ai-game-dev/（開いて確認する）。サンプルのコードと、貼り付けて実行する欄、日本語のエラー表示があります
生成AI（学校で許可されているもの）。事前に先生が一度、下のテンプレートで試しておくと当日の見通しが立ちます
「頼み方シート」：作りたいゲーム名・条件の箇条書き（5行）・必ず入れる2行（下記）・直してもらった回数・うまくいった頼み方

必ず入れる2行（テンプレート）

次の条件で、ブラウザで動く簡単なゲームを作ってください。
・HTML・CSS・JavaScriptを1つのHTMLファイルにまとめてください
・外部ライブラリは使わないでください
・（ここから生徒が考える条件）
・画面をクリックすると◯◯が△△する
・点数を画面に表示する
・…

最初の2行がないと、複数ファイルに分かれたり外部の部品を読み込んだりして、プレイグラウンドに貼っても動きません。「この2行はおまじない」と言い切って構いません（理由は、まとめで触れます）。

進行（45分）

時間	活動	先生の動き・ポイント
5分	導入プレイグラウンドのサンプルを実行して見せる。「これを1行も書かずに作れます」	期待を上げすぎない。「動かないことも普通にある。今日はそこからが本番」と先に言っておく
10分	頼み方を考える作りたいゲームを条件の箇条書きにする（5行まで）。必ず入れる2行を足す	「面白いゲーム」は条件ではない。「クリックしたら」「点が増える」「10秒で終わる」のように動きで書くよう促す。大作は止めて、1画面で終わるものに絞る
15分	実行 AIに頼み、出てきたコードをプレイグラウンドに貼って動かす	動いた子にも「条件どおりになってる？抜けてる条件は？」と聞く。動かなかった子には「いい、それが今日の本題」と声をかける
10分	直すエラー欄の内容をそのままコピーしてAIに伝え、直してもらう。動いたら条件を1つ足してもう1往復	「エラーを自分で読んで直す」必要はない。そのまま貼って伝えることが正しい対処だと教える。何回往復したかをシートに書かせる
5分	まとめうまくいった頼み方を出し合う。「曖昧に頼むと曖昧なものが返る」	「最初の頼み方と、最後の頼み方はどう違った？」。人に仕事を頼むときと同じだと結ぶ

発問の例

頼み方：「『面白いゲーム』と頼んだら、AIは何を作ると思う？人に頼むときだったら？」

頼み方：「その条件、友だちが読んで同じゲームを思い浮かべる？」

実行：「出てきたコード、条件が全部入ってる？入っていない条件をどう伝え直す？」

直す：「エラーには何て書いてある？読めなくていい。そのまま伝えたらどうなる？」

まとめ：「AIが作ったゲームは、誰が作ったことになる？条件を考えたのは誰？」

つまずきと手立て

よくある様子	手立て
条件が「面白い」「かっこいい」のような形容詞だけ	「クリックしたら何が起きる？」と動詞で書かせる。1つ書ければ続く
大作を頼んでコードが長すぎる／途中で切れる	「1画面・1操作・10秒で終わる」に絞らせる。切れたら「続きを出して」ではなく、条件を減らして頼み直す
貼っても真っ白で何も出ない	コード全体を貼れているか（`<html>`から最後まで）確認。エラー欄に何か出ていれば、それをAIに貼る
「エラー＝自分には無理」と落ち込む	下の囲みのとおり。先生がわざとエラーを出して見せるのが一番効く
動いた子が手持ちぶさた	「条件を1つ足して、もう1往復」。足す条件を考えるのも頼み方の練習
AIが使えない環境	生徒は頼み方の文章を書き、先生が代表して数件をAIに入力して映す。往復の場面はクラス全体で見る

⚠️ エラーは失敗ではありません

プレイグラウンドにはエラー表示が付いていて、「カッコが閉じていません」「その名前が見つかりません」のように日本語の手がかりが出ます。コードが動かないとき、多くの子は「自分には向いていない」と受け取ってしまいます。 「エラーは、どこを直せばいいか教えてくれるメッセージ」だと最初に伝えておくと、その後の粘り強さがまるで変わります。授業では、あえて1文字消してわざとエラーを出して見せるのがおすすめです。

ふり返りと評価

ふり返りは「頼み方シート」がそのまま材料になります。最初の頼み方と最後の頼み方の差を見ます。

観点	こう言えたら分かっている
知識・技能	作りたいものを、動きで書いた条件の箇条書きにできる。エラーをそのまま伝えて直してもらう手順を知っている
思考・判断・表現	出てきたものと条件を照らして、足りない条件・曖昧だった条件を見つけ、頼み方を直せる
主体的に学習に取り組む態度	動かなくても往復を続けている。往復の回数と、そのたびの変更が記録されている

できあがったゲームの出来映えは評価しません。AIが作った部分と生徒が考えた部分を分けて見るためです。

別の時間につなげるなら

前の時間に段階④⑤：既存ゲームのソースを読んで数値を書きかえておくと、AIが出したコードの「どこを見れば何が変わるか」の見当がつきます。進め方は中学校技術のページ
2時間目：AIが出したコードの「変数」を探して、値を変えて動きを確かめる（例④と同じ「予想→変更→確認」）
技術分野(4)・情報Ⅰ：「AIが作ったものの責任は誰にある？」「条件を考える仕事は残る？」を話し合う。AIはどうやって絵を見分けているの？（お絵かきクイズの解説ページ）は、AIが「確率で答えている」ことを体験する教材として使えます

配るURL

用途	URL
⑥ プレイグラウンド（コードを貼って動かす）	`https://hinata-ya.tech/games/tutorials/ai-game-dev/`
参考：既存ゲームのコードを書きかえる	`https://hinata-ya.tech/games/games/2048/source/`（`2048`は他のゲーム名に置きかえ可）