AIを使って「紙芝居 の物語に参加 する仕組み」を作ろう！ 〜「親子AIプログラミング体験 会」@千葉商科大学（2026年8月1日）〜
このドキュメントは、小学3年生までに学ぶ漢字を学習
千葉商科大学
Copyright © 2026 Hiroya Kubo. All rights reserved.
2026年7月28日
0. この教材 と体験 会について
0.1 この教材 の一次配布 元
AI
0.2 この体験 会で学ぶこと
この
画像 づくりAI- ポーズ
認識 AI 紙芝居 プログラミングアプリ
といった
「AI
を作ります。楽しんでください！
0.3 この体験 会が想定する参加 者
この
- AI
利用 経験 は問いません。 - プログラミング
経験 （Scratchなど）は問いません。
なお、
- マウスやキーボードの
操作 ができますか？ - EdgeなどのWebブラウザの
操作 ができますか？ - Windowsにおけるフォルダやファイルの
概念 を理解 していますか？
わからないことがあっても、
1. はじめに
1.1 準備
1.1.1 教室内の座席 に座 るとき
教室内の、
で指定された
と、自分の
-
保護 者の方：「吹 き出 し＋番号」
がついている席 に座 ってください（パソコンの画面の電源 は「オフ」になっています）。 -
小学生の方：「
矢印 」
がついている席 に座 ってください（パソコンの画面の電源 は「オン」になっています）。
小学生の方が
この
1.1.2 配布 資料
親子ペアごとに、次のような
教材 ：AIを使って「紙芝居 の物語に参加 する仕組み」を作ろう！- A4メモ用紙（白紙）× 4
枚 - そのほか
1.1.3 カメラを使用するとき
このの方向に向けてください。
この
図中の「
1.1.4 ポーズを取るとき
画面上部に「ポーズをとろう」という
ポーズを取るときには、
1.1.5 カメラの使用を終了 するとき
この
1.2 「参加 型 」AI紙芝居 をプレイしてみよう
「
https://kubohiroya.github.io/tm-kamishibai-samples/stories/urashima/web/
このURLは、パソコンでもスマートフォンでも開けるようになっていますが、
この
次のような画面が開いたことを
物語のシーンの進行に
⭐️ このときにカメラが撮影する映像は、ポーズの識別のためだけに用いられるため、パソコン上にもネットワーク上にも、どこにも保存されません。
正しいポーズを取ると、左上の「ポーズ
1.3 「参加 型 」AI紙芝居 を作ろう
このAI
この
1.4 この作品は、どんな技術 でできているの？
このページも
2. AIに乙姫 様を描 いてもらおう
それではさっそく、
2.1 ダンスのポーズを考えて棒 人間の絵で下書きする
そのダンスの「決めポーズ」を、
- それぞれのポーズが、他のポーズとはっきり
違 うものになるようにしてください。 - ポーズごとに左右の
腕 の角度や肘 の曲げ伸 ばしを変 え、違 いがはっきりわかるようにしてください。 - 上半身だけでポーズの見分けがつくようにしてください（この
体験 会のカメラには下半身が映 りにくいため、下半身だけが異 なるポーズにはしないでください）。
2.1.1 手書きで棒 人間の絵を描 く
親子で相談・
- それぞれのポーズの絵を、
配布 されているメモ用紙に筆記用具を用いて描 いてください。 - 細部をリアルに
描 く必要 はありません。また、絵の上手下手は関係 ありません。 - 大事なことは、上半身の大きな動きがわかるように
描 くことです。 - 下半身は
認識 しにくいため、下半身だけが異 なるポーズにはしないでください。 - うまく
描 けなかったら、別 の紙に描 き直 しをしてもかまいません。 最低 2つ、最大 4つの「棒 人間」を描 けたら、次の作業に進みます。
「
2.2 パソコンで棒 人間の絵を描 く
2.2.1 「配布 資料 」フォルダを開く
パソコンのデスクトップに、この
このアイコンをダブルクリックすると、その
| フォルダ名 | |
|---|---|
| drafts | 白紙の |
| generated | |
| generated-samples | |
| master |
フォルダの中を
2.2.2 「drafts」フォルダを開く
「
2.2.3 「ペイント」アプリで開いて「棒 人間」の絵を描 く
「drafts」フォルダの中の、
「ペイント」アプリが起動し、この「pose1.png」ファイルが
「pose1.png」は、
- 右下の
虫眼鏡 の＋／－アイコン：キャンバスを拡大 ・縮小 できる。 - 「ブラシ」アイコンと「消しゴム」アイコン：線を
描 いたり消したりできる。 - 画面
左端 のスライドコントローラー：ブラシや消しゴムの太さを変 える。
2.2.4 棒 人間の絵を保存 する
2.2.5 棒 人間の絵をもっと描 く
上記の
3つ
2.3 生成 AIでポーズの絵を描 く
ここからは、
2.3.1 生成 AIの画面を開く
この
-
M365 Copilotは、Microsoftの「Word」「Excel」「PowerPoint」などのアプリの中で使えるAI
機能 ですが、 ここでは、WebブラウザのEdgeを使って、M365 Copilotの画面を開きます。 -
M365 Copilotは、Microsoftのアカウントでサインインして使う
必要 がありますが、 この体験 会では、あらかじめサインイン済 みの状態 のEdgeのタブを用意しています。 -
M365 Copilotは、
利用 対象 年齢 が13歳 以上 となっているため、小学生が使うことは認 められていません。 この体験 会では、M365 Copilotの操作 は、保護 者の方が行ってください。
Windows画面の一番下の中央
このEdgeのアイコンをクリックして、Edgeのアプリを開きます。
この
画面中央に「こんにちは。何かお
2.3.2 立ち絵の画像 をアップロードする
M365 Copilotの画面中央に、「Copilotにメッセージを
※この
2.3.3 棒 人間の画像 をアップロードする
ふたたび入力
2.3.4 生成 AIで立ち絵をポーズに変 える
2つの
プロンプト
添付した2つの画像のうち、立ち絵の画像「Princess」を、棒人間の画像「pose」で示したポーズに変えて
描き直した画像を作成してください。画像の背景は、#00FF00 の緑一色で塗りつぶしてください。
画面右下の「→」ボタンをクリックして、数分間待ってください。
次のように作業
うまく動かないとき
その場合は、スタッフが
2.3.5 立ち絵の背景 を透明 にする
この
しばらく待つと、緑色だった
2.3.6 立ち絵をポーズに変 えたものをダウンロードする
画面右上の「
「名前をつけて
これにより、ポーズを
2.3.7 ポーズ画像 ファイルをもっと作成 する
ポーズ
次のポーズからは、「プロンプト
2.4 ポーズ画像 ファイルを配置 する
前の
2.4.1 ポーズ画像 ファイルのファイル名を変更 する
この「エクスプローラー」のアイコンをクリックしてください。
「エクスプローラー」の画面左に
これらのファイルのひとつ（
すると、アイコンの下に、ファイル名を入力できる
このポーズが「1番目」であるならば、ファイル名を「p1.png」のように入力して、Enterキーを
⚠️ 注意
ファイル名は半角英数字で、「p1.png」のように設定してください。「.png」という拡張子は必ず残してください。拡張子が消えると、画像ファイルとして認識されなくなります。
これで、このポーズ
2.4.2 ポーズ画像 ファイルを移動 させる
ファイル名を
- 「ダウンロード」フォルダを開いた画面を、デスクトップの左のほうに
置 きます。 配布 資料 フォルダの中の「generated」フォルダ（生成 画像 フォルダ）を開いて、デスクトップの右の方に置 きます。- 「ダウンロード」のフォルダから、「generated」のフォルダへ、ファイルをドラッグ＆ドロップして
移動 させてください。この作業を、作成 するポーズの数だけ繰 り返 してください（ファイルの複数 選択 のやり方がわかるのならば、一度に複数 のファイルをドラッグ＆ドロップで移動 させてもよいです）。
これにより、「generated」フォルダ内は次のようになります。
「p3.png」や「p4.png」を
3. ポーズ画像 を登録 しよう
この章も、親子ペアのうち小学生に作業をしてもらいます。
ここでは、Scratchの
3.1 TurboWarpでの作業を開始する
WebブラウザEdgeで、TurboWarpの
3.2 TurboWarpでAI紙芝居 アプリのプロジェクトを開く
画面左上の「ファイル」→「コンピュータから
「
これらの画面それぞれで次のような
- 「サンドボックスなしで実行する」にチェックを
付 けてください（チェック済 みの場合があります）。 - 「
許可 」ボタンをクリックしてください。
⚠️ 注意
「サンドボックスなしで実行する」にチェックを付けずに「許可」を押した場合は、ブラウザを再読み込みしてやり直してください。
3.3 ポーズ画像 をコスチュームとして登録 する
画面右のスプライト
「Princess」を
次に、
ドラッグ＆ドロップ
3.4 描 いた絵を確認 する
「Princess」のスプライトの「コスチューム」として
あなたの
3.5 TurboWarpプロジェクトを保存 する
TurboWarp画面上部の「ファイル」メニューから「my-urashima.sb3に
4. 休憩 しよう
トイレに行っておきましょう。
水分
うまくいかないこと、わからないことがあれば、
5. ポーズを認識 するしくみを作ろう
ここからは、AIにポーズを
Teachable MachineのWebサイトを開きましょう。これが、どのような仕組みで動作しているのか、どのように
https://teachablemachine.withgoogle.com/
5.1 Teachable Machineの「ポーズ」プロジェクトを開く
WebブラウザEdgeで、次のリンクから、Teachable Machineの「ポーズ」の画面を開いてください。 https://teachablemachine.withgoogle.com/train/pose
5.2 クラスを用意する
AIに、
まずは、クラスのラベルとして「Class 1」と書かれているものを、ポーズ名「p1」に
同様に、「Class 2」と書かれているものを「p2」に
さらに、3つ
⚠️注意
これらのラベルは半角英数字で、「p1」のように設定してください。
5.3 ポーズを撮影 する
これから、カメラの前でポーズを取って、AIにポーズを
5.3.1 ポーズを選 んでその画像 を表示 する
- 先ほど
作成 した「棒 人間の下書き」のメモ用紙と、デスクトップの配布 資料 フォルダの「generated」フォルダの中の「ポーズ画像 」を確認 しながら、どのようなポーズを取るのかを、親子で確認 してください。 - そのうちひとつのポーズを
選 び、そのポーズ画像 の名前が「p1」「p2」「p3」「p4」のうち、どの名前なのかを確認 してください。 - その「ポーズ
画像 」のアイコンをダブルクリックして表示 してください。 - そのポーズ
画像 の表示 ウィンドウが画面の右側 に配置 されるようにしてください。 タイトルバーの「□」部分にマウスを重ねると、ウィンドウのレイアウトと位置 を選択 できます。
5.3.2 作業用にデスクトップを整える
- Teachable Machineを
表示 しているEdgeのウィンドウを画面の左側 に配置 してください。 - デスクトップの
左側 に「Teachable Machine画面」が表示 され、右側 に「ポーズ画像 」が配置 されたことを確認 してください。
5.3.3 ポーズの撮影 を準備 する
- 「5.3.1 ポーズを
選 んでその画像 を表示 する」節 で選 んだものと同じ名前のクラスを選 んでください（例 ：「p1」）。 - そのクラスの「ウェブカメラ」ボタンを
押 してください。「Webcam」という小窓 に、カメラのプレビュー中の映像 が表示 されるのを確認 してください。 初回 は、Edgeがカメラ利用 の許可 を求 めてくるので「許可 」ボタンをクリックしてください。
「
5.3.4 ポーズのサンプル画像 を撮影 する
1つのポーズごとに、5〜10
液晶 ディスプレイとカメラを「1.1.1 教室内の座席 に座 るとき」節 の図における「矢印 」の方向に回転させてください。- 小学生の方は、
席 を立ってウェブカメラの前に移動 し、ポーズを取ってください。 - プレビュー
画像 の中では、ポーズを取っている人の姿勢 をAIが認識 した際 に、「ボーン（骨 ）」と呼 ばれる線が表示 されます。 ボーンは人体を簡略 化した関節 のおおまかな位置 を表す「丸」と骨 を表す「線」で構成 されます。 姿勢 が正しく認識 されなかった箇所 については、ボーンの「丸」や「線」の表示 が消えてしまっています。
保護 者の方は、(1) ポーズ画像 とカメラのプレビュー映像 とが同じ姿勢 になっていること、(2) ボーンの「丸」や「線」が画像 と重ね合わされて正しく表示 されていることが、同時に達成 されている瞬間 を見計らって、声かけ・アドバイスをしながら「長押 しして録画 」ボタンを押 し、「サンプル」の撮影 をしてください。撮影 されたポーズの姿勢 が崩 れてしまっていたり、その際 にボーンが認識 されていなかったりしたサンプル画像 は、削除 してください。削除 するには、サンプル画像 上にマウスを重ねたときに表示 される「ゴミ箱」ボタンを押 してください。- 1つのポーズごとに、
微妙 に姿勢 を変 えながら、5〜10枚 を撮影 して画像 を用意してください。 - 他の親子が
画像 に写り込 んでしまった場合には、その画像 を削除 してください。
Teachable Machineを用いて、
ポーズごとに整理された形で「サンプル」
「トレーニング」をするときに、1つのポーズについてのサンプル
どのようなサンプルを
すべてのポーズについてサンプルの
5.4 モデルをトレーニングする
サンプルを
画面中央
5.5 モデルを確認 する
トレーニングが
小学生の方は、
カメラの前で、わかりにくいポーズや、まぎらわしいポーズを取った場合には、AIが
モデルのトレーニングはうまくいきましたか？
あとで、ポーズの
画面左上
ダウンロードしたファイルは「ダウンロード」フォルダに「project.tm」という名前で
このメニューの「ファイルからプロジェクトを開く」をクリックして、
5.6 モデルをクラウドにエクスポートする
次は、トレニーニングされたモデルを、AI
- 「プレビュー」画面の「モデルをエクスポートする」のボタンをクリックしてください。
- 「モデルをエクスポートしてプロジェクトで使用する。」という画面が
表示 されます。 - この画面の「モデルをエクスポートする：」で、「アップロード（
共有 可能 なリンク）」のラジオボタンが選択 されていることを確認 してください。 - 「モデルをアップロード」ボタンをクリックしてください。ここで少し待ちましょう（数十秒間）。
それまで、「
- 「
共有 可能 なリンク：」欄 で、ここで作成 したリンクが表示 されているところの、いちばん右側 の端 の「コピー」を押 してください。 - 「コピー」が「コピーしました」の
表示 に変化 することを確認 してください。
⚠️注意
- 保存したプロジェクトの中には、AIのトレーニングに用いるためのものとして撮影したサンプル画像が含まれています。サンプル画像には、個人情報などが含まれる場合がありますので、取り扱いには十分に注意してください。
- エクスポートしたモデルは、サンプル画像の特徴だけを抽出したものとなっており、ここからサンプル画像を復元することはできません。そのため、エクスポートしたモデルを共有しても、サンプル画像に含まれている個人情報などが漏れることはありません。
6. 台本ファイルの修正 をしよう
「
6.1 台本ファイルの編集 を開始する
台本ファイルの中では、行ごとに、台本を
行の1文字目に記号「#」がつけられていると、その行の
my-urashima.txtファイルでは、さまざまな#」をつけて、あらかじめ
my-urashima.txtファイルを#」を
行が「---」という
6.2 モデルのURLを設定 する
AI
ここでは、シーン3「# scene 3」という行をTMPoseURL=」で始まる行を見てください。
この台本では、もともとは、
---
# scene 3
TMPoseURL=https://teachablemachine.withgoogle.com/models/…
それでは、これを、あなたが作ったTMPoseURL=」より後ろの部分にコピーした
---
# scene 3
TMPoseURL=https://teachablemachine.withgoogle.com/models/あなたのモデルのURLの末尾部分確認
間違った内容を貼り付けていないか、「=」などの記号を消していないかを確認してください。
6.3 アセットを設定 する
ここでいう「アセット」とは、このAIasset=」で始めます。カンマ区切りの1つ目の
my-urashima.txtファイルでは、「Princess」という名前のScratchスプライトにあるコスチュームを、アセットとして
ここでは、「asset=p1,costume:Princess」という
asset=p1,costume:Princess
| 意味 | |
|---|---|
| asset= | この行で「アセット」を |
| p1 | アセット名は「p1」であることを表します。 |
| , | 区切り文字「,」はアセット名には |
| costume: | アセットのアクセス先は「costume:」であることを表します。 |
| Princess | コスチュームを |
それではここで、あなたが
アセットの#」を
確認
必要な行だけ、行頭の「
#」を削除 してください。
#asset=p1,costume:Princess
#asset=p2,costume:Princess
#asset=p3,costume:Princess
#asset=p4,costume:Princess6.3.1 ポーズ2つを作成 した場合の設定
「p1」をアセット名として、Princessというスプライト名の「p1」という名前のコスチューム
「p2」をアセット名として、Princessというスプライト名の「p2」という名前のコスチューム
asset=p1,costume:Princess
asset=p2,costume:Princess
#asset=p3,costume:Princess
#asset=p4,costume:Princess6.3.2 ポーズ3つを作成 した場合の設定
「p1」をアセット名として、Princessというスプライト名の「p1」という名前のコスチューム
「p2」をアセット名として、Princessというスプライト名の「p2」という名前のコスチューム
「p3」をアセット名として、Princessというスプライト名の「p3」という名前のコスチューム
asset=p1,costume:Princess
asset=p2,costume:Princess
asset=p3,costume:Princess
#asset=p4,costume:Princess6.3.3 ポーズ4つを作成 した場合の設定
「p1」をアセット名として、Princessというスプライト名の「p1」という名前のコスチューム
「p2」をアセット名として、Princessというスプライト名の「p2」という名前のコスチューム
「p3」をアセット名として、Princessというスプライト名の「p3」という名前のコスチューム
「p4」をアセット名として、Princessというスプライト名の「p4」という名前のコスチューム
asset=p1,costume:Princess
asset=p2,costume:Princess
asset=p3,costume:Princess
asset=p4,costume:Princess6.4 アクターのポーズを設定 する
ここでいう「アクター」とは、このAI
アクターは「アクション」を実行できます。台本ファイルの中で、行頭が「action=アクター名:」で始まる
ここでは、「Princess」という名前のアクターに「pose」というアクションをさせる
action=Princess:pose:p1,p2,p1,p2:p1,p2,p1,p2:Drum Funky,Drum Funky,Drum Funky,...
| 意味 | |
|---|---|
| action= | この行は「アクション」を |
| Princess: | この行はアクター名「Princess」の「アクターアクション」であることを |
| pose: | この行はアクターアクション「pose」を |
| p1,p2,p1,p2 | スキンのアセット名をカンマ区切りで |
| p1,p2,p1,p2 | Teachable Machineのポーズのクラス名（ポーズ名）をカンマ区切りで |
| Drum Funky,Drum Funky,Drum Funky,Drum Funk |
それでは、my-urashima.txtファイル内に#action=Princess:pose:」行のうち、#」を
確認
必要な行だけ、行頭の「
#」を削除 してください。
#action=Princess:pose:p1,p2,p1,p2:p1,p2,p1,p2:Drum Funky,Drum Funky,Drum Funky,...
#action=Princess:pose:p1,p2,p3,p1,p2,p3:p1,p2,p3,p1,p2,p3:Drum Funky,Drum Funky,...
#action=Princess:pose:p1,p2,p3,p4,p1,p2,p3,p4:p1,p2,p3,p4,p1,p2,p3,p4:Drum...6.4.1 ポーズ2つを作成 した場合の設定
3行のうち1行目、アセット名部分に「p1」「p2」が書かれている行の行頭の#記号を
action=Princess:pose:p1,p2,p1,p2:p1,p2,p1,p2:Drum Funky,Drum Funky,Drum Funky,...
#action=Princess:pose:p1,p2,p3,p1,p2,p3:p1,p2,p3,p1,p2,p3:Drum Funky,Drum Funky,...
#action=Princess:pose:p1,p2,p3,p4,p1,p2,p3,p4:p1,p2,p3,p4,p1,p2,p3,p4:Drum...6.4.2 ポーズ3つを作成 した場合の設定
3行のうち2行目、アセット名部分に「p1」「p2」「p3」が書かれている行の行頭の#記号を
#action=Princess:pose:p1,p2,p1,p2:p1,p2,p1,p2:Drum Funky,Drum Funky,Drum Funky,...
action=Princess:pose:p1,p2,p3,p1,p2,p3:p1,p2,p3,p1,p2,p3:Drum Funky,Drum Funky,...
#action=Princess:pose:p1,p2,p3,p4,p1,p2,p3,p4:p1,p2,p3,p4,p1,p2,p3,p4:Drum...6.4.3 ポーズ4つを作成 した場合の設定
3行のうち3行目、アセット名部分に「p1」「p2」「p3」「p4」が書かれている行の行頭の#記号を
#action=Princess:pose:p1,p2,p1,p2:p1,p2,p1,p2:Drum Funky,Drum Funky,Drum Funky,...
#action=Princess:pose:p1,p2,p3,p1,p2,p3:p1,p2,p3,p1,p2,p3:Drum Funky,Drum Funky,...
action=Princess:pose:p1,p2,p3,p4,p1,p2,p3,p4:p1,p2,p3,p4,p1,p2,p3,p4:Drum...6.5 台本ファイルを保存 する
メモ帳のメニューから「ファイル」→「
6.6 動作に必要 なファイルを確認 する
- WebブラウザEdgeを用いて、TurboWarpのエディターで、my-urashima.sb3ファイルが開かれていることを
確認 してください。 配布 資料 フォルダ内の「stories」→「my-urashima」フォルダにある、紙芝居 の台本ファイル「my-urashima.txt」を書 き換 えて存在 したことを確認 してください。
6.7 台本ファイルはプログラムだということを理解 する
もし
7. 動作確認 しよう
ここまでで、AI
7.1 緑色の旗 を押 して開始する
- WebブラウザEdgeで、TurboWarpのエディターを開いているタブを
表示 してください。もし閉 じてしまっている場合には、もういちど開いてください。 - このTurboWarpにおいて、my-urashima.sb3ファイルが開かれた
状態 であることを確認 してください。 - 画面右上の、緑色の
旗 を押 して、この「参加 型 」AI紙芝居 アプリを実行してください。 - 画面右上の「フルスクリーン」ボタン
を押 すと、全画面表示 でアプリを実行できます。
7.2 台本ファイルを開く
- AI
紙芝居 アプリの実行が開始されたら、タイトル画面をクリックして次へ進んでください。 - カメラの
利用 許可 を求 められた場合には「許可 」をクリックしてください。 - 「ファイルをひらく」をクリックするとファイル
選択 画面が開きます。 配布 資料 フォルダ内の「stories」→「my-urashima」フォルダにある、紙芝居 の台本ファイル「my-urashima.txt」を選択 して読 み込 んでください。- 物語がスタートします。
7.3 早送りする
「スペースキー」や「右
7.4 ポーズを認識 させて物語を進める
ダンスのポーズに
7.5 物語の実行を停止 ・再開 する
緑色の
8. まとめ
8.1 みんなでプレイしよう
近くの
8.2 今日の体験 会でみなさんが達成 したこと
今日の
□ AIに絵を
□ AIにポーズを
□ 物語の台本（プログラム）を
□ 自分だけの「
8.3 この体験 会に参加 してくれたみなさんへ
この
AIは
ちなみに、この「
そして、あなた自身で、新しい物語の台本ファイルを作り、それを他の人に
これからの、みなさんのチャレンジを、心から
8.4 お帰りになる前に
8.4.1 作成 したファイルのお持ち帰り
今日の
8.4.2 教室を出るとき
パソコンの中身やパソコンの
お
8.5 アンケートのお願 い
今日の
- アンケートは、
保護 者の方と小学生の方それぞれにご用意しています。 - アンケートは
匿名 で回答できます。個人 情報 の入力は不要 です。 - 回答していただいた
内容 は、今後の研究、教材 および体験 会運営 の改善 のために利用 させていただきます。 - それぞれのアンケートの回答の
所要 時間は3〜5分です。 - 2026年8月9日（日）までの回答をお
願 いいたします。
https://forms.gle/XsFyFndZs4wAreGe6
小学生用アンケート
https://forms.gle/TDjzfb7tgDKVdYnG6
