160人の中高生にAI・技術体験の講師をしてみた話

1. 160人の中高生にAI・技術体験の講師をしてみた話 〜学生に伝える3つのTipsと今後の予想〜 2026/01/19 戸田駿太
2. 最近はヨーヨーにハマった 自己紹介 2
3. Web Technologies職種（ウェブアプリの技術力を競う部門） の日本代表として2024年に出場 技能五輪とは 3
4. 1. 3つの講演の紹介 中学生・高校生にバイブコーディングを教えた経験 2. 共通する流れと実演 講演の流れとClaude Artifactsのデモ 3. 生徒の反応とTips 実際の反応と教える側として気づいたこと 4. 学生のレベルと今後 現在の学生のレベル感とAIによる今後 今日話すこと 4
5. 中高生にAIの活用方法を教えた3つの講演
6. つくば市立高山中学校 日付 2025/12/5 対象 中学2年生 125名 1台のPCで体験する生徒を 当てて実演 その他の生徒はその画面を 見る形式 愛知総合工科高等学校 日付 2025/12/16 対象 高校生 30名 各自スマホで参加 高校生のため少し高度な内 容 すでに技術に親しい学生も 多かった ものづくり体験会 日付 2026/1/11 対象 中学1〜3年生 5名 各自レンタルPCで参加 講師と参加者で頻繁にコミ ュニケーションを取りなが らサポート 3つの講演とその目標 どれも共通して「AIを使ってウェブサイトやアプリを作る」体験をしてもらいました 体験を通してAIやウェブアプリを支えている技術をより興味を持ってもらうことが目標です 6
7. どの講演でも 4つのステップ で進めました 講演に共通する流れ 7
8. 目的：ウェブサイトの仕組みを理解してもらう 「ウェブサイトは HTML, CSS, JavaScript の3つでできている」と説明 開発者ツールで実際のサイトのコードを見せる →背景色を変えたり要素を回転させたり 1. 技術の解説→ 実演 → 体験 → 作品共有 8
9. 目的：AIの可能性を感じてもらう Claude Artifactsを利用したバイブコーディングを実際に見せる 最初はウェブサイトなどの簡単なもの 2回目以降はゲームなど難しいもの 学生から「すごい！」という声が出たら成功（↓は作ったウェブサイトを傾けてみた時） 技術の解説 →2. 実演→ 体験 → 作品共有 9
10. 目的：自分でもできるという成功体験を提供する 各自のデバイス（スマホ/PC）でClaudeを開いてもらう 生徒に実際に手を動かして好きなものを作ってもらう ウェブサイト、ゲーム、便利ツールなど 困っている人にはサポート 技術の解説 → 実演 →3. 体験→ 作品共有 10
11. チャット画面 実行画面 コード表示 技術の解説 → 実演 →3. 体験→ 作品共有（Claude Artifactsの画面） 11
12. 目的：達成感と次へのモチベーションを与える みんなが作った作品を見せ合う 他の人の作品を見て刺激を受ける 自分の作品が友達に使ってもらえる幸せを感じてもらう 技術の解説 → 実演 → 体験 →4. 作品共有 12
13. 学生の反応はどうだった？
14. この回は講師のPCを全員に見せる形で体験を行いました。 生徒を指名して体験してもらいます。 最初「やってみたい人？」→ 挙手 5人 インベーダーゲームを作った後 → 20人 に増加 1時間で 5個以上 のサイトやゲームを制作 中学生（125名・大規模）の反応 14
15. 全員が各自スマホで参加。コメントの掲示板としてSlidoを利用してみました。 Slidoを採用したことで講義中に100件以上のコメント 普段発言できない人でも匿名で質問できる→全ての質問に回答することができた 簡単なアンケートを取ることができた（下図） 近くの席の友達同士で見せ合いながらアプリを作る→ワイワイした雰囲気で楽しめていた 高校生（30名）の反応 15
16. 参加者同士で知らない人が多く、緊張した雰囲気から始まる。 少人数かつ時間が豊富にあるのでサポートがしやすかった。 体験時間を長く取れたので全員が集中して手を動かせた 講師がサポートをすることで参加者のアイデアを引き出した、完成度が高い作品ができた おとなしい子でもテキストでAIに指示することに抵抗はあまり無いように感じた 時間が余ったので参加者の全身の写真を撮ってNano Banana Proで着せ替えをしたら盛り上がっ た 将軍、サムライ、イルカの上に乗せるなど 中学生（5名・小規模）の反応 16
17. 学生に伝える時のTips
18. 3つのTips 18
19. まずは「動くもの」を見せることで興味を引く ターミナルで Hello World を出力するより視覚的にわかるものが効果的 黒い画面に文字が出る → 反応薄い 色の変化、アニメーション、ゲームなど 座学の前に興味を引くことで座学の理解も深まる 「すごい！」という声が出たら大成功 最初の5分で心を掴む ① まず「動くもの」を見せる 19
20. 中学生・高校生はアプリが自分で作れるなんて全然想像できない AIの力があれば自分のアイデアを形にして作ることができることを伝える 作ったものが世界中で使ってもらえるという喜びを感じてもらう →これは僕が感じたアプリ作りの楽しさの原点 →だから作ったものは全員に共有して使ってもらう プログラムの体験で自分でコードを入力させるのはやめた方がいい （興味を持って学び始めたらコードを手入力をしてみるくらいのスピード感がいいと感じる） 自分でコードを入力する→すぐエラー→実行できない→つまらない テキストでAIに指示する→簡単に作れる→楽しい→もっと作りたい AIがあれば誰でもクリエイターになれると感じてもらう ② 「AIで自分でも作れる」と伝える 20
21. ウェブアプリはHTML、CSS、JavaScriptなどの技術でできていることを伝える AIで実現できることは必ず土台となる技術がある 開発者ツールで実際のサイトを見せる 普段見るアプリが実はHTML, CSSなどで形作られていることを発見する AI体験で作った作品のコードを必ず確認する 作品作り→次の作品作りの繰り返し→技術的な次のステップがわからない 作品作り→コードを確認して少し理解→学ぶといいもの作れそう→もっと学んで作りたい！ コード確認にはClaude Artifactsが最適だった 「すごい」で終わらせず、仕組みを理解させる（しようとさせる） ③ AI開発ができる土台には技術があると伝える 21
22. 現在の学生のレベルと今後
23. 「AIは知っているが、何ができるか・どう使うかは知らない」 ChatGPTは知っている、使ったことある子も多い でも簡単に「コードが書ける」 「アプリが作れる」ことを知らない 教えると「こんなことできるの？」という反応 アプリ以外でもAIが使えることももっと知ってほしい 勉強やアイデア出し、相談など 今の中学生・高校生は余裕でタイピングできる、PCの扱いで困っていることはなかった ただ手法を知らないだけ→少しフォローで大幅に成長→無限の可能性がある 現在の学生のレベル 23
24. AI ネイティブな世代があと5〜10年で社会に出てくる 彼らにとってAIは「当たり前のツール」 →負けないようにどんどんAI活用していく必要がある 技術理解 × AI活用 が差別化ポイント→現状エンジニアは技術理解が重要 AIに頼りすぎると技術理解ができなくなる →だからコードを読んで興味を持って欲しかった 技術の理解が足りない人が多くなるにつれて「AIが書いたコードを読める・直せる」が重要ス キルになりそう （この先、技術理解をしなくてもAIで完璧なアプリが作れるかもしれないが...） 今後の予想 24
25. まとめ
26. ツールを組み合わせて楽しく講演をすることができた 学生に伝える時のTips ① まず「動くもの」を見せる → 最初の5分で心を掴む ② 「AIで自分でも作れる」と伝える → クリエイターになれる喜び ③ 土台には技術があると伝える → 次のステップへ導く 学生は既にAIを使う準備はできている 自分も負けないようにAI活用が必須 まとめ 26
27. 各講演の詳細はこちらの記事をご覧ください。 愛知総合工科高等学校での講演 https://dev.classmethod.jp/articles/highschool-vibe-coding/ つくば市立高山中学校での講演 https://dev.classmethod.jp/articles/gorin-one-school-one-skill/ ものづくり体験会で作った作品集 https://shuntatoda.github.io/misc-website/20260111-gorin-taiken/index.html 参考資料 27
28. この講演をきっかけに生徒たちがAIを使いこなして 最高のエンジニアやクリエイターになってくれるとすごく嬉しいです ご清聴ありがとうございました 28