一覧へ 情報Ⅰ (2) 第9回 | ユニバーサルデザイン
情報Ⅰ (2) コミュニケーションと情報デザイン | 第9回

ユニバーサルデザイン

色だけで伝わると思っていたグラフが、ある人には見分けられない。今回は「誰に」を広げる

50分
教師用メモ

準備 教室コードは新しいものにする。「教師」を押す。

時間配分 前回まとめ・目標 4分 / 節1 4 つの言葉 12分 / 節2 色だけで伝わるか 14分 / 節3 身近な UI を直す 14分 / まとめ・自己評価・ふりかえり 6分

教科書: 新編情報Ⅰ 19 ユニバーサルデザイン(p.52)。内容の取扱い(3)「年齢や障害の有無、言語などに関係なく全ての人にとって利用しやすくする工夫」。

この回の評価(指導要領 (2) ア(イ) イ(イ)。ユニバーサルデザイン・ユーザビリティ・アクセシビリティ・シグニファイア。単元設計は 単元設計のページ)

  • 知識・技能 ユニバーサルデザイン・バリアフリー・アクセシビリティ・ユーザビリティを、例で区別して説明している(体験01・まとめ)
  • 思考・判断・表現 色だけに頼らない伝え方を選び(体験02)、身のまわりの機器の UI を使いやすくするアイデアを複数考えている(体験03)
  • 態度 全ての人に使いやすい工夫を、自分の身近なものから探そうとしている(ふりかえり)

ふりかえりの枚の自己評価の分布を見て、「まだ」が多い目標を次回冒頭で拾い直す。

前回のまとめ

抽象化・可視化・構造化 | どれも「誰に・何を」から決まる

捨てる見える形に並べる→誰に・何を

前回の 3 つの技は「自分たちに分かりやすく」だった。今日は「誰に」を広げる。目が見えにくい人、色の見え方が違う人、日本語を読めない人、初めて使う人にも伝わるか

赤と緑で分けたグラフは、全員に伝わっているか

教師用メモ

前回のふりかえり(何を捨てて何を残しているか)を 1 つ読み上げてから進む。

今日の目標

授業の終わりにできるようになること

01
ユニバーサルデザイン・バリアフリー・アクセシビリティ・ユーザビリティを、例で区別して言える
02
色の見え方が違う人にも伝わるように、色だけに頼らない工夫を選べる
03
身のまわりの機器のユーザインタフェースを、使いやすくするアイデアを出せる
01 | 12分
4 つの言葉

身近な例で分ける

02 | 14分
色だけで伝わるか

見え方を切り替えて確かめる

03 | 14分
身近な UI を直す

困る → こうする

SECTION 01

4 つの言葉

段差をなくすのか、最初から段差を作らないのか

建物の入口。左は階段の横に後から付けたスロープ、右は最初から段差のないなだらかな入口。車いすの人とベビーカーの人と高校生が通っている
体験 01

どの言葉の例か

ユニバーサルデザイン=最初から誰でも使えるように設計。バリアフリー=ある障壁を後から取り除く。アクセシビリティ=使えない人を使える状態にする尺度。ユーザビリティ=使える人にとって使いやすいかの尺度。タップして分け、「答え合わせ」

ユニバーサルデザイン = 最初から障壁なしバリアフリー = 障壁を取り除くアクセシビリティ = 使えるかユーザビリティ = 使いやすいか
教師用メモ

進め方(7分) 3 分で答え合わせ。バリアフリーとユニバーサルデザインの違い(後から取り除く/最初から作らない)と、アクセシビリティとユーザビリティの違い(使えるか/使いやすいか)の 2 組で押さえる。

「字幕はアクセシビリティ? ユーザビリティ?」→ 聞こえない人には使える/使えないの問題(アクセシビリティ)。電車で音を出せない人には使いやすさ(ユーザビリティ)。同じ工夫が両方に効く例。目標 01。

まとめ 01

誰でも使えるか、使いやすいか | 2 つの尺度

ユニバーサルデザイン年齢・性別・国籍・能力や障がいの有無によらず、誰もが利用できるように最初から設計する。バリアフリー(障壁を後から取り除く)とは考え方が違う
アクセシビリティ幅広い人々が使えるかの尺度。使えない状態を使える状態にする。文字の拡大、読み上げ、字幕、多言語
ユーザビリティ使える状態のものが使いやすいか・分かりやすいかの尺度。使いにくい状態を使いやすい状態にする。ボタンの大きさ、共通の操作

※ 第1単元の「誰もが使える情報環境」(デジタルデバイド)の答えの一つが、この設計

教師用メモ

目標 01。「〇」が海外では別の意味になることがある(教科書コラム)ように、記号の意味も文化で違う、と一言。

SECTION 02

色だけで伝わるか

赤と緑が同じに見える人は、男性の 20 人に 1 人

同じ路線図を2人の高校生が見ていて、一人には赤と緑の線がはっきり分かれて見え、もう一人には同じ色に見えている
体験 02

見え方を切り替えて、どちらが伝わるか

同じデータの 2 つのグラフ。左は色だけで区別、右は色に加えて模様と文字を付けた。「色の違いが分かりにくい見え方」に切り替えて、どちらが読めるかを確かめる

A | 色だけで区別
運動部 文化部
B | 色 + 模様 + 文字
運動文化運動文化 運動部 文化部(斜線)
教師用メモ

進め方(8分) 切り替える前に「A は読める?」→ 読める。切り替える → A は 4 本の棒が同じ濃さになり区別できない。B は模様と文字で読める。

正確な説明 この切り替えは色を全部なくした模擬(白黒)で、実際の色覚の多様性そのものではない。赤と緑が見分けにくい型は日本人男性の約 5%(20 人に 1 人)、女性の約 0.2%。クラスに 1 人いる計算。

結論 色だけに頼らず、模様・形・文字・位置を足す(カラーユニバーサルデザイン、カラーバリアフリー)。目標 02。

体験 02

色だけに頼っていないか | 身のまわりで

下のうち「色だけで区別している」と思うものを全部押す。押したものは、色以外に何を足せば伝わるかを隣と話す

色だけで区別していると思うもの
教師用メモ

信号機は「位置」(右が赤)でも区別している。路線図は路線名の文字と番号を添える。充電ランプは点滅と点灯で分ける、など。「色を使うな」ではなく「色に足す」が答え。

SECTION 03

身近な UI を直す

押せそうに見えるか、戻れそうに見えるか

券売機の前で操作に迷う人と、その画面を横から見て「ここを大きくすれば」と紙に書き直している高校生
体験 03

使いにくかった機器を、こう直す

券売機、リモコン、アプリ、電子レンジ、学校の機器。使いにくかった場面を一つ思い出し、どう直せば使いやすくなるかを書く。2 組以上出せると強い

使いにくかった機器・場面
こう直す

全員の「困る → 直す」が右に並ぶ。直し方を「大きく」「同じ場所に」「見た目で分かるように」「文字を足す」に分ける

みんなの 困る → 直す
教師用メモ

進め方(10分) 一人で 4 分。読み上げて直し方を分類する。「押せそうに見える」「はみ出しているから続きがあると分かる」が出ればシグニファイア(行動を促す手がかり)。

言葉 ユーザインタフェース(UI)= 利用者とコンピュータの間の入出力の手段。機器が違っても似た操作に共通のルールがあると使いやすい。ユーザエクスペリエンス(UX)= 製品やサービスを通じて得られる体験全体。使いやすさだけでなく、使い心地・印象まで。

評価規準(A)は「アイデアを複数」。2 組目を促す。目標 03。

まとめ 03

UI・UX・シグニファイア | 行動を促す手がかり

ユーザインタフェース(UI)利用者とコンピュータの間の入出力の手段。画面・ボタン・音。機器が違っても共通のルール(戻るは左上、赤は停止)があると使いやすい
ユーザエクスペリエンス(UX)製品やサービスを通じて利用者が得られる体験。使いやすいだけでなく、使い心地・感動・印象まで含む
シグニファイア人に行動を促す手がかり。「一部だけはみ出している」と、続きがあると分かってスクロールする。押せそうに見える形、開けそうに見える取っ手

よい UI は説明が要らない。自分が使えるかではなく、初めての人・使えない人が使えるかで見直す。次回、その人を具体的に決める

教師用メモ

メッセージアプリの吹き出しやスタンプは「会話を促すデザイン」(教科書コラム)。身近な例として。

道具で探す

色だけで区別している所を、一つ見つける

道具で見え方を切り替え、教室や配布物の中で「色だけで区別している所」を 1 つ見つけて出す

ユニバーサルデザイン見え方の違いを模擬して、同じ画面がどう見えるかを比べる
  1. 「この枚で開く」を押す
  2. 条件を切り替える
  3. 色だけで区別している所を 1 つ見つける
この授業のページの中で開く。終わったら「閉じてこの枚に戻る」で戻る
見つけたものを、一文で
みんなの見つけたもの
教師用メモ

進め方 見つけた人から出す。全員に同じ答えを求めない。出てきたものを 2〜3 個読み上げ、共通点を言葉にする。

5分。色だけで区別しない、文字の大きさ、の 2 点に絞る。

道具は外で公開されている Web アプリ。この授業のページの中で開くので、別のページへは移らない。閉じれば、そのままこの枚に戻る。ブラウザの中で動き、入力はこの授業のサーバーには送られない。

今日のまとめ

3つの目標に、自分の操作で答える

01
4 つの言葉 最初から誰でも(ユニバーサルデザイン)/後から障壁を取る(バリアフリー)/使えるか(アクセシビリティ)/使いやすいか(ユーザビリティ)
02
色だけに頼らない 見え方を切り替えると A は読めなかった。模様・形・文字・位置を足す
03
UI を直す 大きく、同じ場所に、押せそうに見える形に、文字を足す。初めての人が使えるかで見直す
自己評価

今日の目標、自分はどこまで

3 つの目標それぞれに、できた/だいたい/まだ、を 1 つ選ぶ。右の帯にクラス全体の分布が出る

今日の目標、自分はどこまで | 1 つずつ選ぶ
014 つの言葉を例で区別して言える
02色だけに頼らない工夫を選べる
03身のまわりの UI を使いやすくするアイデアを出せる
できただいたいまだ
教師用メモ

1 分。「まだ」が多い目標は、次回の冒頭で拾い直す。

ふりかえり

身のまわりの「誰でも使える工夫」を一つ

一文でよい。「〇〇には△△の工夫があって、□□な人も使える」の形

みんなの見つけた工夫
教師用メモ

3 分。次回は「誰に」を一人の人物として決める(ペルソナ)。今日の「使えない人」を具体的な人にする。