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

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

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

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

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

File:ja-jp/Learn/Sandbox/ja-jp/Learn/9.1_SP_12_and_SP_13/Administrator/180_User_Interface_Management/040_Brands_and_Themes/Best_Practice_Customizing_Brand/easy.png カスタムログインページとゲートウェイページ

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

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

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

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

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

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

アクセシビリティ

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

見栄えの美しさ

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

ヒント

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

File:ja-jp/Learn/Sandbox/ja-jp/Learn/9.1_SP_12_and_SP_13/Administrator/180_User_Interface_Management/040_Brands_and_Themes/Best_Practice_Customizing_Brand/sort-of-easy.png GUIコントロール

GUIコントロール - Learnインストールの配色およびレイアウトを選択することで、ブランドのルックアンドフィールを簡単に変更できます。次のことができます。

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

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

File:ja-jp/Learn/Sandbox/ja-jp/Learn/9.1_SP_12_and_SP_13/Administrator/180_User_Interface_Management/040_Brands_and_Themes/Best_Practice_Customizing_Brand/middle.png カラーパレットおよびシステムテーマ

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

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

File:ja-jp/Learn/Sandbox/ja-jp/Learn/9.1_SP_12_and_SP_13/Administrator/180_User_Interface_Management/040_Brands_and_Themes/Best_Practice_Customizing_Brand/complex.png カスタムカラーパレット

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

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

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

  • 自分の教育機関の視覚的なアイデンティティにマッチした色を使用します。オフィシャルな色については、教育機関のスタイルマニュアルを確認してください。選択した色の組み合わせが、UIで使用するのに適切なカラースキームに変換されるようにします。
  • 調和の取れた視覚的なエクスペリエンスを実現します。「Color Matters」は、単色、相似色、補色などカラースキームについて学習するのに役立つWebサイトです。色彩理論を学習すると、教育機関によくマッチした配色を選択するのが容易になります。

File:ja-jp/Learn/Sandbox/ja-jp/Learn/9.1_SP_12_and_SP_13/Administrator/180_User_Interface_Management/040_Brands_and_Themes/Best_Practice_Customizing_Brand/most-complex.png カスタムシステムテーマ

カスタムシステムテーマ - カスタムシステムテーマを作成すると、教育機関にインストールされているLearnのUIを完全に作り変えることができます。これは、最も手間のかかる複雑なカスタマイズ方法であり、12,000行以上のコードのレビューおよび編集が必要になります。これは、Blackboard LearnのUIを教育機関の視覚的なアイデンティティにマッチさせる最良のオプションですが、新しいLearnがリリースされるたびに必ずテストが必要になります。

カスタムシステムテーマデザインのベストプラクティス

カスタムシステムテーマのデザインは複雑な作業です。片手間にできるようなものではありません。CSSおよびDOMについての十分な経験が求められます。また、テーマを開発、テスト、および保守するための開発環境が必要です。

  • - 自分の教育機関の視覚的なアイデンティティについてリサーチします。教育機関に、ブランドカラーについてのセクションを含むスタイルマニュアルが存在する可能性があります。選択した色の組み合わせが、UIで使用するのに適切なカラースキームに変換されるようにします。
  • 色の調和 - 単色、相似色、補色などカラースキームについての一般的な理解があると、組み合わせたときに調和が取れ、ブランドカラーにも合う色を選択するのに役立ちます。
  • アクセシビリティ要件 - 最終的なシステムテーマが十分なコントラストを備え、その他の面でもアクセシビリティに対応していることを確認するには慣れが重要です(http://www.w3.org/TR/WCAG/)。
  • フォント - ブランドには異なるフォントを指定できます。異なるオペレーティングシステムで表示できるかどうかフォントをテストします。自分のテーマにカスタムフォントをインクルードし、@font-face規則を使用してそれらのフォントを参照することで、カスタムフォントを導入できます。カスタムフォントが授業で使用する言語をサポートしていることを確認してください。
  • アイコン - 特定のアイコンのデザインを変更して、アプリケーション全体で背景画像として使用できます。

カスタマイズされたブランドの変更管理

アップグレードの評価およびテスト時には、復元する必要が生じた場合のために、すべてのカスタマイズをダウンロードして保存しておくことが極めて重要です。テーマDIFFツールを使用すると、Learnのあるバージョンと別のバージョン間でCSSに加えられた変更を比較できます。このツールを使用すると、CSS内の変更箇所を容易に検出できるので、それらが自分のカスタマイズにどのような影響があるかを評価できます。

ブランドを定義する各要素(通常、テーマ、パレット、およびロゴ)は、ページコンテンツとは、はっきりと異なります。[ポータル]ページなどのパブリックなページのコンテンツを忘れずに監査し、それらのページがブランドに規定されているビジュアルガイドラインに合致するようにしてください。

カスタムシステムテーマと新しいBuilding Blockのインストール

カスタマイズされたシステムテーマを使用している場合に、ソフトウェア更新を通じてインストールしたBuilding Blockに含まれる新しいページにもカスタマイズを適用したいことがあります。このようにインストールされたBuilding Blockに必ずツール固有のスタイルシートが含まれているわけではありませんが、含まれていることもあります。

1つ以上のカスタムテーマがあるシステムに、独自のスタイルシートが含まれているBuilding Blockをインストールすると、インストール中に受信情報が表示されます。この受信情報では、Learnのアップグレード時と同様に、カスタムテーマに対して機能の確認を行うことが推奨されます。このメッセージは、システムにカスタムテーマがすでにインストールされている場合に表示されます(そのテーマが現在使用されていない場合を含む)。

Building Blockにツール固有のスタイルシートが含まれているかどうかの情報は、どのBuilding Blockに関するものでも管理者パネルにあります。[Building Blocks]セクションで、[Building Blocks]、[インストールされているツール]の順に選択します。リストされている任意のBuilding Blockのコンテキストメニューから、[コンポーネントの表示]を選択します。Building Blockに含まれているツール固有スタイルシートの中に、Learnに付属するいずれかのテーマに対応するものがある場合、このページにテーマハンドルがリストされます。

パッケージのコピーをオフラインで保存して管理する場合には、SP14へのアップグレード後に、管理パネルUIからオフラインのカスタムテーマパッケージをダウンロードして更新します。それによって、そのサービスパックで導入された新しいパッケージ構造のコピーを取得できます。スタイルシート自体は変更されず、カスタマイズワークフローに対するその他の変更も行われません。ただしSP14へのアップグレード後は、以前のパッケージ構造内のオフラインパッケージはアップロードできなくなり、エラーメッセージが表示されます。

同じLearn教育機関のための異なるブランド

教育機関にCommunity Engagementがライセンス付与されている場合、システム内でのそれぞれの担当に基づいて、異なるユーザーのグループに対して異なるブランドを作成できます。単一のLearnインスタンス内で複数のブランドを利用できるようにするためには、カスタムホスト名を作成する必要があります。