e-Learning station
コンテンツ紹介太田泰史，合林亨，玉井文紀，玉井有見，中田隆輔，岸田慎吾，田中聡，松尾大介

概要
e-Learning station では，一般受講者向けにコンテンツを作成しました．資料は大学で行われた公開講座等を元にしたものもありますが，講師の方からの「こういう講座を作りたい」というご要望にお応えしたものもあります．
その場合は講師の方に講座の内容を考えていただき，資料をお借りすることになります．教材作成室では講座の内容・資料をもとにどのような見せ方があるか提案し，講師の方と相談しながら講座を完成させていきます．ここではコンテンツを効果的に公開するための手法等を各講座毎に紹介しています．

山鹿灯籠祭

1

1.3

素材

• プレゼンテーションファイル
コンテンツを作成する資料として講師に準備していただいたプレゼンテーションファイルです．

• 画像
上記講座で使用されたプレゼンテーション資料より抽出しました．

• 動画
上記講座で使用されたプレゼンテーション資料より抽出しました．

• 音声による解説
プレゼンテーション資料を肉付けするかたちで，安田文学部教授による音声解説を録音しました．

1.1

講座概要

1.4

本講座では，山鹿灯龍祭について観光行事，民俗行事目的

1. 素材であるプレゼンテーション資料を生かしたものにすること．の二つの側面から，画像，動画，および音声による解説を交えて学習します．

2. 受講対象である高校生，社会人一般が学習しやすい

1.2

コンテンツにすること．

講師

熊本大学文学部教授

安田宗生

熊本大学文学部助教授

鈴木寛之

3. 受け身で受講するだけではなく，受講者も参加できるコンテンツにすること．
1

1.5

手法

2

石は語る –美里町の歴史探訪–

2.1

講座概要

1. 素材としていただいたプレゼンテーションのイメージを損わないように，HTML 形式でもプレゼンテーションの感覚で画面上部の「次へ」のリンクを押すだけで次々にページを進めていけるような画面にしました．さらに，講座全体を見渡せるように目次を追加しました．

図 1: プレゼンテーションのイメージで作成した HTMLコンテンツ

熊本県下益城郡美里町 (平成 16 年 11 月 1 日

中央町と砥用町が合併) の中央中学校区における金石文 (石に刻まれた歴史的な記録) の調査の中から，肥後細川藩の広域行政組織「手永」制度の長である「惣庄屋」を中心

2. スムーズにテンポ良く学習を進められるように，多に，近世から近代の歴史を紐解きます．

く画像を使用し，1 ページ毎の情報量を少なくました．さらに音声による解説，ところどころに灯籠祭の動画を配置し，理解を助けるように工夫しました．

3. 受講者も気軽に参加できるコンテンツにするために，質問コーナーを設置し，質問や議論の場を提供しま

2.2

講師

熊本大学文学部教授

吉村豊雄

熊本大学文学部助教授

三澤純

した．

2.3

素材

• 動画

2004 年 10 月 5 日に開かれた中央中学校主催の「ふるさと学習会」で撮影したものを利用しています．
この学習会は，中央中学校の全校生徒が合計 18 の班に分かれ，町内の歴史や自然に関するポイントを

図 2: 質問コーナー

歩いて回り，ふるさとへの関心を高める目的で開かれています．研究室に所属する教員・学部生・大学院生 11 名が解説役として参加し，崎元学長もルー

その他に工夫したことは受講後に復習できるように，音声による解説で朗読した文章を テキストとして公開したことです．

トの一部を中学生と共に歩いて参加されました．

• 画像
上記の「ふるさと学習会」で撮影したもの．
• テキスト

講師に講座の流れを考えていただき，内容は研究室に所属する学生に書いていただきました．

2.4

目的

1. 講座の内容から，動画や画像を多めに使って理解を深められるようにすること．

2. HTML でルビをつけました．ルビは Internet Explorer でしか表示されませんが，その他のブラウザ
では漢字の後に ( ) で読み仮名が表示されるようにしました．

2. 名詞で読みづらい漢字があるため，ルビをつけること．
3. テキストの分量が多くても読みやすくすること．

2.5

手法

1. 動画を見ながらテキストを読めるように，フレーム

図 5: 左は Internet Explorer ，右は Mozilla Firefox での表示

で「目次」「動画」「テキスト」に分割しました．

3. 行間を広めにして，テキストの分量が多くても読みやすくしました．(スタイルシート使用)
また，全体のデザインを統一するため，スタイルシー
トを使用しました．

図 3: 左上は動画，左下は目次，右はテキスト

動画は 1 フレームに付き 1 つです．画像は，岩に刻まれた文字を解説する等，大きめの画像を使用する必要があったため，小さい画像をテキストページに埋め込み，クリックすることで大きい画像を別ウインドウに表示するようにしました．(Java script使用)

図 4: 別ウインドウに開かれた画像

特別支援教育・はじめの一歩

3

3.4

目的

1. 各章毎の内容に一貫した流れがないのでデザインや章構成の面を考慮すること．

2. 診断基準とコンテンツを同時に見られるようにすること．

3.5
3.1

手法

本講座は各章別々の講師により作成された素材を利用

講座概要しているので全講座通じて一貫性を持たせることが困難

特別支援教育に関心のある教育関係者および保護者を対象とした講座です．特別支援教育のために必要な知識と技術を，従来の障害児教育の財産を援用しながら，明らかにすることを目指します．

でした．そのため，本講座は特別支援教育に関心のある教育関係者および保護者を受講者に想定しました．

1. 各章が独立しているために，どのような章構成であれば受講者がわかりやすいかも考慮してコンテンツを作成しました．また，デザインを統一しました.

3.2

講師

2. どのような症例に当てはまる子どもなのかをチェックする診断基準は，コンテンツと同時に見ることが「子どもの行動の分析とその支援」

できるように，別ウィンドウを開き表示するように

熊本大学教育学部助教授

しました．

肥後祥治

「子どもの支援にむけた基礎学習の指導と教材開発」
熊本大学教育学部教授

進一鷹「世界の特殊教育の動向と特別支援教育」
国立特殊教育総合研究所

徳永豊「特別支援教育の精神医学的基礎」
熊本大学教育学部教授

緒方明

図 6: 診断基準をクリック「一人ひとりの子どもを生かすための問題解決モデルの可能性」
熊本大学教育学部助教授

干川隆「通常学級で学ぶ聴覚障害児への支援について」
熊本大学教育学部助教授

3.3

古田弘子素材

平成 16 年 1 月 31 日 (土) から 2 月 28 日 (土) まで全 6回開催した「障害児教育の教育実施的課題」講座「特別支援教育はじめの一歩」で使用したプレゼンテーション
ファイル，紙媒体，一太郎等の電子媒体．

図 7: 別ウィンドウで表示すうがく・とーく

4

2. 今回の e-Learning station では，よりよい理解の助けとなるよう，最大公約数を計算する Java Script を作成しました．この Java Script は計算結果を表示するだけでなく，計算する過程も表示し，どのように計算されていくのかを，数字を変えることによって試せるものとなっています．

4.1

講座概要

「貨幣が２種類しかない国の話」「最大公約数について」「分数で表せない長さ」を主題に，学校で学ぶ数学とは一味違った精緻な論理の世界を体験させ，数学の論理展開の面白さを感じてもらうという内容となっています．

4.2

熊本大学理学部講師

4.3

図 8: 最大公約数を求める Java Script

講師
井上尚夫

素材

• 動画
2004 年 3 月に中学生を対象に行った講演会「すうがく・とーく」で用意された資料と，撮影した動画を用いています．

• テキスト・画像

講演会の資料や画像を基に，文章を作成しました．

4.4

目的

1. 数学への興味・関心を引き出すようなコンテンツ作ること．
2. Java Script を用いて更に理解を深めること．

4.5

手法

1. 生活においても身近な税を取り上げて，2 種類のお金の払い方を考えるように設定し興味関心を引き出そうとしています．その後，2 種類の貨幣を変数に置き換えて最大公約数の話を進めています．

いま有明海・八代海が55.5求めているもの手法

1. Microsoft word 文書の原文を基に文書や画像をHTML 形式に書き換えて作成しています．画像は写真，新聞，グラフなど様々用意されていて，受講者が特に見づらいと感じた新聞やグラフの画像はJavaScript を用いて別ウィンドウに表示させるようにしました．その際，画像サイズの変更やウィンドウにスクロールバーを付けるなどして，受講者が見やすいように配慮しました．また Internet Explorer
や Netscape Navigator など受講者がどのブラウザを用いても同じ様に受講できるように配慮しました．

5.1

講座概要

有明・八代海域環境に関して 今、何がおきているのか？ この海域の改善・維持の為に， 何ができるか？ ，何をなすべきか？ を分かり易く解説しています．
図 9: 講座画面

5.2

講師

沿岸域環境科学教育研究センター教授

滝川清

上図の左上に配置されているのが Real Player のインジケータです．その下に配置されているのが各ページの目次となっていて，受講者は同じ講座内で5.3提供された素材• Microsoft word ファイル
「環・阿蘇/有明・八代海の環境保全・修復とブルー・グリーンツーリズム活性化のための知的・人的ネッ

あればどのページにもいけるようにしています．画
像は太線で囲われていてクリックすると拡大されるようになっています．また拡大される画像の下には「クリックすると拡大されます」と文字の色を変えて表示させています．

トワークの構築」に用いられた資料の中から，有明海・八代海の環境保全に焦点をあてた箇所を講師に頂きました．

• 画像

word ファイルのなかで使用されていた写真や新聞の画像を抽出しました．

5.4

目的

1. 受講者に見やすいコンテンツを作成すること

2. より理解を深める為に音声を用いること

2. 受講者の理解をより深めるためにテキストの文章を音声で聞けるように配慮しました．音声は Real

Player 形式で作成していて，各 OS に対応しています．なお，音声の読み上げには，村田幸子氏（ラジオ等で司会，アナウンサーとして活躍中）の全面的な協力を得ました．

干潟のダンサー

6

ハクセンシオマネキ

6.5

手法

1. 動画を見ながらテキストを読めるように，フレームで「目次」「動画」「テキスト」に分割しました．動
画は短いものが多数あるため，1 フレームにつき 1つの動画というわけにいかず，テキストページに再生ボタンを埋め込みました．テキストページの再生
ボタンをクリックすると，動画ページに動画が再生されます．動画には熊本大学総務部総務課の中村直美さんによるナレーションを入れ，より理解しやすくしました．

6.1

講座概要

ハクセンシオマネキの生態や行動を紹介していきます．
また，ハクセンシオマネキだけでなく干潟の役割や，そこで生活する生きものたちの生態や行動を，画像や動画，わかりやすい解説文で学んでいきます．

6.2

講師

図 10: 左上は動画，左下は目次，右はテキスト

熊本大学沿岸域環境科学教育研究センター・教授
逸見泰久

項目によってはテキストと画像のみになるときがあり，その場合は動画フレームをなくしました．

6.3

素材

• 動画・画像

講師がこれまでに撮影された動画・画像から，講座で使うものを選んでいただきました．

• テキスト

講師に講座の構成，内容を考えていただき，それに合う文章も書いていただきました．

6.4

目的

1. 講座の内容から，動画や画像をメインに使って理解を深められるようにすること．
2. 子どもからお年寄りまで楽しく学べること．
3. テキストの分量が多くても読みやすいページにすること．

図 11: 左は目次，右はテキスト

画像は，大きい画像の方がより詳細にカニを見ることができるので，小さい画像をテキストページに埋

7

自分で作ろう!! MY パソコン

7.1

講座概要

め込み，クリックすることで解説付きの大きい画像を別ウインドウに表示するようにしました．(Javascript 使用)

パーツの形で購入したパーソナルコンピュータを組み立て，Windows 等の OS を導入する直前までの流れを画像と動画を交えて解説しています．この講座を受講する
ことで，コンピュータの大まかな構造を学習できます．

図 12: 別ウインドウに開かれた画像

2. 動画，画像を多用することはもちろん，「Back」，「Next」，「Play」のボタンをカニの画像にし，マウスカーソルを乗せるとカニのハサミが動くようにする等，Java Script を使って親しみやすくしました．

7.2

講師

熊本大学工学部教授

7.3

宇佐川毅

素材

• WEB ページ

宇佐川研究室で作成した WEB ページ．

• 動画

上記 WEB ページにて公開されている動画．

• 画像
上記 WEB ページにて公開されている画像．
図 13: 左は通常の画像，右はマウスカーソルが乗ったときの画像• パーツリスト
上記 WEB ページにて作成したコンピュータのパーツのリスト．今回の e-Lerning station で公開するにあたって調査しました．

3. 行間を広めにして，テキストの分量が多くても読みやすくしました．(スタイルシート使用)
また，全体のデザインを統一するため，スタイルシートを使用しました．

7.4

目的

1. 既に完成しているコンテンツを e-Lerning stationのデザインに合うように外観を変更すること．

2. 受講対象である中学生，高校生，社会人一般の方々に分りやすい構成にすること．

3. パーソナルコンピュータを自分で組み立てたいと思っている初心者の人が，講座を受講しながらコンピュータを組み立てることができるように，わかりやすく公開すること．

7.5

8

情報科目

8.1

講師

・コンピュータ入門

手法

熊本大学総合情報基盤センター教授

1. WEB ページの形で公開されているこのコンテンツを e-Lerning station に合う外観に変更したもので

入口 紀男

・Word 入門
熊本大学総合情報基盤センター助教授

す．多くの画像と動画を用いて，組み立て工程を理・Excel 入門

解しやすくしています．

熊本大学総合情報基盤センター助教授

喜多 敏博
喜多 敏博

・HTML 講座
熊本大学総合情報基盤センター教授

杉谷 賢一

・JavaScript 講座
熊本大学総合情報基盤センター教授

杉谷 賢一

・コンピュータサイエンス
熊本大学総合情報基盤センター助手

右田 雅裕

・セキュリティ対策
熊本大学総合情報基盤センター教授

図 14: e-Lerning station での外観

8.2

中野 裕司

素材

熊本大学の必修科目である「情報基礎 A」，「情報基礎B」において使用された資料 (HTML 等)．
2. コンピュータ組み立て初心者の受講者に負担が少ないようにするため，組立工程を大きく 3 つに分けました．講座の始めから画像・動画を見ながら作業できるような構成になっています．

3. この講座を受講して，実際にコンピュータを組み立てる人の参考となるように，パーツの一覧をリストとして公開しました．

8.3

目的

1. 現在の状況に適した説明をすること．
2. 講義用のコンテンツ部分の変更すること．
3. わかりやすいデザインにすること．

8.4

手段

1. 各コンテンツにおける画像が Windows95 使用時のものだったので，全て WindowsXP のものに差し替えました．

図 15: パーツリスト
図 16: Word のキャプチャ画像

また, ツールの仕様が変わっている部分に関しては，それに則した説明に書き換えました．使用するサンプルファイル等も，新しく作り直しました．

2. 授業時に行われていたレポート提出等の部分の削除，または変更を行いました．同時に, 各週に小テストを作成しました．

図 17: 小テストの画像

3. 週ごとの配信のため，コンテンツを区切るなどの工夫を行いました．フォントを大きくする，説明用の文章を追加する等の改良を行いました．

図 18: 配信時のキャプチャ画像