2022 年度情報処理学会関西支部 支部大会

D-02

人型ピクトグラムを構成素とするピクトグラフ生成アプリケーション「Human Pictograph」の実装
高橋伶奈 1 御家雄一 2,3 伊藤一成 1,3

1．はじめに業成績の向上，学業態度の向上，インタラクションの促進や情報理解力の強化など多くの効果があるとされている．

高等学校では 2022 年度より年次進行で実施している学

よってデータの統計処理や活用についても，ピクトグラム習指導要領において，情報の科学的理解を基軸とする「情と組み合わせた授業設計や実践の報告が望まれる．そこで

報 I」が必履修科目となっている．

今回，ピクトグラフに着目する．ピクトグラフは，ピクト高等学校学習指導要領では，『共通教科情報科では，グラムと同義で使用されることもあるが，イラストやシン「情報に関する科学的な見方・考え方」を「事象を，情報ボルを構成素とする統計図表のことをいい，本稿でもこのとその結び付きとして捉え，情報技術の適切かつ効果的な意味でピクトグラフを用いる．

活用（プログラミング，モデル化とシミュレーションを行

また，今回ピクトグラフの構成素として，人型ピクトグったり情報デザインを適用したりすること等）により，新ラムに着目する．有名な「⾮常⼝」ピクトグラムのデザイたな情報に再構成すること」であると整理されている．』

ンの策定に関わった太⽥は「⾛る⼈型を囲む空間が⾒る⼈とある[1]．

を包む空間とつながって⾛る⼈は⾒る⼈の投影になる」とわれわれの研究グループでは，ピクトグラムの教育利活

述べ[7]，実際に避難中の⼈が出⼝へ向かって⾛る⼈型ピ用について研究を進めている．ピクトグラムとは，世界共クトグラムを⾒たときに，如何に⾃⾝に投影し，同⼀視す通の記号表現として，意味するものの形状を使ってその意るかにデザインの労⼒が払われた．⽊全は，「現代はマー味概念を理解させる記号である [2]．ピクトグラムが情報ク氾濫時代であり，マークには⼈のシンボル化という⼼理デザイン領域に限定されず，プログラミング，モデル化と的機能に訴え，感情を呼び覚ます⼒がある．学習不要なマシミュレーション等の単元と有機的に関連すれば，情報技ークであるピクトグラムは⾒た瞬間，ダイレクトに⼈の感術の適切かつ効果的に活用により新たな情報に再構成する

情を誘う魅⼒を持っている．⼈型の絵が使われると，⾒る手段となり得ると考えられるからである．

⼈はとたんにそのピクトグラムに感情移⼊してしまう」と

第 3 著者は，ピクトグラムの作成を通じて問題解決，情報デザイン，プログラミングを横断的に扱える統合アプリ述べている[8]．ピクトグラフ表⽰においても同様な効⽤が期待される．

ケーション「ピクトグラミング」シリーズを公開している

そこで，本稿では人型ピクトグラムを構成素とするピク[2]．また第 2 著者は，これを用いたピクトグラム制作実習トグラフ生成アプリケーション「Human Pictograph」を実の実践事例を報告している[3]．

装したので，報告する．

データの統計処理や活用に関しても，20 世紀初頭に統計情報の視覚化を目指したアイソタイプ[4]からピクトグラム

以下 2 章で実装したアプリケーションについて説明する．
3 章でまとめる．

誕生への歴史的変遷を取り上げ関連づけたり，ピクトグラムを構成素とするインフォグラフィックス[5]を扱うことが考えられる．坂場は，教育におけるインフォグラフィック

2．人型ピクトグラムを構成素とするピクトグラフ生成アプリケーションの実装

スの制作に関する議論がされていないことを問題に挙げ，Human Pictograph は，人型ピクトグラムに着目した統計

教育用インフォグラフィックス制作ガイドラインを作成し図表作成環境である．Human Pictograph では，学習者が人ている[6]．実際，インフォグラフィックスは初等教育から型ピクトグラムの姿勢を自作し，それを用いてピクトグラ

高等教育まで幅広い教育の段階で，数学，地理，言語学，フを作成する．

英語などのさまざまな科目を享受するために活用され始めており，教育におけるインフォグラフィックスの活用は学1

青山学院大学社会情報学部
2
青山学院大学大学院社会情報学研究科
3
青山学院大学ピクトグラム研究所

2.1 実装方式
Web アプリケーションとして実装した．図 1 に，PC のブラウザで，「Human Pictograph」にアクセスした際に表示するページのスクリーンショットを示す．

領域A「データ⼊⼒領域」

領域C「ピクトグラフ出⼒領域」

領域 B「⼈型ピクトグラム作成領域」
図 1 「Human Pictograph」のスクリーンショット

画面は，大きく 3 つの領域で構成している．図 1 におい

位量入力ボックス」，入力した情報からグラフを作成するて，領域 A はグラフ化したいデータを入力する「データ入「グラフ作成ボタン」で構成している．「数量入力ボック力領域」，領域 B は任意の姿勢の人型ピクトグラムを作成

ス」および「単位量入力ボックス」は整数，小数表記に対できる「人型ピクトグラム作成領域」，領域 C はピクトグ応している．なお，負数は入力できない仕様である．項目ラフを出力する「ピクトグラフ出⼒領域」である．

数追加ボタンを押下すると新たな項目を追加する．項目ごとに配置している「項目削除ボタン」を押下するとその項目を削除する．領域 A「データ入力領域」のピクトグラフ

2.2 データ入力領域とピクトグラフ出力方法
領域 A「データ入力領域」のスクリーンショットを図 2に示す．

作成に使用する各項目の人型ピクトグラムは「ピクトグラ
ム反映ボタン」に表示されている姿勢を適用する．「人型ピクトグラム反映ボタン」の任意の位置をクリックする

ラベル名⼊⼒ボックス
ピクトグラム反映ボタン

項⽬数追加ボタン

単位量⼊⼒ボックスと，次節で示す，領域 B「人型ピクトグラム作成領域」の「ピクトグラム表示キャンバス」に表示されている姿勢を反映する．人型ピクトグラムの作成方法は次の節で述べる．領域 A「データ入力領域」の入力作業が完了し、「グラフ作成ボタン」を押下すると，領域 C「ピクトグラフ出数量⼊⼒ボックス
項⽬削除
ボタン

グラフ作成ボタン

力領域」にピクトグラフを出力する．
ピクトグラフに表示する人型ピクトグラムの出力人数は
領域 A「データ入力領域」の「数量入力ボックス」に入力

図 2 領域 A「データ入力領域」の構成
領域 A「データ入力領域」では，項目のラベル名を入力された値（以下，数量）と「単位量入力ボックス」に入力された値（以下，単位量）から決定する． まず，数量を単位量で割った値の整数部の数だけ，すべて黒色で塗りつぶする「ラベル名入力ボックス」，項目の数量を入力する

した人型ピクトグラムを出力する．小数部は，人型ピクト「数量入力ボックス」，適用させる人型ピクトグラムの姿

グラムの左端から小数部の値の比率だけ黒で塗りつぶし，勢を「ピクトグラム反映ボタン」，項目を削除する「項目残りを灰色で塗りつぶす．図 1 の領域 C「ピクトグラフ出削除ボタン」，新たな項目を追加する「項目数追加ボタ

力領域」における「走って通学」の項目は，数量を 362，ン」，人型ピクトグラム 1 体分が表す数量を入力する「単単位量を 100 としている．数量を単位量で割ったとき，整数部は 3，小数部は 0.62 であるため，すべて黒色で塗りつら「かた」「ひじ」「また」「ひざ」といった順に配置しぶした人型ピクトグラムを 3 体，左から 62%のみ黒で塗りている．

つぶされた人型ピクトグラムを 1 体表示している．単位量

表 1 使用している体の関節名と動作する部位用いたラベル
動作する部位の値をピクトグラフ右上に表示する．
単位量が入力されていない場合，ピクトグラフから各項目の数量が認識しやすい構図になるように，単位量を自動的に設定する．入力された項目の数量のうち最大値を maxとし，次の式によって n を設定する．
𝑚𝑎𝑥
𝑛 = # ["#$ %&'] + 0.5- × 10["#$!" %&'])*
10 !"
最大値 max が 1 以上 10 未満の場合，単位量は 1 とする．max が 10 以上であり，n が 1 以上 3 未満の場合，単位量は 2 とする．n が 3 以上 8 未満の場合，単位量は 5 とする．n が 8 以上 10 未満の場合，単位量は 10 とする．maxが 10 以上かつ n が 10 以上の場合，および max が 1 未満の場合，単位量は n とする．

かた上腕

ひじ前腕

また

大腿

ひざ下腿

からだ

体

「角度入力ボックス」には度数法による角度を入力す
る．正の数であれば反時計回りに，負の数であれば時計回りに，入力された角度だけ回転する．「角度入力ボックス」に角度を入力すると，入力値に応じて随時姿勢を反映する．
「向き決定ラジオボタン」によって，人型ピクトグラムの向きを「正面」，「側面」の 2 通りから選択でき，ISO

2.3 人型ピクトグラム作成

3864 付録で提示されている正面，側面用デザインの人型ピ

領域 B「人型ピクトグラム作成領域」のスクリーンショクトグラムを表示する．また，向きが「正面」の状態で「からだ」以外のすべての角度が 0 と入力されている場合ットを図 3 に示す．
向き決定ラジオボタン

は ISO 3864 付録で提示されている正面直立用デザインのボタン群
リセットボタン

⾓度⼊⼒ボックス

人型ピクトグラムを表示する．「正面」「側面」「正面直立」の 3 通りの人型ピクトグラムの形状を図に示す．

削除ボタン

保存したピクトグラム

ピクトグラム表⽰キャンバス

保存ボタン

図 3 領域 B「人型ピクトグラム作成領域」の構成
領域 B「人型ピクトグラム作成領域」はピクトグラムを表示する「ピクトグラム表示キャンバス」，人型ピクトグラムの向きを選択する「向き決定ラジオボタン」，キャンバスに表示された姿勢を保存する「保存ボタン」，保存した人型ピクトグラムを呼び出す「ボタン群」，各部位の角度を入力する 9 個の「角度入力ボックス」で構成している．角度入力ボックスには，「からだ」，「左かた」，「左ひじ」，「左また」，「左ひざ」，「右かた」，「右ひじ」，「右また」，「右ひざ」というラベルを付与している．使用している体の関節名と動作する部位の対応を表1 に示す．直感的に入力できるよう，人型ピクトグラムの右半身を操作するボックスは「ピクトグラム表示キャンバス」の右側に，左半身を操作するボックスは左側に配置している．直立状態の人体は上から肩関節，肘関節，股関節，膝関節となっているため，入力ボックスも同様に上か

正⾯

図4側⾯

正⾯直⽴

3 通りの人型ピクトグラムの形状作成した人型ピクトグラムは保存できる．「保存ボタン」を押下すると，「ピクトグラム表示キャンバス」に描かれている姿勢情報をデータベースに保存する．データベースに保存する情報は，9 個の「角度入力ボックス」に入力された値と，人型ピクトグラムの向き情報である．
保存した人型ピクトグラムは領域 B「人型ピクトグラム作成領域」内の「ボタン群」から呼び出すことができる．
姿勢の画像を縦 1 列に表示し，呼び出したい姿勢の画像を押下すると画像と同じ姿勢を「ピクトグラム表示キャンバス」に表示する．
ボタン群の一番上に位置する正面直立のピクトグラムの画像は「リセットボタン」である．押下すると，向きを正面にし，「角度入力ボックス」の値をすべて 0 にする．人型ピクトグラムの姿勢を保存するとき，「リセットボタン」の下に姿勢の画像を追加する．「削除ボタン」を押下

するとその項目の情報を削除する．誤操作による削除を防ぐため，「削除ボタン」を押下するとアラートメッセージを表示し，削除確認を行う．確認画面で「OK」を押下すると削除する仕様である．保存した人型ピクトグラムの データは HTML Living Standard の Web Storage の local storageを用いてブラウザ内に保持されるため，セッションを終了しても，同一 PC の同一ブラウザであれば，再利用できる．

3．まとめと今後の展望
人型ピクトグラムを構成素とするピクトグラフ生成アプリケーション「Human Pictograph」を実装した．
今後は，授業での利活⽤や評価実験を⾏い，本アプリケーションの有効性を検証する．湯浅らはピクトグラフで⽤いるアイコンの種類や配置によって，意⾒変容や他者想起への影響する結果が得られたとしている[9]．本アプリケーションについても，⼈型ピクトグラムに特化したピクトグラフの特徴や意義についても評価，分析する予定である．
謝辞
本研究は JSPS 科研費 21H03560 の助成を受けたものです．

参考文献
[1]

平成 30 年告示高等学校学習指導要領
https://www.mext.go.jp/content/1384661_6_1_3.pdf （2022 年 7

[2]

[3]

[4]
[5]
[6]

月 1 日閲覧）伊藤一成: 複数のプログラミング言語で記述可能なピクトグ
ラムコンテンツ作成環境の提案と実装, 情報処理学会論文誌
TCE, Vol.7, No.3, pp.1-11 (2021)
御家雄一，伊藤一成：問題解決, 情報デザイン, プログラミング, データ分析を横断的に扱えるピクトグラム制作実習の実践事例報告，第 14 回全国高等学校情報教育研究会全国大会（2021）
オットー・ノイラート，ISOTYPE[アイソタイプ]（和訳），ビー・エヌ・エヌ新社，(2017)
櫻田潤，インフォグラフィック入門，ビー•エヌ•エヌ新社，(2013)
坂場 寛子: 教育用インフォグラフィックスの制作ガイドライン構築に向けた基礎的研究, デザイン学研究, Vol. 68, No. 2, pp.
59-68 (2021)[7]

太田幸夫: ユニバーサル・コミュニケーションデザインの認
識と実践
https://forum8.co.jp/topic/universal107.htm (2022 年 7 月 1 日閲
覧)[8]

木全賢: ひと目でわかるデザイン，デザインがわかる. ISBN
978-4-8465-2726-6, pp. 102-107 (2008).

[9]

湯浅将英，田村俊貴，片上大輔，大村英史，小林一樹，田中貴紘：ネット上の賛否表示へのピクトグラフ利用に向けた基礎検討，ヒューマンインタフェース学会論文誌
Vol.183,pp.235-248(2016)