分岐シナリオのようなゲーム要素でeラーニングを盛り上げようとしている場合でも、複雑なゲームのようなコースをデザインしている場合でも、優れたコンテンツデザインは、ポジティブな学習体験のためであることは間違いありません。しかし、適切に記述され、構造化された優れた内容は、まだ戦いの半分に過ぎません。残り半分は学習者の興味を引くための強力なビジュアルデザインが必要です。
これは特に、eラーニングのゲーミフィケーションに当てはまります。Karl Kapp博士によって定義された基本的なゲームデザイン要素（エンゲージメント、習得、自律性、進捗状況）の多くが、視覚的なデザインがしっかりとしている時に、より説得力（かつ効果的）があり、学習者を目標達成に没頭させ、サポートするためです。
では、ビジュアルデザインでコンテンツを強化し、逆に邪魔にならないようにするにはどうすればよいでしょうか。覚えておくべき5つのヒントを次に示します。
ヒント＃1：視覚的に「フック」するコンテンツ
作家が言葉を使って小説に「フック」（没頭）させるのと同じように、学習者を魅了してストーリーに引き込むビジュアル要素やモチーフなどをeラーニングコースで提供します。
ビジュアルデザインをうまく使うと、内容を視覚的に簡単で解釈させやすくなり、逆に誤解されることが少なくなります。Articulate’s E-Learning ChallengesとE-Learning Examples hubsは両方とも、デザイナーがビジュアル的に扱った様々なサンプルがぎっしりと詰まっています。以下は、比較して対比できる2つのサンプルです。
サンプル＃1
Articulateの達人、Kate Atkinsonが作成したサンプルコンテンツをご覧ください。学習者が薬剤詐欺を暴く私立探偵になることができます。
コンテンツはFlash版でパブリッシュされています。
テーマはかなり深刻に見えますが、きびきびした記述は、テーマが暗すぎることを防いでいます。ビジュアル的にも白黒フィルムの雰囲気は、内容に没頭でき、エンゲージメントされ、楽しく、やりがいのある体験を生み出しています。
サンプル＃2
Articulate HeroのNancy Woinoskiが作成したサンプルコンテンツは、学習者に盗まれた自転車を調査するという同様のテーマに対してのデザインアプローチです。
Nancyの探偵テーマでは、彼女はカラフルな図解で、学習者をフックして、物語に引き込んでいます。一つ目のサンプルテーマのエッジの効いたヴィンテージ感の代わりに、Nancyのテーマトーンは、ビジュアル的なものとマッチして、もう少し遊び心があります。
視覚的なフックでモチーフの解釈を絞り込むことができます。
ゲーム要素とテクニックをeラーニングに適用する方法については、「ゲーミフィケーションをeラーニングに取り入れる」を参照してください。
ヒント＃2：タイポグラフィ（文字のデザイン）で視覚的なまとまりをもたせる
まとまりのあるビジュアルデザインを作成する場合は、画像だけではありません。タイポグラフィは、情報を学習者に伝えるだけでなく、気分や個性を伝えるのに大きな役割を果たします。
楽しく気楽なテーマの場合は、カジュアルな雰囲気で気分を補完するフォントを検討してください。手書き風フォントは、よりリラックスしたムードを伝えるために使えるフォントです。
フォントの個性とテーマを調整する一例として、最近ゲーミフィケーション化された食料品をテーマにしたサンプルをご覧ください。本文にはカジュアルで読みやすい手書きフォントのPatrick Handを使用し、見出しには様式化されたスクリプトフォントのPacificoと組み合わせています。
これら2つのフォントは、黒板に使うことで食料品店テーマを補完するだけでなく、拡大縮小しても容易で読みやすいことがわかりました。
これは、フォントの書体を選択する時に重要な要因です。読みやすさは常に優先されなければなりません。本文に最初に選んだ書体は、思ったより複雑で読みづらかったので、最終的にはPatrick Handに置き換えました。気に入った書体が拡大縮小できない、または読みづらい場合は、装飾化されていないフォントを使用するか、アクセントテキスト用として様式化されたフォントを少しだけ使うなどをお勧めします。
さらに、eラーニングでタイポグラフィを効果的に使用するための詳細なガイダンスとヒントについては、無料の電子ブックHow to Use Typography to Improve Your E-learningをご覧ください。
ヒント3：一貫性のある直感的なナビゲーションをデザインする
eラーニングにゲームのような感覚をもたらす素敵なビジュアルを使うと、ナビゲーションボタンなどの基本要素がどこに行ったか分からなくなることがあります。しかしナビゲーションにもしっかりと愛情を注ぎこみましょう！
実際、ゲーミフィケーション化されたeラーニングは直感的なナビゲーションが特に重要になります。これは多くの場合、非線形であるためです。つまり「次へ」ボタンでコースを進めるわけではないからです。さらにゲーミフィケーション化されたeラーニングのナビゲーションには、よりリッチなデザインがもたらす視覚的な複雑さも加わります。その視覚的な情報すべてが、「どこをクリックすればいいのか？」と学習者を混乱させる可能性があります。
では、テーマに沿った一貫性のある直感的なスタイルのナビゲーションを備えたビジュアルデザインをどのように作成すればよいのでしょうか？コントラストと反復を使ってみてください。
コントラスト
学習者が画面上のオブジェクトを区別しやすくするために、画面上の要素にコントラストをつけることが重要です。コントラストは学習者の目を引くことができます。
テキストのサイズ、太さ、スタイルを変えて階層関係を示し、強調するなど、様々な方法でコントラストが使えます。
以下のクリエイティブなタブテンプレートのサンプルでは、画面上のあるオブジェクトまたはテキストに注意を引くために、色や色相でコントラストをつけています。
反復
反復はすべての繰り返し要素なので、学習者は繰り返し出てくるナビゲーションボタンなどのオブジェクトの改めて操作方法を見つけたり、考えたりする必要はありません。たとえば、他のグラフィック要素と同じ方法でナビゲーションボタンやアイコンスタイルを設定し、コース全体でそのスタイルを使用します。またコース全体で同じ場所にナビゲーションボタンを配置することで、クリックする場所を探す手間を省くことができます。
ナビゲーションのコントラストと反復のサンプルについては、Nicole Legaultが作成したこの卓越した就職面接シミュレーションコンテンツをご覧ください。
コンテンツはFlash版でパブリッシュされています。
インタビュアーであるEricaを目立たせるためにグレーの背景を使用する方法がいいですね！またコントラストを使用した下部のプログレスメーターがポップです。詳細は後で説明します。また最初のいくつかの画面内で、メンタルリズムの種類を確立し、直感的に左に注意を向けて次のフィードバックを表示したり、選択肢を増やしたりできるように、巧みに左側に配置しました。
様式化された、一貫性のある、直感的なナビゲーションを使用することは、学習者にとってよりまとまりのある没入型のエクスペリエンスのための最も簡単なことの1つです。さらに詳しく知りたい場合は「3つの重要なビジュアルデザインコンセプト」という素晴らしい記事をご覧いただき、さらにヒントや例を紹介しています。
ヒント＃4：インタラクティブビデオを使う
学習者を設定状況に引き込み、自由に探らせ、自分が選んだ結果を体験することができるインタラクティブビデオの感情表現やエンゲージメントを超えられるものはなかなかありません。これはゲーミフィケーションの武器の中で最高のビジュアルデザインツールの1つです！一般的なeラーニングコースでは、講師が講義しているビデオが頻繁に使われていますが、インタラクティブビデオを使用すると、キャラクターを紹介したり、アクティビティのステージを設定できたり、学習者に自分の冒険を選択させたり、途中で選択したシナリオの結果から学んだりすることができます。まさに創造性は無限大です。
ではMike Endersが作成した、Articulate Storylineのホットスポット機能とレイヤー機能を使った、ビデオにインタラクティビティを追加しましたシンプルなサンプルを作成するデモビデオをご覧ください。このアプローチは、ビデオにより多くのコンテキストを与えるのに役立ちます。また、学習者のクリティカルシンキングとデシジョンメイキングを促すのに役立ちます。
次のレベルに進むには、eラーニングラボのスーパーヒーローPhil Mayorsのこの魅力的なStorylineのサンプルをご覧ください。これも刺激的なeラーニングの良さに満ちています。
ヒント＃5：学習者の進行状況を視覚的に示す
最初に述べたように、ゲーミフィケーションの基本的な要素の1つは進捗です。進行状況を視覚的に示すインジケーターは、自分がどのあたりにいるのか、そして習得するまでにあとどれだけ進んでいかなければならないかを理解するのに役立ちます。
進行状況を示す1つの方法は、単純なドットオブジェクトを使用することです。これは、ヒーローMichael Hinzeのサンプルに示されています。
株式会社ディーシェは日本におけるArticulate製品の販売代理店です