readme.txt【付録1】■課題分析図UI インストール手順
1.Moodleのデータベースの修正（※phpMyadminや、SQL adminなどを使用すると楽です。）(1)デフォルトで存在するmdl̲course̲sectionsテーブルに
次のフィールドを追加します。
フィールド名「x」 型「int(5)」NULL「はい」基本値「 -1 」
フィールド名「y」 型「int(5)」NULL「はい」基本値「 -1 」
フィールド名「w」 型「int(5)」NULL「はい」基本値「 100 」
フィールド名「h」 型「int(5)」NULL「はい」基本値「 50 」
【SQL文のサンプル】
ALTER TABLE ̀mdl̲course̲sections̀ADD ̀x̀ INT( 5 ) NULL DEFAULT '-1' COMMENT 'x座標',
ADD ̀ỳ INT( 5 ) NULL DEFAULT '-1' COMMENT 'y座標',
ADD ̀ẁ INT( 5 ) NULL DEFAULT '100' COMMENT '幅',ADD ̀h̀ INT( 5 ) NULL DEFAULT '50' COMMENT '高さ';(2)新たにmdl̲course̲sections̲structというテーブルを作成します。
id（主キー）型「bigint(10)」NULL「いいえ」 基本値「auto̲increment」
course 型「bigint(10)」NULL「いいえ」 基本値「 0 」
start
型「bigint(10)」NULL「いいえ」 基本値「 0 」
end
型「bigint(10)」NULL「いいえ」 基本値「 0 」【SQL文のサンプル】
CREATE TABLE ̀DBnamè.̀mdl̲course̲sections̲struct̀ (̀id̀ BIGINT( 10 ) NOT NULL AUTO̲INCREMENT PRIMARY KEY ,̀coursè BIGINT( 10 ) NOT NULL DEFAULT '0',
̀start̀ BIGINT( 10 ) NOT NULL DEFAULT '0',
̀end̀ BIGINT( 10 ) NOT NULL DEFAULT '0')
2.課題分析図UIのコピー
Moodleの「course/format/」内に課題分析図UIの本体ファイル群（structフォルダ）をコピーします。
3.ファイルの修正
moodle/lib/javascript.phpの28行目付近（<script type="text/javascript" src="<?php echo $CFG->httpswwwroot?>/lib/dropdown.js"></script>の下）に、以下を記述します。
（サンプルファイルとして、Moodle1.9.1の修正後のjavascript.phpを添付）<?php//コースIDの取得$id = optional̲param('id', 0, PARAM̲INT);//コース情報の取得$course = get̲record('course', 'id', $id);//structフォーマット使用時に追記
if($course->format == 'struct'){echo '<script type="text/javascript" src="'. $CFG->httpswwwroot.'/course/format/struct/prototype.js"></script>';echo '<script type="text/javascript" src="'. $CFG->httpswwwroot.'/course/format/struct/rico.js"></script>';echo '<script type="text/javascript" src="'. $CFG->httpswwwroot.'/course/format/struct/scriptaculous.js"></script>';echo '<script type="text/javascript" src="'. $CFG->httpswwwroot.'/course/format/struct/slider.js"></script>';echo '<script type="text/javascript" src="'. $CFG->httpswwwroot.'/course/format/struct/wz̲jsgraphics.js"></script>';echo '<script type="text/javascript" src="'. $CFG->httpswwwroot.'/course/format/struct/lesson.js"></script>';echo '<link href="'. $CFG->httpswwwroot .'/course/format/struct/design.css" rel="stylesheet"
type="text/css" />';}?>
以上で準備完了です。
■利用方法※事前にコースを作成済みで、いくつかのセクションと、各セクション内に１つの小テストモジュールが存在している必要があります。
（1）コースを編集する権限を持つユーザでログインします。
（2）コースのトップページに移動して、「設定」をクリックし、コースの設定画面を表示します。
ページ(1)

readme.txt（3）フォーマットから「課題分析フォーマット」を選択し、変更を保存します。
（4）コースのトップページに白紙の課題分析図UIが表示されます。
（5）編集モードに切り替えます。
（6）課題分析図UIの下に表示される、編集アイコン（鉛筆を持った手のアイコン）をクリックします。
（7）課題分析図UIの編集画面が表示されます。
（8）課題分析図を作成したら、SAVEボタンをクリックします。
（9）保存確認のメッセージが表示されたら、CLOSEボタンをクリックします。
（10）コースのトップページに戻り、課題分析図UIが生成されたら完了です。

ページ(2)

付録 22008 年 12 月 10 日修正版
077g8101 高橋暁子
動作チェック指示書＜はじめに＞
この度は、お忙しいところ動作チェックにご協力いただきありがとうございます。今回の動作チェック
は、私が開発した「課題分析図インタフェース」が、本実験中に停止することがないよう、正常に動作するかを確認するためのものです。ようするに、重大なエラーを発見したいと考えております。なにとぞよろしくお願いします。
＜事前情報＞
今回開発した「課題分析図インタフェース」とは、e ラーニングシステム上で利用する「学習ナビゲーシ
ョン」です。選んだコースに用意された学習項目の関係性（ある学習項目を学ぶ前に、何を学ぶ必要があるか）を図で示してあります。自分が学習したい項目をクリックすると、実際のコンテンツ（テキス
トや小テストなど）が表示されます。また、小テストの成績に応じて色分け表示されますので、自己評
価の手助けにもなります。お時間がございましたら、別紙論文に目を通していただけるとスムーズに動作チェックができるかと思います。
（JSiSE および JSET の 2008 年全国大会投稿原稿）＜予想時間＞
1 時間半～2 時間程度
＜手順＞
①ブラウザを起動し、以下のサイトを表示してください。

http://mo.ield.kumamoto-u.ac.jp/ltad/②別紙「動作チェックリスト」に従って、順に操作してください。サンプルコース、ログインユーザ ID、
パスワードは下表に従ってください。問題なく操作できた場合は「チェック欄」に印をつけ、何か問題があったらその現象を「備考欄」に記述してください。

動作チェックリストの該当項目

サンプルコース

学習者用チェック全項目

コンピュータアーキテクチャ（学習者）

コース設計者用 1～16

コンピュータアーキテクチャ（既存コース）

コース設計者用 17～33

コンピュータアーキテクチャ（新規コース）

ID とパスワード③最後に、利用してみた率直な感想を記述してください（記述欄は、動作チェックリストの最後に用意
してあります）。良かった点、改善してほしい点など、なんでも結構です。
以上でおわりです。ご協力ありがとうございました。

付録2

動作チェックリスト（学習者 1/1）
実施日：
機能

実施者：
No

使用ブラウザ：操作

初回ログイン

課題分析図作成済みコース（別紙：指示書に記載）を表示すると、色分
1 □ けされていない課題分析図インタフェースが表示

インタフェース操作

2 □ マップ上をドラッグすると、マップが移動する
3 □ マップの拡大縮小（スライダーバー）
4 □ マップの拡大縮小（マウスホイール）
5 □ アウトフレームの拡大縮小（大ボタン）
6 □ アウトフレームの拡大縮小（中ボタン）
7 □ アウトフレームの拡大縮小（小ボタン）
8 □ 学習項目にマウスポインタを重ねると、ヒントの表示（成績情報など）
9 □ 学習項目をクリックすると、下に該当するトピックが表示
マップの色を説明する部分の縮小（閉じるボタン「×」をクリック→「？」に10 □ 変わる）

11 □ マップの色を説明する部分の表示（縮小時の「？」ボタンをクリック）
マップの色

12 □ ある学習項目の小テストに不合格の場合、濃い赤で表示（未習得状態）
未習得状態の上位項目が、すべて薄いピンクで表示（未習得の自動判

13 □ 定）14 □ ある学習項目の小テストに合格の場合、濃い青で表示（習得状態）
15 □ 習得状態の下位項目が、すべて薄い水色で表示（習得の自動判定）
学習履歴

再ログイン後、コースのトップページにそれまでの習得状態が反映され

16 □ たマップが表示される

その他、気になった点や感想など自由に記述してください。

備考

付録2

動作チェックリスト（コース設計者 1/2）
実施日：機能
既存コースの場合
課題分析図のオン/
オフ
オーサリング操作
（１）

実施者：
No

使用ブラウザ：操作

課題分析図作成済みコース（別紙：指示書に記載）を表示すると、課題
1 □ 分析図インタフェースが表示される
Moodleのコースの設定ページのコースフォーマットを「課題分析」に変更
2 □ すると、コースのトップページに課題分析図フォーマットが表示
Moodleのコースの設定ページのコースフォーマットを任意のフォーマット
3 □ に変更すると、コースのトップページに課題分析図フォーマットが表示されない（課題分析フォーマットを適用後）Moodleの編集モードをONにすると、課4 □ 題分析図の下に編集ボタンが表示
課題分析図の下に表示されている、任意の学習項目（トピック）の編集
5 □ ボタンをクリックし、学習項目名を変更して保存すると、課題分析図にも反映される
6 □ 課題分析図の編集ボタンをクリックすると、オーサリング画面が表示

7 □ オーサリング画面に、現在の課題分析図が表示
8 □ 学習項目（トピック）をドラッグすると、移動する
9 □ 移動位置に合わせて線が再描画される
移動後、保存してコースのトップページに戻ると課題分析図インタフェー

10 □ スに反映される

削除ボタン（消しゴム）をクリックすると、マウスポインタに消しゴムのアイ

11 □ コンが表示

上記の状態で、線の上にマウスポインタを重ね、線が赤くなったらクリッ

12 □ クすると線が削除される

もう一度削除ボタン（消しゴム）をクリックすると、マウスポインタが通常

13 □ に戻る

線を削除後、保存してコースのトップページに戻ると課題分析図インタ

14 □ フェースに反映される
再ログイン

再ログイン後、コースのトップページに修正した課題分析図インタフェー

15 □ スが表示される

学習者用動作チェックの「マップの色(No12～15)」の項目の操作を実行

16 □ すると、修正した構造に従って色が変化する

課題分析図が作成されていないコース（別紙：指示書に記載）を表示す

新規コースの場合

17 □ ると、課題分析図インタフェースのアウトラインだけが表示される

オーサリング操作（２）

18 □ 示Moodleの編集モードをONにすると、課題分析図の下に編集ボタンが表19 □ 編集ボタンをクリックすると、オーサリング画面が表示
オーサリング画面には、課題分析図が表示されない（左のトピック一覧

20 □ に並んでいる）

ヘルプボタン（？ボタン）をクリックすると、別ウィンドウに解説が表示さ21 □ れる

アドバイスボタン（初心者マーク）がONの状態（カラー状態）になってい22 □ て、アドバイスが表示されるアドバイスボタンをクリックすると、OFFの状態（白黒状態）になってアド23 □ バイスが消える（確認したら、ONに戻してください）24 □ 学習項目（トピック）を編集領域にドラッグ＆ドロップすると、移動する（アドバイスボタンがON状態なので）最初とは違うアドバイスが表示され25 □ る

学習項目（トピック）をトピック一覧領域に適当にドラッグ＆ドロップする

26 □ と、元の位置に整列する（学習項目をいくつか編集領域に移動させた後）黄色からピンクの丸にド27 □ ラッグすると線が描画される

28 □ ピンクから黄色の丸にドラッグすると線が描画される

備考

付録2

動作チェックリスト（コース設計者 2/2）
機能

No

操作

29 □ ピンクからピンクにドラッグしても線は描画されない
30 □ 黄色から黄色にドラッグしても線は描画されない
これまでの機能を使って、下図の構造の課題分析図を描画できる（トピックの内容は任意です）

31 □保存後、コースのトップページに戻ると課題分析図インタフェースに反映

32 □ される
再ログイン

再ログイン後、コースのトップページに修正した課題分析図インタフェー

33 □ スが表示される

学習者用動作チェックの「マップの色(No12～15)」の項目の操作を実行

34 □ すると、修正した構造に従って色が変化する

その他、気になった点や感想など自由に記述してください。

備考

付録 3

■動作チェック結果まとめ
正常な動作をしなかった個所は、以下の 2 点である。
（学習者 No.11）課題分析図 UI 内のヒントを表示すると、文字が途中で切れる（IE7）（設計者 No.26）課題分析図オーサリング画面で編集中に、学習項目一覧領域から作業領域
へ、学習項目のドラッグ＆ドロップを繰り返していると、線が引けなくなる
その他、修正の余地がある点は以下である。
＜出来れば修正した方がいい点＞
・ボタン名などの英語表記を日本語へ
・課題分析図未作成時にメッセージを表示する
・課題分析図 UI の編集ボタンのポップヒントを変更
・課題分析図オーサリングツールのヘルプの充実
・課題分析図オーサリングツールの線の消去アイコン（消しゴム）の先端の白い部分に線が重なったときに、線が消去できる方が自然（現状は、消しゴムが線の上に完全に重なったときに線が消去）
・学習項目名を変更すると、課題分析図の線が消える？
（そうなるときと、ならないときがあるので、後日要確認）
・教師権限でログイン中、学習者にロールを変更すると課題分析図が正しく表示されない？
（そうなるときと、ならないときがあるので、後日要確認）＜Moodle の問題＞
・ユーザによっては英語表記になる（私の設定ミス）
・Moodle のデフォルトのインターフェースがわかりにくい（小テストの答えを送信するところなど）評価の時に「あくまで課題分析図 UI の部分だけの評価」であることを強調する＜参考意見＞
・課題分析図 UI で学習項目を選択後、選択した学習項目の内容が UI の下に表示されるが、ディスプレイの解像度によっては表示されないので気付かない可能性が高い。前のシステムのような動きをできるだけ再現した方がいいのでは？
・課題分析図オーサリングツールの作業領域のサイズを課題分析図 UI の「大」「中」「小」のサイズに合わせて変更可能とか、目安となるグリッド線が表示されているとよいのではないか
・課題分析図オーサリングツールのアドバイスボタンとヘルプボタンの違いがわかりにくいかもしれない。名称を変えるとか？
・ヘルプ画面に、サンプルページへのリンクがあると良い付録 42008 年 12 月 18 日
077g8101 高橋暁子
評価指示書 A（教師）＜はじめに＞
この度は、お忙しいところご協力いただきありがとうございます。今回は、私が開発した「課題分析図
ユーザーインタフェース（UI）」および「課題分析図オーサリングツール」を使用していただき、使いやすさについてご意見をいただきたいと考えております。今後の改善にむけて、率直なご意見をお聞かせください。よろしくお願いします。
＜事前情報＞
今回開発した「課題分析図 UI」とは、e ラーニングシステム上で利用する「学習ナビゲーション」です。
インストラクショナルデザインにおける課題分析技法を参考に開発しました。
学習目標が明確で、学習者が全くの初心者ではないとき（たとえば大学の授業の復習や、資格試験対策など）に、教師がほとんど手を出さなくとも、学習者主導で e ラーニングによる自己学習を進める手助
けになることを狙っています。
今回は、すでに Moodle 上にコースと教材が作成済みであり、後から課題分析図 UI を導入することを想定しました。教師側は、教育内容に応じて課題分析図 UI の元となる「課題分析図」を作成する必要があります。課題分析図は、e ラーニングシステム上でオーサリングツールを利用して作成します。
＜評価の目的＞
課題分析図オーサリングツールを使用して、課題分析図をスムーズに作成出来るかどうかの「操作性」
について評価します。最終的には課題分析技法を知らない教員が利用することを想定していますので、そのためには何が必要かについてご意見も伺いたいと考えております。
＜用意していただきたいもの＞
筆記用具＜予想時間＞
1 時間～1 時間半程度（操作 30 分、アンケート 30 分の予定）＜注意点＞
まずは、課題分析図 UI がどのようなものか把握していただくため、学習者評価にご協力ください。
学習者評価が終わりましたら、次ページに進んでください。

付録 4
＜手順＞
①ブラウザを起動し、以下のサイトを表示してください。

http://mo.ield.kumamoto-u.ac.jp/ltad/②トップページが表示されたら、ログインしてください。
ユーザ名

パスワード

③コース一覧から以下のコースを選択してください。

④それでは、課題分析図 UI をコースに適用してください。
コーストップページの左側にある「管理」という領域内の「設定」をクリックします。
設定画面が表示されたら、フォーマットを「課題分析フォーマット」に変更して、画面下の「変更」
ボタンをクリックします。
⑤課題分析図を作成してください。
コーストップページの右上にある「編集モードの開始」ボタンをクリックすると、課題分析図 UI 領域の下に編集ボタン（鉛筆を持った手のアイコン）が表示されます。編集ボタンをクリックすると、課題
分析図編集画面が表示されます。
作っていただく図は以下です。操作がわからない時は、ヘルプを参考にしてください。

付録 4⑨課題分析図 UI が完成したら、コーストップページに戻って任意の小テストを受験してください。構造に応じて図の色が変化することを確認してください。
⑩最後に、別紙の「教師アンケート」にご回答ください。
以上でおわりです。ご協力ありがとうございました。

付録5
評価A（教師対象）アンケート

回答日：

そう思う

使いやすさ

1 課題分析図の編集画面をスムーズに表示できた（課題分析図の編集画面において）学習項目をドラッグ＆ドロップでスムーズに移動できた（課題分析図の編集画面において）学習項目同士を線でつなぐ操作はスムーズにで3きた2

4 （課題分析図の編集画面において）線の削除はスムーズにできた

そう思わない5 - 4 - 3 - 2 - 1
5 - 4 - 3 - 2 - 1
5 - 4 - 3 - 2 - 1
5 - 4 - 3 - 2 - 1

5 課題分析図の作成には、どのぐらいの時間を要しましたか？

分

6 課題分析図編集画面での操作に関して、スムーズに行えなかった箇所があれば教えてください

そう思う

ヘルプ機能

5 - 4 - 3 - 2 - 1

8 （課題分析図の編集画面において）自動的に表示されるアドバイスは役に立った

5 - 4 - 3 - 2 - 1

9（課題分析図の編集画面において）今後、ヘルプ機能を充実させたいと考えています。どのようなサポートがあれば、課題分析図を作成できそうですか？自由にご意見をお書きください。

そう思う

あなたが教師として自分の授業や研修にeラーニングを利用する際、課題分析図UIを10
導入してみたいと思いますか？
11 10の理由をお答えください

自由回答

そう思わない

（課題分析図の編集画面において）クリックすると別ウインドウに表示されるヘルプの7
内容は役に立った

12 その他、気づいた点、感想など、なんでも自由にお書きください

そう思わない5 - 4 - 3 - 2 - 1

付録5
評価A（教師対象）アンケート

教師情報

あなたの名前：13 以前からインストラクショナルデザインにおける課題分析技法を知っていましたか？

はい ・ いいえ14

これまでに、Moodleを使用して授業や研修を実施したことがありますか？（一部の機能だけでも可）はい ・ いいえ

15

これまでに、Moodle以外のeラーニングシステム（WebCTなど）を使用して授業や研修を実施したことがありますか？（一部の機能だけでも可）はい ・ いいえ16（14,15のいずれかで「はい」の方）科目名と、eラーニングシステム上でどのようなことを実現したか、お書き頂ける範囲で教えてください。

付録6
被験者
B
C
高等学校教員（数学）・
学部3年
修士2年

評価A（教員）結果一覧
アンケート項目
被験者情報

職業・学年

A
専門学校講師（経営学）

以前からインストラクショナルデザインにおける課題分
はい析技法を知っていましたか？
これまでに、Moodleを使用して授業や研修を実施した
いいえ
ことがありますか？（一部の機能だけでも可）これまでに、Moodle以外のeラーニングシステム（WebCTなど）を使用して授業や研修を実施したことが いいえ
ありますか？（一部の機能だけでも可）

前システムの使用経験
なし
OS
WinXP
ブラウザ
IE6
1 課題分析図の編集画面をスムーズに表示できた（課題分析図の編集画面において）学習項目をドラッ
2
グ＆ドロップでスムーズに移動できた（課題分析図の編集画面において）学習項目同士を3線でつなぐ操作はスムーズにできた（課題分析図の編集画面において）線の削除はス
4
ムーズにできた
課題分析図の作成には、どのぐらいの時間を要しまし
5
3分
たか？

6

いいえ

はい

いいえ

いいえ

いいえ

いいえ

いいえ

いいえ

5

・Moodleのコースや教Moodleのコースや教材を作成したことがあ材を作成したことがある
る・SAKURAのデモをいなし
あり
WinVista
WinXP
Safari、IE7
Sleipnir
2
2
5

3.5

5

4

4

5

4.5

5

2

3

4

3.5

5

3

3

4

3.75

なし
WinXP
FireFox、IE7

課題分析図編集画面での操作に関して、スムーズに行えなかった箇所があれば教えてください（課題分析図の編集画面において）クリックすると別ウ
インドウに表示されるヘルプの内容は役に立った（課題分析図の編集画面において）自動的に表示され8
るアドバイスは役に立った
7

学部4年

はい

（上記で「はい」の方）科目名と、eラーニングシステムXOOPSなどのCMSは上でどのようなことを実現したか、お書き頂ける範囲
色々と操作経験あり
で教えてください。
環境

平均

D

15分

5分

15分

9.5

・編集ボタンがわかりにくい・コースのトップページに戻るのがわかりにくい・線を引く作業が細か ・線の削除は消しゴム
い（グリッド吸着が欲し だったけど、課題の削い）学習項目の配置 除はできないのが混乱も。
した・背景に矢印があると ・作業画面を大きくした
わかりやすいかもしれ い
ない

3

3

2

4

3

5

3

3

4

3.75

付録6
被験者
平均
アンケート項目A
B
C
D
別ウィンドウに表示さ ・（Moodle）画面上の表 ・ヘルプは作成作業に ・（課題分析図の）例が（課題分析図の編集画面において）今後、ヘルプ機能
れるヘルプはクリックし 示を減らす
ついて具体的に書いて 欲しいを充実させたいと考えています。どのようなサポートが9なかった。自動的に表 ・矢印の見方（意味）を いるといいかもしれな ・FLASHで線を引く
あれば、課題分析図を作成できそうですか？自由に示されるアドバイスで 説明する
いムービーとか欲しい
ご意見をお書きください。
十分だった。
・アドバイスのアイコン
あなたが教師として自分の授業や研修にeラーニング
10 を利用する際、課題分析図UIを導入してみたいと思い
5
4
5
5 4.75
ますか？
作成が簡単だった（課 授業外の指導として利 学習者が楽しそうなの ・学習者が自ら学習の題分析技法を知ってい 用したい（態度形成の で順番を正しくやってくれ
ればすぐ導入出来そ 指導に利用できない
そう。
う）
か？）
・（合格すれば）下位は
11 10の理由をお答えください
やらなくていいので学習の効率化につながりそう
たとえば、重要な項
・チャンク分けの時間 ・Moodleが足を引っ・（編集画面では線が目、難しい項目（これま 短縮が出来ればうれし 張っている印象があっ 表示されているのに）での経験上、多くの生 い（構造を考える前た
コースのトップページ
徒がつまづく箇所が分 に、学習目標を細かく ・（小テスト後の）フィー に戻っても線が表示さかっているので）に重 チャンク分けするのが ドバックもカスタマイズ れなかった（合格した
みづけをして、一目で 難しい）
したい
項目の色の変化など、わかるようになると良 ・チャンクの最適解は ・最終目標の形を変え 動作は問題ない）
いと思う。
利用前か利用後か（自 ると面白いかもしれな ・「＋」「－」ボタンをク
分で課題分析図を作っ い（ゴールが☆で、ス リックしても何もならなたとして、正しいかどう タートは○とか）い（拡大・縮小したほう
その他、気づいた点、感想など、なんでも自由にお書
12か自信が持てない。生
がいい）
きください
徒が学習する前に、教・（学習項目の）ヘルプ
員間で検討できる機能は半透明より、透過ながほしい。また、生徒
しのほうがいいが学習後に、適切な課
題分析図だったか検討できる機能も欲しい。そして、妥当な課
題分析図ができたら、共有できる機能が欲しい）

評価A（教員）結果一覧

付録 72008 年 12 月 18 日
077g8101 高橋暁子
評価指示書 B（学習者）＜はじめに＞
この度は、お忙しいところご協力いただきありがとうございます。今回は、私が開発した「課題分析図
ユーザーインタフェース（UI）」を使用していただき、使いやすさと学習に役立ちそうかどうかのご意見をいただきたいと考えております。今後の改善にむけて、率直なご意見をお聞かせください。よろしく
お願いします。
＜事前情報＞
今回開発した「課題分析図 UI」とは、e ラーニングシステム上で利用する「学習ナビゲーション」です。
選んだコースに用意された学習項目の関係性（ある学習項目を学ぶ前に、何を学ぶ必要があるか）を図で示してあります。自分が学習したい項目をクリックすると、実際の教材（テキスト、ビデオ、小テス
トなど）が表示されます。また、小テストの成績に応じて色分け表示されますので、自己評価の手助けにもなります。今回は、授業の復習として利用されることを想定し、必修科目の「コンピュータアーキ
テクチャ」の一部を題材にしました。
＜予想時間＞
1 時間半～2 時間程度（操作 1 時間、アンケート 30 分の予定）＜用意してほしいもの＞
筆記用具、コンピュータアーキテクチャの教科書（無ければ貸し出します）＜手順＞①ブラウザを起動し、以下のサイトを表示してください。

http://mo.ield.kumamoto-u.ac.jp/ltad/②トップページが表示されたら、ログインしてください。
ユーザ名

パスワード

③はじめに、通常のコース（課題分析図インタフェース無）で少し学習していただきます。トップペー
ジのコース一覧から「コンピュータアーキテクチャ（学習者：通常）」をクリックしてください。
④まずは自由にご覧ください。

付録 7⑤どれでもいいので、小テストを受験してください。1 つ以上は合格（100 点）してください。
不合格だった時は、ビデオ教材や教科書を見て確認してください。
（※ビデオを見るにはパスワードが必要です。評価実施者から聞いてください。
）⑥1 つ以上の小テストに合格したら、課題分析図インタフェースがあるコースで学習していただきます。
トップページに戻って、コース一覧から「コンピュータアーキテクチャ（学習者：課題分析図 UI）」をクリックしてください。
⑦以下を参考に、課題分析図 UI を一通り操作してください。


UI の中の、四角形が学習項目です。クリックすると該当する教材が図の下に表示されます。



四角形の上にマウスポインタを重ねると、現在の成績情報が表示されます。



図の上でドラッグ＆ドロップすると、図が動きます。



UI の下の「大」「中」「小」ボタンをクリックすると、図の外枠のサイズが変わります。



UI の左上のスライダをドラッグすると、図が拡大・縮小します。
（マウスのホイールでも拡大・縮小ができます）

「おすすめの学習項目」をクリックすると、次に選択した方がいい学習項目がアドバイスされます。
アドバイスに従っても、従わなくてもどちらでもかまいません。



UI 内の「？」ボタンをクリックすると、操作のヒントが表示されます。

⑧それでは、自由に学習してください。すべての学習項目が「習得状態（青または薄い青）」になるか、
30 分経過したら終了とします。途中で何か気付いた点があったら、ここにメモをしてください。

⑩最後に、別紙の「学習者アンケート」にご回答ください。
以上でおわりです。ご協力ありがとうございました。

付録8
評価B（学習者対象）アンケート

回答日：

そう思う

使いやすさ

そう思わない1 図の移動（ドラッグ操作）はスムーズに行えた

5 - 4 - 3 - 2 - 1

2 図の拡大縮小（表示倍率）はスムーズに行えた

5 - 4 - 3 - 2 - 1

3 図のフレームの拡大縮小（表示領域）はスムーズに行えた

5 - 4 - 3 - 2 - 1

4 学習情報の表示（図の四角形にマウスを重ねると表示）はスムーズに行えた

5 - 4 - 3 - 2 - 1

5 （図の四角形をクリックして）学習項目の表示はスムーズに行えた

5 - 4 - 3 - 2 - 1

6 課題分析図UIの操作に関して、スムーズに行えなかった箇所があれば教えてください

わかった

7 図を見て、未修得項目、習得項目は直感的にわかりましたか？
8

有用性

図は、下が基礎的で単純な学習項目、上に行くほど応用的で難しい学習項目になっていたことがわかりましたか？

わからない

5 - 4 - 3 - 2 - 1
5 - 4 - 3 - 2 - 1

9 図を参考にして、次の学習項目を選択しましたか？

はい

・

いいえ

はい

・

いいえ

10 9の理由をお答えください

11

9で「いいえ」を選択した方のみお答えください。
次の学習項目を選択するとき、何を基準にして、どういう順序で選択したか教えてください。

12 「おすすめの学習項目」ボタンのアドバイスに従って、学習項目を選択しましたか？
13 12の理由をお答えください

そう思う

システムが自動判定する習得状態・未習得状態は学習を進めるときに役に立ちまし14
たか？
自分で勉強するときに、通常のコースと、課題分析図UIつきのどちらを選択します15
か？
16 15の理由をお答えください

自由回答

17

その他、課題分析図UIに関して気づいた点、感想など、なんでも自由にお書きくださいそう思わない5 - 4 - 3 - 2 - 1
通常 ・ 課題分析図UIつき

付録8
評価B（学習者対象）アンケート

学習者情報

あなたの名前：学年：

18 今回学習した科目は、履修済または履修中ですか？

はい ・ いいえ（履修済・履修中の人のみ）履修した時期： 1年前期 ・ 1年後期 ・ 2年前期 ・ 2年後期 ・ 3年前期 ・ 3年後期 ・ 4年前期 ・ 4年後期
担当教員：

（全員）
得意・好き

苦手・きらい19 今回学習した科目の内容は、得意ですか？

5 - 4 - 3 - 2 - 1

20 今回学習した科目の内容は、好きですか？

5 - 4 - 3 - 2 - 1

21 今回利用したPCについて
OS：
ブラウザ：

付録9
被験者
E
学部4年
はい（学部1年）
4
3あり
WinVista
IE7
5
4

評価B（学生）結果一覧
アンケート項目

C
D
F
職業・学年
学部3年
学部4年
修士1年
今回学習した科目は、履修済または履修中ですか？ はい（学部1年）
はい（学部1年）
はい（学部1年）
被験者情報 今回学習した科目の内容は、得意ですか？
4
4
1
今回学習した科目の内容は、好きですか？
4
4
4
前システムの使用経験
なし
あり
なし
OS
WinVista
WinXP
WinXP
環境
ブラウザ
Safari、IE7
Sleipnir
IE7
1 図の移動（ドラッグ操作）はスムーズに行えた5452 図の拡大縮小（表示倍率）はスムーズに行えた53
5
図のフレームの拡大縮小（表示領域）はスムーズに行
3
5
5
5
5
えた
学習情報の表示（図の四角形にマウスを重ねると表
4
5
5
3
5
示）はスムーズに行えた（図の四角形をクリックして）学習項目の表示はスムー
5
5
5
2
5
ズに行えた
ヒントが切れてしまっ マウスホイールが、図 ・学習項目にマウスを モニタやブラウザのサて、説明がわからなを下にずらすのと勘違 重ねた時とはずした時 イズによって、学習項
かった
いしたに、マウスカーソルの 目を（図の下に）表示し形が戻らないても認識できない場合・マウスのホイールで があるのでは？
拡大・縮小しても、スラ
課題分析図UIの操作に関して、スムーズに行えなイダが変化しないので
6
かった箇所があれば教えてください
違和感がある・学習項目にマウスを重ねた時に学習情報が表示されたり消えたりした図を見て、未修得項目、習得項目は直感的にわかりましたか？
図は、下が基礎的で単純な学習項目、上に行くほど
8
応用的で難しい学習項目になっていたことがわかりま
9 図を参考にして、次の学習項目を選択しましたか？ はい
7

平均

3.25
3.75

4.75
4.25
5
4.5
4.25

3

5

5

4

4.25

2

5

4

2

3.25

はい

はい

いいえ

付録9
評価B（学生）結果一覧
アンケート項目

10 9の理由をお答えください

被験者
平均
C
D
E
F
図を動かすことが楽し （矢印の向きで）直感 図の矢印を見て次にど 通常コースをやっていかった
的に下から上にあがる の項目を学習すれば るので、セクションのようなイメージだから いいのかわかりやす 1,2・・・という順番でやかった
ればいいとわかっていたので、図はあんまり選択する要因にはなっていないです。図は参考にはしました。
セクションの1,2がなか
なかクリアできなかったので、5,4,3・・・の順
でやりました9で「いいえ」を選択した方のみお答えください。
11 次の学習項目を選択するとき、何を基準にして、どういう順序で選択したか教えてください。
「おすすめの学習項目」ボタンのアドバイスに従って、
はい学習項目を選択しましたか？
（おすすめと書いてあると）押したくなったため
13 12の理由をお答えください
12

いいえ

はい

はい

（おすすめ以外の）他のものをやったらどうなるのか見たかった

おすすめの学習項目 スタート（一番初めのを見ることで、分岐して 項目）なので選びましいる学習項目のどちら たを先にやったらいいかを選択できたシステムが自動判定する習得状態・未習得状態は学4445
習を進めるときに役に立ちましたか？
自分で勉強するときに、通常のコースと、課題分析図
15
UIつき
UIつき
UIつき
UIつき
UIつきのどちらを選択しますか？
目で進捗が見えること どれを学習すればいい （UIつきのほうが）基礎 （UIつきのほうが色でがいいか直感的にわかるか 的な学習項目から難し 成績が）わかりやすいら。もう少し複雑なもの い学習項目まで順を と思うので。ただし、こをやったときに、より効 追って学習しやすい
れぐらいの学習項目で果が出ると思った。
あれば、色つきの成績
16 15の理由をお答えください
表がコーストップにあればUIが無くてもいい
と思う。
14

4.25

付録9
評価B（学生）結果一覧
アンケート項目17

その他、課題分析図UIに関して気づいた点、感想な
ど、なんでも自由にお書きください

被験者
平均
C
D
E
F
・レビュー画面がかっこ 学習しなくても、上位 Moodleの全表示ボタン ・ヒントが切れてしまっ
いいが合格していればうす がわかりにくいので、 て、説明がわからな・図が楽しかったい青になるけど、その UIの近くにあった方が かった
・図をいきなりみると何 後、不合格になると赤 いい・（あと少しで合格なのをすればいいのかわ になるのが複雑な気に）薄い赤になるのがからない分。合格と仮合格が同イメージが悪い。だん・テスト終了後、自動的 じような色だから（違うだん青に近づくように、に図が出てきてほしい 色の方がいいか
紫にするとかならやるも？）。
気が出そう。
・小テスト中に、横にUIがあるといい付録 102009 年 1 月 13 日
077g8101 高橋暁子
評価指示書 C（専門家）＜はじめに＞
この度は、お忙しいところご協力いただきありがとうございます。今回は、私が開発した「課題分析図
ユーザーインタフェース（UI）」および「課題分析図オーサリングツール」を使用していただき、使いやすさのご感想や今後の改善についてご意見をいただきたいと考えております。よろしくお願いします。
＜事前情報＞
今回開発した「課題分析図 UI」とは、e ラーニングシステム上で利用する「学習ナビゲーション」です。
インストラクショナルデザインにおける課題分析技法を参考に開発しました。
学習課題が高次ではない知的技能で、学習者が成人であり、なおかつ学習課題について全くの初心者ではないとき（たとえば大学の授業の復習や、資格試験対策など）に、教師がほとんど手を出さなくとも、
学習者主導で e ラーニングによる自己学習を進める手助けになることを狙っています。
今回は、すでに Moodle 上にコースと教材が作成済みであり、後から課題分析図 UI を導入することを想定しました。教師側は、課題分析図 UI の元となる「課題分析図」を作成する必要があります。課題分析
図は、e ラーニングシステム上でオーサリングツールを利用して作成します。
＜評価のねらい＞
1. 課題分析図 UI を使用して、学習者にとってより学びやすくなるためには何が必要かについてご意見をください。
2.課題分析図オーサリングツールを使用して、課題分析図をスムーズに作成出来るかどうかの「操作性」
についてご意見をください。最終的には課題分析技法を知らない教員が利用することを想定していますので、そのためには何が必要かについてご意見も伺いたいと考えております。
＜用意していただきたいもの＞
筆記用具＜予想時間＞
1 時間～1 時間半程度（操作 30 分、アンケート 30 分の予定）＜注意点＞
・すでに何名かの形成的評価を実施しており、いくつかの不具合を確認しておりますが、まだ改善をしておりません。ご了承ください。
・操作しながら気づいた点についてメモを取って頂けると後ほどのアンケートの際にたすかります。

付録 10＜学習者＞
まずは、学習者としての操作を体験していただきます。
①ブラウザを起動し、以下のサイトを表示してください。

http://mo.ield.kumamoto-u.ac.jp/ltad/②トップページが表示されたら、ログインしてください。
ユーザ名

パスワード

③はじめに、通常のコース（課題分析図インタフェース無）を尐し見ていただきます。トップページのコース一覧から「コンピュータアーキテクチャ（学習者：通常）」をクリックしてください。
④まずは自由にご覧ください。その後、任意の小テストを 1 つ受験してください。
⑤次に、課題分析図インタフェースがあるコースを体験していただきます。トップページに戻って、コース一覧から「コンピュータアーキテクチャ（学習者：課題分析図 UI）」をクリックしてください。
⑦以下を参考に、課題分析図 UI を操作してください。


UI の中の、四角形が学習項目です。クリックすると該当する教材が図の下に表示されます。



四角形の上にマウスポインタを重ねると、現在の成績情報が表示されます。



図の上でドラッグ＆ドロップすると、図が動きます。



UI の下の「大」「中」「小」ボタンをクリックすると、図の外枠のサイズが変わります。



UI の左上のスライダをドラッグすると、図が拡大・縮小します。
（マウスのホイールでも拡大・縮小ができます）

「おすすめの学習項目」をクリックすると、次に選択した方がいい学習項目がアドバイスされます。
アドバイスに従っても、従わなくてもどちらでもかまいません。

⑧どれでもいいので、小テストを 1 つ受験してください。その後、コースのトップページに戻り、課題
分析図の色が変わったことを確認してください。


UI 内の「？」ボタンをクリックすると、色の意味を確認できます。

以上で学習者操作は終了です。

付録 10＜教師＞
次に教師の操作を体験していただきます。
①コース一覧から以下のコースを選択してください。

②以下の手順で、課題分析図 UI をコースに適用してください。
1.

コーストップページの左側にある「管理」という領域内の「設定」をクリックします。

2.

設定画面が表示されたら、フォーマットを「課題分析フォーマット」に変更して、画面下の「変更」
ボタンをクリックします。

③以下の手順で、課題分析図を作成してください。


コーストップページの右上にある「編集モードの開始」ボタンをクリックすると、課題分析図 UI 領
域の下に編集ボタン（鉛筆を持った手のアイコン）が表示されます。編集ボタンをクリックすると、
課題分析図編集画面が表示されます。



作っていただく図は以下です。作成出来たら保存してください。

④コーストップページに課題分析図 UI が完成していることを確認してください。
⑤任意の小テストを受験してください。構造に応じて図の色が変化することを確認してください。
以上で操作はおわりです。アンケートにご協力お願いします。

付録11
専門家アンケート

アンケートはこのシートを含めて全部で3シートあります。
全てのシートにご回答をよろしくお願いします。

あなたの
お名前

今回利用したPCについて
OS：

ブラウザ：

次のシートに進んでください。

付録11

専門家アンケート（学習者視点）

回答日：

最も近いものを選択してください
使いやすさ

1 図の移動（ドラッグ操作）はスムーズに行えた2 図の拡大縮小（表示倍率）はスムーズに行えた3 図のフレームの拡大縮小（表示領域）はスムーズに行えた
4 学習情報の表示（図の四角形にマウスを重ねると表示）はスムーズに行えた5 （図の四角形をクリックして）学習項目の表示はスムーズに行えた
6 課題分析図UIの操作に関して、スムーズに行えなかった箇所があれば教えてください
ここに入力してください

7 図を見て、未習得項目、習得項目は直感的にわかりましたか？

有用性

8

図は、下が基礎的で単純な学習項目、上に行くほど応用的で難しい学習項目になっていたことがわかりましたか？

9

システムが自動判定する習得状態・未習得状態は学習を進めるときに役立ちそうですか？

10 9の理由をお聞かせください
ここに入力してください

11 より学習を支援するために、どのような改善が必要か、ご意見をお聞かせください。
ここに入力してください

自由回答

12

その他、課題分析図UIに関して気づいた点、感想など、なんでも自由にお書きください
ここに入力してください

次のシートに進んでください。

付録11

専門家アンケート（教師視点）

回答日：

最も近いものを選択してください
使いやすさ

1 課題分析図の編集画面をスムーズに表示できた（課題分析図の編集画面において）学習項目をドラッグ＆ドロップでスムーズに移動できた（課題分析図の編集画面において）学習項目同士を線でつなぐ操作はスムーズにで3きた2

4 （課題分析図の編集画面において）線の削除はスムーズにできた
5 課題分析図の作成には、およそどのぐらいの時間を要しましたか？

分

6 課題分析図編集画面での操作に関して、スムーズに行えなかった箇所があれば教えてください
ここに入力してください

ヘルプ機能

7

（課題分析図の編集画面において）クリックすると別ウインドウに表示されるヘルプの
内容は役に立った

8 （課題分析図の編集画面において）自動的に表示されるアドバイスは役に立った9

10（課題分析図の編集画面において）今後、ヘルプ機能を充実させたいと考えています。どのようなサポートがあれば、課題分析図を作成できるか、ご意見をお聞かせください。
ここに入力してください

あなたが教師として自分の授業や研修にeラーニングを利用する際、課題分析図UIを導入してみたいと思いますか？

11 10の理由をお答えください
ここに入力してください

自由回答

12 その他、全般的に気づいた点、感想など、なんでも自由にお書きください
ここに入力してください

以上で終わりです。ご協力ありがとうございました。

付録12
専門家アンケート

アンケートはこのシートを含めて全部で3シートあります。
全てのシートにご回答をよろしくお願いします。

あなたの 仲林 清
お名前今回利用したPCについて
OS：

ブラウザ：

Windows Vista

IE7

次のシートに進んでください。

付録12

専門家アンケート（学習者視点）

回答日：

最も近いものを選択してください
使いやすさ

1 図の移動（ドラッグ操作）はスムーズに行えた

5強くそう思う

2 図の拡大縮小（表示倍率）はスムーズに行えた

4まあそう思う

3 図のフレームの拡大縮小（表示領域）はスムーズに行えた

5強くそう思う

4 学習情報の表示（図の四角形にマウスを重ねると表示）はスムーズに行えた

4まあそう思う

5 （図の四角形をクリックして）学習項目の表示はスムーズに行えた

4まあそう思う

6 課題分析図UIの操作に関して、スムーズに行えなかった箇所があれば教えてください
図の拡大縮小で，＋，－ボタンが利かなかった

7 図を見て、未習得項目、習得項目は直感的にわかりましたか？

有用性

4まあわかった

8

図は、下が基礎的で単純な学習項目、上に行くほど応用的で難しい学習項目になっていたことがわかりましたか？

5よくわかった

9

システムが自動判定する習得状態・未習得状態は学習を進めるときに役立ちそうですか？

5強くそう思う

10 9の理由をお聞かせください
学習の順番・項目が直観的に把握できる．

11 より学習を支援するために、どのような改善が必要か、ご意見をお聞かせください。
大きな改善項目は無い．MoodleのUIとより融合すると良いと思う．

自由回答

12

その他、課題分析図UIに関して気づいた点、感想など、なんでも自由にお書きください
ここに入力してください

次のシートに進んでください。

付録12

専門家アンケート（教師視点）

回答日：

最も近いものを選択してください
使いやすさ

1 課題分析図の編集画面をスムーズに表示できた（課題分析図の編集画面において）学習項目をドラッグ＆ドロップでスムーズに移動できた（課題分析図の編集画面において）学習項目同士を線でつなぐ操作はスムーズにで3きた2

4 （課題分析図の編集画面において）線の削除はスムーズにできた

5強くそう思う
5強くそう思う
2あまりそう思わない
2あまりそう思わない

5 課題分析図の作成には、およそどのぐらいの時間を要しましたか？

10分

6 課題分析図編集画面での操作に関して、スムーズに行えなかった箇所があれば教えてください
・項目間の線をつなぐ操作がバグのため，スムーズにいかなかった．

ヘルプ機能

7

（課題分析図の編集画面において）クリックすると別ウインドウに表示されるヘルプの
内容は役に立った

8 （課題分析図の編集画面において）自動的に表示されるアドバイスは役に立った9

10

4まあそう思う
5強くそう思う（課題分析図の編集画面において）今後、ヘルプ機能を充実させたいと考えています。どのようなサポートがあれば、課題分析図を作成できるか、ご意見をお聞かせください。
現在の情報でほぼ十分であった．

あなたが教師として自分の授業や研修にeラーニングを利用する際、課題分析図UIを 4まあそう思う
導入してみたいと思いますか？

11 10の理由をお答えください
自分の教授内容を整理して視覚化するのに役に立つから．

自由回答

12 その他、全般的に気づいた点、感想など、なんでも自由にお書きください
このようなサポートツールは教授者が自分の教授内容を整理するために非常に役に立つと思います．今後，他の機能を拡張していかれると良いと思います．また，ツールの独立性を確保するために，設計した課題分析情報をイン
ポート・エクスポートするためのインターフェース，ファイルフォーマットなども考えられると良いと思います．

以上で終わりです。ご協力ありがとうございました。