「問題解決を情報デザインで行う授業実践」
第15回全国高等学校情報教育研究会全国大会（オンライン大会）
2022/8/10

神奈川県立横浜国際高等学校
情報科 鎌田高徳

神奈川大学
経営学部 飯塚重善
1自己紹介
氏名：鎌田高徳（かまだたかなり）
出身：宮崎県出身 神奈川県在住
研究室：関西大学大学院（黒上研究室）
教職歴（教科情報採用13年目）

この画像は東京都立
若葉総合高等学校の山本先生に描いて貰いました• 神奈川県立川崎高等学校（５年）• 神奈川県立茅ケ崎西浜高等学校（7年）プログラミング教育研究推進指定校• 神奈川県立横浜国際高等学校（国際科・国際バカロレアコース）• 神奈川大学教科教育法（情報）非常勤講師（５年前より）活動等• かんき出版 「高校の情報Ⅰが１冊でしっかりわかる本」 著 鎌田高徳 監修 鹿野利春
• 文科省 高等学校情報科「情報Ⅰ」「情報Ⅱ」教員研修用教材、日文 情報Ⅰ情報Ⅱ教科書執筆• 活動の詳細はWebサイトにhttps://sites.google.com/site/johoeportfolio/home 2本日発表の教材はすべて公開しています→話を聞いただけでは明日の授業は変わらない

情報科eポートフォリオでも検索したらでてきます3
https://sites.google.com/site/johoeportfolio/home/kyozai?authuser=0

伝えたいこと
情報Ⅰの問題解決は生徒が授業で学んだ内容を活用し実生活の問題解決に取り組ませる

発表の流れ（１）情報Ⅰは問題解決までしっかりとやる（２）HCDを取り入れた情報デザインの授業設計（３）実際に問題解決に取り組んでみた

情報Ⅰの構造は問題解決を行うために情報デザイン、プログラミング、データの活用をツールとして活用する• アシアル情報教育研究所オンラインセミナー「高等学校『情報科』事例セミナー ～情報技術を活用した問題の発見・解決～」
京都精華大学 鹿野利春教授の発表資料より引用
https://edtechzine.jp/article/detail/5817

6＋＝問題解決の実行＋
ガチャを引くかどうか＝問題解決の実行

ガチャの当選確率を可視化
7１．問題を発見する

東洋経済オンライン 25年に共通テスト化｢情報Ⅰ｣を社会人は解けるか https://toyokeizai.net/articles/-/592519

8

２．問題解決法を考える

東洋経済オンライン 25年に共通テスト化｢情報Ⅰ｣を社会人は解けるか https://toyokeizai.net/articles/-/592519

9３．問題解決法を実行する

東洋経済オンライン 25年に共通テスト化｢情報Ⅰ｣を社会人は解けるか https://toyokeizai.net/articles/-/592519

10４．問題を解決する

東洋経済オンライン 25年に共通テスト化｢情報Ⅰ｣を社会人は解けるか https://toyokeizai.net/articles/-/592519

11（現状）情報Ⅰで生徒が発見したアイデアで問題解決を行いたい（課題）しっかりと問題を解決するにはユーザーについての調査が必要

発表の流れ（１）情報Ⅰは問題解決までしっかりとやる（２）HCDを取り入れた情報デザインの授業設計（３）実際に問題解決に取り組んでみた神奈川大学HCD（人間中心設計）専門家の飯塚准教授と議論して作成→初めて体系的にできたHCD（人間中心設計）の似た用語にUCD（ユーザー中心設計）があるがHCDの方がよりユーザーに着目している→HCDのねらいは、苦い経験を少なくしうれしい経験を豊かにすることである。
14

矢部先生、武善先生の情報デザインのUIUXの実践でユーザー理解について学ぶ先行事例を参考女子高校生が観察してみた。 神奈川県情報部会実践事例報告会2017 横浜共立学園中学・高等学校
http://www.johobukai.net/171226data/yabe.pdf

矢部一弘
15

自分の学校に入りたい中学生の簡易ペルソナの制作を通してユーザー理解を行う

情報I・IIの情報コンテンツ制作に向け簡易ペルソナ作成してみた
鎌田 https://www.wakuwaku-catch.net/jirei21169/

神奈川県情報部会実践事例報告会202016

「良いデザインは、見ただけで何ができるか、どう動くか分かる。」
ユニバーサルデザインの提唱者 ドナルド・ノーマン博士「誰のためのデザイン？」新曜社、初版1990年

問題解決の題材は文化祭→生徒自身が作り手（サービス提供側）となりユーザー（客）でもあり調査しやすいから

18

発表の流れ（１）情報Ⅰは問題解決までしっかりとやる（２）HCDを取り入れた情報デザインの授業設計（３）実際に問題解決に取り組んでみた文化祭の情報デザインの演習の流れ（夏期講習で６時間分やってみた）
１．情報デザイン（抽象化・可視化・構造化）の演習
２．ユーザー中心ではないデザインとは？
３．文化祭のサービスについてブレストし、アイデアシートでまとめる
４．文化祭参加者の簡易ペルソナを作ろう
５．作成した簡易ペルソナをベースに校舎を周り共感マップを作成
６．共感マップをベースにカスタマージャーニーマップを作成
７．ユーザーにとって一番必要なサービスをペーパープロトタイピング
20

１．サービスについてブレストして、アイデアシート作成

４．共感マップよりカスタマージャーニーマップ制作

２．サービスの内容を受けるユーザーの簡易ペルソナ制作

５．ユーザーにとって一番切実な問題を解決する情報デザインのプロトタイプ

３．簡易ペルソナの視点で校舎を周り共感マップ制作

６．プロトタイプした
情報デザインをどう評価するのか検討する21

１．情報デザイン（抽象化・可視化・構造化）の演習

22ゲームボタンのデザインの構造化

事例の詳細は河合塾の記事を参照 ゲームのUI改善を通して学ぶユーザビリティ～プログラミングで学ぶ情報デザイン
23
https://www.wakuwaku-catch.net/jirei21193/

２．ユーザー中心ではない設計について案内板から考えさせる

24

情報デザインにおいて調査と評価は重要→誰のためのデザインかを考えさせる

25

３．文化祭のサービスについてブレストし、アイデアシートでまとめる

26

ユーザーを調査する前にどんなサービスを提供できるか想像しないと調査が厳しい→ 〇カレー屋をしたい ×飲食店をしたい

・文化祭の時あったらいいなというもののアイディアシート、これがあると自分の考えがまとまる。（生徒A）
・詳しくアイデアを考えた。ユーザーとか、考えるのが大切。 （生徒B）27

４．文化祭参加者の簡易ペルソナを作ろう①属性（年齢や性別、同居家族の有無、学校までの交通手段やYIS文化祭に興味を持つ要因などを書く）②ニーズやゴール（そのペルソナの文化祭へのニーズやゴールを簡単にまとめたものを書く）③背景や行動（ペルソナの属性がニーズやゴールにどのように結びついているかを書く）
28④顔と名前（書くのは最後にする、絵は拘らずに簡単に描く。個人であることを演出するのに必要）実際の授業ではペルソナを先生側で作成しグループ毎に配布する方法もある（時間短縮のため）

YIS生の友達のペルソナ

YISに興味のある中学生のペルソナ

29

５．作成した簡易ペルソナをベースに校舎を周り共感マップを作成する

ペルソナの活用

YIS生の友達のペルソナグループで１つのペルソナを決め、そのペルソナが文化祭で学校内を周りながらどんなことを感じるか30
共感マップでまとめる

共感マップはペルソナの理解を深める
サービスの向上と改善に効果的
ペルソナの視点で
１．ペルソナが見えているもの
２．ペルソナが聞いてること
３．ペルソナが考えていること
４．ペルソナが言っていること
を校舎を周りながらグループでまとめる。
・改めてみると普段感じないことまでわかり楽しかった。初めて来た人にどのような情報が必要か知れた。（生徒A）
・見て思ったこと、考えていることとかの分類に分けて考えられるのがよかったと感じた。分類に分けることで、解決策が考えやすい。（生徒B）→１ペルソナ１共感マップの原則を守り、グループで作成
31

６．共感マップをベースにカスタマージャーニーマップを作成

32

カスタマージャーニーマップを作成することでペルソナの文化祭での利用シーンや感情を明確化することができる。
共感シートを眺めながら、付箋紙に書き出す
・ステップ（前日・当日・後日の流れ）
・タッチポイント（ペルソナが接触する場所やツール）
・行動（実際にユーザーが取る行動）
・思考（実際にユーザーが考えること）
・感情…感情の波を曲線で表す（ユーザーが感じたこと）
33

カスタマージャーニーマップより文化祭に到着した直後の大きな問題を発見！

・どこでどんな感情を持っているのか可視化し、そのあとのどんなものが必要かの発展につながった。（生徒A）・イベントの前日からそのペルソナの考えていることとか行動について考えてそれと心情を連動させて考えることの大切さに気がつけた。 （生徒B）34

７．ユーザーにとって一番必要なサービスをプロトタイピング（まずは手法を書き出す）

35

ユーザーにとって一番必要なサービスをペーパープロトタイピング

・何が必要か使い手の感情になりできた。見やすいマップも作り方の手順がわかった。（生徒A）
・考えていた問題が起こらないような解決策をかんがえてそれを図に表せた。地図を作っていて思ったのが、精密に詳しく書くよりも明らかにわかるところを省いて簡潔に書くとみやすい(抽象化) （生徒B）36

大池交差点

弘明寺からの大池バス停の降り口（写真２）

六ッ川小入口 信号

Check Point 1
（写真３）

公園

Check Point 2（写真4）
Check Point 3
看板が目印で看板を右
（写真5）

むさしの森
珈琲

バーミヤン

戸塚からの大池バス停の降り口（写真１）
横浜国際正門情報デザインの評価について→生徒のデザインによって適切な評価方法が異なる。そもそもしっかりとした調査ができればしっかりとした評価も生徒自ら行える。

38

伝えたいこと
情報Ⅰの問題解決は生徒が授業で学んだ内容を活用し実生活の問題解決に取り組ませる