情報処理学会 インタラクション 2023
IPSJ Interaction 2023

2B-36
2023/3/1

信号機を題材とした小学生向けプログラミング教材の開発
大賀 瑞穂1,a)

鈴木 優1,b)

概要：2020 年度より，新たに全国の小学校でプログラミング教育が必修化された．必修化の目的は，子どもに「プログラミング的思考」 を身につけさせることと，コンピュータに意図した処理を行うよう指示することができるということを体験させながら，身近な生活でコンピュータが活用されていることに気づかせることである．しかしながら，このねらいを全て満たす既存のプログラミング教材は存在しない．そこで，本研究では，プログラミング教育必修化のねらいを達成できるプログラミング教材として，タブレット端末とタンジブルなユーザインタフェースである信号ブロックを用いた信号プログラミング教材を開発した．この教材では身近な生活に使われているコンピュータである信号機を題材とし，新たなビジュアルプログラミング言語として数直線タイプを実装した．

1. はじめに2020 年度から小学校でプログラミング教育が必修化された．必修化の目的は，子どもにプログラミング的思考を身につけさせることであり，コードや言語などの技術を習アプリ系
パソコンやタブレット端末でプログラミング学習用のゲームやクイズに取り組んだり，自由にプログラミングしてアニメーションやゲームを作成したりする教材．
センサ系

得することではなく，思考法を育てることである．プログ

通信機能や各種センサなどが仕込んである小さな高機

ラミング的思考とは，自分が意図する一連の活動を実現す能パーツを，日用品や工作と組み合わせて，いろいろるために，どのような動きの組合せが必要であり，1 つ 1な仕組みを作る教材．

つの動きに対応した記号を，どのように組み合わせればよ

ロボット系

いのか，記号の組合せをどのように改善していけば，より形や動く仕組みを自由に考えてロボットを組み立て，意図した活動に近づくのか，といったことを論理的に考え機能はパソコンやタブレット端末で機能をプログラミていく力である．また，小学生において，コンピュータにングしてロボットを完成させる教材．

意図した処理を行うよう指示することができるということ

ガジェット系を体験させながら，身近な生活でコンピュータが活用され球体やキューブ型など多彩なロボットやドローンなていることに気づかせることも必修化のねらいである [1]．

どを，コントローラの操作やプログラミングで動かす

これまでに多くの教材が開発されている一方で，既存教教材．

材には後者のねらいを達成できる教材が存在しない．そこ

アンプラグド系

で，本研究では，身近な生活にあるコンピュータの存在に電子機器を使わずに，遊びやゲーム仕立てのアクティ気づき，コンピュータに意図した処理を行うよう指示する

ビティ，アナログなゲーム，絵本や物語などで，プロことが体験できる教材の開発を目指す．

グラミングの考え方を学ぶ教材．

2. 既存教材

また，アンプラグド系以外の他 4 種類にはビジュアルプロ
グラミング言語が用いられていることが多い．ビジュアル

プログラミング的思考が学べる様々な教材がある．小学

プログラミング言語とは，プログラムをテキストで記述す

生向けに開発されてきたプログラミング教材の種類を，次るのではなく，視覚的なオブジェクトでプログラミングすの 5 つに分類した．

る言語であり，次の 3 種類に分類される．
ブロックタイプ
指示の書かれた小さなブロックをつなぎ合わせてプロ

1a)b)

宮城大学, Miyagi University
p1920046@myu.ac.jp
suzu@myu.ac.jp© 2023 Information Processing Society of Japan

グラミングする言語．

625

情報処理学会 インタラクション 2023
IPSJ Interaction 2023

フロータイプ2B-36
2023/3/1

指針 1 と 2 はプログラミング教育のねらいを満たすためフローチャートのように，指示や機能，条件のアイコに，指針 3 は小学生が理解しやすい教材の形態を目指すたンを配置して線でつないでプログラミングする言語．

めに設けた．

独自ルールタイプ
上記のどちらでもなく独自ルールで作られたプログラ

3.2 教材の形態

ミング言語

3.2.1 教材の題材

既存のプログラミング教材は数多く存在する．Scratch[2]指針 1 を満たす教材の題材として，次の 3 つの理由からはキャラクタをプログラミングして動かし，アニメーショ信号機を選択した．1 つ目は小学生でもルールを知っていンやゲームなどを自由に作成できる教材であり，アプリ系る身近でコンピュータが使われているものであること，2のブロックタイプに分類される．MESH[3] はセンサで状

つ目はプログラムの内容が容易であること，3 つ目はプロ態を確認することや自動で動く仕組みをつくる教材であグラミングの基本である順次，分岐，反復の 3 つを学べる

り，日用品や工作に付け足せば，IoT の仕組みを手軽につことである．

くることができる．センサ系のフロータイプに分類され1 つ目について，小学生でも青色は進む，黄色と赤色は止る．embot[4] は本体をダンボール工作で組み立てるロボッ

まるとルールを知っている．信号機は外でよく見かける，トキットである．ロボットのプログラミングをして腕など身近でコンピュータが使われているものと言える．

を動かすことができる．ロボット系の独自ルールタイプに

2 つ目について，信号機の基本的なプログラムは，それぞ分類される．Sphero[5] はタブレットやスマートフォンかれの秒数を指定し LED が青・黄・赤の順に光る，比較的容ら操作，プログラミングして球体のロボットを動かす教易な内容である．既存教材として挙げた Scratch や embot

材であり，ガジェット系のブロックタイプに分類される．などは，中学校で学ぶ負の数や座標などの知識が必要であRobot Turtles[6] はコンピュータを使わないカードゲーム

り，プログラミング学習に取り組む前にこれらについて学である．カードを並べてキャラクタの動きをプログラムし習する必要がある．信号機ではこのような事前知識を必要て宝石を取る内容である．アンプラグド系に分類される．としない．

また，関連研究においても様々な教材が開発された．ま3 つ目について，順次，反復，分岐はプログラミングのなべー [7] は命令カードを並べ，宝箱を取りゴールを目指

基本構造の 3 要素である．順次処理とは，この処理の次はすプログラミング教育ゲームである．アプリ系のブロック

この処理，というように順々に処理を実行していくことでタイプに分類される．操作カードによるプログラミング体

ある．反復処理とは，ある処理を繰り返し実行することで験システム [8] は，タンジブルな操作カードを使い，スマーある．分岐処理とは，ある条件によって実行する内容を変トフォンのカメラを通してマップ上の爆弾に当たらないよえることである．これらの要素はプログラミングを考える

うにコインを集めるプログラミング教育ゲームである．ス

際に重要な考え方で，プログラミング的思考を身に着けるマートフォンを用いるが，プログラミング自体はアンプラためには欠かせない要素であり，信号機はこれらの要素のグド系に分類される．

学びに最適な題材である．信号機では，青・黄・赤の順にプログラミング教育のねらいは，コンピュータに意図し光る部分が順次処理に，青・黄・赤の順に光った後，またた処理を行うよう指示することができるということを体験

始めに戻り青・黄・赤と光る部分が反復処理に，信号機のさせながら，身近な生活でコンピュータが活用されている色が赤になると，交差点の対の信号機が青に変わる部分がことに気づかせることであるが，この 2 点を達成できる教分岐処理に当たる．

材は存在しない．本研究では，このねらいが達成できる教

3.2.2 教材の端末材の開発を目指す．

3. プログラミング教材のデザイン
3.1 教材の設計指針

指針 2 を満たす教材の形態として，タブレット端末を使用する．文部科学省が推進する GIGA スクール構想によって，タブレット端末は児童全員が個別に使用できる標準的な学習用具となっている．令和 3 年 7 月末時点の端末利活

本研究の目的を達成できる，かつ既存教材が抱える問題用状況等の実態調査によると，全国の公立の小学校などの点を解決し，より理解しやすく，より良い学びができるよ96.2 ％が「全学年」または「一部の学年」で端末の利活用うにするため，次の教材設計の指針を設ける．

を開始している [9]．コンピュータに意図した処理を行う( 1 ) 身近な生活にコンピュータが使われていることに気づように指示する体験を実現するため，児童が使い慣れたコ

くことができる( 2 ) コンピュータに意図した処理を行うように指示することを体験できる( 3 ) 入出力のインタフェースが理解しやすい© 2023 Information Processing Society of Japan

ンピュータであるタブレット端末を教材の端末の一部として使用する．

3.2.3 教材のインタフェース
指針 3 を満たすために，教材のインタフェースとして626

情報処理学会 インタラクション 2023
IPSJ Interaction 2023

2B-36
2023/3/1

GUI と TUI の両方の考え方を取り入れたものを採用する．

マップ表示モニタ

インタフェースを考えるにあたり，GUI と TUI について信号ブロック説明する．GUI（グラフィカルユーザインタフェース）は，コンピュータの画面上に表示されるウィンドウやアイコン，ボタンなどを使い，マウスなどのポインティングデバイスで操作できるインタフェースである．一方，石井が提唱した TUI（タンジブルユーザインタフェース）は，形のない情報を直接触れることができるようにした，実体で表パソコン

プログラミングタブレット

現されたインタフェースである [10]．GUI のメリットは物
理表現に制限がないことが挙げられる．例えば，モニタの図 1

中のキャラクタが自由に空を飛んだり色を変えたりするこシステム構成とができる．TUI のメリットは物理的表現の直接操作性，直感的な理解容易性が挙げられる．しかしながら，TUI には，物理表現に大きな制限を持つというデメリットがある．
例えば，プラスチックで作られたプラモデルが空を飛んだり色を変えることは難しい．このデメリットをカバーするために GUI と TUI を組み合わせることで，TUI のデメリットをカバーしつつ，両者のメリットを得られることができる．この両者のメリットを得るため，入出力のインタフェースの一部を直接操作可能なタンジブルタイプにし，

図 2

GUI と融合させた教材を開発する．

作成した信号ブロック

4. 信号プログラミング教材の開発

LED

4.1 システム概要

ボタン

本研究で開発した信号プログラミング教材は，信号機のプログラミングを行い，プログラミング的思考を学ぶことを支援する教材である．プログラミングには後述する数直線タイプのビジュアルプログラミング言語を使用する．車

単 3 電池をスムーズに走行させるため，車の渋滞や事故が起こらないように繰り返し信号機をプログラミングする．

4.2 システム構成
本教材のシステム構成を図 1 に示す．本教材はタブレッ

静電マーカ
Wi-Fi モジュール

図 3

信号ブロックのシステム構成

タブレットと通信するための Wi-Fi モジュール（ESP32）と，単 3 電池 2 本を搭載する．

ト端末 1 台と，タッチパネル付き液晶ディスプレイ 1 台と信号ブロックの位置検出には，青木ら [11] がリング型物

それに接続する映像投影用のパソコン 1 台，複数の信号ブ理オブジェクトに実装した静電式マーカを用いる．静電式

ロックから成る．タブレット端末は信号機のプログラミン

マーカとは，物理オブジェクトに導電部を複数配置し，そグを行うタブレット（以下，プログラミングタブレット），の配置パターンを工夫することで，静電容量方式のマルチ

タッチパネル付き液晶ディスプレイは道路と車が表示されタッチスクリーンが取り付けられたタブレット上でのさまるディスプレイ（以下，マップ表示モニタ）である．信号

ざまな操作を可能とする操作方式である．本研究では，3ブロックをマップ表示モニタ上に置くと，信号ブロックの点式のマーカを作成する．認識点同士の距離やその関係性位置と種類が検出される．

から，それぞれのブロックを認識する．

4.3 信号ブロック

4.4 通信方式

信号ブロックとは信号機を模したブロック型の入出力イ

本教材は OSC 通信という通信方式で，プログラミングンタフェースである（図 2）．信号ブロックのシステム構成

タブレットと信号ブロック内の Wi-Fi モジュール，およびを図 3 に示す．信号ブロックは，青・黄・赤の LED と各マップ表示モニタと信号ブロック内の Wi-Fi モジュールが電球を制御できるボタン，ブロックの底面には，タブレッ通信する．プログラミングタブレットが作成した信号のプ

トで位置検出を行うための静電マーカを備える．内部にはログラムを信号ブロックへ送信し，信号ブロックがマップ© 2023 Information Processing Society of Japan627

情報処理学会 インタラクション 2023
IPSJ Interaction 2023

表示モニタへ光った LED の情報を送信する．

2B-36
2023/3/1

れる．
分岐吹き出しは，プログラミングする信号ブロックとは4.5 数直線タイプのビジュアルプログラミング

別の信号ブロックの情報によってプログラムを実行する．

4.5.1 数直線タイプの概要

分岐条件の対象となる「信号ブロックの番号」と，「条件の本研究では，数直線タイプのビジュアルプログラミング

信号の色」，「条件」，「実行内容」をタップで選択する．
「条言語を開発した（図 4）．数直線タイプとは，数直線上にプ件の信号の色」と「実行内容」は順次吹き出しと同じく，ログラムを書き込む吹き出しをつけることでプログラミン

信号機の部分ををタップし青・黄・赤の色の選択をする．

グする，新たなビジュアルプログラミング言語である．

「信号ブロックの番号」は『1』『2』『3』『4』の 4 パターン，『条件』は『なると同時に』と『なる 3 秒前に』の 2 パターンを用意した．

4.5.3 プログラミング方法
前述した 3 種類の吹き出しを使い，数直線に吹き出しを付けてプログラミングする．プログラミングタブレットの画面の右上部に，「送信」ボタンがあり，それぞれの数直線上に「削除 OFF」「順次」「くり返し」「条件」ボタンがある（図 6）．
「順次」ボタンを押すと順次吹き出しが，「くり返し」ボ
タンを押すと反復吹き出しが，「条件」ボタンを押すと分
図 4

数直線タイプのビジュアルプログラミング

岐吹き出しが，押したボタンと対応する数直線上に追加される．「削除 OFF」ボタンを押すと，ボタンの文字が「削ビジュアルプログラミング言語のブロックタイプやフ除 ON」になり，その状態で吹き出しをタップするとタッロータイプで信号機の動作を表現すると，1 つ 1 つコードプした吹き出しを削除することができる．
「削除 ON」の状を読まないとどのタイミングで電球の色が切り替わるのか

態で「削除 ON」ボタンを押すと，ボタンの文字が「削除わかりにくい問題点がある．数直線タイプは，色の切り替OFF」になり，吹き出しの削除はできなくなる．吹き出し

わるタイミングが視覚的にわかりやすい点と，Scratch やを追加したり削除したり，吹き出しの内容や位置を変更しembot のように事前知識を必要としない点の 2 つのメリッてプログラミングを行う．最後に「送信」ボタンを押してトを持つ．

信号ブロックに作成したプログラムを送信する．

4.5.2 吹き出しの種類と使い方
吹き出しは順次吹き出しと反復吹き出し，分岐吹き出しの 3 種類を作成した（図 5）．

図 5

吹き出しの種類

吹き出しは 3 種類とも，吹き出しのツノ部分をスワイプ
すると，吹き出しを左右に動かすことができる．実行のタ

図 6

プログラミング画面

イミングは吹き出しの位置によって変えることができる．
順次吹き出しは信号機の部分をタップし青・黄・赤の色の選択をする．
反復吹き出しは 2 個セットで使用する．それぞれ吹き出

4.6 操作方法
4.6.1 操作方法の種類

しの位置を移動でき，数直線上の左にある方が反復の開始

本教材は，信号ブロックのボタンを直接押して制御する

位置，右にある方が反復の終了位置となる．この 2 つの反ボタンモードと，プログラミングで信号ブロックを制御す

復吹き出しで囲った部分のプログラムが繰り返し実行さるプログラミングモードの 2 種類がある．

© 2023 Information Processing Society of Japan628

情報処理学会 インタラクション 2023
IPSJ Interaction 2023

2B-36
2023/3/1

多くの人はプログラミングする際，無意識に次のステップを踏んでプログラミングしている．まずはじめに実装する内容を考え，次に実装をするため順次，分岐，反復により表現できるアルゴリズムを考える．そして，最後にプログラミングを行う．しかしながら，実装内容を考えることや，それをアルゴリズム化することは，プログラミング経
験の乏しい児童にとってハードルが高い．本教材では，児童が取り組みやすいよう，実装内容を考えるステップとアルゴリズム化のステップを，ボタンモードでサポートする．
最後に，ボタンモードで考えた実装内容をもとに，プログ

図 7

ラミングモードでプログラミングを行う．

マップ表示モニタの画面

まず児童はボタンモードで遊び，次にプログラミングある信号ブロックを用いた，信号機のプログラミングを行モードで遊ぶ．児童はボタンモードでどのような制御をすい，プログラミング的思考を学ぶことを支援する教材を開ればいいのかプログラム考え，プログラミングする前にア発した．

ルゴリズムなどの情報を整理する．次に児童はプログラミ

今後は，実際に児童に本教材を体験してもらい，小学生

ングモードで信号ブロックをプログラミングする．車をスに対し研究目的が達成できるか評価実験を行う．また，矢ムーズに走行させるため繰り返しプログラミングを行い，印式信号や歩行者信号などの追加を行い，応用的な部分に渋滞や事故が起こらないように信号機をプログラミングす

ついても学習支援できるよう，さらなる学習者の支援を行るという遊び方である．

いたい．

4.6.2 ボタンモード
ボタンモードとは，信号ブロックのボタンを直接押して制御するモードである．ボタンモードは任意の数の信号ブ

参考文献
[1]

ロックとマップ表示モニタを用いる．児童ははじめにマッ
プ表示モニタ上の道路の交差点に信号ブロックを置き，信号ブロックのボタンを直接押して手動で電球を点灯させ[2]

る．その信号機の電球の色に従って画面上の車が動く．信号ブロックは，赤色のボタンを押すと他の LED は消灯し赤色の LED が点灯する．黄，青も同様にそれぞれの色のLED のみが点灯する．
4.6.3 プログラミングモード

[3]
[4]
[5]
[6]

プログラミングモードとは，プログラミングで信号ブロックを制御するモードである．プログラミングモード[7]は任意の数の信号ブロックとプログラミングタブレット，マップ表示モニタ（図 7）を用いる．はじめに児童はプログ[8]

ラミングタブレットで信号ブロックをプログラミングし，プログラミングをし終えたら，信号ブロックをマップ表示
モニタの道路の交差点に置く．児童がマップ表示モニタで[9]「スタート」ボタンを押すと信号ブロックが光り出し，信号ブロックの情報に従い車が走ったり停止したりする．車に渋滞や事故が起こると，マップ表示モニタの画面左上のラ[10]

イフが 1 つ減る．残り時間が 0 になるまでライフを減らさないように，繰り返しプログラミングする．

5. おわりに[11]

文部科学省. 小学校プログラミング教育の手引（第三版）.
https://www.mext.go.jp/content/20200218-mxt_
jogai02-100003171_002.pdf.
Mitchel Resnick, John Maloney, Andrés MonroyHernández, Natalie Rusk, Evelyn Eastmond, Karen Brennan, Amon Millner, Eric Rosenbaum, and Jay Silver.
Scratch: Programming for all. Communications of theACM, Vol. 52, No. 11, pp. 60–67, 2009.
Sony Marketing Inc. Mesh. https://meshprj.com/jp/.
e craft. embot. https://www.embot.jp/.
Sphero Edu. sphero. https://sphero-edu.jp/.
Thinkfun. Robot turtles. https://www.thinkfun.com/
robot-turtles/index.php.
間辺広樹, 並木美太郎, 兼宗進. 小学生向けプログラミン
グ学習教材「まなべー」の開発と教育効果. 情報処理学会
研究報告, Vol. 2015-CE-131, No. 6, pp. 1–8, 2015.
小原楓, ミークライサージャッポン, スリプラプルチャイ
カンタポーン, 平井佑樹, 金子敬一. 操作カードによるプログラミング体験システムの開発と評価. 情報処理学会研究報告, Vol. 2016-CE-133, No. 1, pp. 1–8, 2016.
文部科学省. 端末利活用状況等の実態調査（令和 3 年 7 月末時点）（確定値）.
https://www.mext.go.jp/content/20211125-mxt_
shuukyo01-000009827_001.pdf.
石井裕. 仮想と現実の融合：3. タンジブル・ビット-情報と物理世界を融合する，新しいユーザ・インタフェース・デザイン-. 情報処理, Vol. 43, No. 3, pp. 222–229, 2016.
青木良輔, 宮下広夢, 井原雅行, 大野健彦, 千明裕, 小林稔,
鏡慎吾. くるみる: 複数導電部もつ枠型物理オブジェクトを用いたタブレット操作. 研究報告ヒューマンコンピュー
タインタラクション（HCI）, No. 6, pp. 1–8, 2011.

本研究ではプログラミング教育のねらいを達成できる教材について検討し，信号機を題材としたプログラミング教材の開発を行った．新たに数直線タイプのビジュアルプログラミング言語を考案し，タンジブルなインタフェースで© 2023 Information Processing Society of Japan629