【技能五輪 One School One Skill】中学生向けにAIを利用したウェブサイト作り体験をして大盛り上がりした話
こんにちは！リテールアプリ共創部の戸田です。
先日「One School One Skill」というイベントで中学生に向けて技能五輪についての説明やAIを使ったウェブサイト作り体験の講師をさせていただきました。
今回はその中でも特に盛り上がったAIを使ったウェブサイト作り体験を中心にお話します。
この内容は教育現場の先生や講師の方々にも役立つ内容になっていると思いますのでぜひ参考にしてみてください。
AIを使ったウェブサイト作り体験の作品一覧
当日の様子
技能五輪とは
技能五輪とは青年技能者（主に23歳以下）が様々な職種の技能を競い合う競技大会で、国内の「技能五輪全国大会」と世界規模の「技能五輪国際大会」があります。目的は、若者の技能向上と努力目標の提示、国民への技能の重要性のアピール、技能尊重気運の醸成で、ものづくりやサービス業など幅広い分野で行われます。
One School One Skill とは
技能五輪の出場者が講師として学校を訪問し、「ものづくりやサービスの魅力」や「働くことの大切さ」を若者たちに伝えるプロモーション活動です。
開催日程・場所
日程: 2025年12月5日(金)
場所: つくば市立高山中学校
参加者: 8学年(125名)
(つくば市では中学2年生を8年生と言うらしいです)
講師
戸田 駿太（筆者）
経歴
- 第59回技能五輪全国大会「ウェブデザイン」職種 銀賞
- 第60回技能五輪全国大会「ウェブデザイン」職種 金賞
- 第61回技能五輪全国大会「ウェブデザイン」職種 金賞
- 第47回技能五輪国際大会「ウェブデザイン」職種 日本代表
当日のスケジュール
- 開会、講師紹介(10分)
- 講師による講話(1時間10分)
- 技能五輪全国大会・国際大会に出場した感想
- 「出場した競技(ウェブデザイン)」の魅力
- 働くことの大切さ、今後の目標
- 大会・競技の様子を紹介(映像・画像)
- ウェブサイト作りに挑戦
- 生徒さんから講師への質問(15分)
- 集合写真撮影(10分)
- 講師から生徒の皆さんへのメッセージ(5分)
- 閉会(5分)
実際に作った作品
こちらのサイトから当日作成したウェブサイトを確認できます。
「プレイする」「見る」「遊ぶ」などの黒いボタンを押すと実際に中学生が作った作品を見ることができます。
体験内容
ここから本題のAIを使ったウェブサイト作り体験の内容を紹介します。
事前知識の説明
最初にウェブサイトの基礎知識としてウェブサイトではHTML,CSS,JavaScriptを使って作成されていることや、ウェブサイトとウェブアプリの違いなどを解説しました。
実際に使われているところを見てみる
次に実際にHTML,CSS,JavaScriptを使って作成されたウェブサイト（高山中学校のウェブサイト）を見てみます。
ブラウザのDeveloper Toolsを開いてコードを確認しました。
これをみると実際にウェブサイトはHTML,CSS,JavaScriptを使って作成されていることがわかります。
先ほどのスライドを見せつつ記法の特徴を比較して実際のウェブサイトでも使われていること確認しました。
具体的には以下になります。
- HTMLの特徴
<,>で囲まれている
- CSSの特徴
background-color: red;のように:で区切られている
- JavaScriptの特徴
function,()が使われている
少し応用して遊ぶ
次にこれらの技術を理解していると何ができるのかを見せました。
例えば一部の背景色を変える、リストの文字を回転させるなどです。
生徒がこんなのできるんだ‼️という反応を示してくれるようなことを意識しました。
実際に反応は良く、驚いた様子がありました。（特に回転の方）
ここまでで「どんな技術を利用して何ができるのか」を見せることができました。
AIでウェブサイトを作ってみる
次にAIと一緒にウェブサイトを作ってみます。
最初は私が高山中学校のウェブサイトのスクリーンショットを生成AIに送信して同じ見た目のウェブサイトを作成してもらいました。
AIに作ってもらったものは、ただ作ってもらった！だけではなく、必ず中身のコード（HTML,CSS,JavaScript）の確認もします。
今回利用したClaudeというツールは生成AIのチャットと一緒に出力したHTMLの表示とコードの確認ができるため非常に便利です。(ChatGPTでもできる)
AIで作ったウェブサイトを改良してみる
先ほど作ったウェブサイトをAIに改良してもらいます。
簡単に送った修正点ですが、AIが解釈して一部を回転させることができました。（実際には回り続けています）
少しだけコードを読んでみてここら辺が変わってる〜などの解説もしています。
ここまでで、生成AIを利用してウェブサイトが作れる点、それを改良する事ができる点を見せることができました。
中学生と一緒にアイデアを出しながらウェブサイトを作成していく
ここからは中学生と一緒にアイデアを出しながらウェブサイトを作成していきます。
今までの生成AIを使って数秒でウェブサイトを作成する姿を見た生徒たちはついつい触ってみたくなるものです。（狙い通り😏）
そこで体験したい人を挙手制で選び、ウェブサイトを作成してもらいます。
この時点で挙手をしたのは5人ほどでした。
選ばれた代表生徒に「高山中学校のウェブサイトをどのように改良したい？」と聞いてみます。
最初の生徒は爆発を起こしたいと言いました。
それを生成AIに伝えます。
出来上がったものはこちらです。
あんまり期待通りにいかなかったですね...
ただ、自分の思い通りの作品をAIに伝えて作ってもらうことは、プロンプトエンジニアリング(生成AIに伝える指示の作成手法)の知識が必要です。
爆発は想像通りにいかなかったですが、逆に生成AIにどのように指示を伝えればいいのかを学ぶきっかけになりました。
ゲームを作ってみる
ウェブサイトは何個か作成できたので、レベルアップしてゲームを作ってみます。
また一人生徒を当てます。
その生徒はインベーダーゲームを作りたいと言いました。
ウェブサイトを作った時と同じ様にAIに作ってもらいます。
出来上がったものはこちらです。
実際にインベーダーゲームを作成した生徒に少し遊んでもらいました。
プレイする姿を見た生徒たちはすごく盛り上がりました。
少しだけ中身の解説もしました。
ゲームでもHTML,CSS,JavaScriptを利用して作っている点や、一部のコードを見せながら具体的に何を支持しているコードなのか解説をします。
実際にどこまでを理解してくれたのかは未知数ですが、少なくともこれを作るのにはウェブの技術を学ぶ必要があることは伝えられたと思っています。
その後もゲームやウェブサイトを作成してもらいました。
インベーダーゲームを作った後の挙手の人数は20人ほどいました。
どんどん増えて嬉しかったです。
以上で体験は終了です。
体験で意識したこと・工夫したこと
生成AIを利用した体験のインパクトを重視
125人の生徒に対して講師1人と1つのパソコンを利用したので、一回の体験に時間をかけられない状況でした。
本当はHTMLやCSSを手入力で作成してもらいたい気持ちもあるのですが、日本語を少し打つことで体験できる生成AIを利用した方法にしました。
実際に生成AIを利用したことで1時間ほどで５個以上のサイトやゲームを作ることができています。
今回利用したClaudeというサービスでは、左にチャット画面、右にコードor実行画面の確認ができます。
チャットして作ったものがすぐに表示され、コードと実行画面がシームレスに切り替えることができるので今回の体験に最適でした。
必ず私が理解している技術を伝える
生成AIを利用することで素早く作れるものがありますが、そのほとんどは生成AIの力であって、自分の力ではありません。
それを理解してもらうために出力した作品に対してはただ見るだけでなく、実際のコードを読んで私がこの技術について何を理解しているのかを伝えるようにしました。
例えばインベーダーゲームのでは以下のコードを見せつつ、「このコードはスタートボタンを押したらゲームが始まるという処理が書いてある」と伝えました。
document.getElementById('startBtn').addEventListener('click', () => {
document.getElementById('startOverlay').classList.add('hidden');
initGame();
gameRunning = true;
});
作って使ってもらえる喜びを伝える
ウェブの強みは作ったものをインターネット上に公開することで誰でも利用することができる点です。
今回作成したものも公開しているのでこの記事を読んでいる方は試していただけます。
自分が作ったものがその人にとって便利で役に立つことの喜びはかけがえのないものです。
全世界の人が使えて、体験してもらえる。これが私自身がこの技術を好きになった理由でもあります。
そのため、今回体験して驚いたことや気になったものがあれば少し遊んでみて、そこで学んだ技術を使って身近な人でも世界中の人でも幸せにして欲しいと伝えました。
まとめ
今回は技能五輪のOne School One Skillで中学生に向けてAIを利用したウェブサイト作り体験をして大盛り上がりした話をしました。
生成AIを利用した体験のインパクトを重視し、技術を伝えることで、中学生にウェブサイトやゲームを作る楽しさや技術の面白さを伝えることができました。
この体験を通して、中学生にウェブサイトやウェブアプリを作る楽しさや技術の面白さを伝えることができれば幸いです。
