DEIM Forum 2023 4b-9-2

ピクトグラフィング－データ活用の学習を目的としたピクトグラフ生成アプリケーションの実装－
高橋伶奈 1

御家雄一 2

伊藤一成 112

青山学院大学社会情報学部 〒252-5258 相模原市中央区淵野辺 5-10-1
青山学院大学大学院社会情報学研究科 〒252-5258 相模原市中央区淵野辺 5-10-1

あらまし ピクトグラムを構成素とするピクトグラフ生成アプリケーション「ピクトグラフィング (Pictographing)」を提案
する. ピクトグラフは，ピクトグラムと同義で使用されることもあるが，イラストやシンボルを構成素とする統計図表のことをいう．これまで，数量の概念の学習など小学校の学習内容に関する機能を中心に実装していたが，今回クエリによるデータ操作や，WebAPI などの高等学校情報科の学習単元で利用できる機能をいくつか追加したので報告する．

キーワード データ活用，ピクトグラフ，ピクトグラム，高等学校情報科，データベース，SQL，WebAPI

1．はじめに考えられる．坂場は，教育におけるインフォグラフィックスの制作に関する議論がされていないことを問題に挙げ，われわれの研究グループでは，ピクトグラムの教育利活

教育用インフォグラフィックス制作ガイドラインを作成し用について研究を進めている．ピクトグラムとは，世界共ている[7]．実際，インフォグラフィックスは初等教育から通の記号表現として，意味するものの形状を使ってその意

高等教育まで幅広い教育の段階で，数学，地理，言語学，味概念を理解させる記号である [1]．

英語などのさまざまな科目を享受するために活用され始め高等学校では 2022 年度より年次進行で実施している学ており，教育におけるインフォグラフィックスの活用は学

習指導要領において，情報の科学的理解を基軸とする「情業成績の向上，学業態度の向上，インタラクションの促進

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

や情報理解力の強化など多くの効果があるとされている．

高等学校学習指導要領では，『共通教科情報科では，よってデータの統計処理や活用の領域についても，ピクト「情報に関する科学的な見方・考え方」を「事象を，情報グラムと組み合わせた授業設計や実践の報告が望まれる．とその結び付きとして捉え，情報技術の適切かつ効果的なそこで，我々はピクトグラムを構成素とするピクトグラ活用（プログラミング，モデル化とシミュレーションを行

フ生成アプリケーションの開発を進めている [8]. ピクトグ

ったり情報デザインを適用したりすること等）により，新ラフは，ピクトグラムと同義で使用されることもあるが，たな情報に再構成すること」であると整理されている．』

イラストやシンボルを構成素とする統計図表のことをいう．

とある[2]．

文献[8]では，数量の概念の学習など小学校での学習内容に

第 3 著者は，ピクトグラムの作成を通じて問題解決，情関する機能を中心に実装した．今回高等学校情報科で学習

報デザイン，プログラミングを横断的に扱える統合アプリ

するクエリによるデータ操作や，WebAPI などの内容に関ケーション「ピクトグラミング」シリーズを公開しているする機能をいくつか追加した アプリケーション「ピクトグ[3]．また第 2 著者は，これを用いたピクトグラム制作実習ラフィング (Pictographing)」を提案する．の実践事例を報告している[4]．
ピクトグラムが情報デザイン領域に限定されず，プログ

以下 2 章で，アプリケーションの概要について説明し，3 章で今回追加した機能を説明する． 4 章でまとめる．

ラミング，モデル化とシミュレーション等の単元と有機的に関連すれば，情報技術の適切かつ効果的に活用により新たな情報に再構成する手段となり得ると考えられるからである．

2．ピクトグラフ生成アプリケーション「ピクトグラフィング (Pictographing)」「ピクトグラフィング (Pictographing)」は，ピクトグラデータの統計処理や活用に関しても，20 世紀初頭に統計ムに着目した統計図表作成環境である．「ピクトグラフィ

情報の視覚化を目指したアイソタイプ[5]からピクトグラム

ング (Pictographing)」では，学習者が指定する姿勢の人型誕生への歴史的変遷を取り上げつつ関連づけ，ピクトグラピクトグラムや外部から読み込んだピクトグラム画像を，ムを構成素とするインフォグラフィックス[6]を扱うことが用いてピクトグラフを作成する．

図 1 「Pictographing」のスクリーンショット
2.1 画面説明
Web アプリケーションとして実装した1．図 1 に，PC のブラウザで，「Pictographing」にアクセスした際に表示するページのスクリーンショットを示す．
画面は，大きく 3 つの領域で構成している．図 1 において，領域 A はピクトグラフ化したいデータを入力する「データ入力領域」，領域 B は任意の姿勢の人型ピクトグラムを作成できる「人型ピクトグラム作成領域」，領域 C はピクトグラフを出力する「ピクトグラフ出⼒領域」である．

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

領域 A「データ入力領域」では，項目のラベル名を入力する「ラベル名入力ボックス」，項目の数量を入力する「数量入力ボックス」，適用させるピクトグラムを入力する「ピクトグラム反映ボタン」，項目を削除する「項目削除ボタン」，新たな項目を追加する「項目数追加ボタン」，ピクトグラム 1 つ分が表す数量を入力する「単位量入力ボックス」，入力した情報からグラフを作成する「グラフ作成ボタン」，データが記述されたテキストファイルをアップロードする「アップロードボタン」，WebAPI での利用を想定し，ピクトグラフの生成に必要な情報一式をURI 形式で記述したテキストをコピーするための「共有ボタン」，抽出したいデータの項目や条件を入力する「データ操作領域」で構成している．「数量入力ボックス」および「単位量入力ボックス」は整数，小数表記に対応している．なお，負数は入力できない仕様である．項目数追加ボタンを押下すると新たな項目を追加する．項目ごとに配置している「項目削除ボタン」を押下するとその項目を削除する．領域 A「データ入力領域」のピクトグラフ作成に使用する各項目のピクトグラムは「ピクトグラム反映ボタン」の表示内容を適用する．「ピクトグラム反映ボタン」の任意の位置をクリックすると，次節で示す，領域 B「ピクトグラム作成領域」の「ピクトグラム表示キャンバス」の表示内容を反映する．人型ピクトグラムの作成方法は次

図 2 領域 A「データ入力領域」の構成の節で述べる．領域 A「データ入力領域」の入力作業が完了し，「グラフ作成ボタン」を押下すると，領域 C「ピクトグラフ出力領域」にピクトグラフを出力する． なお，

1

https://pictogramming.org のサイトからアクセスできる．

「アップロードボタン」，「共有ボタン」，「データ操作た人型ピクトグラムを呼び出す「ボタン群」，各部位の角領域」の説明は第 3 章で述べる．

度を入力する 9 個の「角度入力ボックス」で構成していピクトグラフに表示するピクトグラムの出力数は領域 Aる．角度入力ボックスには，「からだ」，「左かた」，「データ入力領域」の「数量入力ボックス」に入力された「左ひじ」，「左また」，「左ひざ」，「右かた」，「右値（以下，数量）と「単位量入力ボックス」に入力されたひじ」，「右また」，「右ひざ」というラベルを付与して値（以下，単位量）から決定する． まず，数量を単位量でいる．直感的に入力できるよう，人型ピクトグラムの右半割った値の整数部の数だけ，すべて黒色で塗りつぶしたピ

身を操作するボックスは「ピクトグラム表示キャンバス」

クトグラムを出力する．小数部は，ピクトグラムの左端かの右側に，左半身を操作するボックスは左側に配置していら小数部の値の比率だけ黒で塗りつぶし，残りを灰色で塗る．直立状態の人体は上から肩関節，肘関節，股関節，膝りつぶす．図 1 の領域 C「ピクトグラフ出力領域」におけ関節となっているため，入力ボックスも同様に上から「かる「走って通学」の項目は，数量を 382，単位量を 100 とた」「ひじ」「また」「ひざ」といった順に配置していしている．数量を単位量で割ったとき，整数部は 3，小数る．

部は 0.82 であるため，すべて黒色で塗りつぶしたピクトグ「角度入力ボックス」には度数法による角度を入力する．

ラムを 3 個，左から 82%のみ黒で塗りつぶされたピクトグ

正の数であれば反時計回りに，負の数であれば時計回りに，ラムを 1 個表示している．単位量の値をピクトグラフ右上入力された角度だけ回転する．「角度入力ボックス」に角に表示する．

度を入力すると，入力値に応じて随時人型ピクトグラムの単位量が入力されていない場合，ピクトグラフから各項目の数量が認識しやすい構図になるように，単位量を自動的に設定する．

姿勢を反映する．
「向き決定ラジオボタン」によって，人型ピクトグラムの向きを「正面」，「側面」の 2 通りから選択でき，ISOまた，領域 A「データ入力領域」の「共有ボタン」を押3864 付録で提示されている正面，側面用デザインの人型ピ

下するとポップアップウィンドウを開き，データ入力されクトグラムを表示する．また，向きが「正面」の状態でた内容をテキスト形式のファイルとしてダウンロードでき「からだ」以外のすべての角度が 0 と入力されている場合る．出力したテキスト形式のファイルを領域 A「データ入は ISO 3864 付録で提示されている正面直立用デザインの人力領域」の「アップロードボタン」を押下し，ファイルを型ピクトグラムを表示する．

読み込むと，自動的にデータを入力し，対応するピクトグラフを表示する．

作成した人型ピクトグラムは保存できる．「保存ボタン」を押下すると，「ピクトグラム表示キャンバス」に描かれている姿勢情報をデータベースに保存する．データベ

2.3 人型ピクトグラム作成領域
領域 B「人型ピクトグラム作成領域」のスクリーンショットを図 3 に示す．

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

図 3 領域 B「人型ピクトグラム作成領域」の構成セージを表示し，削除確認を行う．確認画面で「OK」を押下すると削除する仕様である．保存した人型ピクトグラ

領域 B「人型ピクトグラム作成領域」はピクトグラムをムの データはセッションを終了しても，同一 PC の同一ブ表示する「ピクトグラム表示キャンバス」，人型ピクトグ

ラウザであればウェブストレージに保存しているため引きラムの向きを選択する「向き決定ラジオボタン」，キャン続き使用できる．

バスに表示された姿勢を保存する「保存ボタン」，保存しなお，ピクトグラフに使用するアイコンは任意の画像を示する．並び順は大きい順に並べる」という条件を入力し使用できる．「画像選択ボタン」を押下すると，ファイルており，アプリケーション内部では対応する SQL に変換を選択するダイアログボックスが表示される．そして，画されて処理される．デフォルトでは，名前と画像のカラム像形式のファイルを選択すると，ピクトグラム表示キャンが表示されるが，今回の場合，処理の結果，図 4 の下部にバスに選択した画像が表示される．人型ピクトグラムと同示すように条件に基づいた形式にピクトグラフが変更され様に，領域 A「データ入力領域」のピクトグラム反映ボタているのがわかる．

ンを押下するとピクトグラム表示キャンバスに表示してい3.2 WebAPI 経由でのアクセスによるピクトグラフ生成機
能る画像を反映する．

3．追加機能高等学校情報科の学習内容に関して追加した機能を説明する．

パラメータが付与された URL で Pictographing のサイトにアクセスすると，指定されたピクトグラフが生成される．
つまりピクトグラフ生成 Web サービスの機能を追加した．
URL に含めることができるパラメタの一覧を表 2 に示す．

3.1 データベース操作機能「データ操作領域」では生成されるピクトグラフの表示

表 2 指定できる URL パラメータ
属性名

値の仕様

カラムの指定や，条件を満たすレコードのみの表示など，json

入力データ群をデータベースとみなし，データベース操作

uni

アイテムの名前，アイテムの数，アイコンの情報を含む JSON データ単位量の値に相当する文字列を設定できる．これにより，ピクトグラiframe

値が"on"ならばピクトグラフのみ表示

フの出力をカスタマイズできる．この際の単位量は自動的level

使用できる機能を指定に計算する．表示するカラム，条件などは，複数のプルダウンとテキスト入力により表現する．アプリケーション内部ではこれらの値から，対応する SQL を発行し，処理する．長瀧らは，SQL に相当する構文を日本語で表記してデータベース操作の学習が可能なオンライン学習教材を開発し，公開しており，その有効性を評価している[10]．本ア
プリケーションでもそれに倣い，カラム名，およびデータの数量の平均値，最大値，最小値などの関数の入力と条件文や値の昇順や降順での並び替えに相当する日本語ベースの入力をサポートしている．
図 1 に示しているピクトグラフの情報に対して，「データ操作領域」に条件を入力してピクトグラフを生成した例
を図 4 に示す．

json 属性値が指定されている場合は，その内容を領域 A「データ入力領域」に自動入力する．uni 属性値が指定されている場合は，その値を「単位量入力ボックス」に入力する．iframe 属性値が"on"になっている場合は，他の Webページに埋め込まれて表示されることを想定した，「ピクトグラフ出力領域」のみを表示する．そうでない場合は，図 1 に示した全領域を表示する．高等学校情報科での授業利用を想定する場合，個々の授業の目的とする学習単元に応じて，利用可能な機能をカスタマイズできるのが望まし
い．そのために level 属性が指定可能である．level 属性値の指定による機能の対応を表 3 に示す．属性値は 1 から 3 の数字で指定し，level 属性値が指定されていない場合は，１が指定されているものとする．属性値が 1 または 2 の場合，「情報デザイン」領域での使用を，属性値が 3 の場合，「データの統計処理や活用」領域での使用を想定している．
表 3 level 属性値と利用可能な機能の対応
属性値
機能

図 4 「データ操作領域」に条件を入力して生成した例
図 4 の上部に表示しているのは「データ操作領域」である．「数が 300 以上であるレコードの名前，画像，数を表

12

3

データの情報を含む URL の取得機能

×

◯

◯

iframe 要素の取得機能

×

×

◯

データのテキスト形式でのダウンロード機能

××◯

データのテキスト形式でのアップロード機能

××◯

ローカル画像の選択機能

×◯◯

SQL による生成ピクトグラフのカスタマイズ機能

××◯

表 3 の機能で，「データの情報を含む URL の生成機能」[7]

ン構築に向けた基礎的研究, デザイン学研究, Vol. 68, No. 2, pp.とは，URL 入力データをパラメータとして付与した URLをアプリケーションから，取得できる機能である．この坂場 寛子: 教育用インフォグラフィックスの制作ガイドライ
59-68 (2021)[8]

高橋伶奈，御家雄一，伊藤一成：人型ピクトグラムを構成

URL を生徒にアクセスさせることより，特定のデータが読素 と す る ピ ク ト グ ラ フ 生 成 ア プ リ ケ ー シ ョ ン 「 Humanみ込まれている状態から実習を開始できる．

Pictograph」の実装，2022 年度情報処理学会関西支部 支部大「iframe 要素の取得機能」とは，URL 入力データをパラメータとして付与した URL およびピクトグラフ領域を切り取った HTML の iframe 要素で記述された文字列をコピーで会(2022)[9]

長瀧寛之，中野由章，野部緑，兼宗 進：データベース操作の学習が可能なオンライン学習教材の提案，情報処理学会
論文誌，Vol.55, No.1, pp.1–12 (2014)

きる機能である．この文字列を他の Web ページの HTML ソ[10] 湯浅将英，田村俊貴，片上大輔，大村英史，小林一樹，田ースの特定領域に挿入することで，本 Web サービスで生成

中貴紘：ネット上の賛否表示へのピクトグラフ利用に向けされる「ピクトグラフ出力領域」のみを埋め込むことができる． WebAPI の学習単元での使用を想定している．

4．まとめと今後の展望
ピクトグラムを構成素とするピクトグラフ生成アプリケーション「ピクトグラフィング(Pictographing)」について，高等学校情報科の学習内容に関する機能をいくつか追加した．
今後は，授業での利活用や評価実験を行い，本アプリケーションの有効性を検証する．湯浅らはピクトグラフで用いるアイコンの種類や配置によって，意見変容や他者想起への影響する結果が得られたとしている[10]．本アプリケーションについても，ピクトグラムに特化したピクトグラ
フの特徴や意義についても評価，分析する予定である．
謝辞

本研究は JSPS 科研費 21H03560 の助成を受けたものです．
また，本研究は，青山学院大学総合研究所 基盤研究強化支援推進プログラムの支援を受けたものです．

参考文献
[1]

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

[2]

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

[3]

[4]

[5]
[6]

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

た基礎検討，ヒューマンインタフェース学会論文誌
Vol.183,pp.235-248(2016)