AIでつくれる時代に、仕組みまでわかる学びを -WEB通信を可視化する「Web Anatomy Box」の挑戦 -

AIを活用してWebサイトをつくる体験を、その仕組みへの理解にもつなげたい。そんな思いから、Web通信を可視化する教育用ツール「Web Anatomy Box」を開発しています。

Webサイトを開いたとき、画面の裏側では何が起きているのでしょうか。自分でつくったサイトにアクセスし、普段は見えない通信の流れを確かめる。こうした一連の体験を通して、画面上の操作と、その裏側で起きていることを結びつけて学べる環境を目指しています。

本資料では、開発の背景と、Web Anatomy Boxが目指す学習体験を紹介します。AIを活用して「つくる」楽しさから、「なぜ動くのか」がわかる面白さへ。ものづくりと仕組みの理解をつなぐ、情報技術の学びを提案します。

▼ プロトタイプ
https://web-anatomy-box-prototype.peripeteiagrus.net/

Transcript

1. 中四国テックゲートウェイ中間発表 AIでつくれる時代に、仕組みまでわかる学びを ー Web通信 」 可視化 」」 」 Web Anatomy Box 」 」 挑戦 」 川川川川川川川川川 川川川川川川 川川 川川 川川 2川
2. 自己紹介 川川川川川川川川 川川 川 川川川川川川 suisan 川 川川川川川川川川川川川川川 」」」」」」」」 川川川川川川川川 IR 川 CTF etc. 」 」」」」 川川川川川 」 川 川川 川川 川 川川 川川川川川川 2川 川 SNS 」 𝕏川 https:// x.com /u_i_san my portfolio 川 https://portfolio.peripeteiagrus.net/ 」」 」 川川川川川川川川川川川 川川川川川川川川川川川 川川川川川川川川川川川 川川川川川川川川川川川 川川川川 川川川川 川川川川 川川川川 2022 川川 2023 “TA” A 2025 川川 202 6 “TA” NEXT etc my portfolio
3. つくれても、確かめられるとは限らない AI」」」」」」」」 Web 」」」」」」」」」 」」」」」」」」」」」」」」」」 」」」」」」」」」」」」」 川川川川川川川 川 川川川川 」 」 」 川 Web 川川川川 川
4. つくって終わらず、自分で確かめられるように 」 」 」 」」 」」 」」 」」」」」 」」」」 」 」」」」」 」 」」」 」 」」」」」」 川 川 川 川 川川 川 川 川川川 」」」 」 」 」」」」」」」」 」 川川川川川川川川 川川川川川川 情報技術を学 ぶ一人として 、 Web をつくる楽し さを、届く仕組みを学 ぶ体験につなげたい
5. Webをつくり、届く仕組みまで学ぶ 」」 」 Web 」」」」」」」」」」」」」」」」」」」」」 」 Web Anatomy Box 」」」」」」 」 1. Web 川川川川 2. Box 川川川川川 3. 川川川川川川川川川川川川川川 4. 川川川川川川川川 5. 川川川川川川川川 川川川川 川川川川 川 Web 川 川 川川川 この学習体験を、将来は一体型のBoxで提供する構想
7. 「わからない」を、自分で確かめる入口に 学習用のWebで変更を試し、結果を比べる
8. 教員が授業に取り入れやすいBoxへ Web 」」」」」」」」」」」」」」」」」」」」 」」」」」」」 」」」」」」 」 Box 」」」」」」 」 」 ①」」 」 」」 」 」 」」 川川川川川川川川川川川川川川川川川川川川川川川 ②」」 」 」」 」 」 」」」」 川川川川川川川川川川川川川川川川川川川川川川川川川 ③」 」 」 」 」 」」」」」」」」」」 川川川 川 Web 川 川川 川 川 川 川 川 川川 川 川 川川 川 川川
9. 試作版を、学習者と教員の声で育てる 」 」」 」 Web上で動く試作版を開発 」 」 」 」」 」 初学者と教員による体験検証 川 川川 川 川 川川 川 川川 川 川川 川 川川 川川川川 川 川川 川 川 川川 川 川 川 川川川 川 川川 川 川川 川 川川 川 川 川川川 川 川川 」 」」 」 検証結果をもとに改善し、 小型コンピュータを組み込んだ一体型教材へ 川川川川川川
10. 技術的解説
11. 仕組みまでわかる学びを、一緒に育てたい 」」」」 」 」」 」」」」」 」」」 」 」」 」 」 」 」 」」」」」 川川 川川川川 川川 川川川 川川川 川 川川川川川川 川 川 川 Web 」 」 」」」 Web Anatomy Box 」」」」