教育アプリ
世界中の教師、親、学生は、テクノロジを利用して学習を楽しくする工夫をしています。このトピックのシナリオを確認し、アプリでの Microsoft デザイン スタイルの適用方法を見ることで、独自の教育アプリのデザインに関するインスピレーションを得ることができます。Windows 8.1 は、学生、教師、スタッフ、管理者がイマーシブなアプリ エクスペリエンスを構築するために利用できる新しいデザインの選択肢を提供する開発者向けツールです。
教育アプリでは、コンテンツ、クラスルームの編成とアカウント管理、コラボレーション、テストの実施、関心を高める要素、アクセシビリティを考慮することが重要です。
コンテンツ
教育アプリを設計する場合は、対象者に提供するコンテンツの種類、および対象者がコンテンツの利用者であるか、作成者であるかを検討してください。教育アプリの一般的なコンテンツ シナリオとして次のものが挙げられます。
- カリキュラムのコンテンツと標準、教科書、ライブラリ、自己学習チュートリアル。
- クラスルーム管理。
- 評価: テストとクイズ。
- 教育ツールとクラスルームの編成。
- 学生向けに設計された生産性ツール (文章作成、プレゼンテーション、編集)。
Kno の教科書と Khan Academy は、ユーザーに魅力的な教育用テキストおよびビデオを提供する優れた教育コンテンツ アプリです。
.png "Kno の教科書を示すスクリーン ショット")
Kno の教科書
.png "Khan Academy を示すスクリーン ショット")
Khan Academy
OakReFactory のRecord Voice and Pen アプリは、コンテンツの作成に重点を置いています。教師は、音声とメモを同時に記録し、その内容を保存、エクスポート、および共有できます。
.png "Record Voice and Pen のエクスポート ウィザード")
ユーザーがビデオの録画を停止すると、モーダル ボックスが表示され、エクスポートの基本設定を選択できます。
.png "共有チャームを使った Record Voice and Pen")
その後、共有チャームを使ってコンテンツを共有できます。
コンテンツの作成に重点を置くもう 1 つのアプリとして Educ8 Teacher があります。Educ8 Teacher では、教師はクラスルーム セッションを開始し、仮想黒板に書き込むことができます。作成したコンテンツを保存し、後でそのコンテンツに戻ることができます。このアプリは、教師がクラスルームの前の大画面に投影する場合に適しています。
.png "Educ8 Teacher の代数学と幾何学")
.png "Educ8 Teacher の小学 1 年生の算数")
.png "Educ8 Teacher の実用数学")
クラスの編成と管理
アプリを設計する場合、教師と学習者をサポートするために、リアルタイムおよび非同期の通信、コンテンツの作成と使用、制御やアクセス許可をどのように利用するかを検討してください。アプリを設計する場合に、クラスルームの編成および管理に関して検討する項目を次に示します。
クラスルームの編成
クラスルームの編成とは、クラスルーム活動のリアルタイムの管理を意味します。アプリの利用者をローカル ユーザー、リモート ユーザー、またはその両方のいずれにするかを検討してください。ユーザーのリアルタイムのニーズと物理的な場所を指針としてクラスルーム編成の設計シナリオを組み立てます。たとえば、学生が教室に集合する場合と、世界各地からリモート学習するクラスを指導する場合とでは、教師に必要なアプリの要件が異なる可能性があります。クラスルーム編成のニーズの一般的なシナリオとして、テスト シナリオが考えらえます。これについては「評価: 宿題、クイズ、テストの実施」で詳しく説明します。検討するもう 1 つのシナリオは、学生、アシスタント、教師間でリアルタイムに質疑応答するライブ Web またはビデオ チャット セッションです。
アカウント管理
アプリにアクセスする必要がある多くのユーザーに対応するために、複数のアカウントの種類 (教師、管理者、保護者、学生など)、およびアカウントの種類ごとに異なるインターフェイス要素とコンテンツを利用できるようにすることを検討します。たとえば、アプリで、教師のアカウントにコンテンツ作成機能を提供し、学生のアカウントには読み取り専用機能を提供することが考えられます。その表現方法として、ログイン エクスペリエンスでの決定に従って、UI で学生にない機能を教師に提供することができます。
年齢区分と保護者による制限
多くの教育アプリが 18 歳未満のユーザーに表示されるので、アプリで年齢が問題になるようなデータを扱う場合の決定は慎重に行います。そのために、Microsoft は年齢区分を設けています。アプリをストアにアップロードする前に、年齢区分が適切な年齢グループを反映し、アプリが年齢区分一覧の条件を満たしていることを確認します。また、アプリには必ず、必要な保護者による制限設定を設けます。
.png "GuruCool Preschool Puzzles")
[親の設定] は左上隅と GuruCool Preschool Puzzles のアプリ バーにあります。
コラボレーション
ユーザーどうしの連携によるユーザー フローの設計を奨励し、アプリの積極的な活用を促す形態のコラボレーションを可能にするシナリオを検討してください。コラボレーションはリアルタイムにしますか。それとも学生に別の時点で情報を表示しますか。
Promethean ActiveEngage2 は、学生がリアルタイムに質問に回答し、クラスルームのディスカッションに参加する仮想学生応答システムです。インターフェイスは、教師やクラスと情報を共有するよう導く設計にします。
.png "Promethean ActiveEngage2")
Promethean ActiveEngage2はリアルタイムのコラボレーションを推進します。
Microsoft OneNote、Skitch、Evernote は、ユーザーがメモを共有し、同時に編集できるようにすることで、コラボレーションを可能にするアプリです。このような場合、アプリでは共有コントラクトを使って、ユーザーがファイルの場所、ドキュメント、または要約を送信できるようにします。
評価: 宿題、クイズ、テストの実施
アプリにテストとクイズのシナリオが含まれている場合、テストに制限時間を設けたり、テスト中にアプリ内の他のコンテンツ (講義ビデオなど) へのアクセスを制限したりできるようになっていれば、教師にとって便利です。たとえば、アプリにレッスンのプランがある場合は、アプリでテストを受験中の学生にはそのプランを使えないようにしてはどうでしょうか。BrainPOP は、クイズを受験中のユーザーが同時にビデオのコンテンツにアクセスすることはできないように設計されています。また、クイズを途中で終了した場合、回答を保存することはできず、最初からやり直す必要があります。
.png "BrainPOP のクイズ")
.png "BrainPOP のクイズ ダイアログ")
BrainPOPでは、ユーザーがクイズを途中でやめようとするとメッセージ ダイアログでユーザーに警告し、やめることを選択した場合は回答が保存されません。
ABC School は、読み書きを覚えはじめた児童を対象とし、BGM を流しながら漫画のキャラクターを紹介するアプリです。回答が正解または不正解の場合に、サウンドとアニメーションでユーザーにフィードバックします。目の前のアクティビティにユーザーが没頭するように、このようなフィードバック機能の実装を検討してください。
.png "ABC School")
関心を高める要素
Windows では、ユーザーの関心を高め、それを維持するためにタイルや通知を利用できます。教育アプリのデザインで、次のように関心を高める機会を提供することを検討してください。
タイル
ライブ タイルは、アプリに対するユーザーの関心を高める、または関心を呼び戻すために優れた手段です。教育アプリでライブ タイルを使う場合は、次のシナリオを検討してください。
- 学生が苦手なトピック エリアをブラッシュアップに導く。
- 宿題、クイズ、テストの時期が近づいていることを学生に思い出させる。
- 教師に成績評価を完了するよう促したり、学生に最近提出した宿題のフィードバックを提供する。
コンテンツを主体とするアプリでは、BrainPOP のようにその日のトピックを学生に示す場合などにライブ タイルを使う機会があります。
.png "BrainPOP のタイル")
BrainPOPでは、その日のトピックをユーザーに通知するためにライブ タイルを使います。
NOOK などの出版アプリの場合、既読のコンテンツや現在読んでいるコンテンツをユーザーに通知する更新プログラムをプッシュしたり、ユーザーが現在読んでいる、または関心を持っている新しいトピックに関する情報を提供することができます。
.png "Nook のタイル")
NOOKは、ユーザーが最近ライブ タイルで読んだコンテンツを通知します。
大きいタイルには、複数のライブ更新プログラムを一度に追加したり、ユーザーの進行状況をグラフィック表示したりするのに十分な領域があります。たとえば、GuruCool Preschool Puzzles では、子供や保護者がトピックを完了する意欲を高めるために、大きいタイルに進行状況グラフの小型バージョンを実装できます。
.png "GuruCool Preschool Puzzles の進行状況グラフ")
Preschool Puzzlesでは、ユーザーがトピックを完了する意欲を高めるために、大きいタイルにこのような進行状況グラフを実装できます。
セカンダリ タイルは、関心があるアプリのセクションにユーザーが移動するための便利なエントリ ポイントです。このタイルにより、セクションに移動する手順が削減されます。たとえば、学生がクラスのスケジュールをチェックする場合に、クラスのスケジュール ページにリンクしているセカンダリ タイルをクリックまたはタップしてスケジュールを引き出すことができれば便利です。
通知
次回のテスト日程や宿題の期限日など、時間が重要なコンテンツを含むシナリオで、通知によってライブ タイルを補完することを検討してください。通知にはライブ タイル以上に注意を促す力があるので、特に重要なシナリオ (期日が近いテストや宿題など) で使うようにして、アプリが"スパムのような"印象を持たれないようにする必要があります。希望する通知の種類をユーザーが選択できるようにして、アプリの操作をユーザーが管理できるという印象を与えることを考慮します。
アクセシビリティ
設計プロセスの早期の段階で、あらゆるタイプの学習者に提供するコンテンツの操作方法と音声および視覚的なニーズにアプリでどう対応するかを検討します。アプリ開発の設計決定フェーズでは、アクセシビリティに関する複数のシナリオを検討する余地があります。教育において特に重要なアクセシビリティの要件を次に示します。
音声のニーズ
Windows は Microsoft ナレーター (画面上のテキストを読み上げ、イベントの内容を説明するスクリーン リーダー) を装備しています。Microsoft ナレーターなどのスクリーン リーダー向けにアプリを最適化することは、視覚障碍のあるユーザーがアプリを利用できるようにするための優れた方法です。アプリをテストして、アクセシビリティが最適化されているかどうかを XAML や HTML で確認してください。スクリーン リーダーをサポートするには、アプリ内のすべての UI 要素に、名前、役割、説明、状態、位置、その他関連する情報が正確にラベル付けされている必要があります。スクリーン リーダーで基本的な UI 要素を決定できるように XAML または HTML を最適化することで、開発時間への投資が比較的少なく済み、障碍の有無を問わず、すべてのユーザーのユーザー エクスペリエンスが大幅に向上します。
視覚的ニーズ
アクセシビリティに対応し、すべてのユーザーの視覚効果を向上させるには、アプリ内の画像やビデオにクローズド キャプションと字幕を追加します。アプリのテキストを見やすくするには、XAML と HTML のいずれも、背景に対して高いコントラスト比で表示することをお勧めします。アプリがアクセシビリティに対応していると見なされるためには、背景に対する明暗のコントラスト比を 4.5:1 以上にする必要があります。色覚に障碍があるユーザーに対応するには、色を使って情報を伝える場合に色の代わりにテキスト、図形、アイコンなどを使います。
キーボード操作と代替入力
ユーザーがアプリを操作する方法はさまざまですが、タッチ、キーボード、マウス、ペンが特に一般的に使われます。ゲームなどのアプリでは、コントローラーや 3D ジェスチャが認識される可能性があります。
キーボードのアクセシビリティ機能が豊富であるほど、多くの学生がアプリのコンテンツを整理しやすくなり、宿題を簡単に完了できます。キーボードの操作をサポートするには、キーボード ショートカットを有効にし、Enter キーまたは Space キーで要素をアクティブ化できるようにし、さらに矢印または Tab キーで移動できるようにします。XAML または HTML にタブ インデックス プロパティを設定することによって、既定のタブ オーダーを上書きできます。
アプリの設計でアクセシビリティに対応した場合は、Windows ストアに送信する際に必ずアプリにアクセシビリティ対応のマークを付けてください。
関連トピック
Checklist for accessibility (アクセシビリティのガイドラインとチェック リスト)
HTML AppBar コントロールのサンプルに関するページ