卓越したオンラインコースは、理解の障壁となるものを最小限にして提示された、優れたコンテンツから始まります。

効果的なコンテンツデザインにより、コース教材をより魅力的に見せることができます。コンテンツを巧みに設計することで、以下のようなニーズにコンテンツを適合させることができます。

  • 学習しやすさ :新しい学生が、教材を学びながら、すぐにコースを操作できるようになるか。
  • 使用効率 :学生がコース設定を理解した後、すぐにタスクを達成できるか。
  • 主観的満足度 :どのくらいの学生がそのコース教材での学習を楽しんでいるか。
  • 利便性:異なるレベルの能力、経験、知識、語学力、ハードウェア、または集中力を持つユーザが、コースを容易に使用できるか。
  • アクセシビリティ :障害を抱える人々に、障害のない人々が受けているのと同じレベルの情報、サービス、および利用の手段を提供しているか。コースが公平な競争の場であるか。

効果的なデザインは、シンプルでわかりやすいデザインでもあります。クリーンでシンプルなデザインは、芸術的に美しく、またインパクトもあります。

コースを適切に設計するには、計画が必要です。視覚的デザインだけでなく、ライティングスタイル、トーン、情報の配置、およびアクセシビリティも考慮します。


アクセシビリティへの注力

オンラインコースのコンテンツを準備する際には、学生のさまざまなニーズを念頭に置いて作業します。クラスの大半には身体的な障害はないかもしれません。しかし、学生のうちの誰かが視力、聴覚、集中力といった面で障害を持っている可能性があるのです。

World Wide Webの発案者であるティム・バーナーズ=リーは、次のように述べています。「Webの力はその普遍性にある。たとえ障害があったとしても、あらゆる人がアクセスできることは、Webの本質なのだ」オンラインコースもそうあるべきです。

Blackboardはアクセス可能なアプリケーションに力を入れており、あらゆるユーザがその環境自体に可能な限りアクセスできるよう徹底しています。

いくつかのシンプルなガイドラインに従うことで、すべての学生に対して同じレベルのインストラクションを提供できます。

  • 情報の設計が定まり、論理的であることを確認します。
  • レイアウトを、整えられたシンプルなものにします。予測性を実現するために、できるだけ多くのページで同じレイアウトを使用します。
  • カスケーディングスタイルシート (CSS) テクノロジーを使用します。スタイルシートはページの構造とは独立したコンテンツであり、スクリーンリーダーや特殊なブラウザソフトウェアのユーザが、Webページをさらに利用しやすいようにします。スタイルシートはページの外観を制御するのに役立ちます。
  • テキスト、背景、画像に対しては、コントラストのはっきりとした色の組み合わせを選択します。背景はシンプルにします。テキストのコンテンツが濃い色である場合、白が最適です。
  • スクリーンリーダーを使用するユーザや、画像をオフにしてWebページを表示するユーザのために、画像を説明する代替テキストを追加します。以下の2つの例外を除いて、すべての画像に代替テキストを追加します。
    • 画像の周囲にあるテキストが、画像の内容を伝えている場合。
    • 箇条書きのビュレットなど、とくに理解を必要としない画像の場合。
  • 周囲のコンテンツがなくてもリンクを目立つようにします。"ここをクリック。"のような、漠然としたテキストのリンクは使用しないでください。
  • W3C仕様で記述されたHTMLを使用します。W3C標準に照らしてページをチェックしてください。理想としては、障害を持つ人にコースへのテストに参加してもらい、フィードバックを提供してもらってください。以下のオンラインアクセシビリティツールを使用できます。
    • A-Checker Online : アクセシビリティのチェッカーで、Webページが各種のアクセシビリティガイドラインに従っているかを検証します。
    • WAVE Accessibility Toolは無料のWebベースツールで、Webページのコンテンツのアクセシビリティを素早く、効果的に評価できます。

Web用のライティング

オンラインコースのコンテンツを準備するにあたり、Blackboard Learnに組み込みたい既存の教材もあることでしょう。学生の学習効率を最大化するには、Web用に若干の編集を行わなくてはならないことがあります。

オンラインで読むことは、印刷された教材を読むのと大きく異なります。1997年にヤコブ・ニールセンが実施した調査によると、研究者らのテストユーザの約80%がWebページを斜め読みしていたことが判明しました。内容を一字一字読んでいた人は、たったの16%でした。

また、同調査はほとんどのユーザが概ね「F」字型にものを読んでいることも示しました。まず、ユーザはページの上部を横へと読み進めます。次に、少しページを下ってから、再度横方向に読み進めます。最後に、ユーザの視線はページの左端部分を縦に移動します。

テストユーザのオンライン読書習慣から学び取れることは何でしょうか。まず、最も重要な情報は最初の2段落に入れてください。学生がそれ以上読み進めなくとも、教員が伝えたい主な概念を目にすることができます。認知機能障害のある学生は、ページの途中で読むのをやめてしまうことがあるので、情報がこのように構成されていることが役立ちます。

この表に、ヤコブ・ニールセンのWebサイトのガイドラインを詳しく記載します。

ヤコブ・ニールセンのガイドライン
ガイドライン説明
ページの斜め読みの支援
  • 情報を「かたまり」で提示します。
  • サブ見出しや段落に、情報を伝える文言を追加します。
  • コンテンツを区分する場合は箇条書きを使用します。
  • 簡潔な文章を使用してください。
入念に構成された段落の作成
  • 1つの段落につき、1つの考えを提示します。1段落の文は2つから4つまでに制限します。
  • 最初の文に最も重要な情報を入れ、詳細をそれに続けます。
文字数を減らす
  • 印刷物の場合よりも文字数を50%減らします。
  • 1ページが2~3画面よりも長い場合は、もっと短くして、複数ページに分割します。
キーワードの強調表示
  • 色、太字、斜体、または書体のバリエーションを適切な範囲で使用します。
  • すべて大文字で記載することは、読みにくくなるため避けてください。
  • 下線を使用しないでください。学生が下線の付いたテキストをリンクと誤解する可能性があります。
会話調を用いる
  • 会話をしているかのように、親しみやすいトーンで、ただし情報が伝わるように書きましょう。
  • 人称代名詞と動作動詞を使用します。
  • アクティブな音声を使用し、文章がスムーズに流れ、簡潔であり、理解しやすいようにします。
  • 専門用語、不必要に複雑で専門的な言葉を避けます。

効果的なレイアウト

テキストのみのフォーマットは読みやすさという点で重要ですが、ページのデザインとレイアウトもコンテンツの効果に大きな影響があります。

ページを設計する際には、以下の原則に従ってください。

  • 整理された、シンプルなページを使用します。読者に威圧感を与えないために、段落、画像、その他のページ要素の区切りに十分な空白を使用します。
  • 段落をブロック形にします。各段落間はスペースを入れ、最初の行はインデントしないでください。
  • 一貫性を保ちます。ページ間のデザイン要素を反復するレイアウトを使用して、予測ができるようにします。各ページで同じフォント、色、および見出しスタイルを使用して、学生が快適に感じ、すぐに情報を見つけ出せるようにします。
  • 見出しを使用します。情報を「かたまり」に分けて、ページの斜め読みを容易にします。
  • 一貫した配色を使用します。カラーは5色以内にしてください。同じ色調の各種の影を、1色か2色のアクセントになるカラーとともに使用するのが効果的です。極力読みやすくなる色を選択します。迷う場合は、白地に黒を使用します。

グラフィックによる強化

他のコンテンツを強化するものとして、あるいは単独の教育要素としてグラフィックを使用できます。グラフィックを使用することで、チャート、写真、グラフ、例示などで貴重な情報を表示できます。画像によって、バナーを使用したナビゲーションや、アイコンの使用によって学生をコース内で案内するための視覚的手がかりを提供することができます。

優れたデザインのグラフィックは、以下のようにして学生を支援します。

  • 視覚的な手がかりによって、さまざまな種類の情報に移動したり、そうした情報を見つけたりする。
  • 理解が難しい情報を説明する。
  • テキストで説明された資料の視覚的、概念的モデルを形成する。
  • アイデアとコンセプトの関係を理解しやすくする。
  • グラフィックは、単に見ばえが良いからではなく、目的を持って使用します。デザインばかりが良くて内容が今ひとつだったり、必要以上にダウンロード時間がかかるのはよくありません。

画像を使用する場合の基本的な規則を以下に挙げます。

  • 適切な形式を使用します。写真はWeb対応形式で保存する必要があります。一般に、ロゴ、チャート、図面などのシンプルなグラフィックには、PNG形式を使用します。JPG形式は通常、微妙な陰影やグラデーションのある写真や画像に適しています。またJPG形式は圧縮率が高く、1500 KBのファイルを150 KBまで圧縮可能ですが、画質はその分低下します。画像品質の良さとファイルサイズの小ささを考慮して、最適な形式を選択します。
  • アニメーションの取り扱いには注意してください。コンセプトや概念を説明するのにアニメーションは非常に有効ですが、多用されすぎることがよくあります。アニメーションが教材から逸脱しないようにします。また、許可を取って使用します。
  • 背景画像の使用は避けます。背景画像を追加するのではなく、白または薄い単色の背景を使用します。テキストと背景のコントラストが高いと読みやすくなります。
  • ファイルサイズに注意します。大きい画像が多数あるページは立派に見えるかもしれませんが、画像の読み込みに時間がかかり、待たされるためユーザは嫌がります。
  • 画像はトリミングしてください。画像のサイズが小さいほど、ダウンロード時間の短縮への効果が大きくなります。

コースサイズを小さくする

作成するコースのサイズに気を配れば、担当のBlackboard管理者はきっと感謝してくれるでしょう。所属教育機関において、コースのサイズが制限されている場合があります。コンテンツ作成時にアップロードするファイルのサイズを最小限に抑えれば、全期間を通じてサイズの制限内にとどまることができます。次の推奨事項を行うことで、所属教育機関のサーバのディスク領域節約に役立ちます。所属教育機関には、他にも従うべき方針がある場合があります。

動画 :コースに動画ファイルをアップロードするのではなく、動画にリンクできます。YouTube、Vimeo、またはキャンパス内の別のメディアサーバに動画をアップロードし、コース内からそれらにリンクします。知的財産権のルールに留意してください。たとえば、National Geographicが作成した動画をVimeoに投稿する行為は、コースでの使用許諾を得ている場合でも違法になることがあります。

マッシュアップの使用 :スライドプレゼンテーションをSlideShareに、動画をYouTubeに、または画像をFlickr©にアップロードします。これらの要素は、Blackboard Learnのマッシュアップツールを使用して、元のコースに簡単に埋め込むことができます。

コースファイルまたはコンテンツ管理 :削除できる、サイズの大きいファイル、および使用していないファイルやフォルダを探します。

ファイルサイズの縮小 : ファイルをアップロードする前に、サイズを縮小してみてください。

  • Microsoft Officeファイル : Microsoft Office内で利用可能なツールを使用して、スライドプレゼンテーションやWordファイルのサイズを縮小します。ファイルサイズを縮小するオプションは、[ファイル]メニューにあります。アップロードする前にファイルをPDFとして保存すれば、読み取り専用バージョンとして、多くの場合サイズが小さくなります。
  • 画像 :グラフィックプログラムを使用して、画像サイズを画面表示用に変更してからアップロードします。また、Shrink Picturespicresize®などのオンラインサービスも利用できます。
  • 音声:音声ファイルを再サンプリングまたはトリミングするソフトウェアを使用してサイズを縮小します。