情報処理学会論文誌

教育とコンピュータ

Vol.7 No.3 1–11 (Oct. 2021)

論 文

複数のプログラミング言語で記述可能な
ピクトグラムコンテンツ作成環境の提案と実装
伊藤 一成1,a)
受付日 2021年1月18日，再受付日 2021年5月24日,
採録日 2021年7月3日

概要：筆者は，ピクトグラムコンテンツ作成環境「ピクトグラミング」を提案している．ピクトグラミン
グは，プログラミング学習環境としての側面も有している．先行論文では，プログラミングの単元学習の視点からピクトグラミングの実践授業を行い評価した．ピクトグラミングは，教育利用を念頭にしたテキスト型の独自記法を採用しているが，近年，初等教育段階では，ビジュアルブロックを使って記述可能
なプログラミング環境が広く用いられている．また，高等学校では 2022 年から運用される「情報 I」で，Python 言語や JavaScript 言語などの汎用プログラミング言語の利用が想定されている．そこでピクトグ
ラミングの長所を継承した，ビジュアルブロック型や汎用プログラミング言語の学習環境を構築する価値は高いと考えられ，いくつかの派生アプリケーションを開発した．本論文では，これらのアプリケーショ
ン群の機能および，設計・実装方式について説明し，さらに複数の授業実践を示したうえで，授業での利活用の視点を中心に考察する．
キーワード：ピクトグラム，情報デザイン，プログラミング，ブロック型，Python，JavaScript，同調的学習

Proposal and Implementation of Pictogram Content Creation
Environment with Multiple Programming Languages
Kazunari Ito1,a)Received: January 18, 2021, Revised: May 24, 2021,
Accepted: July 3, 2021

Abstract: We have proposed a pictogram content creation environment called “Pictogramming.” It also has
a role as a programming learning environment. It allows users to create contents in a text-based pseudo-code
notation for educational use. In recent years, visual block-based programming learning environment has beenused in primary school. In addition, it is expected that the subject “Informatics I”, which will be started from2022, is scheduled to use general-purpose programming languages such as Python and JavaScript. Therefore,
we thought it is highly significant to construct a learning environment for block type and general-purpose
programming languages that inherit the advantages of Pictogramming. And we developed several derivative
applications. In this paper, we explain the function, design and implementation of these applications, anddiscuss the examples of use based on actual classroom practices.
Keywords: pictogram, information design, programming, block-typed, Python, JavaScript, syntonic learning

1. はじめに
筆者はピクトグラムコンテンツ作成環境「Pictogramming1a)

青山学院大学
Aoyama Gakuin University, Sagamihara, Kanagawa 252–
5258, Japankaz@si.aoyama.ac.jp

c 2021 Information Processing Society of Japan（ピクトグラミング）」を提案・開発している．ピクトグラ
ミングは，Pictogram（ピクトグラム）と Programming（プログラミング）を合わせた造語である．
ピクトグラムは意味するものの形状を使ってその意味概念を理解させる記号である．特に近年のグローバル化の流
れなどの理由もあり，一例をあげるだけでも，感性工学 [1],1情報処理学会論文誌

教育とコンピュータ

Vol.7 No.3 1–11 (Oct. 2021)

異文化コミュニケーション [2]，メディア情報処理 [3]，記びコード変換方式について説明し，4 章で実践授業を紹介

号論 [4] など様々な学問領域でピクトグラムを題材とする

し，5 章で関連研究を交えながら考察を行い，6 章でまと研究がさかんになっている．

める．

ピクトグラムはコンテンツ表現の抽象度の高さから，そさせる効果があるといわれている．有名な「非常口」ピク

2. ピクトグラミングおよび派生アプリケー
ション

トグラムのデザインの策定にかかわった太田は “走る人型

本章ではピクトグラミングおよび派生アプリケーション

れを見た人物が自分自身や本人に関わる人物事物など想起を囲む空間が見る人を包む空間とつながって走る人は見るについて解説する．

人の投影になる” と述べ [5]，実際に避難中の人がいかに出口へ向かって走る人型ピクトグラムを見たときに，自身に2.1 画面説明

投影し，同一視するかにデザインの労力が払われた．このピクトグラミングは，Web アプリケーションであり，ブ特性は情報教育の諸分野にも活用できるのではないかと考

ラウザ上で動作する．図 1 にスクリーンショットを示す．

え開発したのがピクトグラミングである．
ピクトグラミングは，ピクトグラムを作るプロセスの中

画面左上部は，プログラムの実行結果を表示する “ピクトグラム表示領域”，右上部はプログラムを入力する “プロで，プログラミングの諸概念（順次処理，並行処理，繰返

グラムコード入力領域”，下部はプログラムの入力を支援す

し，条件分岐など）を体得できるように設計されている．

るボタン群で構成される “プログラムコード入力支援ボタ

既存の教育向けプログラミング言語 [6] にあるように，プン領域” がある．ピクトグラム表示領域には，ISO3864 でログラムの記述に教育利用を念頭にした独自記法を用いて定義されている形状の人型ピクトグラムが 1 体表示される．

おり，ピクトグラムの作成を通じてプログラミングの諸概

図 1 で示したピクトグラミングとほぼ同一のユーザイン

念が学習できるように設計されている．先行論文では，プタフェースを備える，今回開発した派生アプリケーション

ログラミングの単元学習の視点から実践授業を行い評価しのスクリーンショットを図 2 に示す．

た [7]．

図 2 (a) に示すのが，視覚的なブロックを使って記述可

ピクトグラミングは，ピクトグラムのデザイン指針に準能なピクトグラミングの派生環境である Block Pictogram-

じたコンテンツを作成できるアプリケーションでもある．

ming（ブロックピクトグラミング）[11] である．図 2 (b)高等学校必履修科目「情報 I」では「<1>情報社会の問題に示すのが，Python 言語で記述できる Picthon（ピクソ

解決」，「<2>コミュニケーションと情報デザイン」，「<3>コン）[12] である．さらに，JavaScript 言語で記述できる

ンピュータとプログラミング」，「<4>情報通信ネットワー

JavaScpict（ジャバスクピクト）も開発している．ジャバ

クとデータの活用」が設定される．ピクトグラムは，高等スクピクトも図 2 (b) と同様の画面構成である．これらを学校情報科新学習指導要領の「情報 I (2) コミュニケーショ

ピクトグラミングシリーズと総称する．

ンと情報デザイン」の部分で，情報を抽象化する方法としてとりあげられており，情報デザインを学習する手段としても活用できると考えられる．
近年，初等教育段階のプログラミング教育では，視覚的なブロックを使って記述するプログラミング環境が広く用いられている [8]．また高等学校では，2022 年から運用される「情報 I」，「情報 II」において，Python 言語や JavaScript
言語などの汎用プログラミング言語の利用が想定されている [9], [10]．
ピクトグラミングの特徴を継承したブロック型や汎用プ
ログラミング言語で記述できる学習環境を構築する価値は高いと考え，いくつかの派生アプリケーションを開発した．
本論文では，これらの派生アプリケーションの機能および，設計・実装方式について説明する．さらに活用シナリ
オについて，複数の授業実践を紹介したうえで，「プログラ
ミングの学習」，「情報デザインの学習」の双方の授業利用の観点から，その運用可能性を評価することが目的である．
以下 2 章で，ピクトグラミングおよび派生アプリケー

図 1 ピクトグラミングのスクリーンショット

ションの概要を示す．3 章で，アプリケーション設計およFig. 1 Screenshot of Pictogramming.

c 2021 Information Processing Society of Japan

2

情報処理学会論文誌

教育とコンピュータ

Vol.7 No.3 1–11 (Oct. 2021)

図 2 派生アプリケーションのスクリーンショット

Fig. 2 Screenshot of derivative applications.

図 3プログラム例

Fig. 3 Example of program.

2.2 プログラム記述仕様
ピクトグラミングシリーズでは，大別して次の 3 種類の命令を備えている．

( 1 ) 人型ピクトグラムの変形およびアニメーションの命令( 2 ) 様々なオブジェクトを描くための図形描画の命令( 3 ) 禁止，注意などのピクトグラム固有のマーク描画の命令
またそのほかには，変数定義，繰返し，条件分岐や関数定義などの命令が用意されている．

2.2.1 人型ピクトグラムの変形およびアニメーションの機能

図 4 人型ピクトグラムの部位指定

Fig. 4 Specified labels for the parts of the human pictogram.

回転と移動の 2 種類の命令を使い分け，さらに命令の逐次実行と並行実行を組み合わせることで，人型ピクトグラ

際，たとえば人型ピクトグラムの「左腕」が右側に表示さムの多様な動作を可能としている．図 3 に，人型ピクトグ

れると，自身の右腕と対応づけてしまい，混乱することがラムが左手を振るプログラム例を示す．

予想される．そこで，鏡に映っている自分という想定とし

図 3 (a) に示す，ブロックピクトグラミングのプログラている．つまり，人型ピクトグラム表示パネルに表示されムを例に，各命令と動作について説明する．図 3 (a) 中のる人型ピクトグラムの各部位と位置の関係は図 4 のよう<1>で示されたブロックは，身体部位に対する回転の命令になる．鏡あるいは仮想的な鏡の前で，人が映った自分をである．関節点，回転方向・角度（反時計周りが正），回

見ながら動きを学習することは，日常行為だけではなく，転に要する秒数を設定する．人型ピクトグラムは，体と頭スポーツや作業手順の動き習得などの分野でも幅広く行わを合わせた部分が 1 つと上腕，前腕，上腿，下腿が左右それている．ピクトグラムデザインにおける「人型ピクトグ

れぞれ 1 つの計 9 つの部品から構成され，それらが連結

ラムと自身との同一視」を重視する観点からも親和性が高されている．部位を指定してのプログラミングを想定する

く，この方式を採用している．

c 2021 Information Processing Society of Japan

3

情報処理学会論文誌

教育とコンピュータ

Vol.7 No.3 1–11 (Oct. 2021)

また次のブロックを同時に実行するか，実行が終了するまで，次の命令の実行を開始しないかを「待ち」の有無で選択できる．よって，図 3 (a) 中の<1>と<2>のブロックは並行実行され，<3>で示されたブロックは，<2>のブロックに対応する動作が終了したのち実行される．<3>のブロッ
クは体全体を平行移動する命令である．<4>のブロックは，
このブロックに囲まれた内側の命令を一定の確率で実行する．分岐命令に相当する．<5>のブロックは，このブロックに囲まれた内側の命令を指定回数繰り返す．つまり<4>から<7>は，時計回りと反時計回りに左ひじを回転することで 2 回手を振る動作を 30%の確率で実行する動作を記述している．
図 3 (a) と同じ出力をする，ピクトグラミングの日本語で書かれたプログラム例を図 3 (b) に示す．命令名に続いて複数の引数をスペース区切りで記述する形式となっている．ちなみに，ピクトグラミングは日本語だけではなく，アルファベットやひらがなによる記述もサポートしている．同様に，図 3 (c) にピクソンの例を示す．pic という識別子のオブジェクトがあらかじめ定義されており，その図 5

図形描画の例

Fig. 5 An example of figure drawing.

オブジェクトに対するメソッド呼出しの形式で，ブロック
ピクトグラミングやピクトグラミングと同じ命令群を記述できる．

2.2.2 様々なオブジェクトを描くための図形描画機能
単純図形の作画は，ピクトグラム作成において不可欠な工程である．また，プログラミングの入門講座で，図形描

図 6

セーフティサインの例

Fig. 6 An example of safety sign.

画がテーマの実践も多い [13]．比較的単純な命令セットで扱え，またコードと対応する出力が細かい粒度で視覚化さ策定されている．ピクトグラミングシリーズではこれに準れるのが理由である．図 1 のスクリーンショットの例で示拠し，禁止，注意，指示，安全用のピクトグラムを作るたされているのは，「段差注意」のピクトグラムであるが，こめに単一の命令・ブロックでこれら 6 種のセーフティサイ

こでは段差のある床を線画で描画している．ピクトグラミ

ンを設定できる．一覧を図 6 に示す．

ングおよび派生アプリケーションでは，認知視点の多重化

2.2.4 マウス操作によるプログラム入力支援の重要性をふまえ，認知視点の異なる「座標指定」，「身体

ピクトグラミングシリーズでは「ピクトグラム表示領域」

動作」「歩行」の 3 種類の描画方式を実装している．ブロッ

は共通のコンポーネントである．この領域上での様々なマ

クピクトグラミングを用いて，正方形を描画する命令を 3

ウス操作によってもプログラムを入力できる．たとえば，

種類，図 5 に示す．

人型ピクトグラムの部位を直接左ドラッグすることで回転

図 5 の「(a) 座標指定」は，座標指定による線分の組合でき，対応する回転命令が自動的にプログラムコード入力

せで正方形を描画する例である．これは汎用プログラミン

領域に追加される．この機能により，静止画のピクトグラ

グ言語で図形を描画する場合の一般的な方式である．

ムの多くは，マウス操作主体でも作成できる．表 1 にマウ

図 5 の「(b) 身体動作」は，本アプリケーション特有のス操作と対応するアクションの一覧を示す．

描画方式で，体の部位を指定して，その部位の動作の履歴

また，ブロックピクトグラミング以外の，文字列の直接を線画で表現する．この例では，左手の動きの履歴で正方入力が基本となるアプリケーションはいずれも，画面下部

形を描画している．

の「入力支援ボタン領域」に配置されたプログラムコード

図 5 の「(c) 歩行」は，人型ピクトグラム自体の歩行移入力支援ボタンを押下することにより，対応した命令のテ動の履歴で描画する方式で，主に教育用プログラミング言

ンプレート文字列を「プログラムコード入力領域」に追加

語で用いられるタートルグラフィックスと同等である．

できる．アニメーション効果を有するピクトグラムを作成

2.2.3 ピクトグラム固有のマーク描画機能

する場合は，プログラムコード入力領域に入力された命令・

ピクトグラムには，禁止，注意，指示，安全の 4 項目にブロック列に対して，変数の値を書き換える必要がある．

関するピクトグラムデザインのガイドラインが ISO3864 で並行実行，繰返し，条件分岐，関数，変数などを使うこと

c 2021 Information Processing Society of Japan

4

情報処理学会論文誌

教育とコンピュータ

Vol.7 No.3 1–11 (Oct. 2021)

表 1 対応するマウス操作と処理一覧

Table 1 List of mouse operations and corresponding processes.

図 7

コード変換の処理フロー

Fig. 7 Processing flow of code conversion.

で，さらに複雑なアニメーションのピクトグラムを作成できるようになる．このように段階的に学習を進めていくス
モールステップの工夫を取り入れている．

3. 内部設計・コード変換方式
次に，ピクトグラミングシリーズの内部設計およびコード変換方式について解説する．ピクトグラム表示領域のコ

図 8

Python プログラムのピクトグラミングプログラムへの変換例

Fig. 8 Example of conversion from Python program to
Pictogramming program.

ンポーネントは，ピクトグラミングの書式で書かれたプ

ラムは，ピクトグラミング形式のプログラムを出力する．

ログラムを実行可能である．そこで，他の派生アプリケー

この方式の長所として，Python でサポートされている構文

ションでは，それぞれの言語体系で記述されたプログラム

がすべて使用可能ということである．この方式では，ルーをピクトグラミングの書式に変換する処理機構が組み込ま

プ展開，手続き呼出しの展開，条件文の実行などが行われれている．

るため，実行のたびに生成されるピクトグラミング形式のピクトグラミングシリーズのコード変換の処理フローを
図 7 に示す．
ピクトグラミングはピクトグラム生成に特化しているため，定義されている命令の種類は多くない．ピクソンを例

コードは異なる場合がある．図 8 に例を示す．図 3 (c) のPython プログラムを入力して実行した場合，30%の確率でコード（α）が，70%の確率でコード（β ）のピクトグラ
ミング形式のプログラムに変換され実行される．

にあげれば，Python のコードとピクトグラミングのコー

JavaScript でも DirectProxies と呼ばれる動的プロキシドを相互変換するトランスパイラを開発するのは，使用可の機能があり，ジャバスクピクトではこれを用いて Python

能な Python の文法を大幅に制限することになる．

と同様の方式でピクトグラミングのプログラムに変換する．

また，ピクソンは，ブラウザ上で動作する Python 実装でブロックピクトグラミングはプログラムコード入力領ある Brython [14] を採用している．ブラウザ上で，対応す域に Google Blockly [15] のライブラリを用いている．このるピクトグラミングプログラムの文字列に変換する Python

ライブラリは，組み立てられたビジュアルブロックからクラスが定義されている．実際には，あらかじめ定義されJavaScript のプログラムを生成する．そこで，さらにジャている pic はこの変換用 Python クラスのインスタンスで

バスクピクトで説明した仕組みと同様の処理方式で，そのあり，図 3 (c) で見られるような RW，M などのピクトグラ

JavaScript のプログラムをピクトグラミングのプログラム

ミングで定義される動作命令を個別にメソッド定義していへ変換する．

ない．動的プロキシにより，呼び出されるメソッドが未定
義の場合でも，エラーを発生させるのではなく，特定のメ

4. 実践・評価

ソッドに，呼び出されたメソッド名と引数列の両方を与え

2 章で説明したピクトグラミングシリーズを用いた授業て実行し，ピクトグラミング形式のプログラムを文字列で実践について記述する．
「プログラミング・アルゴリズム生成する．この方式の長所として，今後ピクトグラミングに主眼を置いた実践」と「情報デザインに主眼を置いた実の命令の追加変更に対して，変換プログラムを変更しなく践」の 2 つの視点から示す．

ても自動的に対応されることがあげられる．
変数宣言や，if 文や for 文などのフロー制御文など，オブジェクト pic のメソッド呼出し以外の文は，そのままPython のプログラムとして実行する．そしてそのプログ

c 2021 Information Processing Society of Japan

4.1 プログラミング・アルゴリズムに主眼を置いた実践
4.1.1 概要
Python 言語の基本文法を知ること，およびアルゴリズ

5

情報処理学会論文誌

教育とコンピュータ

Vol.7 No.3 1–11 (Oct. 2021)

表 2 実践の概要

表 3

Table 2 Overview of the practices.

アンケート項目

Table 3 Questionnaire list.

ムを学習する題材として図形描画をテーマに，自らの身体，知識，経験，意図，自意識，文化背景に基づいた自由作品とピクソンでは，図 3 のプログラム例に示したように，ほを楽しみながら作成できることを学習目標とした実践であとんどすべての命令が 1 対 1 対応される．また，マウス操る．被験者は，神戸大学附属中等教育学校に通う中学 3 年

作やボタン押下によるコード入力支援機能があるため，先生 4 クラスの生徒計 131 名である．実践期間は，2019 年

行の実践（文献 [7]）と同様に，課題遂行はおおむね問題な

6 月 17 日 (月曜日) から 2019 年 7 月 12 日（金曜日）であくできると想定した．

る．1 回の授業時間は 50 分で週 2 コマ別日に実施される．

指定課題でなく自由課題にすると，様々なオリジナル作

一般的な PC 実習室が配当されている．授業実践の概要を品が作成される．ユーモアやシュール感あふれる面白作品

表 2 に示す．

も多く作成され，笑いや学習者間の対話を促すことが，こ

学校行事などの影響で，4 クラスのうち 2 クラスは表 2

れまでの実践から経験的に分かっている．そのうえで，成の第 6 回を除く計 6 回，残りの 2 クラスは表 2 のとおり計績評価の対象となりうる課題として，これらの作品を提出

7 回の授業を行った．実践校では，利用可能ブラウザがイしたくないという生徒が一定数おり，作品提出を課すこと

ンターネットエクスプローラのみだったため，Brython がで創造性に富む作品の作成が阻害されることもこれまでの使用できなかった．そのため，3 章で解説した Python 形

授業実践で分かってきている．

式のプログラムからピクトグラミング形式への変換処理にそのため今回は，先行の実践（文献 [7]）のように提出さ限りブラウザ上でなく，外部サーバ上で変換する方式で対れた課題を評価するのではなく，各回の最後に無記名のア応した．生徒はその違いを意識することなく利用できた．

ンケートを行うに留めた．アンケート評価については次項

第 1 回の冒頭では，ピクトグラムの歴史やピクトグラムの社会での活用例について説明し，ピクトグラムについてで解説する．

4.1.2 アンケート評価の関心を喚起させた．第 2 回は，2 クラスでネットワーク

質問項目は表 3 に示す 8 項目である．質問 1〜7 は，い障害により，インターネットに接続できなかったため，生ずれも 6 段階の回答選択肢を用意した．回答選択肢の内容

徒は端末を使わずに，教員モニタに提示された人型ピクト

は，「6. とてもそうである」，「5. かなりそうである」，「4. ど

グラムの動きのプログラムを自分自身の体を使って実行す

ちらかというとそうである」，「3. どちらかというとそうでるアンプラグドの方法で遂行した．そのため，第 3 回のはない」，「2. あまりそうでない」，「1. まったくそうでない」

じめにコンピュータを用いて第 2 回の内容を復習する時間とした．質問 8 は自由記述形式である．質問 1〜7 の回答を全クラス設けた．第 2 回から第 6 回は，キーボードで入結果を図 9 に示す．

力することを重視したため，2.2.4 項で説明したマウス操作

また，質問 8 の自由記述について，本実践の特徴やねらによるプログラム生成の機能は無効とした．また，ピクト

いがよくとらえられている生徒の記述を選択して表 4 にグラミングを用いた先行の実践（文献 [7]）においては，1示す．

授業の実習では条件分岐の理解度が十分でない生徒が一定

質問 1 について，すべての回で 4 以上が 90%以上を占め数いた．今回も同様の状況になることが予想されたため，た．また自由記述でも全体的に，「楽しかった」，「面白かっ

学習単元から条件分岐を除外した．

た」という質問 1 を肯定する記述が大半を占めた．楽しみ

各回の授業は，数ページ程度のテキストを開始時に配布ながら受講できることは学習において重要な要素である．

し，10 分程度の解説ののち各自で単元の内容に関係する

授業での自由作品を作成する実習では，短時間でテーマ

自由課題に取組む形式で進めた．先行の実践（文献 [7]）でを設定できることが非常に重要である．質問 2 の回答結は，各回で単元の内容に関係する指定課題を提示し，その果は比較的良好であった．実際に自由記述からも，第 1 回

出来で各単元の理解度の評価を行った．ピクトグラミングの回答 1，第 3 回目の回答 2 に示すように，人型ピクトグ

c 2021 Information Processing Society of Japan

6

情報処理学会論文誌

教育とコンピュータ

Vol.7 No.3 1–11 (Oct. 2021)

表 4 “今回の授業の感想を自由に書いてください” 抜粋

Table 4 Question 8: “Please freely write your comments about
this lesson”.

への意識が薄れたのではないかと推測する．
ピクトグラミングシリーズでは，誤った命令を入力すると，人型ピクトグラムが通常の人間ではありえないポーズ
図 9

アンケートの回答結果

Fig. 9 Result of questionnaire.

となり，それがユーモアさやシュールさを生み出している．そのユーモアさとシュールさについて質問番号 5，6 は調査した．質問 5 もすべての回において，4 以上の回答が80%以上を占めており，平均の値は高い．ただし第 4 回，
ラムに自身を投影したり，同一視したりした記述が多く見

第 6 回についてはやや低い．これも質問 2 のところで述られたが，それが原因の 1 つと考えられる．第 4 回，第 6

べた理由によるものと同様と考えられる．ユーモアは，学回についてやや質問 2 の平均値が低いが，自由記述の第 4

習者間のコミュニケーションを促進させる一要素であると回の回答 2 にあるように，変数やリストの回は，記述が難いう先行研究がある [16]．シュールとは表現や発想が非日しかったという回答が複数見られた．質問 4 の結果も第 4

常的・超現実的であるさまをいう．質問 6 の回答から，ど回，第 6 回についてやや平均値が低いのは同様の理由によの回も 7 割以上の生徒がシュールさを感じていることが分ると考えられる．また第 6 回について，歩行による図形描

かる．

画は，第 5 回までのように人の体の部位の動作を記述する

難易度に関しては，質問 7 の回答から評価は 1 から 6 まのではなく，人の移動の履歴で描画するため，これまでとで適度に分散しており，無理のない設定であったと考えら異なる命令体系であった．また，座標指定による図形描画

れる．

は，座標系の概念が必要である．そのため，学習単元の内

その他，自由記述の第 5 回の回答 2 や第 7 回の回答 3 に容に準じたテーマ設定をできなかった生徒が少なからずいあるように，周囲の生徒の実行の様子が目に入ることに起たことが推測される．

因する社会的上方比較に関する記述も見られた．ピクトグ

体の動作を意識したかについて聞いた質問 3 では，第 5，

6 回で他の回に比べ，平均がやや低かった．図形描画の回ラムの表現メディアとしての視認性の良さが要因と考えられる．

は，描画される図形に注目が行くため，自身の身体の動き

c 2021 Information Processing Society of Japan

7

情報処理学会論文誌

教育とコンピュータ

Vol.7 No.3 1–11 (Oct. 2021)

表 5 実践の概要

Table 5 Overview of the practices.

表 6

図 10 提出作品の例

アンケート項目

Table 6 Questionnaire list.

Fig. 10 Examples of submitted works.

4.1.3 作品評価
第 7 回の授業では，アートとデザインの違いに関する講義に続けて，デザインの観点から自由テーマでアニメー
ションピクトグラム作品を作成している．作品の中から筆者が主観で良いと評価し選択したいくつかのピクトグラム
を図 10 に示す．

示す．
約 1 時間の動画長のオンデマンド公開動画を視聴し，ピピクトグラミングシリーズは，ピクトグラムのデザイン

クトグラミングを用いてピクトグラム作品の制作を行うよ

指針に基づいたピクトグラムを作成できるように設計されう課題を課した．提出締切りは講義動画公開日から 5 日後

おり，講義で説明したピクトグラムデザインに関する基礎とした．オンデマンド公開動画では，ピクトグラミングシ

的内容をピクトグラムの作成を通じて体得するという点

リーズについて一通り紹介した後は，ブロックピクトグラ

で，ピクソンは学習者を支援したと考えられる．

ミングで一連の操作デモを行った．これは，プログラミン

一方で，提出されたピクトグラムを見ると，万人が正確

グの学習に一定の時間数が割り当てられた 4.1 節の実践とに解釈できるデザインに十分になっていないものも少なく異なり，命令がブロック上に自然言語文で書かれているブなかった．今回の実習時間を勘案するとやむを得ないが，ロックピクトグラミングの利用が想定されると考えたため

他の学習者との相互評価など，リデザインの時間を確保すである．ただし，制作に使用するアプリケーションは，ピる必要性がある．

クトグラミングシリーズの中からどれを使用してもよいと

また，線画で描かれたオブジェクトが移動できないので，し，作品制作テーマも自由とした．

アニメーションしたい内容が実現できないという声が聞かすべての受講生は，表 5 の項 2 で提出された全員のピれた．そのため線画で描かれたオブジェクトを移動できる

クトグラム作品それぞれに対して，(1) その作品のタイト機能を実装し公開予定である．

ルは何か，(2) その作品のデザインに関するコメントなど

さらに，図 6 に示したセーフティサインに関する説明が（任意）をビデオ公開日から数えて 7 日目から 9 日目に入授業中に説明されなかったため，大半の生徒が禁止マーク

力する（表 5 の項 3）．講義ビデオ公開日から数えて 10 日を使ったピクトグラムを作成した．この点に関しては，次後に受講生に対してアンケート内容のフィードバックを公節の別の実践で言及する．

開し，自身の作品に対するコメントを参考に，必要に応じて作品の変更をして，考察などとともにまとめた文書ファ

4.2 情報デザインに主眼を置いた実践

イルと授業評価アンケート（提出自由）を，講義ビデオ公4.2.1 概要

開日から換算して 14 日後を提出期限とした．

2020 年 6 月 11 日（木）から 2020 年 6 月 25 日（木）に，

4.2.2 アンケート評価

青山学院大学社会情報学部 2 年生以上が対象である「社会授業実践の内容の妥当性を評価する目的で各回の最後に情報特別講義 B」にて，情報デザインをテーマとする授業

無記名式のアンケートを行った．質問項目は表 6 に示す 3を実践対象とした．複数教員からなるオムニバス授業であ項目である．

り，担当した 2 回分の授業で行った．2020 年度は，コロ

質問 1〜3 は，いずれも 6 段階の回答選択肢を用意した．

ナ禍の影響でオンデマンド方式のオンライン授業で実施し回答選択肢の内容は，「6. とてもそうである」，「5. かなりそた．科目登録者は 58 名である．学生は自宅 PC 上で授業うである」，
「4. どちらかというとそうである」，「3. どちら

動画の閲覧および演習を行う．授業実践の概要を表 5 にかというとそうでない」，「2. あまりそうでない」，「1. まっc 2021 Information Processing Society of Japan

8

情報処理学会論文誌

教育とコンピュータ

Vol.7 No.3 1–11 (Oct. 2021)

ちょうど「ステイホーム」が話題になった時期でもあり，
過半数以上がピクトグラムの意味を正確に回答した．しかし，「昼寝」や「睡眠」などのコメントも見られたことから，
図 11 アンケートの回答結果

Fig. 11 Result of questionnaire.

変更後は人型ピクトグラムの姿勢が直立に変更された．

4.1 節の実践と異なり，図 6 に示したセーフティサインに関する説明を行ったため，「指示」や「安全」のピクトグ
ラムの比率が大幅に増えた．また，表 5「実践の概要」の項 4「批評に基づくピクトグラム作品の変更および考察」の考察において，「相互評価により，正しく情報を伝えるピ
クトグラムを作成する難しさについて気づいた」という趣旨の記述が複数の学生に見られた．
一方で，相互評価は 1 回限りであったため，十分な修正に至らなかったケースや逆に不明瞭な変更がされてしまったケースも散見された．対面授業であれば，コメントをもらいながら PC 上でコンテンツを変更するプロセスを短時

図 12 提出作品の例

Fig. 12 Examples of submitted works.

間で繰り返して完成させる方式も可能だと考えられる．また，人型ピクトグラムの大きさの変更や消去など，いくつかの操作命令が認知されないままの作成となった形跡が見たくそうでない」とした．41 名より回答があった．

られる．4.1 節の実践のようにピクトグラミングシリーズ

図 11 のアンケート結果から，90%以上の学生が，情報の命令体系を学ぶ機会がなかったことと，対面授業のようデザインについての興味が深まったと回答している．情報に気軽に質問できない環境だったことが原因と考えられる．

デザインをテーマとした講義としては，興味の喚起の点か提出されたピクトグラム画像がどの環境で作成されたか

らは評価できる．一方，講義でピクトグラミングシリーズについては，48 人中，ブロックピクトグラミング日本語のプログラミング学習ツールとしての側面は言及しなかっ版 14 名，ピクトグラミング日本語版 13 名，ピクトグラミ

たこともあり，プログラミングについて興味が深まったとング英語版 1 名，ピクソン 1 名，ジャバスクピクト 1 名，

いう学生は約 70%にとどまった．それでも一定数の学生

不明 18 名である．不明が一定数いるのは「作成したプロが，プログラミングについて興味が深まったと回答した．

グラムを提出せよ」という文言で収集したが，ピクトグラ

4.2.3 作品評価

ム画像を提出した学生が多く出たためである．マウス操作

提出された 48 作品中，表 5「実践の概要」の項 3「他学で作成が完結してしまいプログラムを作成している意識に

生作品の批評」で，作成者が設定した作品のタイトルと異乏しかったことに加え，ピクトグラムとプログラムの語尾なる作品のタイトルを他者が多く設定した作品の中から，（グラム）が同一なため勘違いしたことが考えられる．命令

筆者の主観で選んだ 4 作品を図 12 (a)〜(d) に示す．表 5

名が直感的に理解できる点から本実習に関しても，日本語「実践の概要」の項 4「批評に基づくピクトグラム作品の変バージョンの利用が好まれた．一方，ブロック形式とテキ

更および考察」の前が「変更前」，後が「変更後」である．

スト形式の利用は，ほぼ同数であった．本シリーズでは，また，「名称」は，作成者がピクトグラムに設定した名称でマウスによる命令の自動挿入機能の存在や，命令群が身体ある．

動作や描画系の比較的分かりやすいものであるため，テキ48 人中，41 人が作品批評で与えられたコメントを参考に
ピクトグラムを変更した．図 12 (a) は，「スマホ禁止」，「寄スト形式の長所である編集作業の迅速さが一定数の受講者に受け入れられたためと考えられる．

りかかりスマホ禁止」などのコメントがあった．そのため

この実践においても，4.1 節の実践と同様に，ピクトグ

変更後は，人型ピクトグラムを仰向けにスマートフォンのラムデザインに関する基礎的内容をピクトグラムの作成を操作をしているような態勢に変化させ，スマートフォンを通じて体得するという点で，ピクトグラミングシリーズは

繰返しタップするアニメーションに変更された．図 12 (b)

学習者を支援したと考えられる．

は，「画面に近づきすぎに注意」や「本の読みすぎに注意」な
ど，所持しているものが正しく伝わっていないコメントが多くあった．そのため変更後は，配置やお酒を表すジョッキの形状が変更された．図 12 (c) は，頭部周辺の音符のた

5. 考察
本章では，4 章で示した授業実践をふまえ，特に授業での利活用の視点を中心に考察する．

め「音漏れ禁止」とするコメントが回答の約 3 割を占めて高等学校情報科の学習指導要領では，「情報に関する科いた．そのため，音符を消す変更がされた．図 12 (d) は，学的な見方・考え方」を「事象を，情報とその結び付きと

c 2021 Information Processing Society of Japan

9

情報処理学会論文誌

教育とコンピュータ

Vol.7 No.3 1–11 (Oct. 2021)

して捉え，情報技術の適切かつ効果的な活用（プログラミ

る．小学校プログラミング教育の手引（第三版）では，「多ング，モデル化とシミュレーションを行ったり情報デザイ

様な教科・学年・単元等において取り入れることや，教育課ンを適用したりすること等）により，新たな情報に再構成

程内において，各教科等とは別に取り入れることも可能ですること」であると整理されている．本論文で提案するア

あり，児童がプログラミングを体験しながら，コンピュー

プリケーションのようにピクトグラム作成を通じて，情報タに意図した処理を行わせるために必要な論理的思考力を

デザイン領域に限定されず，プログラミング，モデル化と身に付けるための学習活動を行う必要があります．」とあシミュレーションなどの単元と有機的に関連すれば，情報る [8]．

技術の適切かつ効果的に活用により新たな情報に再構成する手段となりうると考えられる．

中学校や小学校では，ブロックピクトグラミングまたは
ピクトグラミングによる授業展開が中心になると考えられピクトグラミングシリーズでは，部位の回転など基本命

るが，すでに Scratch などのブロックプログラミング系の令についてはピクトグラム表示領域上のマウス操作でも実プログラミング環境の操作に長けた児童・生徒も一定数い

現でき，それ以外の命令は，命令文字列を入力することでる．学習者の経験，スキルに応じて，逆にピクソンやジャプログラムを作成するという，段階的に慣れ親しんでいく

バスクピクトの利用を許容するという授業設計も可能とというコンセプトを入れている．そのため，4.2 節の「情報なる．

デザインに主眼を置いた実践」では，命令名を知ったうえ

プログラミング言語 LOGO を開発した Papert は，子どで入力しないといけないという制約がユーザビリティの低もが自分自身の体を使ってタートルになったふりをするこ

下を招き，自分の表現したいデザインのピクトグラムを作とで，LOGO の命令を実行することができるという特徴にるうえで障壁となりうることも明らかになった．プログラ

大きな重要性を見い出し，これを同調的学習と呼んだ [17]．

ミングの学習目的と情報デザインの学習目的の両者を同一

書籍 [17] では，同調的学習の例として，自分の身体に対すのインタフェースで満たすことの限界も垣間見えた．今後

る感覚や知識と強く結び付いている「身体同調」，意図やは，学習用途に応じて最適化されたアプリケーションの開目的，欲求，好き嫌いを持った人間としての自意識と一貫

発も進めていく予定である．そのうえで，派生アプリケー

している「自我同調」，そして，文化にしっかりと肯定的ションの機能および特性と作成されるピクトグラムの質のに根を張った活動に結び付いている「文化同調」が示され関係性に関する厳格な評価方式についても検討していく必ている．公共施設などに掲示されているサイン用途のピク要があると考えられる．

トグラムは，社会や文化的背景を反映した文化同調性の高高等学校の新学習指導要領では，Python や JavaScript

いコンテンツといえる．また，太田の言説 [5] に従うとすなど汎用プログラミング言語を用いての授業が推奨されてれば，人の身体的活動や感覚，知識に基づくポージングやいるが，教育向けに特化したプログラミング言語に比べ，モーションを人型ピクトグラムで直接表現したコンテンツ

文法や記法が複雑であるため，構文規則の理解の困難さ，の作成は，身体や自我と同調する活動となる．つまり人型

つまずきや挫折感にともなう学習意欲の喪失などの問題をピクトグラムは，同調的学習と相性の良いコンテンツと考はらんでいる．たとえば，同一単元をクラス単位で行う場

えられ，これが筆者の先行論文 [7] で示したようにピクト

合も，統一のアプリケーションを強制するのではなく，学

グラミング開発における基本的設計理念の 1 つになってい習者の熟達度や理解度に応じてピクトグラミングシリーズ

る．今回のピクトグラミングシリーズで扱っているプログの中から選択して利用する方法が考えられる．

ラミング言語の記述は異なっているが，アプリケーション

中学校の「技術・家庭科」でも，2021 年度から運用開始の機能上，この設計理念に基づいた効果は踏襲されると考される学習指導要領では，計測・制御のプログラミングにえられる．先行論文 [7] でも授業の感想を自由記述で回答

加え，インタラクティブなコンテンツを生成するプログラ

してもらったが，今回の 4.1 節の「プログラミング・アル

ミングも加えられ，プログラミングの比重が高まる．人型

ゴリズムに主眼を置いた実践」の自由記述（表 4）でも同

ピクトグラムは，四肢二関節のロボットと見なすことがで様に，同調的学習を喚起させていると見受けられる記述がき，ロボット制御のシミュレータソフトウェアとしての活存在した．

用が想定できる．またピクトグラムというインタラクティ

また，学習者にとって普段から慣れ親しんだ興味・関心

ブコンテンツ生成の視点のプログラミング環境としても当があるテーマを設定しやすいという点も踏襲されており，活用が見込まれる．

これが先行論文 [7] と同様に，限られた実習時間であって小学校においても，小学校第 5 学年算数「プログラミン
グを通して，正多角形の意味を基に正多角形をかく場面」

も，比較的良好なアンケート評価を得た要因になっていると考えられる．

が学習指導要領で例示されているが，タートルグラフィッ

久野らは日本の情報教育の現状を分析したうえで，初等クによる描画が主である．一方，2.2.2 項で説明したよう

中等段階を通じた情報教育の必要性を論じ，カリキュラムに，本方式では，正多角形を様々なパラダイムで描画でき体系を提案している [18]．ピクトグラミングシリーズは，c 2021 Information Processing Society of Japan

10

情報処理学会論文誌

教育とコンピュータ

Vol.7 No.3 1–11 (Oct. 2021)

人型ピクトグラムという抽象度の高い人間を模した表現が主題であるゆえに，人の日常的活動や社会的活動にリンクしたテーマが教科や教育段階の枠を超えて設定しやすいこ[12]とが考えられる．
[13]

6. おわりに
本論文では，ピクトグラミングの長所を継承した，ビジュ
アルブロックや汎用プログラミング言語によるコード記述が可能な派生アプリケーションについて，機能および，設計・実装方式について解説した．さらに実際の授業実践を例示したうえで，教育機関での授業活用を中心に考察した．

[14]
[15]
[16]

今後は，本論文中で言及したピクトグラミングシリーズの機能追加を進めるとともに，小学生など，対象の範囲をより広げての授業利用や評価実験を通じて，提案アプリ[17]

ケーションの有効性を改めて検証し，改善すべき点を分析，評価していく予定である．
謝辞 本研究は JSPS 科研費 20K03160，21H03560 の助成を受けたものです．また授業の実践および評価の機会を[18]

Creation, IEEE Global Engineering Education Conference (IEEE EDUCON 2020 ), pp.1669–1673 (2020).
伊藤一成：Picthon（ピクソン）—Pictogramming を用いた Python 言語の学習環境の提案，情報処理学会情報教育
シンポジウム，SSS2019，pp.1–8 (2019).
西田知博，原田 章，中西通雄，松浦敏雄：プログラミン
グ入門教育における図形描画先行型コースウェアが学習に与える影響，情報処理学会論文誌教育とコンピュータ，
Vol.3, No.1, pp.26–35 (2017).
Brython, available from http://www.brython.info/
(accessed 2021-07-10).
Google Blockly, available from https://developers.
google.com/blockly/ (accessed 2021-07-10).
Neuliep, J.W.: An examination of the content of highschool teachers’ humor in the classroom and the development of an inductively derived taxonomy of classroom humor, Communication Education, Vol.40, No.4,
pp.343–355 (1991).
Seymour, P.: Mindstorms: Children, computers, andpowerful ideas, Basic Books Inc. (1980).
久野 靖，和田 勉，中山泰一：初等中等段階を通じた情報教育の必要性とカリキュラム体系の提案，情報処理学会論文誌教育とコンピュータ，Vol.1, No.3, pp.48–61(2015).

提供いただいた神戸大学附属中等教育学校米田貴先生に感謝いたします．

伊藤 一成 （正会員）
参考文献
[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

大野森太郎，上西綾香，原田利宣：色彩表現を用いたピ
クトグラムにおける視覚言語の抽出とその検証，日本感性工学会論文誌，Vol.14, No.3, pp.391–400 (2015).
Mori, Y., Takasaki, T. and Ishida, T.: Patterns inpictogram communication, Proc. 2009 International
Workshop on Intercultural Collaboration (IWIC ’09 ),pp.277–280, ACM (2009).
上西くるみ，青木輝勝：ピクトグラムマッチングのための輪郭情報を取り入れた局所形状記述子，情報処理学会
研究報告コンピュータビジョンとイメージメディア研究会，Vol.2017-CVIM-205, No.5, pp.1–8 (2017).
Hassan, M.M.E.: The semiotics of pictogram in the
Signage Systems, International Design Journal, Vol.5,
No.2, pp.301–315 (2015).
太田幸夫：ユニバーサル・コミュニケーションデザイ
ン の 認 識 と 実 践 ，入 手 先 https://forum8.co.jp/topic/
universal107.htm（参照 2021-07-10）.
兼宗 進，御手洗理英，中谷多哉子，福井眞吾，久野 靖：
学校教育用オブジェクト指向言語「ドリトル」の設計と実装，情報処理学会論文誌プログラミング，Vol.42, No.12,
pp.78–90 (2001).
伊藤一成：ピクトグラミング—人型ピクトグラムを用いたプログラミング学習環境，情報処理学会論文誌教育とコンピュータ，Vol.4, No.2, pp.47–61 (2018).
小学校プログラミング教育の手引，入手先 https://www.
mext.go.jp/a menu/shotou/zyouhou/detail/1403162.
htm（参照 2021-07-10）.
高等学校情報科「情報 I」教員研修用教材（本編），入手
先 http://www.mext.go.jp/a menu/shotou/zyouhou/
detail/1416756.htm（参照 2021-07-10）.
高等学校情報科「情報 II」教員研修用教材（本編），入手先 http://www.mext.go.jp/a menu/shotou/zyouhou/
detail/mext 00742.html（参照 2021-07-10）.
Ito, K.: Block Pictogramming—A Block-based Programming Learning Environment through Pictogram Content

c 2021 Information Processing Society of Japan

1974 年生．2005 年慶應義塾大学大学
院理工学研究科後期博士課程修了．博士（工学）．2005 年青山学院大学理工学部情報テクノロジー学科助手，2007
年同助教．2008 年同大学社会情報学部助教，2010 年同准教授，2021 年同教授で現在に至る．放送大学教養学部客員教授を兼任．メディア情報学，ウェブ情報学に関する研究に従事．2018
年度本会論文賞受賞，2018 年度本会山下記念研究賞受賞，2018 年度本会優秀教材賞受賞．

11