画面遷移図の作成

ここでは、タスク(サンプルコンテンツのチェック・分析結果と改善提案)に添える画面遷移図について説明します。

画面遷移図の意味

画面遷移図は、画面の構成を表す図のひとつで、ユーザ(学習者)に対して画面がどのような順序で表示されるか、ユーザ(学習者)はどのような操作を経て学習していくか、画面どうしがそのような関連性を持っているのか、システム(LMS)にはどのような機能が必要か、を示した図です。eラーニングを導入する際、特にクライアントや社内の関係者に対して提案する場合に必要となります。

 画面遷移図がどのようなものか、システム開発等のなかでどのように使われるかをイメージするため、システムやアプリケーション開発の中で画面遷移図に関して説明しているサイトを見てみましょう。

このように、システムやアプリケーションの開発をする上で、画面遷移図は重要な役割を果たしています。

講師(北村)が尊敬している社会学者・思想家にテッド・ネルソンという人がいます。ネルソンは1965年に「ハイパーテキスト」というコンセプトを打ち出しました。現在のWorld Wide Webはこのコンセプトに触発されたものと言われています。ネルソンは2000年前後の数年間、慶応SFCにいて、私も何回か講演を聴きに行きました。

ネルソンは常に「ユーザが何をしたいか、をまず考えろ。そしてそれを実現することだけを考えろ」と言っており、現在のシステムの多くは技術面や内部設計が先行あるいは優先していると力説していました。「ユーザ中心に考える」ということは当たり前のことだと思われますが、開発する側にとってはそれがなかなか「当たり前」にはならないようです。開発側には開発側の事情や苦労があるからでしょう。

そう考えてみると、ユーザ・発注者・開発側をつなぎ、常に「ユーザ中心」に考えてeラーニングの開発や導入を進めていく上でも、画面遷移図は重要と言えるでしょう。

画面遷移図の書き方

画面遷移図には決まった書き方は無いようです。講師(北村)は保険会社に勤務していた頃、多くの会社からeラーニングの提案を受けました。提案書の中にはほぼ必ずと言っていいほど画面遷移図が含まれていましたが、書き方は会社によって本当に様々でした。

ある意味では、開発・提案側の腕やセンスの見せ所、と言えるかもしれませんが。

講師(北村)は前述の通り、様々な提案書をクライアントの立場で見てきましたが、画面遷移図についてクライアントとして嬉しいものは次のようなものです。

  • どのように画面の間を動き、どのような操作をしていくかが、ユーザ(学習者)としてイメージできる。
  • 特にメインストリーム(通常使う流れ)が明示され、それ以外のもの(たまに使う機能)と区別されている。
  • 主要な画面は網羅されている。ただし、あまり細かすぎず、全体を俯瞰できる。
  • 遷移した画面そのもののイメージも分かる(スクリーンキャプチャやイメージ図が貼ってある)。
  • LMSにどのような機能が必要で、それはどのように使われるか。

これらを踏まえて、かつ皆さんがクライアントやユーザだったらどのような図が嬉しいかを考えながら、書き方を工夫してみましょう。

画面遷移図の参考として2つの見本をお見せします。

まず、講師(北村)が鈴木教授、根本助手とともに登板した「e-Learning Canferance 2006 Winter」の研修資料として配付したもので、イングリッシュタウン(http://www.englishtown.co.jp/)という英語学習のeラーニングを分析したものです。なお、この研修では画面を実際に受講者に見せてプレゼンしたため、画面イメージは書き込まれていません(画面イメージは別添した、とお考えください)。

eLF2005_session3_sen.pdf(PDF:117KB)

 もう一つは産業能率大学のSanno Knowledgge Fieldというeラーニングの画面遷移図です。このコンテンツは2008年まで本科目でサンプルケースの題材として使っていたもので、画面遷移図は講師(北村)が例示をするために作成したものです。作成にあたっては、学習者としてログインし、コンテンツを動かしながら画面をキャプチャーして遷移を記録し ていきました。

 skf_sennizu.pdf(PDF:258KB)

Last modified: Friday, 26 September 2014, 9:28 AM