（日本語命令版 20210909 版）© 2020 Kazunari Ito11章

日常生活におけるピクトグラム

ピクトグラムとは？

ピクトグラムとは日本語で絵記号，図記号と呼ばれるグラフィックシンボルで，意味するものの形状を使ってその意味概念を理解させる記号です．ピクトグラムは案内，安全，施設，機器等々，様々な用途で標準化されています．

ピクトグラムは，世界共通の記号表現として世界中で用いられていますが，特に近年のグローバル化やその流れに伴う外国人観光客の急激な増加などの理由もあり，ピクトグラムを題材とする研究が盛んになっています．

2

ピクトグラム作成入門

では実際に，これからピクトグラムを作ってみましょう．
ブラウザでピクトグラミングのホームページへアクセスしてください．アドレスはこちらです．
「ピクトグラミング」と検索エンジンで検索してアクセスしても結構です．

https://pictogramming.org
ピクトグラミングのトップページが表示されました．PC やノート PC でアクセスする
場合は，Pictogramming の「はじめる」ボタンを押してください．スマートフォンで使えるバージョンも用意されています． スマートフォン版では右下のボタンをタップしてください。

PC 版

スマートフォン版

ボタンを押すと「図 アプリケーションの画面」に示すアプリケーションが現れます．
3

図 Pictogramming の画面(PC 版)
PC 版の画面は主に 3 つの部分から構成されています．スクリーンショットの図において上部左側は，プログラムの実行結果を表示する人型ピクトグラム表示領域，上部右側はプログラムを入力するプログラムコード入力領域，下部にはプログラムの入力を支援するプログラムコード入力支援ボタン群が配置されています．左上部分のパネルに表示されているのが，人型ピクトグラムです．

ピクトグラミングは，日本語，日本語ひらがな，英語の３通りの言語を使ってピクトグラムを作成できます．今回は，日本語を使いますので，まず「言語選択」のプルダウンから「日本語」を選択しましょう．プログラムコード入力支援ボタンに書かれている文字が日本語になれば OK です．

4

図 Pictogramming の画面(スマートフォン版)
スマートフォン版の画面は,PC 版と同様に主に 3 つの部分から構成されています．スク
リーンショットの図において上部には，プログラムの実行結果を表示する人型ピクトグ
ラム表示領域，中央にはプログラムを入力するプログラムコード入力領域，下部にはプログラムの入力を支援するプログラムコード入力支援ボタン群が配置されています．上部のパネルに表示されているのが，人型ピクトグラムです．

5

動きを記述する

さて，まずは右上の「プログラムコード入力領域」に以下のように入力してみましょう．

回転 左肩 -120

続けて，実行ボタンを押してみましょう．はい．左腕が上がりました．

この記述の意味を説明します．
はじめに，回転を説明します．回転は体の部分を回転するという意味です．
次の左肩というのは，回転する体の部位を示しています．最後の-120 というのは

さらに 2 行目，3 行目を追加しました，下の例では，左肩を反時計回りに-120 度，つまり時計回りに 120 度回転させています．さらに右股を反時計回りに 37 度回転します．それに続けて体全体（体）を反時計回りに-52 度，つまり時計回りに 52 度回転させています．

回転 左肩 -120
回転 右股 37回転 体 -52

それぞれの行を文と呼びます．つまり文を複数記述することで，あなたが画面上の人型ピクトグラムに対して命令する訳です．命令には様式があります．体の部位を回転する
場合の命令の様式を表に示します．

命令の様式
回転 引数 1 引数 2処理
引数 1 で指定される体の部位を反時計回りに引数 2 度だけ回転する．

6

初めの 回転 が回転を意味する命令の種類です．今後回転命令だけでなく色々な命令が出てきます．次の引数 1，引数 2 はいずれも引数といい，外部から与えられる数や文字のことを言います．ピクトグラミングでは，あなたがあなたの分身である人型ピクトグラムに命令をしますので，外部とはあなたのことです．普通，回転（回転）しろ！と言われただけでは，どこをとか何度回転するのとか聞き返すと思います．つまり曖昧なく命令を実行するために与える数字や文字（ここでは右股とか 37 とか）のことを引数というわけです．
ここで，1 つ目の引数である引数 1 は体の部位を示す文字列を指定します．選択できる部位を 「図 人型ピクトグラムを構成する部品」に示します．

図 回転，回転待ち命令で指定できる部品

次の 2 つ目の引数である引数 2 は回転する角度を示しています．反時計回りが正の値になります．負の値を使って時計回りの角度も表現できます．

他には次のような命令があります．側面という命令を使うことで，正面からでなく横から見た側面方向のピクトグラムも作ることができます．

命令

処理

正面

人型ピクトグラムを正面向きにする．
（初期状態）

側面人型ピクトグラムを側面向きにする．

クリア

人型ピクトグラムの状態を直立状態（初期状態）にする．

7

[演習課題](1)から（3）のそれぞれについて，画像と同じ姿勢を作成してください．

(1)

(2)

8(3)

2章

逐次（ちくじ）実行，並列（へいれつ）実行

回転 左肩 -140と入力して実行ボタンを押しましょう．はい．左腕が上がりました．

ではこの命令の-140 のあとに" "（スペース）を挟み，さらに 1と記述しましょう．以下のようになります．そして，実行ボタンを押しましょう．

回転 左肩 -140 1

どうなりましたか？徐々に腕が上がりました．これは 1 秒間かけて左肩を反時計周りに 140 度回転するという意味です．では，さらにこれから，" "（スペース）を挟んで3 と記述して実行ボタンを押しましょう．

回転 左肩 -140 1 3

プログラムの実行は実行ボタンが押された瞬間から始まりますが，この場合しばらくは回転せず 3 秒後から 1 秒かけて反時計周りに 140 度回転しました．
前回は，命令回転は 2 つの引数を持つと紹介しましたが，実は，命令回転は最大 4 つまで引数を持つことができます．実際の命令回転の仕様は以下の通りです．

命令の表記

処理

回転 引数 1 引数 2 引数 3 引数 4

引数 4 秒後に引数 1 で指定される体の部位を反時計回りに引数 2 度だけ引数 3 秒かけて⽀点を中⼼に等速回転する．引数 4が 省略された時は，引数 4 に 0 が，引数3，引数 4 の両⽅が省略された時はいずれも 0 が⼊⼒されているものとして取り扱う．

9

では次に以下の 2 行からなるプログラムを記述して実行してみましょう．

回転 左肩 -140 1
回転 右肩 140 1

1 秒間かけて右図のように両腕を同時に上げるアニメーションが再生されます．
では，左腕が上げ終わってから右腕を上げるようにするにはどうすればよいでしょう．
そのための命令として，回転待ち命令があります．
先ほどのプログラムの回転のところを回転待ちに変えて実行してみてください．つまり以下の通りです．

回転待ち 左肩 -140 1
回転待ち 右肩 140 1

回転待ち命令は回転命令と同じですが，「回転が終了するまで次の命令は実⾏されない．
」という意味の命令です．

命令の様式

処理

回転待ち 引数 1 引数 2 引数 3

引数 1 で指定される体の部位を反時計回りに引数 2 度だけ引数 3 秒かけて⽀点を中⼼に等速回転する．回転が終了するまで次の命令は実⾏されない．

一方，回転命令は，「次の命令も同時に実⾏される．」という違いがあります．なので，回転命令では両腕が同時に上がりました．回転命令は，「次の命令も同時に実⾏される．
」のがポイントです．例えば，

回転 左肩 -140 1
回転待ち 左肩 140 1

10という命令を実行しても人型ピクトグラムは何も反応しません．これは，左肩を反時計回りに 140 度 1 秒間で回転する命令と，左肩を反時計回りに-140 度 1 秒間で回転する命令が同時に実行されるため，実際には両方が相殺されるからです．では，次に回転 左肩 40 1
回転 左肩 40 1
回転 左肩 40 1という命令を実行するとどうなるでしょう？これは 回転 左肩 120 1 と同一になります．

一方，回転待ち 左肩 40 1
回転待ち 左肩 40 1
回転待ち 左肩 40 1という命令を実行するとどうなるでしょう？これは 回転待ち 左肩

120 3 と同一になります．
このように回転命令と回転待ち命令をうまく組み合わせることで，人型ピクトグラムに対する様々なアニメーションが可能となります．

次に平行移動してみましょう．座標は XY 座標系（X 方向と Y 方向の値，両方を組み合わせて位置を表現する）です．横方向が X 座標で左端の-320 から右端の 320 まで，縦方向が Y 座標で上端の-320 から下端の 320 までをとります．つまり，中心が（0,0），左上が（-320,-320），右上が（320,-320），左上が（-320,-320），右上が（320,320），つまり X 軸正方向が右，Y 軸正方向が下となります．数学の座標軸と Y 軸だけ逆方向なので注意して下さい．画面上部の定規アイコンの右のチェックボックスをオンにすると座標系が表示されますので，最初のうちはこの座標系を表示しながら命令を実行すると良いでしょう．

（←画面上部の定規アイコンの右のチェックボックスをオンにする）

11

図 座標系を表示した場合の人型ピクトグラム表示領域

ピクトグラムは移動命令または移動待ち命令を用いて平行移動できます．命令の様式は下の表の通りです．例えば 移動 50 30 1 は，1 秒かけて右に 50 下に 30 平行移動します．
平行移動についても待ちを記述するか否かで，次の命令も同時に実行するか，並行移動が終了するまで次の命令が実行されないかが決まります．

命令の様式
移動 引数 1 引数 2 引数 3 引数 4処理
引数 4 秒後に引数 3 秒かけて x 軸正⽅向に
引数 1 ピクセル, y 軸正⽅向に引数 2 ピクセルだけ全体を等速直線移動する．引数 4が省略された時は，引数 4 に 0 が，引数 3,引数 4 の両⽅が省略された時はいずれも 0が⼊⼒されているものとして取り扱う．

移動待ち 引数 1 引数 2 引数 3

引数 3 秒かけて x 軸正⽅向に 引数 1 ピクセル, y 軸正⽅向に引数 2 ピクセルだけ全体を等速直線移動する．直線移動が終了するまで次の命令は実⾏されない．

12

[演習課題]（1）次のようなアニメーションを作成してください．
0 秒目から 1 秒かけて両腕を上げる．
1 秒目から 1 秒かけて左腕を下ろす．
2 秒目から 1 秒かけて右腕を下ろす．

(2) アニメーションを使った自由作品を作成してみましょう．

13

3章

似たような処理をまとめる

繰返し処理

回転待ち 左肩 -140 1と入力して改行キーを押しましょう．はい．左腕が上がりました．
では次に，手を振ってみましょう．友達と別れるときを想像してみてください．

回転待ち 左肩 -140 1
回転待ち 左肘 -60 0.3
回転待ち 左肘 60 0.3
回転待ち 左肘 -60 0.3
回転待ち 左肘 60 0.3
回転待ち 左肘 -60 0.3
回転待ち 左肘 60 0.3

3 回左肘動かすことで腕を左右に振ることができました．10 回 20 回振るようにもできます．ただ，プログラムがとても長くなってしまいますし，プログラムを見て何回振っているのかをすぐ確認することも難しくなります．そこで繰返しの処理を書く方法を学んでみましょう．使う命令は以下の通りです．

命令の表記

処理

繰返し 引数 1

対応する命令群を引数 1 回繰り返す．

終わり

繰返しの終了．

繰返しを使うと以下のように書くことができます．

回転待ち 左肩 -140 1
繰返し 3
回転待ち 左肘 -60 0.3
回転待ち 左肘 60 0.3
終わり14

[演習課題]（1）次のようなアニメーションを作成して下さい．ただし 繰返し文を使って下さい．
1 秒かけて左腕を曲げて，続けて 1 秒かけて再び左腕を伸ばすということを 10回繰り返す．

（2）繰返しを使った作品を自由に作成してみましょう．

15

4章

体の部位を動かして絵を描こう

ピクトグラミングでは，人型ピクトグラムの体の部位を動かすことで絵を描くことができます．まずは，下のプログラムを実行してみましょう．円がかけました．

ペン 持つ 左手
回転 左肩 360 1

線画は，ペンで描きます．そのペンを持ったり離したりできます．１行目のペン 持つ
左手 は，左手にペンを持つという命令です．ペン関係の命令の様式は以下の通りです．ペンを持つ，放す体の部位は下の図に示すように，いくつか指定できます．

命令の様式ペン 持つ 引数 1

処理
ペンを持つ．ペンを持つ体の部位の名称を回転,回転待ち命令と同様の表記で引数 1 に指定できる．引数 1 が省略された場合は 体が記述されているものと⾒なされる．

ペン 放す 引数 1

ペンを離す．ペンを持つ体の部位の名称を回転,回転待ち命令と同様の表記で引数 1 に指定できる．引数 1 が省略された場合は 体が記述されているものとみなされる．

ペン幅 引数 1

ペンの太さ（幅）を 引数 1 にする．初期値は 15．

図 ペンを持つことができる位置の名称

16

では四角形を書いてみましょう．

ペン 持つ 左手
ペン幅 1
繰返し 4
回転待ち 左肩 90 0終わり

人型ピクトグラムで線画を描くときに，人型ピクトグラム自身のせいで描いている線画の概形がわかりにくくなることがあるので，人型ピクトグラムを透明にする透明命令もあります．透明からまた戻すときは，標準命令を実行してください．また，これまでに描いた図形を消す場合は，クリアスクリーン命令を使います．

命令の様式処理

透明スケルトンモードに変更する。

標準

ノーマルモードに変更する。

クリアスクリーン ペンによって描画された図形を消去する．

先ほどのプログラムの 1 行目に透明を挿入しました．人型ピクトグラムが透明になるので，描いた線画が見やすくなります．
透明
ペン幅 1
ペン 持つ 左手
繰返し 4
回転待ち 左肩 90 0終わり

17

5 行目の最後の 0 を 1 にしてみましょう．

透明
ペン幅 1
ペン 持つ 左手
繰返し 4
回転待ち 左肩 90 1終わり

今度は，円になりました．線画は人型ピクトグラムの移動の履歴を描きます．よって普通に回転すれば，その履歴は円になります．
ただし，時間が 0 の時は，瞬間移動です．ピクトグラミングでは瞬間移動した場合は，移動元と移動先を両端とする線分を描きます．よって上の例では四角形が書けるのです．

次に 5 行目の回転待ちを回転に変更してみましょう．

透明
ペン幅 1
ペン 持つ 左手
繰返し 4
回転 左肩 90 1終わり

何も線画が描かれなくなりました．これは，次の 2 つのルールがあるからです．
（1）時間 0 の回転命令，移動命令は，元の位置と，回転命令，移動命令からなる複数の命令の動きを全て実行したあとの位置を両端とする線分を描画します．
（2）時間 0 の回転待ち命令，移動待ち命令は，元の位置とその命令を実行したあとの位置を両端とする線分を描画します．

18

この違いを例に示します．

透明
ペン幅 1
ペン 持つ 左手
回転待ち 左肩 45
回転待ち 左肩 45

は右のようになります．左腕の初期位置から，左上腕を反時計回りに 45 度回転した位置まで線分を描きます．さらに左上腕を反時計回りに 45 度回転した位置まで別の線分を描きます．

透明
ペン幅 1
ペン 持つ 左手
回転 左肩 45
回転待ち 左肩 45は右のようになります．左腕の初期位置から，左上腕を反時計回りに 90（=45+45）度回転した位置まで線分を描きます．

よって先ほどの例は何も描きません．なぜなら左腕の初期位置と，初期位置から左肩を反時計回りに 360（=90×4）度回転した位置は同じだからです．

同様に，

透明
ペン幅 1
ペン 持つ 左手
移動 100 0
移動待ち 0 100は右のようになりますが，
19

透明
ペン幅 1
ペン 持つ 左手
移動待ち 100 0
移動待ち 0 100は右のようになります．

ピクトグラムの体の部位を動かす際と同様，回転, 回転待ち, 移動, 移動待ち命令をうまく使い分けることで，様々な線画を描くことができます．例えば，下は三つ葉のクローバーです．

ペン 持つ 左手
ペン幅 1
回転 左肩 360 5
回転待ち 左肘 -1080 5
移動待ち 0 300[演習課題](1) 正三角形，正五角形をそれぞれ描いてみましょう．

20

(2)三つ葉のクローバーのプログラムを変更して，幸せを呼ぶ四つ葉のクローバーを描いてみましょう．

(3)三つ葉のクローバーのプログラムのいずれかの命令のある引数を一箇所変えるだけで，右のようなお花を描くことができます．やってみましょう．

(4) 次の図形を描いてみよう(A) 内角がそれぞれ 90 度，60 度， 30 度の直角三角形(D) ひし形(B) バツマーク(E) 中心角が 120 度の扇型

21(C) グラウンド(F) サインカーブ

5章

分岐を使って異なった処理をする

日常生活において，人は確率や状況によって異なった振るまいをします．
例えば，「サイコロで３以下が出たら，目の前のものを購入しよう」「もし，明日晴れな
らばピクニックに行こう」「もし，財布の中に 5000 円以上あって，かつ彼女がすでに何か予定が入っていなかったらデートに誘おう」などです．

命令の様式

処理

もし 引数 1

引数 1 の確率で対応する終わりまでの命令を実⾏する．

終わり

条件⽂または繰返しの終了．

例えば， 50%の確率で手を振るようなプログラムを記述すると以下のようになります．

回転待ち 左肩 -120 1
もし 0.5回転待ち 左肘 -90 0.3
回転待ち 左肘 -90 0.3
終わりもし, 他でもし, 他命令を組み合わせてより複雑な条件を記述することができます．
命令の様式
もし 引数 1

処理
引数 1 の確率で対応する他でもしまたは他または 終わりまでの命令を実⾏する．

他でもし 引数 2 もし対応する先述のもしまたは他でもしの部分が実⾏されない場
合，引数 2 の確率で対応する他でもしまたは他または終わりの直前までの命令を実⾏する．
他

もし対応する先述のもしまたは他でもしの部分が実⾏されない場
合，対応する終わりまでの命令を実⾏する．

例えば下のプログラムは，左肘，右肘，右股のいずれかをそれぞれ，40%, 42% ( (10.4)×0.7)) ，18%((1-0.4)×(1-0.7)) の確率で動かします．

22

回転 左肩 -120 1
回転待ち 右肩 -120 1
もし 0.4回転待ち 左肘 -90 0.3
回転待ち 左肘 -90 0.3
他でもし 0.7
回転待ち 右肘 -90 0.3
回転待ち 右肘 -90 0.3

他
回転待ち 右股 -90 0.3
回転待ち 右股 -90 0.3
終わり[演習課題]
第 4 回で習った体の部位で図形を描くというのがありました．ランダムに動く人型ピクトグラムの特定の部位にペンを持たせて，ランダムな図形を描いてみましょう．

23

第６回

正しく伝える難しさを知る -ピクトグラムデザイン-

これまで，自由な発想で様々な作品を作成してきたと思います．今回は，社会や身の回りに役立つピクトグラムというのを作成してみましょう．下のピクトグラムは，いずれも安全図記号で指定されている図例です．さらに禁止，注意，指示，安全の 4 項目に関するピクトグラムデザインのガイドラインも策定されています．通常，世の中に広く普及しているピクトグラムは作成ガイドラインに則ってデザインされています．ピクト
グラムで大切な事は誰にでも正しく伝わるという事なのです．ピクトグラミングでは通常のモードに加え，禁止，注意，指示，安全用のピクトグラムを作るための 6 つのモードを備えています．

命令の様式

処理

禁止

禁止モードに変更する．

注意

注意モードに変更する．

指示

指示モードに変更する．指示モード中に描画した線画の色は人型ピクトグラムと同じ白となる．
安全モードに変更する．安全モード中に描画した線画の色は人型ピクトグラムと同じ緑色となる．
安全緑モードに変更する．安全緑モード中に描画した線画の色は人型ピクトグラムと同じ白色となる．
安全赤モードに変更する．安全赤モード中に描画した線画の色は人型ピクトグラムと同じ白色となる．
ノーマルモードに変更する。

安全安全緑
安全赤
標準24

座標を指定して線を描く
4 章で，人型ピクトグラムの部位にペンを持たせて，移動の軌跡で線画を描くことを学びましたが，右の図のように，描く図形によっては，座標を直接指定して線や円が描くのが簡単です．そこで，ピクトグラミングでは，線，円命令というのが用意されています，仕様は以下の通りです．

命令の様式

処理
座標（引数 1,引数 2）から座標(引数 3,引数 4)まで引数 5 秒かけて線分を描

線 引数 1 引数 2 引数 3 引数 4 引数 5

く．引数 5 が 省略された時は，引数 5に 0 が入力されているものとして取り扱う．
中心座標（引数 1,引数 2），幅 引数 3，高さ 引数 4，中心座標を中心に反時計回りに 引数 5 度回転した楕円を描く．

円 引数 1 引数 2 引数 3 引数 4 引数 5

引数 5 が 省略された時は，引数 5 に 0が入力されているものとして取り扱う．

よって，例えば， 線 100 -150 200 300 は座標（100, -150）と座標（200,300）を両端とする線分を（一瞬で）描きます．

25

線種も変更することができます．

命令の様式

処理

ペン 四角

以後描画する線の両端の形状を四⾓にする．

ペン 丸

以後描画する線の両端の形状を半円にする．

ペン 端無し以後描画する線の両端の形状を無しにする．

ペン 標準

以後描画する線の線種を実線にする．

ペン 消す

以後描画する線の線種を消線にする．

ペン XOR

以後描画する線の線種を反転線（すでに描かれていた部分は消し，そうでない部分は描く）にする．

線の太さや線の種類を変更して描画した例を下に示します．

ペン幅 20ペン 端無し線 200 -200 200 200
ペン 丸
線 100 -200 100 200
ペン幅 100
ペン 四角
線 -200 -200 -200 -200
ペン 丸
線 -200 200 -200 200

26

ピクトグラムを作ろう

さてこれらは，社会の中でよく見かけるピクトグラムの例です．

人型ピクトグラムにポーズをとらせて，伝えたい情報を正しく伝えることができるように，色付きのマークをつけて，さらに線画を付け加えてみましょう．
さて，世の中に溢れるピクトグラムはポスターなど紙媒体上で提示されているので基本は画像（静止画）です．一方最近では，デジタルサイネージ（電子掲示板）の発達により，街中でもアニメーションのピクトグラムを提示させることができるように技術的にはなっています．またスマートフォンなどは位置情報や無線によって，状況に応じて画面上に何らかの表示をすることができるようになっているので，静止画や動画のピクトグラムを表示させて，注意喚起や情報提供をすることができるでしょう．
ピクトグラミングは，静止画だけではなく動画（アニメーション）のピクトグラムを作成することができます．ぜひ，単なる静止画のピクトグラムではなく，オリジナルのアニメーションピクトグラムを作成してみましょう．

27