メインコンテンツまでスキップ
pdf?stylesheet=default
Blackboard Help

ページデザイン

クリーンかつシンプルを心がけます。

次のリストは、コンテンツの効果と読みやすさを高めるためのページのデザイン、レイアウト、タイポグラフィのアイデアを提示します。

デザイン方針

  • ページをクリーンで整理された状態に保ちます。読者に威圧感を与えないために、段落、画像、その他のページ要素の区切りに空白を十分に使用します。
  • テキストや見出しを左に合わせます。オンライン読者の目は、通常、ページの左側を下へと移動します。見出しをセンタリングすると、読者は教材への集中状態を維持するのが大変になります。
  • 段落をブロック形にします。各段落間にスペースを入れるとともに、最初の行はインデントしないでください。
  • 一貫性を保ちます。ページ間のデザイン要素を反復するレイアウトを使用して予測可能性を生み出します。各ページで同じフォント、色、アイコン、および見出しスタイルを使用して、学生が快適に感じ、即座に情報を見つけ出せるようにします。
  • 見出しを使用します。情報を「かたまり」に分けて、ページの斜め読みを容易にします。色スキームを慎重に選択し、できるだけ読みやすくなる色を使います。疑問がある場合は、白地に黒を使用します。
  • データを示すのに表を使用します。ページレイアウトの作成には、表を使用しないでください。データに使用する表にタグを追加できるので、スクリーンリーダーはヘッダー行とセルのデータを解釈できます。表を使ってページのレイアウトを定義する場合、スクリーンリーダーは、そのページの情報を解釈するのに手間取ります。
  • シンプルなフォントを使用します。コース全体を通じて、4種類以上のフォントは使用しないでください。フォントの使い方に一貫性を持たせてください。たとえば、本文にはVerdanaを使用し、小見出しにはTimes New Romanを使用するなどです。Arial、Times New Roman、Trebuchet、Georgia、Verdanaなど、どのコンピュータにも標準で搭載されており、読みやすいフォントを使用します。 

    詳細については、「10 Typography Mistakes」(フォントに関する10件のエラー) に、良い例と悪い例が紹介されています。このWebサイトは、優れたページをデザインするためのすべての原則のリストが紹介されている良い例です。

レイアウトの例

次の画像をクリックしてブラウザで拡大表示します。ブラウザの[戻る]ボタンを使ってトピックに戻ります。

見つけやすい見出し

  • 便利で単純なアイコンが見出しに追加されているため、読者は、目的のページを簡単に見つけることができます。
  • "例" のように色分けされているため、ページの要素がすぐに見分けられます。
  • 水平のバーで、ページを管理しやすい「かたまり」に分割できます。
  • スペースを使用してページレイアウトを整え、内容を強調したり、分割したりできます。読者の目線を、要素から要素へと導くことができます。

わかりやすい画像

学習者の一部は、情報が視覚化されている方がわかりやすいと感じます。このような学習スタイルに合わせるには、画像とテキストが混在するページにします。

自問すべき質問 :学習者は画像を見て、テキストを読まずに理解できるでしょうか?

一貫したアイコンの使用

ページを短く簡潔にしておくために、詳細情報は他のページへのリンクで提示します。たとえば、学生が動画を見るようにする場合は、リンクを常に同じアイコンで示します。

一貫性を保つことで、ユーザがコースでの操作を快適に感じ、内容を予測しやすくなります。