プログラミング教育からピクトグラミング教育へ

情報教育をもっと充実させるべきだ.私は基本的にそう考えている.

現在,小学校から中学校,高等学校へとつながる初等中等一貫の情報教育のあり方が議論され,情報教育をより体系的に位置づけていく方向に進んでいる.一方,高等教育や人材育成政策に目を向けても,デジタル,AI,データサイエンスなどを含む理系分野を重視する動きが強まっている.私は,こうした方向性についても基本的には推進の立場である.これからの社会を考えれば,情報技術について学ぶ機会を広げることは重要であるし,理系分野を学ぶ人を増やしていく必要性も理解できる.

しかし,だからこそ,少し気になっていることがある.

情報教育がすべての児童・生徒に広がり,さらに政策的な誘導を伴う理系重視の推進とも相まったとき,「情報が好きな子」が増える一方で,「情報が嫌いな子」も一定数現れるのではないか,ということである.

もちろん,情報教育を行うから情報嫌いが生まれる,という単純な因果関係を主張したいわけではない.数学を学ぶ人すべてが数学を好きになるわけではなく,英語を学ぶ人すべてが英語を好きになるわけでもない.教育の対象が広がれば,得意な人,苦手な人,好きになる人,嫌いになる人が現れるのは自然なことである.

ただ,「情報」は少し事情が違うように思う.

情報技術は,もはや特定の専門家だけが利用するものではない.スマートフォン,Web,SNS,生成AI,データ活用,行政サービス,仕事上のコミュニケーションなど,社会生活のさまざまな場面に浸透している.そう考えると,学校教育の中で形成された「情報は難しい」「プログラミングは自分には関係ない」「コンピュータは苦手だから触りたくない」といった感覚が,卒業後まで固定化してしまうことは,単なる一教科への好き嫌いでは済まなくなる可能性がある.

情報教育を普及させることと,情報に対して肯定的な態度を育てることは,同じではない.

むしろ情報教育を本格的に「全員の教育」にしていくのであれば,次に考えなければならないのは,「情報を教えること」だけではなく,「情報嫌いを生まないこと」ではないかと思っている.

そこで私が以前から考えているのが,情報を,いかにも「情報らしい入口」から教えなくてもよいのではないか,ということである.

たとえばプログラミングである.

プログラミング教育というと,画面にプログラムコードが表示され,変数,条件分岐,繰り返しといった概念を順番に学び,最後に何らかのプログラムを完成させる,という姿を想像しやすい.もちろん,それは重要な学習方法である.一方で,初めから「今日はプログラミングを勉強します」と提示された瞬間に,「難しそう」「自分には向いていなさそう」と感じる学習者もいるだろう.

であれば,入口を変えてみればよい.

「プログラミングを勉強する」のではなく,

「ピクトグラムを作ってみる」

ところから始めるのである.

人型ピクトグラムの腕を動かす.足を動かす.歩かせる.複数の人を登場させる.何らかの状況や意味を表現する.「飛び出し注意」を動きで表してみる.バレーボールをしている様子を表してみる.自転車に関する注意をアニメーションで表現してみる.

学習者が考えているのは,「どうすればこの動きになるだろう」「どうすれば相手に意味が伝わるだろう」ということである.しかし,その裏側では,逐次実行,同時実行,繰り返し,条件分岐,変数,動作の再利用など,プログラミングに関わるさまざまな概念に自然に触れることになる.

つまり,情報を学ぶことを前面に出すのではなく,表現やデザインを入口として,結果的に情報の考え方に出会うのである.

私は,こうした学びを単に「ピクトグラムを使ったプログラミング教育」とは考えていない.むしろ,少し大きく言えば,

「プログラミング教育からピクトグラミング教育へ」

という発想で捉えている.

ここでいう「ピクトグラミング教育」は,プログラミング教育を否定したり,置き換えたりするものではない.プログラムを書くことそのものを出発点にするのではなく,ピクトグラムをつくる,動かす,組み合わせる,意味を表現する,そして他者に伝えるという活動を出発点として,その過程でプログラミングや情報の考え方に触れていく教育である.

「プログラミング」という言葉から入ると身構えてしまう学習者であっても,「ピクトグラムを作る」「人型を動かして意味を表現する」という活動であれば,異なる構えで参加できるかもしれない.

そのために開発しているアプリケーションの一つが「Hyper Pictoch(ハイパーピクトッチ)」である.

Hyper Pictochでは,文章が書かれたビジュアルブロックを組み合わせ,人型ピクトグラムや物体にそれぞれ異なる動作を設定できる.記法を覚える必要がなく,文法エラーも基本的に発生しないため,プログラミング初学者でも作品制作そのものに意識を向けやすい.

また,単に人型を一体動かすだけではない.複数の人型や図形を組み合わせ,それぞれに動きを持たせることができるため,一つの「作品」を作ることができる.

ここで大切にしているのは,最初から「正しいプログラムを書く」ことをゴールにしないことである.

「こんな動きをさせたい」
「こうしたらもっと伝わるのではないか」
「この人を先に動かしたい」
「二人を同時に動かしたい」
「同じ動きを何度も使いたい」

こうした表現上の欲求が先にあり,そのために必要になった仕組みとしてプログラミングの概念に出会う.私は,この順序が結構大切なのではないかと考えている.

つまり,

「プログラミングするためにピクトグラムを使う」のではなく,「ピクトグラムで表現しようとした結果,プログラミングしていた」

という学びである.

これが,私が「ピクトグラミング」という言葉に込めているものでもある.

もちろん,Hyper Pictochを使えば情報嫌いがなくなる,などと言うつもりはない.そんなに単純な問題ではない.

しかし,情報教育がこれからますます広がるのであれば,「どれだけ多く教えるか」と同じくらい,「どのような入口を用意するか」を考える必要がある.情報やプログラミングが好きな児童・生徒だけを想定して教育を設計することはできない.最初から興味がある人もいれば,そうでない人もいる.得意な人もいれば,苦手意識を持つ人もいる.

だからこそ,情報教育にはいろいろな入口があってよい.

コードから入る入口があってもよい.ロボットから入ってもよい.データから入ってもよい.音楽や美術から入ってもよい.そして,ピクトグラムから入る入口があってもよい

気づいたら人型ピクトグラムを動かしていた.
気づいたら作品を作っていた.
気づいたら他者に伝わる表現を考えていた.
そして,振り返ってみると,実はプログラミングの考え方を使っていた.

Hyper Pictochで目指しているのは,そんな「情報っぽくない情報教育」である.

初等中等一貫の情報教育を推進するからこそ,「情報が好きな人」を増やすことだけでなく,「情報を嫌いにならない人」を増やすことも考えたい.

情報教育の裾野を広げるとは,学ぶ人数を増やすことだけではないはずである.入口そのものを広げることもまた,情報教育の裾野を広げることだと思っている.

そして,その一つの方向性として提案したいのが,

「プログラミング教育からピクトグラミング教育へ」

という発想である.

Hyper Pictochは,そのための一つの入口として開発している.

ハイパーピクトッチ 例15 トランポリン

posted in: 開発者ブログ | 0

 

 

プログラム

こちらをクリックしてください

トランポリン

 

 

 

説明

 

跳ねる人のコード

1回目の動き

ブロック 説明
4 左かたを1秒で反時計回りに90度回転し、正面を向く 左肩を90度回転させながら1秒かけて動き、最後は正面を向きます。
5 1秒で右に50、上に110移動する 右へ50、上へ110移動します。
6 左かたを1秒で反時計回りに90度回転する(待ち) 左肩をさらに90度回転させます。次の動作を待ってから進みます。
7 1秒で右に50、下に110移動する(待ち) 右へ50、下へ110移動します。

2回目の動き

ブロック 説明
8 左かたを1秒で反時計回りに90度回転する 左肩を90度回転させます。
9 1秒で左に50、上に110移動する 左へ50、上へ110移動します。
10 左かたを1秒で反時計回りに90度回転する(待ち) 左肩をさらに90度回転させます。
11 1秒で左に50、下に110移動する(待ち) 左へ50、下へ110移動します。

繰り返し終了

ブロック 説明
12 繰り返し終了 ここまでの動きを1セットとして、全部で3回繰り返します。

このプログラム全体の動き

  • ピクトグラムを小さくします。
  • 左肩を90度ずつ回転させながら、
    • 右上へ移動
    • 右下へ移動
    • 左上へ移動
    • 左下へ移動
  • この一連の動きを3回繰り返すため、ピクトグラムが四角形を往復するような動きになります。
  • 肩の回転も加わるため、ジャンプや体操をしているような動きに見えるプログラムです。

トランポリンの本体(ジャンプする部分)と4本の脚を描く物体定義のコード

一行ずつ説明すると、次のようになります。

ブロック 説明
1 物体定義 これからトランポリンの形を作るための部品(物体)を定義します。
2 色を□にする これから描く図形の色を設定します。(画像では色が未設定ですが、通常はここで描画色を決めます。)
3 中心(0,40)、横220、縦15、0度回転した円を描く。 中心座標が (0,40) の位置に、横220・縦15の細長い楕円を描きます。これがトランポリンのジャンプ面になります。
4 (200,40)から(200,100)へ線引きする。 右端に縦の線を描きます。これは右側の脚です。
5 (-200,40)から(-200,100)へ線引きする。 左端に縦の線を描きます。これは左側の脚です。
6 (75,53)から(75,100)へ線引きする。 中央より右側に縦の線を描きます。これは右内側の脚です。
7 (-75,53)から(-75,100)へ線引きする。 中央より左側に縦の線を描きます。これは左内側の脚です。

完成する形

このコードを図にすると、おおよそ次のようなトランポリンになります。

      ─────────────────────
     (細長い楕円=ジャンプ面)

      │      │      │      │
      │      │      │      │
      │      │      │      │
  • 上の細長い楕円 … ジャンプする布の部分
  • 左右の2本 … 外側の脚
  • 真ん中付近の2本 … 内側の脚(支え)

この物体の役割

このプログラムは、トランポリンの見た目だけを描くためのコードです。動きはありません。実際に跳ねたり移動したりする動作は、別のプログラム(実行ボタンが押されたときのコード)で行います。

 

 

ブログ作成者 Reiko Sugiyama

ハイパーピクトッチ 例14 バイバイ 移動と回転を順に書く

posted in: 開発者ブログ | 0

移動と回転を順に書く

 

概要

この例では、ピクトグラムを移動させた後、左上腕を1回転させます。

 

プログラムの説明

移動の命令と回転の命令を別々に並べて書く構成です。
まずピクトグラムの位置を変え、続けて腕の回転を実行します。
複数の命令を順番に並べることで、位置の変化と体の動きを組み合わせられます。

 

学習ポイント

・ピクトグラムを移動する
・左上腕を360度回転させる
・移動と回転を組み合わせる

 

 

 

 

プログラム

バイバイ 移動と回転を順に書く

ハイパーピクトッチ 例13 バイバイ 5体のピクトグラムを配列のように扱う

posted in: 開発者ブログ | 0

5体のピクトグラムを配列のように扱う

 

概要

この例では、5体のピクトグラムを横に並べ、全員にバイバイをさせます。

 

プログラムの説明

各ピクトグラムはpic1からpic5までのタブとして作成され、それぞれの中で位置調整、サイズ調整、動作byebyeの実行を行います。
元の考え方では、複数のピクトグラムを配列に入れて順番に処理します。HPTでは、それぞれのタブに同じ動作構造を持たせることで、同じ結果を表現しています。
多人数のアニメーションでは、配置、サイズ、共通動作の管理が重要になります。

 

学習ポイント

・5体のピクトグラムを配置する
・サイズを小さくして画面内に収める
・同じ動作を複数体に適用する

プログラム

バイバイ 5体のピクトグラムを配列のように扱う

ハイパーピクトッチ 例12 バイバイ 速さの違うバイバイを作る

posted in: 開発者ブログ | 0

速さの違うバイバイを作る

 

概要

この例では、2体のピクトグラムが異なる速さでバイバイします。

 

プログラムの説明

pic1は標準的な時間で腕を上げたり手を振ったりします。pic2は短い時間で同じ動きを行うため、より速いバイバイになります。
HPTでは、それぞれのピクトグラムの動作定義の中で、回転に使う秒数を変えています。
同じ動作の構造でも、時間の値を変えるだけでアニメーションの印象が大きく変わります。

 

学習ポイント

・同じ動作を異なる速度で実行する
・回転時間を調整する
・動きの印象を変化させる

 

 

プログラム

バイバイ 速さの違うバイバイを作る

ハイパーピクトッチ 例11 バイバイ 手続きとしてバイバイをまとめる

posted in: 開発者ブログ | 0

手続きとしてバイバイをまとめる

 

概要

この例では、バイバイの一連の動きを1つのまとまった動作として扱います。

 

プログラムの説明

HPTファイルでは、pic1とpic2の各タブに動作byebyeの定義を置き、それぞれの実行ブロックからその動作を呼び出しています。
動作の中身をまとめておくと、同じ処理を複数のピクトグラムで使いやすくなります。
これは、プログラムにおける手続きや関数の考え方につながる例です。

 

学習ポイント

・一連の処理を動作として定義する
・定義した動作を呼び出す
・同じ処理の重複を減らす

 

 

プログラム

バイバイ 手続きとしてバイバイをまとめる

ハイパーピクトッチ 例10 バイバイ 2体のピクトグラムでバイバイする

posted in: 開発者ブログ | 0

2体のピクトグラムでバイバイする

 

概要

この例では、2体のピクトグラムを左右に配置し、それぞれにバイバイの動きを行わせます。

 

プログラムの説明

pic1とpic2は別々のタブとして作成され、それぞれの中に「動作byebyeをする」ブロックと、動作byebyeの定義が入っています。
動作の定義は、腕を上げる、ひじを振る、腕を戻すという流れです。
複数のピクトグラムを使う場合でも、各ピクトグラムに同じ動作定義を持たせることで、同じジェスチャーを並行して表現できます。

 

学習ポイント

・2体のピクトグラムを配置する
・それぞれのタブで動作を実行する
・同じバイバイ動作を複数体に適用す

 

 

プログラム

バイバイ 2体のピクトグラムでバイバイする

ハイパーピクトッチ 例9 バイバイ 4つの部位からランダムに選ぶ

posted in: 開発者ブログ | 0

4つの部位からランダムに選ぶ

概要

この例では、左手、右手、左足、右足のいずれかでバイバイのような動きをします。

 

プログラムの説明

複数の条件分岐を組み合わせることで、4つの候補の中から1つを選ぶ構造になっています。
選ばれた部位に応じて、上側の部位と下側の部位を対応させ、回転方向も調整します。
条件分岐を増やすことで、単純なランダム動作から、より多様なアニメーションへ発展させられます。

 

学習ポイント

・複数の条件を組み合わせる
・手と足の候補を切り替える
・ランダム性のある動作を作る

 

 

 

 

 

プログラム

バイバイ 4つの部位からランダムに選ぶ

ハイパーピクトッチ 例8 バイバイ 条件分岐で左右どちらかの手を振る

posted in: 開発者ブログ | 0

条件分岐で左右どちらかの手を振る

 

概要

この例では、条件分岐を使って、左手または右手のどちらかでバイバイします。

 

プログラムの説明

確率分岐により、実行するたびに左手で振る場合と右手で振る場合が切り替わります。
右手を使う場合は、対象となる部位を右上腕と右ひじに変え、回転方向も左右に合うように調整します。
同じバイバイの動きでも、条件によって使う部位や角度を変えられることが分かります。

 

学習ポイント

・条件分岐を使う
・左手と右手を切り替える
・実行ごとに異なる動きを作る

 

 

 

プログラム

バイバイ 条件分岐で左右どちらかの手を振る

 

ハイパーピクトッチ 例7 バイバイ 繰り返しでバイバイを短く

posted in: 開発者ブログ | 0

繰り返しでバイバイを短く書く

 

概要

この例では、同じような手振りの処理を繰り返しブロックでまとめています。

 

プログラムの説明

左ひじを片方向に回転させ、続けて反対方向に回転させる処理を3回繰り返します。
繰り返しを使うことで、同じ命令を何度も並べる必要がなくなります。
バイバイのように同じパターンを何度か行う動作では、繰り返しを使うとプログラムを簡潔にできます。

学習ポイント

・同じ処理を3回繰り返す
・手振りの処理をまとめる
・プログラム量を減らす

 

 

プログラム

バイバイ 繰り返しでバイバイを短く