義務教育段階での学習内容の確実な定着を図る指導

平 成 22 年 度 県 立 高 等 学 校 教 育 課 程 課 題 研 究 「 情 報 教 育 研 究 班 」
義務教育段階での学習内容の確実な定着を図る指導
光と色の3原色の定着を図る実践事例
-加工したディスプレイケーブルを活用して -
1
研究の目的・ねらい
平 成 25 年 度 入 学 生 か ら 年 次 進 行 で 実 施 さ れ る 高 等 学 校 学 習 指 導 要 領 ( 情 報 ) で は , 情
報科の基礎的な内容が,中学校の技術・家庭科へ移行している。例えば,中学校学習指導
要領解説
技 術 ・ 家 庭 編 ( 平 成 20 年 7 月 , 文 部 科 学 省 ) に は ,「 コ ン ピ ュ ー タ を 構 成 す る
主要な装置と,基本的な情報処理の仕組み,情報をコンピュータで利用するために必要な
ディジタル化の方法について知ることができるようにする 」とあり,高等学校の「社会と
情 報 」,「 情 報 の 科 学 」 の 2 科 目 と ほ ぼ 同 じ 内 容 を 扱 う と 思 わ れ る 。
このことから,ディジタル化の内容の光と色の3原色については,中学校でも学習され
るようになると予測される。そこで,義務教育段階での学習内容の定着を図るために,高
等 学 校 で は ,知 識 の 習 得 と 活 用 を 目 的 と し た 授 業 を 行 う 必 要 が あ る と 考 え ,実 践 を 行 っ た 。
2
実践内容
(1)内容
ア
ねらい
光と色の3原色について,様々な視点から基礎・基本を繰り返し学習させ,知識を
習 得 さ せ る( ウ の 事 例 1 ~ 3 )。さ ら に ,色 覚 異 常 ,加 齢 に よ る 視 界 黄 変 の シ ミ ュレ ー
ションを学習した後,すべての人間への配慮を意識したウェブページの制作実習を行
い , 知 識 を 活 用 で き る よ う に さ せ る ( ウ の 事 例 4 )。
イ
実習に必要な機器,教具
事例1:特になし
事例2:プロジェクタとパソコン3組,小型扇風機,着色した円盤,インクジェッ
ト プ リ ン タ の 詰 め 替 え イ ン ク( C ,M ,Y の 3 色 ),イ ン ク を 混 ぜ る 容 器( 空
のペットボトルなど)
事 例 3:加 工 し た デ ィ ス プ レ イ ケ ー ブ ル( 加 工 方 法 は 資 料 1 ),カ ラ ー 写 真 の 載 っ て
いる新聞,紙パック,裁断前のオフセット印刷物(もし ,手に入れば)
事例4:加工したディスプレイケーブル(事例3で使用したもの)
ウ
実践事例と科目の中の位置づけ
実
践
事
例
科目の中の位置づけ
・社会と情報
知 事例1:混色の図の作成
識 事例2:教師の演示による混色の観察
(1)イ 情 報 の デ ィ ジ タ ル 化
の
習 事例3:産業技術との関連を学ぶ演習や実習 ・情報の科学
得
( 加 工 し た デ ィ ス プ レ イ ケ ー ブ ル の 活 用 ) (1)ア コ ン ピ ュ ー タ と 情 報 処 理
- 1 -
事例4:高齢者や障害者も含めたすべての人 ・社会と情報
間へ配慮したウェブページの制作実
知
識
の
活
用
習
(4)イ 情 報 シ ス テ ム と 人 間
・情報の科学
(3) ア 情 報 通 信 ネ ッ ト ワ ー ク と
問題解決
(4)ア 社 会 の 情 報 化 と 人 間
(2)時間配分
ア
知 識 の 習 得 を 目 的 と し た 実 践 ( 100 分 )
1時間目
時間
生
配分
徒
の
動
き
教師の動き
5分 学習内容
・義 務 教 育 段 階 の 3 原 色 の 知
・光の3原色,色の3原色の復習
識の確認
光 の 3 原 色 → R ,G ,B
色 の 3 原 色 → C ,M ,Y
40 分 学 習 内 容 ( 事 例 1 ): 混 色 の ベ ン 図 の 作 成
・色名の記入と着色を行い,混色の図を完成さ ・混色の説明
せる。
光の混色→加法混色
色の混色→減法混色
図1
光の混色
図2
色の混色
学 習 内 容 ( 事 例 2 ): 演 示 に よ る 混 色 の 観 察
・ 加 法 混 色 の 観 察 ・ ・ ・ 3 台 の プ ロ ジ ェ ク タ に ・プ ロ ジ ェ ク タ に よ る 光 の 混
よる光の混色
色の演示
プロジェクタとコンピ
ュ ー タ を 3 組 ,用 意 す る 。
黒字に赤,緑,青色の円
の図を別々のプロジェク
タで,投影して重ね合わ
せる。
事例1で作成した図と
比較させる。
図3
スクリーン上にできた混色
- 2 -
・中間混色の説明
・中間混色の説明
加法混色の一種,面積比に応じた混色
加 法 混 色 の ひ と つ で ,面
回転混色:コマの回転
積比に応じた中間の色に
併置混色:プリンタの印刷
なる混色である。例とし
ては,回転するコマの混
色 (回 転 混 色 ), 点 描 に よ
る絵やプリンタの薄色の
印 刷 (併 置 混 色 )な ど が あ
る。
(参考文献:東京商工会議
所 編『 カ ラ ー コ ー デ ィ ネ ー シ
ョ ン の 基 礎 』, 東 京 商 工 会 議
所 , 2008)
・中間混色の観察・・・円盤の回転混色
・円盤の回転混色の演示
円盤は,表計算ソフト
で,円グラフを作成し,
着色すると容易に作成で
きる。
図4
円盤による回転混色
・ 減 法 混 色 の 観 察 ・ ・ ・ イ ン ク ジ ェ ッ ト プ リ ン ・イ ン ク ジ ェ ッ ト プ リ ン タ の
タのインクの混色
インクの混色の演示
シ ア ン ,マ ゼ ン タ ,イ エ
ローのインクを水で薄め
ておき,各色を混合。
事例1で作成した図と
比較させる。
図5
プリンタインクの混色
5分 まとめ
・次時の予告
・光の3原色と加法混色
加 法 混 色 ,減 法 混 色 を 利
・色の3原色と減法混色
用して発色している例を
考えておくように指示。
- 3 -
2時間目
時間
生
配分
徒
の
動
き
教師の動き
5分 学習内容
・3原色と混色の復習
・R,G,B→加法混色
・C,M,Y→減法混色
40 分 学 習 内 容( 事 例 3 )
:産 業 技 術 と の 関 連 を 学 ぶ 演
習や実習
・プロジェクタに送信されるデータ
→R,G,Bに色分解した画像
・投影される画像の色→加法混色
・ 演 習 :「 赤 い 果 物 も , 青 く な る !
―ディスプレイケーブルで
送信されるデータは?―」
・液 晶 プ ロ ジ ェ ク タ の 仕 組 み
赤 ,緑 ,青 の 画 像 を 映 す
液晶画面がある。
・演習の事前準備
演習用にディスプレイ
ケーブルを加工してお
く。加工方法は,資料1
参照。
図6
実習用に加工したディスプレイケーブル
① 色分解した画像の観察
・① R と R の 端 子 の み 接 続 し
て ,赤 色 の 分 解 画 像 を 観 察
させる(緑,青色も同様
に )。 R , G , B ど う し を
す べ て 接 続 し て ,元 の 画 像
になることを観察させる。
色分解した画像データが
送られていることを確認
する。
図7.色分解した画像
- 4 -
② 演 習 問 題 1:赤 い 果 物 を 青 色 に す る に は ,・② 生 徒 の 出 し た 意 見 の 通 り
どのように接続したらよいか考えよう!
につないで,正解かどう
か,確認していく。
・正解
送信されているのは,光
の 強 弱 の デ ー タ 。色 の デ ー
タは付加されていない。
図8
赤い果実と青色にした果実
・③ 生 徒 の 出 し た 意 見 の 通 り
③ 演 習 問 題 2:赤 い 果 物 を 黄 色 に す る に は ,
どのように接続したらよいか考えよう!
につないで,正解かどう
か,確認していく。
・正解
Rの信号を,RとGに送
図9
黄色にした果実
る と ,R と G の 光 の 加 法 混
色により,黄色になる。
・カラープリンタの薄い色は,併置混色
薄 い 色 は ,紙 の 白 と イ ン ク の 色 と の 併 置 混 色
・カ ラ ー プ リ ン タ の 発 色 と 併
置混色の関連
減法混色と併置混色の
両方を併用。
・ 実 習 :「 ペ イ ン ト 系 画 像 処 理 ソ フ ト ウ エ ア の
点々の謎?」
① ペイント系画像処理ソフトウエアを起動
② 薄 い 桃 色 (R=255, G=228, B=228)で [塗 り
つぶし]
- 5 -
図 10
JPEG形式の画像
③ ファイルの種類をGIFにして保存
・② の 画 像 と ほ ぼ 同 色 に 見 え
ることを確認させる。
図 11
GIF形式の画像
④ [拡 大 と 縮 小 ]で 拡 大 し , 白 い 部 分 と 桃 色 ・ 白 (R=255 , G=255 , B=255)
の部分のカラーコードを調べる
と 桃 (R=255,G=204,B=204)
の点の併置混色になって
いることを確認させる。
図 12
拡大したGIF形式の画像の一部
・ オ フ セ ッ ト 印 刷 は , 4 色 ( C , M , Y , K ) ・オ フ セ ッ ト 印 刷 と 減 法 混 色
の多色刷り
の関連
C ,M ,Y ,K の 4 色( K
は,キープレートの略。
輪郭などの印刷用の原版
のこと。通常は,黒が用
い ら れ る 。) の 重 ね 刷 り
- 6 -
・ 実 習 :「 ト ン ボ を 探 そ う ! 」
・トンボ
① 新聞や牛乳・ジュースの紙パックを配布
② C,M,Yのトンボを探す
※ 新聞のカラー写真面の欄外,紙パック
の注ぎ口の反対側にある
多色印刷で版の位置合
わせに用いる目印のこ
と。
裁断前のオフセット印
刷 物 ( 図 15) を 出 版 社 ,
印刷屋などから,手に入
れておくとよい。
図 13
図 14
新聞のトンボ
紙パックのトンボ
図 15
裁断前のオフセット
印刷物のトンボ
5分 まとめ
イ
次時の予告
・光の3原色と加法混色
・ウ ェ ブ ペ ー ジ の 内 容 に つ い
・色の3原色と減法混色
て考えてくるように指示
知 識 の 活 用 を 目 的 と し た 実 践 ( 200 分 , 制 作 時 間 の 増 減 は 適 宜 )
3時間目
時間
生
配分
徒
の
動
き
教師の動き
5分 学習内容
・光の3原色の復習
・光の3原色→R,G,B
40 分 学 習 内 容( 事 例 4 ):高 齢 者 や 障 害 者 も 含 め た す
べての人間へ配慮したウ
ェブページの制作実習
・ 実 習 :「 ア ク セ シ ビ リ テ ィ に 配 慮 し た
ウェブページのデザイン」
- 7 -
① 制作するうえでの注意事項の説明
ア.文字の大きさ(弱視対策)
・ア ク セ シ ビ リ テ ィ に 配 慮 す
る に は ,ど の よ う な こ と に
・固定しない
注意をすればよいか調べ
・文字サイズを変更しても可読
させる。
イ .画 像 に 代 替 テ キ ス ト( 読 み 上 げ ソ フ ト
の対応)
・ど の よ う な 画 像 か 説 明( リ ン ク の 設
定がある画像の場合は,リンク先の
説明)
ウ .文 字 と 背 景 の 配 色( 色 覚 異 常 ,加 齢 に
よる視界黄変)
・文字と背景色に明暗の差をつける
(良くない例:白の背景に黄色の文
字)
・色だけで指示をしない
( 良 く な い 例:”は い ”の と き は ● ,”
いいえ”のときは,●をクリック)
色覚異常に対する配慮方法につい
て は ,東 京 の 地 下 鉄 の 路 線 図 の 例( h
ttp://www.shomeido.co.jp/simulat
1.html) も 参 考 に な る 。
② 色覚異常,加齢による視界黄変のシミュ
レーション
ア.色が見える仕組みの説明
網膜の細胞と反応する色
・色が見える仕組みの説明
眼の網膜に光を感じる
L-錐体・・・赤
細胞があり,その中に色
M-錐体・・・緑
を認識する錐体という細
S-錐体・・・青
胞がある。その錐体にL
-錐体,M-錐体,S-
錐体の3種類があり,そ
れぞれが光の3原色の
赤,緑,青に反応する
イ.色覚異常の説明
・色覚異常の説明
多くみられる色覚異常
1型2色覚・・・L-錐体が無いか
感度が弱い
2型2色覚・・・M-錐体が無いか
感度が弱い
- 8 -
色 覚 異 常 に は ,様 々 な タ
イ プ が あ る 。そ の 中 で も ,
L-錐体が無いか感度が
弱い1型2色覚,M-錐
体が無いか感度が弱い2
※ 色覚関連用語については,日本医学会
学用語辞典
医
ウ ェ ブ 版 ( http://jams.med.o
型2色覚が多くみられ
る。
r.jp/dic/colorvision.html ) に 基 づ い て い
る。
ウ.加齢による視界黄変の説明
水晶体の色素沈着
・加 齢 に よ る 視 界 黄 変 の 説 明
老化により目の水晶体
青い光が吸収→網膜に届かない
の色素沈着により,波長
の短い光(青い光)が水
晶体で吸収されて網膜に
届くので,黄色のセロハ
ンを通したように見え
る。
エ .加 工 し た デ ィ ス プ レ イ ケ ー ブ ル を 活 用 ・シ ミ ュ レ ー シ ョ ン し て 見 せ
したシミュレーション
る題材
背景と文字の色の組み
表.色覚異常などのシミュレーション方法
接続図
合わせで見にくくなるよ
うなウェブページを作成
しておき,シミュレーシ
ョンして見せると良い。
1型2色覚
・シ ミ ュ レ ー シ ョ ン で の 注 意
最も異常の程度が強い
見え方を再現している。
2型2色覚
軽度の人をはじめ,全て
の人がこのような色の見
え方をしているわけでは
視界黄変
ない。また,プロジェク
タの色設定によって見え
方が異なる。
5分 まとめ
次時の予告
・アクセシビリティへの配慮
・写 真 や 図 を 入 れ た ウ ェ ブ ペ
文字の大きさ
ージの制作。
代替テキスト
・テ ー マ に つ い て ,知 ら せ て
文字と背景の配色
おく
4,5時間目
時間
生
配分
徒
の
動
き
5分 学習内容
教師の動き
実習についての説明
・アクセシビリティへの配慮の復習
- 9 -
・ア ク セ シ ビ リ テ ィ に 配 慮 し
て制作するように指示
90 分
③ ウェブページの制作
・制 作 時 間 に つ い て は ,適 宜
・写真,図を入れたウェブページの作成
調節
・アクセシビリティに配慮
5分 まとめ
次時の予告
・制作したファイルをサーバに提出
・評価を実施
6時間目
時間
生
配分
徒
の
動
き
5分 学習内容
・評 価 の 観 点 は ,① の 注 意 事
評価の観点
35 分
教師の動き
項に基づく。
④ 相互・自己評価
・相 互 評 価 は ,良 い 点 ,悪 い
制作したウェブページの相互・自己評
価を行う。
点のどちらも挙げるよう
にさせる。
・自 己 評 価 で は ,改 善 す る 点
も考えさせる。
10 分 シ ミ ュ レ ー シ ョ ン の 観 察
生徒の制作物をいくつか選
び,シミュレーションする。
発展課題
通 学 経 路 や 校 内 で 目 に す る 標 識 ,看 板 ,案 内 図 な ど を ビ デ オ 撮 影 し て ,シ ミ ュ
レ ー シ ョ ン し ,高 齢 者 や 障 害 者 も 含 め た す べ て の 人 間 へ の 配 慮 が な さ れ て い る か
確かめ,改善方法を考えてみよう。
(3)観点別評価基準
評 価 の 観 点 に つ い て は ,「 小 学 校 , 中 学 校 , 高 等 学 校 及 び 特 別 支 援 学 校 等 に お け る 児
童生徒の学習評価及び指導要録の改善等について」
( 文 部 科 学 省 ,平 成 22 年 5 月 11 日 )
の【別紙6】各教科の評価の観点及びその趣旨(高等学校及び特別支援学校高等部)
( http://www.mext.go.jp/component/b_menu/nc/__icsFiles/afieldfile/2010/05/13/
1292899_2.pdf) に 基 づ い た 。
時
学習内容および活動
間
(指導上の留意点)
観点別評価内容
- 10 -
関
心
意
欲
態
度
評価基準
評価の
との関連
方法
思
考
判
断
表
現
技
能
知
発
識
表
理
内
解
容
提
出
物
の
内
容
授
業
態
度
1
時
間
目
2
時
間
目
光 の 3 原 色 ,色 の 3 原 色 の
正 し く ,作 成 す る こ と
混色の図を作成する
ができたか
演 示 を 観 察 し な が ら ,混 色
混色の図を参照しな
に よ り ,何 色 が で き る か 考
がら,考えることがで
えることができる
きたか
コンピュータからプロジ
演 習 問 題 1 ,2 に つ い
ェ ク タ に ,R ,G ,B の 画
て ,自 分 の 考 え を 発 表
像データが送信されてい
することができたか
○
○
○
○
○
○
○
○
○
○
○
○
○
○
ることを認識する
プリンタやオフセット印
実 習 に ,積 極 的 に 取 り
刷 で ,中 間 混 色 や 減 法 混 色
組んだか
が利用されていることを
○
認識する
3
時
間
目
アクセシビリティに配慮
インターネットなど
す る に は ,ど の よ う な こ と
を活用して調べるこ
に注意をすればよいか調
とができたか
○
べる
色 覚 異 常 ,加 齢 に よ る 視 界
シミュレーションに
黄変などに配慮する必要
興 味 を 持 ち ,目 の 構 造
性を認識する
と関連付けて理解で
○
○
○
きたか
4
,
5
時
間
目
アクセシビリティに配慮
アクセシビリティに
したウェブページの制作
配慮したウェブペー
を行う
ジを制作することが
○
○
○
○
できたか
著作権に配慮して制作を
情報発信に伴う責任
行う
を 意 識 し て ,制 作 物 を
作ったか
相互評価を行う
評価の観点に基づき,
正当な評価を行うこ
6
時
間
目
○
○
とができたか
自己評価を行う
改善点などについて,
提案することができ
たか
- 11 -
○
○
3
まとめ及び考察
事例の中のいくつかを,授業に活用していただければよいと思う 。光や色の3原色につ
いては,ディジタル化の仕組み等の授業で取り扱うだけでなく,ペイントで絵を作成する
実習,制作物をプリンタで印刷するとき,スライドを制作する実習など,様々な場面で学
習させることで,効果的に定着できると思う。
参考文献と参考URL
「 カ ラ ー コ ー デ ィ ネ ー シ ョ ン の 基 礎 」 東 京 商 工 会 議 所 編 , 東 京 商 工 会 議 所 , 2008
「色覚に障害がある人の見え方のシミュレーション」
http://www.shomeido.co.jp/simulat1.html
「日本医学会
医学用語辞典
WEB版」
http://jams.med.or.jp/dic/colorvision.html
- 12 -