第132回ゲームニクスの...

©2012 井ノ上憲司 eラーニング推進機構eラーニング授業設計支援室

ランチョンセミナー 1

第１３２回ゲームニクスのLMSのその後２ • なにをしようとしてるか？

– eラーニングを普及するにあたり、LMSごとに違う操作をユーザに強いないようにしたい。

– 様々なLMSに適用できるユーザインタフェース（画面）を開発し、共通操作できるように。

• どんなものにする？

– 「ゲームニクス」の４つの法則を活用して、直感的操作感と、段階的な学習効果を作り自然に使いこなすUI （例：vs テレビ、vs 銀行ATM）

• どんなものになった？

– LMSの教員画面のUIをゲームニクスで作る！(仮にmoodleで）

• 実装方法、構成（６つの状態）

– どんな人が使うのかというシナリオ（ペルソナ／シナリオ法）

– どんなメニューがあるの？（メニューリスト＆判定フローチャート）

– デモ・・学生登録、教材・活動追加、並び替え、新着確認などが簡単に。

– 課題・・シナリオと操作性の評価どうする？

• ヒューリスティック評価とユーザビリティ評価

※LMS＝Learning Management System WebCTとかMoodle、UI=ユーザインタフェース（利用者との接点）

９１回

１２３回

New!

http://www.kumamoto-u.ac.jp/

http://www.gsis.kumamoto-u.ac.jp/index.html

「ゲームニクス」とは？

• テレビゲームの開発現場で生まれた理論

• 幅広い年代の人間が、説明書を利用しなくとも、使い始められるような設計が出来る手法 – ゲームの制作者がゲームを幅広い世代の人々に遊んで貰うために生み出したテクノロジー・法則

– 使いやすさを考え、何をするか迷わず、ストレスを感じさせない、シンプルで自然なインターフェース

• 「ゲームニクスとは何か」著者のサイトウアキヒロ氏が新しく作った造語

←発表概要（トップ）に戻る

©2012 井ノ上憲司

eラーニング推進機構eラーニング授業設計支援室




「ゲームニクス」の目標（前提）

• テレビゲーム制作の現場での目標 – 主なターゲットである「子ども」が飽きずに使い続けてくれる物を作る

• 自然と下の２つを考え設計していた – 子どもは本来飽きっぽいので、使用することに苦痛を与えない「直感的な操作性」

– ゲームを自然にやり込むための「段階的な学習効果」

• これをまとめ、「ゲームニクス」と呼んでいる。



参考：サイトウアキヒロ：“ゲームニクスとは何か -日本発、世界基準のものづくり法則-”，幻冬舎出版(2007) eラーニング推進機構eラーニング授業設計支援室




「ゲームニクス」の法則 (1) 直感的なユーザインターフェースであること

使いやすいこと。どこで何をするかをわかりやすくする画面や操作感の工夫をすること。ゲームを操作することに苦痛を与えてはいけないこと

(2) マニュアルなしでルールを理解してもらう

画面を見ただけで何をするか理解できる自然な流れを取り入れること（ここを操作するという指示が必要な時に現れる等）。自然にルールを理解してもらうために、チュートリアルを必要なときに仕込むこと。

(3) はまる演出と段階的な学習効果ゲームを進めることで夢中にさせる工夫をする。アニメーションや効果演出、ストーリーなどによって画面に集中させる。ゲームの難易度が状況に応じて次第に上がる。新しいアイテムやイベントの登場する。こつこつと続けている成果が分かったり、ほめてもらえたりする演出を入れる。

(4) ゲームの外部化ゲームと実社会の関係がわかる演出を入れる。現実世界のことをテーマとして扱う（シリアスゲーム）。ゲーム内の体験が現実でも役立つあるいは、効果がある内容である。現実をうまく抽象化して分からせるようにする

←発表概要（トップ）に戻る ©2012 井ノ上憲司





テレビのリモコン vs ゲーム機

表面に

４７個のボタン

ここにも

隠しボタン

１つ１つの

ボタンの

機能を

知らなければ

行けない

１３個のボタン

＋タッチパネル

ボタンの操作は

画面上でガイドされる







銀行のATM vs ゲーム機


※ 18銀行ATMの画面大きさの同じボタンの羅列

※ 任天堂 TetrisDSの画面

選択中が目立つ工夫

上下キー操作が分かる「▲▼」

選択中の項目説明

いつでも「キャンセル」Bボタン






LMSの「使いにくさ」にゲームニクスを使う • 法則(1)「直感的なインターフェース」

– 並列的なメニューの従来画面を廃止し、状況に合わせた限られたボタン（４つ程度）で、ユーザをガイドする

• 法則(2)「マニュアルなしでルールを理解してもらう」 – LMSの各機能におけるオプションの設定をユーザに見せず最小限の設定とする

• 法則(3)「はまる演出と段階的な学習効果」 – ユーザの利用頻度に応じて、自動設定（おすすめ）から、段階的にオプションが解放される

• 法則(4)「（ゲームの）外部化」 – 新型インターフェースの結果が、通常画面で確認できて、どう反映されているか理解できる







改善①直感的なインターフェース

←改善一覧に戻る






改善②マニュアルなしでルールを理解







改善③はまる演出と段階的な学習効果

• ユーザの利用頻度に応じて変化するメニューダイアログ – 初期

システムがおすすめする自動設定状態

– 使い慣れたころ

段階的にオプションが設定出来る状態へと移行

– さらに使い慣れた頃

ユーザのよく使う操作を表示する状態に移行する







改善④（ゲームの）外部化

• 新型インターフェースの利用者がLMSを使いこなせるようになっていることを実感してもらう

• 新型インターフェースの結果が、通常画面（従来のインターフェース）で確認できて、どう反映されているか理解できる







(c)2012 Inoue Kenji 12

実装画面既存UIにオーバレイして表示(JQueryUI)



状態判定条件メニュー内容

１コースに何もないとき初期設定，

教材・活動の追加

２コースに教材があるとき教材・活動の追加，

学生表示の把握

３コースに活動があるとき活動の状況把握

＋状態２

４コースの活動に更新があるとき活動の新着確認，

＋状態３

５コースの活動期限がせまるとき成績を付ける，

提出状況の把握

６コースの期限が近づいたとき学生の成績，

＋状態５ (c)2012 Inoue Kenji JSISE2011年特集論文研究会@九州工業大学

13

ゲームニクス的新型UIの６つの状態とメニュー



• ソフトウェア開発のユーザ中心デザインの要求定義法の一つ。アラン・クーパーらが提唱

• ペルソナ

– 実際のユーザのデータを元に作り上げた架空の人物像

– これを想定してシステムを開発する

• シナリオ

– ペルソナの明示する人物が要求を実現することを想定した行動シナリオ

– システムとユーザとのインタラクションを明確化

• 今回はペルソナと全体像を表現するシナリオの全体フローを作成し，それと新UIの対応を説明する

(c)2012 Inoue Kenji JSET2011年全国大会@首都大学東京 14

ペルソナ／シナリオ法

•棚橋弘季：“ペルソナ作って，それからどうするの？ユーザー中心で作るWebサイト”，ソフトバンククリエイティブ(2008)



• Ｉ教授（５０歳）大学教員

• 基本行動

– 半期の対面講義を複数担当

– 各講義では学生に資料を配り，毎授業後には感想を書かせる

– 講義５回に１回ぐらいのペースで小テストやレポートを課す

• 抱える問題・欲求

– 印刷コストの削減のため資料を配らないようにしたい

– 紙で感想やレポートを回収したり，個別に返却することは時間がかかり講義時間がもったいないと感じる

– 単位が危ない学生が増えてきて，時間をとって個別サポートしたり，成績の計算などにも時間がかかり困っている

– 学生の連絡やレポートなどの負担が軽くなるとうれしい

• 能力

– 資料・小テスト・レポートはWordで作成できる

– 日常的にWebで検索したりメールを読んだりできる

– eラーニングは聞いたことがあるがやったことは無い (c)2012 Inoue Kenji JSET2011年全国大会＠首都大学東京

15

ペルソナ（対象ユーザ像）



(c)2012 Inoue Kenji JSET2011年全国大会@首都大学東京 16

行動フロー（シナリオ）

•教材＝資料配布

•活動＝レポート回収，掲示板，アセスメント（小テスト）

•図３



６つの状態メニューリスト



状態１

チュートリアル


学生の登録

学生の登録

授業回数変更・コース期限設定

授業回数変更・コース期限設定

教材・活動の

追加

教材・活動の

追加

教材の追加

教材の追加

活動の追加

活動の追加

状態２

学生画面の確認


教材の追加

教材の追加活動の追加

活動の追加

初期設定とチュートリアル


学生の登録

学生の登録

授業回数変更

授業回数変更

状態３



教材の追加

教材の追加活動の追加

活動の追加


初期設定とチュートリアル学生の登録

学生の登録

授業回数変更

授業回数変更



学生の活動確認・採点方法

学生の活動確認・採点方法



状態４

新着確認

新着確認

学生の活動

状況確認

学生の活動

状況確認

教材の追加

教材の追加



学生の登録

学生の登録

授業回数変更

授業回数変更

活動の追加

活動の追加



活動履歴

活動履歴成績確認

成績確認

活動履歴


成績確認

状態５

提出確認

提出確認

学生の活動状況確認


教材の追加

教材の追加



学生の登録

学生の登録

授業回数変更

授業回数変更

活動の追加

活動の追加



活動履歴


成績確認

状態６

成績確認

成績確認



追加と初期設定

追加と初期設定



授業回数変更

授業回数変更

学生の登録

学生の登録

活動履歴


成績確認

活動の追加

活動の追加教材の追加

教材の追加

成績確認

成績確認未提出学生（期限延長）

未提出学生（期限延長）

未採点

未採点採点済み

採点済み

未採点確認

未採点確認

教材・活動未配置教員が活動または、教材と活動を配置した

学生が活動した（掲示板投稿・課題提出ある）状態学生が活動がない状態

コース終了まで2週間未満活動の期限が迫る

教員が教材を配置した

JSISE研究会@大阪工業大学 2012-03-17



• コース設定、コース上のオブジェクトの情報から判定する

(c)2012 Inoue Kenji

メニュー判定フローチャート

18

JSISE研究会@大阪工業大学 2012-03-17



デモ１：学生の登録・削除画面



ゲームニクス的LMS・・・状態１（授業初期）なら、メニューから1クリックでこの画面へ

これまで(moodle)・・・画面上から「ロールの割り当て」→「学生」と選択し追加画面へ



デモ２：教材・活動の追加画面



これまで(Moodle) ・・・最小で8回のクリック＋2項目の文字入力。計８回の画面遷移

ゲームニクス的LMS・・・最小で5回のクリックのみ。計3回の画面遷移



デモ３：並び替え・削除画面



これまで(Moodle) ・・・３回のクリック計３回の画面遷移

ゲームニクス的LMS・・・１回の移動（ドラッグ）。計1回の画面遷移



デモ４：学生の活動確認画面



これまで(Moodle) ・・・各回に配置した活動ごとに投稿を確認

ゲームニクス的LMS・・・コース内の未読を一括表示！



• ペルソナとシナリオはまだ仮置きである – eラーニングのコンサルを行う教員（以後これを専門家と呼ぶ）へヒアリング調査を行い

– 現在学内教員１人にヒアリングする予定

• ６つの状態が正しいか

– 上と同じくヒアリングするが、ペルソナ／シナリオが担保された上での議論となる

– 操作性評価でも議論になるものと考える

• ６つの状態のメニュー構造と内容は正しいか

– ６つの状態で変化することが担保された上で、メニューの内容に不備がないかヒアリングする。

– 操作性評価でも議論になると考える

(c)2012 Inoue Kenji JSISE研究会@大阪工業大学 2012-03-17 23

評価方法（内容の妥当性）



• 必要なものが揃っているか

– 内容の妥当性評価により専門家にレビューしたことを実現した上で、足りないものはないか？

– インタビュー調査？ →ヒューリスティック評価

– ターゲットユーザを対象に行う？ →ユーザビリティ評価

• 操作はスムーズであるか

– 決められたメニューを使いこなすことができるか

– ターゲットとなるユーザを対象に行う？

– 操作課題によって評価するか、実際の授業で使うのか。

(c)2012 Inoue Kenji JSISE研究会@大阪工業大学 2012-03-17 24

評価方法（操作性）



ヒューリスティック評価1 ヤコブ・ニールセン「Ten Usability Heuristics」

• シンプルで自然な対話（結果が同じなら手が少ない方） • ユーザの言葉で話す（システムの言葉は使わない） • ユーザの記憶負荷を最小限にする（入力を補助） • 一貫性（画面デザインの統一） • フィードバック（動作中か？応答速度） • 出口を明らかにする（取り消し・戻る） • ショートカット（熟達者に近道を） • 適切なエラーメッセージ（ユーザの分かるメッセージ） • エラーを防ぐ（危険な操作の警告など） • ヘルプとドキュメンテーション



参考（順番等少し違う）：http://website-usability.info/2009/09/entry_090908.html

出典：ヤコブニールセン著：ユーザビリティエンジニアリング原論，東京電機大学出版局

ヒューリスティック評価２へ→



http://website-usability.info/2009/09/entry_090908.html



ヒューリスティック評価２ • システムの目標と利用シナリオを定め、10のヒューリスティックを元に評価する。

–目標の例：講義の資料を掲載する。掲示板を設置する。掲示板から学生の書き込みを探す。得点を付ける。

–資料掲載のシナリオ

• Wordで作った資料をMoodleに掲載する。

資料を差し替えたい。資料を消したい。

• 講義が1週間ずれたので資料を移動したい。



←ヒューリスティック評価１に戻る



ユーザビリティ評価 • 評価の種類

–形成的評価

• インタビュー（発話法）による調査

–累積的評価

• ２つの異なるインターフェースによる比較測定テスト





第132回 ゲームニクスの...

Documents

第132回ゲームニクスの...