イメージ化を図るWeb教材の作成 －中学校数学における「図形」領域において－ 四国中央市立川之江北中学校 １ 教諭 河上 賢治 研究の目的 高度情報通信ネットワーク社会の進展に伴い、情報技術を学習の中で有効に利用することが求め られている。ハードウェアの整備も加速し、ネットワークにつながったコンピュータの各教室での 利用は目前になっている。しかし、実際にはW e bブラウジングや既成の教材に依存することが多く 、生徒個々の状況や授業の中でコンピュータの特性を十分に生かせる教材は多くない。 中学校の学習においては、小学校での操作活動の経験を基に、抽象化した事象を取り扱うことが 多くなる。特に、数学における「図形」領域は、小学校の算数における具体物の操作から、抽象化 への転換を図る重要な領域である。抽象化を図るためには図形に対するイメージ化が必要である。 図形に対する経験や理解が十分でない生徒にとっては、図形に対するイメージ化を図るための手段 としてコンピュータの画面上での操作活動は、有効であると考える。 そこで、コンピュータの視覚効果を生かし、画面上での操作活動により、生徒の図形に対するイ メージ化を図るW e b教材を作成するとともに、その効果的な活用について研究することとした。 ２ 研究の内容 (1) 文献研究 ① デジタル教材やネットワーク活用について インターネットで「数学 Web 教材作成」で検索すると、Javaなどのプログラム言語で作 成された教材や研究報告が数多く見つかった。また、数学の概念をイメージ化するようなデジ タルコンテンツも多く公開されている。W e b教材及び動的な教材に関する研究について調べて みると、動画等のマルチメディアの活用やプレゼンテーションソフト、ホームページ作成支援 ソフトの活用など、様々な取組が紹介されていることが分かった。 ② 各教科において、イメージ化を図る教材に適した内容や分野について 『新「情報教育に関する手引」』には、各学校段階における情報教育の在り方ということで 基本的な考え方と配慮事項について述べられている。『中学校学習指導要領総則』にも、各教 科等の指導にあたってコンピュータ等を積極的に活用するように述べられている。美術科では 「表現」に関する事項で、ビデオやコンピュータを含めた「映像メディアで効果的に美しく表 現し、発表・交流したりすること」とあり、さらには、社会科、数学科、理科では「資料の収 集、処理や発表、数値計算や観察、実験などでコンピュータや情報通信ネットワークを効果的 に活用すること」としている。 また、算数・数学でインターネット上で公開されている教材には、関数や図形の変化の様子 をシミュレーションで表現するものが多い。「図形」領域、「関数」領域での学習においては コンピュータを活用し、学習内容を視覚的にとらえイメージ化することで、効果が得られると いうことがよく分かった。 (2) 動的な教材の作成に関する調査・検討 ① コンピュータの画面上で利用したい操作について 生徒は、小学校での学習や日常生活の中で、図形を「ずらす」「まわす」「裏返す」「重ね る」の操作を自然に行っており、これらの操作によって形や大きさが変わらないことを知って いる。この経験を生かし、この四つの操作が、コンピュータの画面上で利用できないかと考え た。この操作活動を組み合わせることで、図形を移動させたり合同を確かめたりすることがで き、それを応用し様々な問題に取り組めるのではないかと考えた。 ② W e bページ上で利用できる視覚効果について 先行研究やインターネットを参考に、図形を「ずらす」「まわす」「裏返す」「重ねる」と いう四つの操作がコンピュータの画面上で利用できないか調査した。その結果、JavaやJavaSc ript、VBScriptなどのプログラム言語で作成したソフトウェアは、W e b上で動作することが分 かった。また、それらのソフトウェアに対応したW e bページ作成支援ソフトなど複数のソフト ウェアを組み合わせることで、W e bページ上での表現が可能であることを確認した。 ウ ネットワーク上で利用する際の問題点 ネットワーク利用上の問題点を検討した結果、大きく二つの問題点があることが分かった。 一つ目は、校内におけるハードウェア等の環境面である。コンピュータ室はもちろんのこと、 校内のネットワーク化がなされ、各教室から利用が可能であるかどうかである。また、通信速 度やコンピュータの性能の問題で、コンテンツが表示できないというような問題点も考えられ る。二つ目は、セキュリティ上の問題である。教材を使用する上で、個人情報の保護が重要で ある。これらのことを考慮してW e b教材を作成していかなければならない。 (3) 動的な効果を重視した教材の作成に利用するソフトウェアの検討 既存のソフトウェアで、動的な効果を重視した教材の作成に利用できないか、数種類のソフト ウェアを検討し、コンテンツのサンプル作成に用いるソフトウェアを選定した。 ① W e bページ作成支援ソフト W e bページ作成支援ソフトの中から、３種類のソフトウェアを選び、比較検討を行った。 FrontPage2003は、Officeアプリケーションと共通の操作性でWindowsとの親和性もよい。 Ninja2002は面倒な編集作業が自動化できる便利な機能がある。ホームページビルダー10は、 初心者から上級者のそれぞれに対応した設定ができ、インタラクティブなJavaアプレットにも 対応している。W e bアニメーターというアニメーションG I F作成ツールをはじめ、ツールや素 材が豊富である。以上のことを検討した結果、コンテンツのサンプル作成にホームページビル ダー10を使用することとした。 ② プレゼンテーションソフト プレゼンテーションソフトの中から３種類のソフトウェアを選び、比較検討した。日本でプ レゼンテーションソフトの分野のシェアは、90％以上Microsoft社のPowerPointが占めている。 豊富なアニメーション効果やテンプレートがあり、動画との組合せもできる。授業提示資料と して、教材化されているものも多い。超五感プレゼンやImP ressというソフトウェアもあるが 機能面で十分とは言えない。以上のことから、コンテンツのサンプル作成にPowerPointを使用 することとした。 ③ W e bコンテンツ作成ソフト W e bコンテンツ作成ソフトは、多岐にわたって開発されている。その中から主な２種類のソ いうビデオ、オーディオ、３ ｜ フトウェアを選び比較検討を行った。Microsoft社には、E x p r e s s i o nInteractive Designerと Ｄコンテンツ、アニメーションなどのメディア要素を組み合わ せることができるソフトウェアがある。また、MacroMedia社では、JavaScriptによく似た F l a s hというW e bコンテンツ作成ソフトがある。このソフトは、もともとはアニメーション作 成ソフトであるが、ActionScriptというScript言語を用いることで、多機能な動作を可能にし ゲーム作成などにも使われている。プログラム言語についてあまり知識がなくても活用しやす いということで、コンテンツのサンプル作成にF l a s hを使用することとした。 (4) コンテンツのサンプルの作成及び検証 それぞれのソフトウェアの機能を調べ、以下のコンテンツのサンプルを作成し、視覚効果やそ の動作について検証した。 ① 図形の平行移動 パワーポイントでは、スライドを数多く用意し、図形を動かさなければならない。また、ア ニメーション効果の機能の中の「軌跡」という機能を使えば、動きが滑らかなアニメーション を作成できる。また、ホームページ・ビルダー10では、付属のW e bアニメーターというアニメ ーションG I F作成ツールを使うと、画像を何枚か組み合わせてアニメーションを作成すること ができる。ただ、自由に場面を停止させられないのが大きな難点である。F l a s hでは、モーシ ョントゥイーンという機能を使えば、移動前と移動後の画像を組み合わせることで、動きの滑 らかなアニメーションを作成でき、動作スピードも調整できる。ActionScriptといわれるScri pt言語を利用することで、マウスの動きに合わせて自由に図形を平行移動させられることも分 かった。 ② 図形の回転移動 パワーポイントでは、図形を回転させようとすると、図形自身が回転してしまい、回転の中 心の設定が難しい。同じ図形をコピーし1 8 0度回転移動させ、その図形を透明色にしグループ 化するという設定をすれば、回転の中心を任意に指定して、回転させることができた。また、 W e bアニメーターでも同様にして、画像を組み合わせて回転の中心を直線の交点になるように 設定し、アニメーションG I Fを作成することで回転移動を表現できた。F l a s hでは、次の三つ の方法で作成できる。一つ目は、PowerPointやW e bアニメーターと同様にアニメーションを作 成することである。二つ目は、マウスの動きに合わせて回転させるActionScriptを利用する方 法である。画面上におけるマウスの座標とその図形の基準点との角度を計算し、その角度を一 定に保つことで、マウスの動きに合わせて図形が回転するようなScriptを作成した。三つ目は ボタンアクションといわれるActionScriptを使うことである。ボタンを押すことで、1 8 0度の 回転移動を実行することができる。 ③ 図形の対称移動 パワーポイントでは、図形の反転を表現す るには、自由変形でｘ座標を少しずつ縮めた り、伸ばしたりするように図形を配置し、複 数枚のスライドを作成しなければならない（ 図１）。また、W e bアニメーターでも同様に 図形を配置した画像を、複数枚用意しなけれ ばならない。F l a s hでは、回転と同様にActi onScriptによるボタンアクションで反転させ ることができる。 ④ 図１ パワーポイントを用いた図形 の対称移動を示すスライド 三角形の合同を示すための重ね合わせ パワーポイントやW e bアニメーターでは、アニメーションで図形を移動し重ね合わせること で合同を示すことができる。F l a s hでは、アニメーションで合同を示すだけでなく、ActionSc riptのドロップターゲットというScriptを使い、重なったかどうかを判定することができる。 このActionScriptを利用し、マウス操作によって重なりを判定するコンテンツのサンプルを作 成した。 ⑤ コンテンツのサンプル作成後の検証 表１ アニメーションの比較表 コンテンツのサンプルを作成した結果、どのソ フトウェアも図形が自動的に動くアニメーション での表現は可能であることが分かった（表１）。 平行移動 回転移動 対称移動 重ね合わせ パワーポイント ○ ○ △ ○ ＨＰ・ビルダー ○ ○ ○ ○ Ｆｌａｓｈ ○ ○ ○ ○ また、図形をマウス操作によって任意に動かす という表現は、PowerPointやホームページ・ビル ダーではできないが、F l a s hは、ActionScriptと いうプログラムを使用することで、可能であることが分かった（表２）。さらに、図形をイメ ージさせやすくするためにどのようなコンテンツがよいのか分類した。回転移動や対称移動は アニメーションでゆっくり動きを見せ、平行移動 や重ね合わせなどはマウス操作で何度も確かめる 表２ マウス操作の比較表 平行移動 回転移動 対称移動 重ね合わせ ことで理解しやすくなる。また、生徒が問題を解 決する場面では自らのマウス操作で図形を移動さ パワーポイント × × × × せる方が理解しやすくなり、問題についての考え ＨＰ・ビルダー × × × × Ｆｌａｓｈ ○ ○ △ ○ 方を解説する場面では、アニメーションで解答や 操作を確認できるようにする方が理解しやすい。 このように検証し分析した結果から、コンテンツ の作成には、F l a s hを使用し、W e b教材を作成することとした。 (5) イメージ化を図るW e b教材の作成 ① W e b教材の構成 イメージ化を図るW e b教材を作成するに 当たって中学校２年生の図形領域の学習の スタートとなる「図形の性質の調べ方」の 単元を選んだ。そして指導内容と指導計画 を分析し、アニメーションで解説する内容 とマウス操作によって理解を深める内容と に分類した。この分類を基にして、コンテ ンツの配置を考え、基礎・基本を確認する ページ、操作によって理解を深めるページ 、学習のまとめのページ、発展問題のペー ジと大きく４種類のページ構成にした（図 図２ Web教材の構造図 ２）。この構成を基に、F l a s hによってそ れぞれのコンテンツを作成し、ホームページ・ビルダーを用いてコンテンツを配置し、教材を 作成した。 ② 基礎・基本を確認するページの作成 ア 平行線と角の関係のページ 授業で実際に行われる平行線の書き方を、アニメーシ ョンを用いて解説するページを作成した。３種類の書き 方を示し、平行線と同位角の関係をスムーズにイメージ できるようにした(図３)。 イ 三角形の内角の和が1 8 0度になることを視覚的に理解 できるページ 三角形の内角の和が1 8 0度になることを示すアニメー 図３ 平行線と角のページ ションを作成した(図４)。これは、実際に授業で行うよ うな操作活動を想定し、元の三角形を三つの部分に切り 離し、その三つの角を集めて一直線（1 8 0度）になると いうアニメーションである。 ウ 合同な図形で、辺や角の対応が視覚的に理解できるペ ージ 合同な図形の性質である「対応する線分の長さは等し い」「対応する角の大きさが等しい」ということを図形 を重ね合わせて説明するページを作成した(図５)。合同 な図形が同じ向きに並んでいるときは、どこが重なるの 図４ 三角形の内角の和 のページ か判断するのは簡単であるが、裏返っていたり回転した りしている場合は、どの頂点や辺が重なるのかイメージ しにくい。それを、アニメーションを使って回転させた り裏返したりすることで、合同をイメージしやすい向き に置き直し、合同を示した。 ③ 図形を操作することによって理解を深めるページの作成 ア 平行線と角の関係のページ 平行線に一つの直線が交わってできる同位角や錯角が 等しいことを、確認するページを作成した(図６)。実際 図５ 合同な図形のページ の授業では、三角定規の操作から類推したり、実際に角 の大きさを測って確かめたりするが、コンピュータの画 面上で角の部分をドラッグして平行移動させ重ねるとい う操作を通して、平行線の同位角は等しいということを イメージさせるようにした。この時、角が等しいことを 判定するために、ActionScriptのドロップターゲットと いうプログラムを使った。錯角についてはボタンアクシ ョンで1 8 0度回転移動し、その後ドロップターゲットで 重なりを判定する方法で解説した。 イ 三角形の内角の和、外角のページ 図６ 平行線と角のページ 三角形の内角の和について、実際に角を移動させるこ とで、「内角の和が1 8 0度になること」と「外角はこれ と隣り合わない２つの内角の和に等しい」ということを 理解できるようなページを作成した(図７)。一つ目は底 辺に対して平行な補助線を引き、角をボタンアクション で回転させドラッグすることによって一直線に並べ、「 三角形の内角の和が1 8 0度になること」を確かめた。二 つ目は別の位置に平行線を引き、角を回転移動させ、内 角と外角の性質を確認できるようにした。ここもボタン 図７ 三角形の内角の和 と外角のページ 図８ 三角形の合同条件 のページ アクションを使い、滑らかに回転するようにした。 ウ 三角形の合同条件のページ 三角形の合同条件に合うものを見つけ、重なりを判定 し、合同を示すページを作成した(図８)。直感でこれが 合同であると判断する問題が１種類、合同条件にあうよ うな３種類の問題、裏返して考える問題、回転させて考 える問題の合計６種類の問題を作成した。回転や裏返し については、ボタンを押せば図形がゆっくりと回転した り、または反転するというScriptを取り入れた。図形が 移動するスピードもあまり速いと反転や回転といったイ メージを持ちにくいので、生徒の立場に立って少しゆっ くりとなるように調整した。 ④ 発展問題ページの作成 生徒の多様な考え方、イメージの仕方に対応できるように、アニメーションとプログラムを 組み合わせ、複数の考え方で解くことができるような問題を作成した。アニメーションで問題 を提示し、ヒントボタンを押すと補助線が表示され、角を自由に移動させることができるよう にした。また、解説のページには、その考え方を確認できるように、アニメーションで提示し た（図９）。また、図形の証明問題を穴埋めの形 で作成した。ドロップターゲットというプログラ ムを使用し、多数の語群の中から解答を移動させ て重ねることで、正解・不正解を判定するように した。 ⑤ 学習内容のポイントをまとめるページの作成 学習のポイントをまとめた形で、小テスト形式 の穴埋め問題を作成した。適するものを当てはめ て、それが正解か不正解か判定するものである。 これも、ドロップターゲットを応用したもので、 図９ 発展問題ページ作成画面 それぞれの解答に合うものを判定し、間違ってい れば×を、正解であれば○を表示させた。また、 ホームページ・ビルダー10のテスト作成機能を用いて、確認テストを追加した。さらに、練習 問題プリントをHTML形式で作成し、時間的にゆとりのある生徒が、自主的にプリントアウトし 問題に取り組めるようにした。 (6) 作成した教材の試用と改善 ① 内容の検討と改良 作成したW e b教材を、教育センター内の先生方 に試用してもらい、操作性や内容について意見や 指導を受け、改善した。「何度も操作できて、図 形の動きをイメージしやすいのではないか」「少 人数指導の習熟度別学習で活用してはどうか」と いうような意見や助言をもらった。 また、勤務校で３年生を対象に、復習としてこ の教材を使って授業を行った(図10)。授業後のア ンケートでは、「マウス操作が楽しく、分かりや すかった。」「図形が重ねて見えて、分かりやす 図10 勤務校での教材使用 かった。」「頭の中でイメージできるようになっ た。」などおおむね良好な感想が返ってきた。 ② 操作性の検討と改良 試用の中で、コンテンツの表示方法やアニメーションの動作スピードについての指摘があっ た。また、配色等の統一感を持たせたり、不要なマウス操作を行わなくてもいいようにするな ど不備な点を修正した。さらに、コンピュータによっては、コンテンツが動作しないという問 題点も明らかになった。対策として、動作環境を確認し、正常に動作するように設定するため の、教師用の使用マニュアルを作成した。 ３ まとめと今後の課題 今回の研究を通して、中学校数学の「図形」領域における学習支援教材として、アニメーション や操作活動を通して図形に対するイメージ化を図るW e b教材を作成することができた。また、その 試用を通して、コンピュータの特性を生かした教材が、生徒の興味関心を高め、主体的な学習に効 果的であることが分かった。 今後の課題として、授業での使用を通して内容の充実と操作性を向上させ、１、３年生用のコン テンツを追加していきたい。また、この教材作成のノウハウを基に、他の教科や領域にも生かされ るような応用を考えていきたいと思う。今後も体験や経験を生かしたコンピュータの活用を考え、 実践していきたい。 主な参考文献 ○狩野祐東 『速習Webテクニック ○森功尚・komachan FLASH 8 『おしえて！！FLASH 8 ActionScript 実例サンプル47』 ACTIONSCRIPT』 技術評論社 2006 (株)毎日コミュニケーションズ 2006 ○文部科学省 『情報教育の実践と学校の情報化～新「情報教育活用の手引」～』 2002
© Copyright 2024 Paperzz
