ベストプラクティス : ブランドのカスタマイズ

所属教育機関のカスタマイズされたブランドを作成することは、そのロゴや色、および重要な情報をユーザに伝えるための早道です。カスタマイズされたブランドは、その教育機関の性格、声、そしてどのようなサービスを約束するかを伝えるものです。単純なものから複雑なものまで、ブランドをカスタマイズするための方法が幅広く用意されています。

ブランドのカスタマイズを始める前に、カスタマイズの目標、計画、アプローチを確認します。

• カスタマイズのスコープを確認し、目標の達成のために最善かつ最も容易な手法を選択します。たとえば、教育機関の色およびロゴを追加するためだけにカスタマイズされたシステムテーマを作成する必要はありません。代わりに、デフォルトのブランドで色の変更、ロゴの追加といったカスタマイズを試してください。
• 自分の教育機関のアイデンティティについてよくリサーチして、確立されたブランディングおよびスタイルのガイドラインに忠実に従えるようにします。
• カスタマイズされたログインページ、ゲートウェイページ、およびシステムテーマをデザインするときは、モックアップを作成します。
• カスタムパレットおよびカスタムテーマのデザインとテストに十分な時間を配分できるように開発期間のスケジュールを設定します。
• カスタムシステムテーマのために、品質保証 (QA) および保守のための計画を作成します。

カスタムログインページおよびゲートウェイページ

カスタムログインページ - ブランドのカスタマイズを始める簡単な方法は、ログインページをカスタマイズすることです。ログインページは、専用のCSSおよびほとんどの編集可能なマークアップを含んだ単一のファイルです。ログインページのデザイン変更は、アプリケーションの他の部分に影響しないため、変更のスコープは小さいと言えます。カスタマイズしたログインページの作成には、HTMLおよびCSSの経験が必要です。また、関連する画像をどこに保存するかも決める必要があります。詳細については、「ログインページのカスタマイズ」を参照してください。

[ゲートウェイ]ページ - [ゲートウェイ]ページは、ユーザがBlackboardにアクセスするときに、この設定がバイパスされていない限り最初に表示されるWebページです。カスタマイズしたようこそメッセージおよび画像追加したり、重要な情報やタイムリーな方法を表示するモジュールを追加することができます。カスタマイズしたモジュールの作成には、HTMLおよびCSSの経験が必要です。詳細については、「ログインページのカスタマイズ」および「[ゲートウェイ]ページのカスタマイズ」を参照してください。

ポータルページデザインのベストプラクティス

[所属教育機関]ページなどのポータルページは、多くの場合、ユーザがBlackboard Learnにログインしたとき最初に表示されるページです。ページのモジュールコンテンツをデザインしたりレイアウトを変更する場合によく注意を払うことは、ブランドを高めるとともにユーザエクスペリエンスの改善につながります。これは、2つの一般的な手順により実現できます。

1. モジュールコンテンツ全体をレビューして、新しく適用されたブランドと不調和が生じないようにします。モジュールコンテンツをデザインするときは、自分のテーマおよびパレットにより規定されている規約に従うようにします。モジュールをHTMLとしてコーディングすることで、モジュールテキストが、テーマとパレットで定義されている色とスタイルに対応できるようにします。モジュールには、メッセージを伝えるために、Webサイトのバナー広告に類似した単一の大きな画像が使用されていることがあります。画像は、生き生きとしたページを作成するためには必要です。しかし、ヘッダーテキスト、パラグラフテキストおよびグラフィックスが詰め込まれたバナー広告のルックアンドフィールは、自分のブランドで使用されているテーマとパレットとは調和が取れない場合があります。HTMLを使用することで、ブラウザウィンドウのサイズを変更するとコンテンツもリサイズされるなど、モジュールの柔軟性を高めることができます。
2. 視覚的な階層性を定義することで、ユーザがざっとコンテンツに目を通したり、操作可能なコンテンツを見つけることが容易になります。多くの場合、これは言うほど簡単ではありません。ポータルには、多様なコンテンツを持った多くのモジュールが使用されており、多くの内部のステークホルダーのニーズに対応する必要があるからです。個々のステークホルダーは、自分のコンテンツを目に付くようにしたいと考えます。一般論的には、すべてのモジュールが同程度の目に付きやすさを持っている、つまり、何も目立つものがないと、むしろユーザを困惑させることになる可能性があります。ページを全体的に眺めて、ユーザが最も大事なコンテンツを容易に見つけられるようにモジュールの配置を変更してみてください。

ポータルページのデザイン時に適用可能なそれ以外のベストプラクティスは、このタイプのページに特有のものではなく、ブランドのルックアンドフィールの定義時にすでに考慮している一連のプラクティスなどです。

アクセシビリティ

• アクセスしやすいコントラスト比の使用
• テキストが読みやすくなるように、適切なフォントのフェース、大きさ、および行の高さ(line-height)を選択する
• テキストに画像を使用することは避ける
• テクスチャーを背景に使用することは避ける
• リンクには、「ここをクリック」などではなく意味のある名前を付ける
• W3Cや当社のアクセシビリティページへのリンクを含む。

見栄えの美しさ

• ブランドおよびテーマにマッチするカラーを使用します
• 読みやすいフォントフェース
• 高品質なグラフィックスの使用
• ページ全体を埋めるようにモジュールを配置する
• 視覚的な階層構造を与えることで、ざっと目を通しやすくする
• うるさい、騒がしい、込み合ったページデザイン/レイアウトを避ける
• 定期的にページコンテンツを更新する
• 可能であれば、レスポンシブWebデザインテクニックを適用して、異なるディスプレイごとにコンテンツが適切なサイズで表示されるようにします。

Learnのデフォルトのモジュールレイアウトで制約を感じる場合は、ポータルページを編集して、単一のHTMLモジュールだけで構成された単一列を使用することを検討してください。単一モジュール内のカスタムHTMLを編集すれば、任意のレイアウトを使用したり、他のインデックスページのトレンドを模倣したりできます。

グラフィカルユーザインターフェイス (GUI) の制御

GUIの制御 - Learnインストールのオプションから色やレイアウトを選択して、ブランドのルックアンドフィールを簡単に変更できます。次のことができます。

• 特定の種類のUIエレメントの色を変更する
• 特定のURLに対してロゴ画像およびリンクを指定する
• システムタブの色およびレイアウトオプションを選択する

これらの変更を行うには、HTMLまたはCSSの知識は一切必要ありません。システム全体に変更を適用する前に、選択結果をプレビューペインで確認できます。選択した色はすべて、カラーパレットとして保存できます。

カラーパレットとシステムテーマ

カラーパレット - Blackboard Learnには、カラーパレットが多数用意されています。それらの1つを、デフォルトブランド用に選択できます。パレットのカラーはUIを使用して変更することができます。また、パレットをダウンロードしてから、テキスト編集ツールまたはCSS編集ツール使用して修正することもできます。

システムテーマ - システムテーマとは、所属教育機関のルックアンドフィールを決定するCSSレイヤを指します。Blackboard Learnが提供するテーマを選択することも、専用のテーマをデザインすることもできます。専用のテーマをデザインするための最も簡単な方法は、既存のテーマをダウンロードしてテンプレートとして使用することです。テキスト編集ツールまたはCSS編集ツールを使用して変更を行います。

カスタムカラーパレット

カスタムカラーパレット - UIのカスタマイズの幅を広げて、所属教育機関のカラースキーム、ロゴ、ブランディングにマッチする専用のカラーパレットを作成できるようになります。Blackboard Learnには複数のカラーパレットがあり、異なる色をシステムに適用することができます。既存のカラーパレットを編集して、特定の要件に適合させることができます。

カスタムカラーパレットデザインのベストプラクティス

カスタムパレットで使用する色の選択時に、次のようなベストプラクティスに留意します。

• アクセシビリティの点から、背景に対してテキストを配置する場合は常にアクセスしやすいコントラスト比を使用します。

• 自分の教育機関の視覚的なアイデンティティにマッチした色を使用します。オフィシャルな色については、教育機関のスタイルマニュアルを確認してください。選択した色の組み合わせが、UIで使用するのに適切なカラースキームに変換されるようにします。
• 選択した色の相性が良く、調和のとれた視覚体験を提供できるようにします。Color Mattersは、単色、相似色、補色などのカラースキームについて学ぶのに最適なウェブサイトです。色彩理論を学習すると、教育機関にふさわしい配色を選択するのが容易になります。