エンターテインメント アプリ

ここでは、堅牢で人気のあるメディア アプリの作成に役立つ設計アイデアについて説明します。

概要

Windows 8.1 には、タッチ中心のタブレットから高解像度のノート PC やデスクトップ PC まで、これまでにない範囲の多様なデバイスが用意されています。Windows 8.1 の新機能の多くは、メディアとエンターテインメントの エクスペリエンスに非常に適しています。コンテンツの発行元には、ユーザーと結び付き、ユーザーの関心を集め、ユーザーの身近な 存在でいるための新しい方法が提供されます。

また、Windows ストアは、コンテンツの発行元がコンテンツを配布、宣伝、販売するすばらしい機会を提供 します。Windows ストアのビジネス条件により、Microsoft が提供する商業価値を利用 できます。または、必要に応じて、独自の商業価値を利用することで、条件どおりにビジネスを遂行し、柔軟性と 収益を最大限に高めることもできます。

ここでは、メディアとエンターテインメントの発行元にとって特に重要な Windows 8.1 の機能に 注目します。

• Windows ストア アプリ— アプリの デザイン言語で、コンテンツに注目を集めることができます。
• ライブ タイルとトースト通知— アプリが実行 されていない場合でも、関連するタイムリーな通知を使ってコンテンツを宣伝することにより、ユーザーがアプリに戻って きます。
• 検索コントラストと共有コントラクト— メディア コンテンツの検索と共有は、トップレベルのオペレーティング システムの機能です。この機能を使うと、より一貫性のある ユーザー エクスペリエンスが実現し、ユーザーがアプリ内のコンテンツを検索、共有しやすくなります。
• デバイス コントラクト— ユーザーは PC からネットワーク デバイス (テレビや AV レシーバーなど) にコンテンツを送ることができ、これは集団での視聴や積極的な利用につながります。

メディア アプリのレイアウトとナビゲーション

エンターテインメント アプリには、メディアの種類によってさまざまなカテゴリ が多数ある傾向があります。たとえば、映画アプリでは、ジャンル別、特定のディレクターや 俳優別、以前の映画の好み別、または特集コンテンツ別に映画を閲覧できます。音楽アプリでも同様、 ユーザーはアーティスト、アルバム、ジャンル、特集コンテンツ別にコンテンツを閲覧できます。メディア アプリでエンド ユーザーに最適なエクスペリエンスを提供するには、ユーザーが、 目的のコンテンツをすばやく確実に見つけられるよう、有意義な方法でコンテンツを整理することが重要です。Windows ストア アプリの階層型やその他のナビゲーション パターンを使うと、アプリを軽快、柔軟、かつ簡単に使用できるようになるので、ユーザーは必要なコンテンツをすばやく検索できます。

アプリの最適なナビゲーション パターンの選択については、「ナビゲーション パターン」をご覧ください。

フラット ナビゲーション パターンの実際の使い方については、「アプリの機能の概要」シリーズをご覧ください。

階層モデル

エンターテインメント アプリとメディア アプリでは、ユーザーが見つけて内容を理解できる ように、多くのストーリーと画像が提供されているのが一般的です。Windows 8.1 で推奨されているナビゲーションと操作の パターンを使うと、コンテンツをサーフェイスに表示して、ストーリーや画像がエクスペリエンスの目玉にすることができます。 概要から詳細に向かう形式で情報を表示すると、ユーザーは探している情報をすばやく見つけることができます。

アプリのハブ ページ

アプリで充実した多様なエクスペリエンスを実現するには、Windows ストア アプリに階層モデルを使います。アプリのランディング ページ、または hubでは、簡単にパンできる 1 つのサーフェイスに、特集コンテンツ、ユーザーの以前の関心に基づいたお勧めコンテンツ、現在再生中のコンテンツ、保存済みのキュー、ジャンル、カテゴリを表示できます。各カテゴリ グループを強調することができ、ヘッダー上をタップすると、 次の画像に示すように、さらに多くのコンテンツを表示できます。

コンテンツのカテゴリをアプリのハブ ページにフラットに表示し、各カテゴリの 関連のあるメディア コンテンツを掲載して、ユーザーをそれらのカテゴリに引き込みます。 カテゴリにもっと多くのコンテンツがあることをユーザーに知らせるために、ヘッダーに山形のグリフ (>) を追加することができます。

ブックマーク、お気に入り、再生リスト

ユーザーは、再生リストを保存したり、メディアを キューに追加したりしておいて、後でアクセスすることがよくあります。アプリでこの操作が簡単にアクセスできる方法でサポートされている場合、お気に入りのメディアにアクセスするためにシームレスなエクスペリエンスを求めるユーザーによって繰り返し使われます。

ランディング ページに "ブックマーク"、"お気に入り"、または "再生リスト" と呼ばれる セクションを追加します。このセクションは、ユーザーが保存したすべてのメディア コンテンツのコレクションです。ユーザーが それらのブックマークされた項目を選び、キューのトップに移動したり、キューから削除したり、キューの中で並べ替えたりすることによって管理できるようにします。 次の例は、"後のために保存" キューに集められたコンテンツを示しています。

セマンティック ズーム

ランディング ページとカテゴリ ページの両方で、ユーザーはセマンティック ズームを使って、サーフェイス全体を簡単に表示し、関心のある項目にすばやくアクセス できます。

アプリでパンがサポートされるしくみについて詳しくは、「タッチ操作の設計」をご覧ください。この次の画像は、セマンティック ズームのグループ ビューを示しています。

セマンティック ズームを使うと、ユーザーは、グループを選んで移動することで、ホーム ページ上のカテゴリの配置を並べ替えることができます。これで、ユーザーはアプリのランディング ページのパーソナル設定を行うことができるため、このことがアプリを使うもう 1 つの理由となります。

ユーザーは、次の図に示されているように、上部のアプリ バーをナビゲーションに使うこともできます。

特定のカテゴリ ページでセマンティック ズームを使って、そのカテゴリに含まれている さまざまな映画や曲の間を移動することもできます。ユーザーは、セマンティック ズームを使って、 さまざまな曲や動画の間をすばやくジャンプします。

ハブ ビューでの項目のタップ

ケース 1: インスタント再生

ユーザーがランディング ページまたはセクション ページでメディア項目をタップすると、メディア項目が再生されます。ユーザーはこの動作を期待するため、タップに対する既定の応答としてこの動作を指定することをお勧めします。次の画像は、インスタント再生の操作を示しています。

おそらく、ユーザーは再生中のメディアについて詳しい情報を知りたい でしょう。そのため、全画面表示から項目の詳細ビューに切り替えることができるボタンをアプリ バーに用意します。次の画像は、このシミュレーションを示しています。

メディアが全画面表示でなくなった場合でも、再生は継続される必要があります。 メディアが全画面ではないときも、引き続きメディア コントロールを表示します。これにより、アプリがスケール ダウンされているかどうかに関係なく、ユーザーはメディア コントロールを開くと同じエクスペリエンスを得られます。

全画面のトグル ボタンをタップするか、UI に表示されている動画または音楽をタップすると、どちらの 場合も全画面再生モードが再開されます。

また、アプリでメディアの詳細情報が表示されない場合は、アプリ バーから 詳細ビューに切り替えるのではなく、アプリ バー ボタンで追加 情報のオンとオフを切り替えることもできます。これについてのデモ画像を次に示します。

ケース 2: 項目の詳細ビュー

タップしたときにメディアをすぐに再生するのではなく、ユーザーに項目の 詳細ページを表示することが適している場合があります。たとえば、テレビ番組に複数のシリーズがあり、どのシリーズを再生するか選ぶ場合は、メディアを起動する前にリスト オプションが表示されます。また、メディアがペイパービューのみに対応している場合、ユーザーはまず支払いをしてからメディアを起動するため、最初に支払情報を表示する必要があります。

次の画像は、テレビ番組のプロモーション ページに集められたコンテンツから特定のメディアを 選ぶプロセスを示しています。ユーザーは特定のシリーズの画像を 1 つタップして、そのシリーズの説明とレビューを読んでから、もう一度タップしてそのシリーズを再生するオプションを表示できます。

そのシリーズの詳細情報ページに戻るには、上部のアプリ バーにある [戻る] ボタンをタップするか、[全画面表示] ボタンをタップして、他のビューに切り替えます。

プレイ ビュー エクスペリエンス

メディアが実際に再生中の場合、アプリでユーザーのコンテンツを 表示するエクスペリエンスを提供する ことにより、他とは違うアプリにすることができます。メディア再生エクスペリエンスを、クロムをまったく使わず、 完全にイマーシブになるように設計します。メディア コントロールは、必要な ときにユーザーがタップすることでメディアに表示できます。 次の画像は、完全にイマーシブな動画再生エクスペリエンスを示しています。

再生リストの概念がある音楽アプリと動画アプリの場合、プレイ ビュー エクスペリエンスに より、ユーザーは再生リストを管理して再生リスト内を簡単に移動できます。スクロール可能な ポップアップ コントロールと再生リストを表示するキャンバスまたは上部のアプリ バーに再生リスト ボタンを配置することを検討してください。ユーザーは項目を選ぶことができ、上下に移動したり、リストから完全に削除したりすることで 項目を管理できます。次の画像は、プレイ ビュー リストを示しています。

また、プレイ ビュー画面に再生リストを常に表示しておきたい場合は、リスト ビュー パターンと垂直スクロールを使って、ユーザーが再生リスト内を簡単に移動できるようにすることができます。 ページの残りの部分は、ページが 2 方向にパンしないように固定幅にして、ユーザーが混乱しないようにすることができます。再生リストの隣の 固定幅領域にその他の情報を表示します。

ユーザーは、次に示すように、クロススライドして、項目を選んで再生リストを管理することもできます。

前のシリーズまたはビデオ クリップと次のシリーズまたはビデオ クリップ間の移動

ユーザーは複数の関連するクリップまたはシリーズを連続して視聴することがよくあります。 [Previous] (前へ) ボタンと [Next] (次へ) ボタンを用意して、ユーザーが次のクリップまたはシリーズにすばやく移動できるようにします。次の画像は、再生中の [Previous] (前へ) ボタンと [Next] (次へ) ボタンを示しています。

"前へ" 操作と "次へ" 操作がよく使われる音楽アプリの場合、次の「コマンド実行」セクションで説明するように、 これらのコマンドはキャンバスに表示する方が適しています。

コマンド実行

メディア コントロール

音楽と動画を再生するメディア アプリの場合、いつも同じ場所で再生を制御することにより、ユーザーがメディアを確実かつシームレスに操作できます。コマンド実行について詳しくは、 「Windows ストア アプリのコマンド実行の設計」をご覧ください。

[Play/Pause] (再生/一時停止) ボタンとトランスポート スライダーは通常はメディアの再生にとって重要なコントロール なので、キャンバスに配置し、ユーザーが画面をタップまたはスワイプしたらすぐに表示されるようにすることができます。[Play/Pause] (再生/一時停止) は、タップされたときに行う操作を反映するトグル ボタンにする必要があります。 たとえば、音楽の再生中は、ボタンには操作として "一時停止" が表示されている必要があり、この逆も言えます。次の画像は、メディア アプリのコントロールを示しています。

アプリでトランスポート スライダーを使う場合は、ユーザーはスライダーを使って映画や曲の巻き戻しと早送りを実行できるため、 [Rewind] (巻き戻し) ボタンと [Forward] (早送り) ボタンを配置すると機能が重複することになります。このような重複を防ぐために、トランスポート コントロール と早送りと巻き戻しコントロールを一緒に使わないでください。

(曲またはシリーズで使われる) [Previous] (前へ) と [Next] (次へ) などの他のメディア コントロールは、実際には、アプリの シナリオによって異なります。たとえば、映画を再生している場合は、[Previous] (前へ) と [Next] (次へ) はあまり意味をなしませんが、 音楽の再生リストやテレビ シリーズでは非常に役立ちます。アプリで [Previous] (前へ) コントロールと [Next] (次へ) コントロールを使う場合、それらのコントロールを [Play/Pause] (再生/一時停止) と トランスポート スライダーと共に配置し、ユーザーがタップまたはスワイプしたときに、利用できる すべてのコントロールが同時に表示されるようにします。

指定のコンテキストで役に立たないコントロールは表示しないようにしてください。たとえば、新しい音楽再生リストを 開始するときは、再生し始めるまで [Previous] (前へ) ボタンは使用できません (ユーザーは再生リストの先頭にいるため、 "前の" トラックがありません)。

メディア コントロールは、タップまたはスワイプ時に表示されます。アプリ バーは端をスワイプしたときに表示されます。 ユーザーが スワイプしてアプリ バーを表示するたびに、キャンバス上のメディア トランスポート コントロールも 表示されるため、ユーザーは、必要に応じて、メディアを操作しながら、アプリ バー コマンドを使用できます。

UI メディア コントロールに加えて、次のようなメディア キーボード ボタンやメディア リモート ボタンを使ってアプリを制御できるようにすると、ユーザーはメディア再生 エクスペリエンスをより細かく制御できます。

• Play (再生)
• Pause (一時停止)
• Fast-forward (早送り)

音量のコントロール スライダーとミュート ボタンは、ハードウェア ボタンから利用できるようにして、 アプリでは重複しないようにする必要があります。

全画面モード、字幕放送、メタデータ間の切り替えなど、メディアの再生に必ずしも必要で ないその他のコマンドは、アプリ バーに配置してもかまいません。 アプリ バーの使用について詳しくは、「アプリ バーのガイドラインとチェック リスト」をご覧ください。

再生リストを管理するために、"再生リストから削除"、"キューのクリア"、"キューの保存"、"キュー内を上へ移動"、 "キュー内を下へ移動" に対応するボタンをアプリ バーに配置することも検討してください。

狭いウィンドウ サイズ

ユーザーがアプリを狭い幅にサイズ変更した場合、メディア コントロールの操作は同じである必要があります。

• つまり、メディア キャンバスをタップしてメディア再生コントロールを表示します。 [再生/一時停止] は、 幅が狭い状態で保持することが重要です。
• トランスポート スライダーや [前へ] と [次へ] のような他のコントロールは幅が狭い状態で削除できます。

次の画像は、狭い幅のメディア アプリの [再生/一時停止] ボタンを示しています。

バックグラウンドとフォアグラウンドの再生

メディア アプリで音楽を再生しているときにユーザーが別のアプリに切り替えても、 ユーザーがバックグラウンドで音楽を聴き続けることができる場合があります。 バックグラウンド機能が適切に動作するメディア シナリオの良い例として、音楽、ラジオの ストリーミング、ポッドキャスト、ミュージック ビデオがあります。 テレビ番組や映画などのビジュアル メディアの再生中に、ユーザーが別のアプリに切り替えると、アプリは自動的に一時停止する 必要があります。このように、ユーザーはもう一度元のアプリに切り替えたときに、 コンテンツを見失うことなく、続きから再生できます。

バックグラウンドのメディア再生について詳しくは、「MediaControl.Soundlevel | soundLevel property」と Windows ストア アプリでのオーディオ再生に関するページをご覧ください。

システム トランスポート コントロール

バックグラウンドでメディアを再生するアプリでは、システム トランスポート コントロール を使うと、ユーザーはアプリに戻らなくても、アプリで再生されている内容を確認し、 再生を制御することができます。ユーザーはデバイスのハードウェアの音量ボタンを 押して、アプリの外部から軽快かつ柔軟にメディア コントロールとメタデータにアクセス できます。トラックとアーティスト名についての 情報を提供することで、ユーザーが再生内容を把握できるようにします。アプリでコンテンツを読み 込んでいるときやダウンロードしているときは、ユーザーがメディア再生の状態がわかるように ユーザーに状態を表示します。 次の画像は、システム トランスポート コントロールを示しています。

メディア再生エクスペリエンスに戻る

ユーザーがアプリを使っているときに、再生リストに移動してさらに曲を追加 したり、新しい音楽を購入したりする場合、重要なのは、プレイ ビューの音楽や動画に移動するための一貫した 場所があることです。これにより、ユーザーがプレイ ビュー エクスペリエンスにすばやく戻ることができます。

次の画像は、ユーザーが他のメディアに関連したタスクを実行しているときに、ナビゲーション バーに簡単にアクセスできる方法を示しています。ユーザーは、必要なときに、アプリのプレイ ビュー セクションにすばやく移動できます。

評価とレビュー

メディア コンテンツの評価とレビューは、ほとんどのメディア アプリにとって重要です。ユーザーが すばやくメディア コンテンツをレビューできるように、レビューが表示されるアプリのセクションの上部に 星を配置することを検討してください。ユーザーがレビューを書き込むために、上部にテキスト ボックスを表示し、 タッチ キーボードの場所を空けておくことができます。Enter キーを押すと、 レビューが送られます。レビューが長くなる場合は、必要に応じて、適宜テキスト ボックスは大きくなります。

ユーザーは、次に示すように、ヘッダーをタップすると、より多くのレビューを表示できます。

メディア アプリの文字体裁

コンテンツの構造とリズムを作るには、書体見本 (type ramp) のガイダンスに 従います。メディア アプリの文字体裁を Windows の文字体裁に合わせるには、コンテンツの主な サイズに 11 ポイントの Segoe Semilight を使い、タイトルとサブヘッダーには 20 ポイントの Segoe UI Light を使います。サイズを小さくする必要がある場合、短いキャプションとクレジットには、9 ポイントの Segoe UI Regular を使います。9 ポイント未満の種類を指定しないでください。

ヘッドラインとタイトルには 42 ポイントの Segoe UI Light を使います。ただし慎重に使ってください。"音楽" や "映画" などの 見出しは 42 ポイントに設定しないでください。 映画、アルバム、または音楽トラックの名前には、書体の 最大サイズを予約します。書体の最大サイズを使うときは、カーニングと文書体裁に適した句読点を適用することが重要です。 二重引用符とハイフンの代わりに、適切な 引用符、アポストロフィ、ダッシュを使ってください。次に、句読点の正しい使用例と間違った使用例を示します。

Windows 8 の特徴として、文の先頭文字を大文字にする必要がありますが、すべて大文字、すべて小文字、 または単語の先頭文字を大文字にする方がコンテンツに適していると判断することもできます。これらの文字 体裁の扱いは多くのローカライズされた言語には反映されません。また、一貫して 大文字と小文字を区別するスタイルを使うようにしてください。そうすると、アプリの文書体裁に 視覚的な関心を引く効果を加えるだけでなく、コンテンツのさまざまな部分を区別できます。

このガイダンスに従わない場合、使う書体のサイズと太さは 3 つまでにしてください。色とフォントの太さを使うと、同じサイズの書体でも表示されるコンテンツを 区別するのに役立ちます。

フォントのベスト プラクティス (サイズ、色、太さなど) について詳しくは、「フォントのガイドライン」をご覧ください。

コントラクト

共有

共有コントラクトによって、ユーザーは、2 つのアプリ間で自然にコンテンツを共有できます。メディア アプリ間でのコンテンツの共有には多数のシナリオがあり、他のアプリとの差別化につながります。ユーザーがアプリからのコンテンツを共有できるようにする場合、アプリを共有ソースにします。ユーザーが他のアプリからのデータを使えるようにする場合、アプリを共有ターゲットにします。アプリのニーズに応じて、両方ともサポートすることもできます。

エンターテインメント アプリからの共有

メディア コンテンツの共有は、エンターテインメント アプリにとって重要です。共有コントラクトを使うことで、ユーザーは、おもしろそうな動画や視聴している曲を、この形式をサポートするアプリで共有できます。これにより、ソーシャル ネットワークでユーモアのある動画を共有したり、映画や曲の紹介文を電子メールで友人に送ったりするなど、多くの魅力的なシナリオを実現できます。また、カメラ フィルター アプリや自動調整アプリなど、Windows 上の各種アプリを使って、メディア アプリの音楽、写真、動画をおもしろい具合に変換することもできます。

エンターテインメント アプリでの共有

友人、家族、一般の人々との共有に対応した、写真、音楽、動画の記憶域をアプリでサポートできる場合は、アプリを共有ターゲット コントラクトに登録する必要があります。これにより、そのアプリで、他のアプリからのメディアの整理や、幅広いユーザーへの配信を実に簡単に行えるようになります。

写真に特別なフィルターを適用する、音楽の録音を自動調整する、パノラマ写真を作成するなど、メディア アプリで他のアプリからのコンテンツをおもしろい具合に変換できる場合は、共有ターゲット コントラクトに登録する必要があります。これにより、そのアプリで他のアプリからのコンテンツを簡単に利用できるようになり、アプリの価値がいっそう高まります。

検索

検索は、メディア アプリの重要なシナリオです。多くの場合、メディア アプリでは複数のカテゴリからの 検索結果を表示します。検索チャームを使うと、アプリ内の検索ボックスで ユーザーのための全面的にカスタマイズされた検索エクスペリエンスを用意できるうえ、Web を含むユーザーの検索のすべてのニーズに対して一元的なエクスペリエンスが提供されます。

検索について詳しくは、「検索のガイドライン」をご覧ください。 次の画像は、一般的な検索エクスペリエンスを示しています。

アプリにフィルター処理と検索範囲が含まれた高度な検索シナリオがある場合は、必要に応じて、 アプリ キャンパスにこれらのオプションを表示します。

また、クエリ候補を使うと、自動的にユーザーの検索クエリが完成し、文字列全体を入力しなくても すばやく検索できるようになります。

設定

メディア アプリに適用できるすべての設定 (ユーザー アカウント情報、サブスクリプション 情報、プライバシーの設定、通知の設定など) は設定チャームに配置する必要があります。設 定チャームは、ユーザーが 1 か所で自身の設定を調整できる場所です。さらに、このチャームにより、 アプリの UI がさまざまな設定で雑然となるのを防ぐことができます。 次の画像は、メディア アプリの設定を示しています。

デバイス

デバイス コントラクトには、メディア アプリがプラグインとして使用できる優れたオプションがあります。たとえば、 ユーザーがテレビで映画や動画を視聴したり、オーディオ デバイスで音楽を再生したりするとします。デバイス コントラクトと統合すると、ユーザーはタップするだけでそれを行うことができるようになります。 次の図では、再生中のコンテンツをデバイスに表示しています。

つながりとライブ

タイルと通知

メディア アプリにはライブ タイルに関する魅力的なシナリオが数多くあります。ユーザーにお勧めの 最新の映画、新しくリリースされた DVD、急速に広まった人気の動画を表示する映画 を表示するアプリのタイルによって、再びユーザーの関心を引くことができます。 音楽アプリの場合も同様で、ユーザーが偶然にタイルに新しいコンテンツを発見したときに、 お気に入りのアーティストがリリースしたニュー アルバム、再生中の音楽、ユーザーの関心に 基づいたお勧めのアーティストを表示するタイルがあると、引き続きユーザーはアプリに 引き込まれます。 次の画像は、情報を表示するライブ タイルを示しています。

ユーザーがさまざまな映画のジャンル、テレビのチャンネル、アーティスト、再生リストをスタートにピン留めできるようにすると、最も興味のあるコンテンツに合った通知が表示されるため、ユーザーは最も気になるコンテンツにすばやくアクセスできます。これは、ユーザー をもう一度アプリに引き込むもう 1 つの手段です。 次の図は、メディア アプリにピン留めされたタイルを示しています。

ユーザーがトースト通知 (アプリが動作していない場合でも表示されます) でニュース速報が表示 されるようにオプトインできるようにすると、アプリは、熱心なユーザーに対して最新のニュース について最新の情報を絶えず提供し、アプリに引き込むことができます。ただし、トースト通知は一部のユーザーにとって煩わしい可能性があるため、ユーザーが設定チャームからアクセスするアプリの設定で有効にできるオプションにしておいてください。

ローミング

ローミングとは、デバイス間で設定や基本設定を移動することです。 ほとんどの 人は Windows PC を複数所有しています。すべての Windows 8 PC 間で一貫したユーザー エクスペリエンスを提供するアプリを 作ると、ユーザーに期待どおりのエクスペリエンスを提供できます。できる限り、アプリの設定、保存済みの メディア コンテンツ、お気に入り、"最近閲覧した" 履歴、ユーザーが特定のメディアを閲覧しているときに中断した場所を ローミングしてください。ローミングに関する他のガイダンスについては、 「アプリ設定のガイドライン」、「アプリのデータのローミングのガイドライン」、 「アプリ データの管理」をご覧ください。

画面の向きとウィンドウのサイズ

横向きと縦向き

Windows 8.1 用のメディア アプリを設計する際は、すべてのデバイス サイズ、画面解像度、画面の向きを検討してください。Windows 8.1 では、デバイスのサイズに合わ せてアプリにコンテンツを含めることで、縦長レイアウト画面と高解像度画面のどちらにも デザインを簡単に合わせることができます。横向きのビューと縦向きのビューでアプリを表示 します。映画を視聴するようなアプリの特定のビューでは、ビューを横長にロック するのが賢明です。

ウィンドウのサイズ変更

Windows 8.1 では、画面上に複数のアプリを並べて配置することで、マルチタスク動作を実現できます。 狭い幅で正しく動作するようにアプリを設計することは、アプリが画面に表示されている時間を長くし、より長くユーザーの関心を 集めておくのに効果的な方法です。そうすると、ユーザーは、 アプリを使いながらマルチタスク動作を実現できるため、他の作業を行っているときでも、 アプリはより長い時間画面に表示されたままになります。

ユーザーがメディア アプリでマルチタスクを利用できるというのも、魅力的なシナリオです。Web をブラウジングしながらストリーミングでスポーツをライブ観戦する、ニュースを読みながら Spotify の再生リストを聴くなどのシナリオも考えられます。こうした一般的なシナリオに対応するために、主要な再生操作をすべてのサイズのウィンドウ向けに調整します。

次の画像は、狭い幅にサイズ変更された状態のエンターテインメント アプリの例を示しています。各ページのビューが調整され、見やすくなっています。アプリのサイズが変更されても、コンテキストは維持されます。

ユーザーはウィンドウを最小幅までの任意の幅に変更できるので、縦横比が大きく変わる可能性があります。動画などのメディア コンテンツは、それに応じて表示します。ウィンドウの縦横比がメディア コンテンツと一致しない場合は、メディア コンテンツをレターボックス内で表示し、引き延ばされないようにします。

スプラッシュ画面

メディア アプリは、Web から新しいコンテンツを頻繁にダウンロードする必要があります。アプリの処理速度と 応答性を高めるには、各カテゴリの画像すべてがダウンロードされるまで待機せずに、 ランディング ページを表示してください。待機すると、ユーザーは我慢できなくなる場合があります。コンテンツのタイトルがダウンロードされるとアプリのランディング ページが ユーザーに表示され、画像と他のデータが非同期に的に読み込まれます。 次の画像は、スプラッシュ画面の例を示しています。

音楽と動画のベスト プラクティス

音楽アプリ

推奨事項	説明
バックグラウンドのメディアとしてアプリを登録する	アプリで音楽再生リストを再生できる場合にユーザーが別のアプリに切り替えてからも、アプリがバックグラウンドで音楽の再生を続けるようにすることができます。詳しくは、「バックグラウンドでオーディオを再生する方法」をご覧ください。
すべてのハードウェアのメディア ボタンに応答する	再生、一時停止、再生と一時停止の切り替え、次のトラック、前のトラックなどのメディア ボタンによるイベントに応答するように登録します。これによって、ユーザーがリモコンやメディア キーボード ボタンからアプリを制御できるようにします。詳しくは、「メディア コントロール キーの構成方法」をご覧ください。
システム トランスポート コントロールで "再生中" の情報を提供する	そのアプリを使っていないときでも、ユーザーが再生中の内容について豊富な情報を得ることができるように、バックグラウンドで再生できるアプリには、システム トランスポート コントロールでトラック名、アーティスト名、アルバム アートを提供してください。ユーザーがトラックを変更するときに遅延が生じるアプリの場合、アプリが応答していないような印象を与えることのないように、そのトラック名のフィールドには "次のトラックを読み込み中" であることが表示されるようにしてください。詳しくは、システム トランスポート コントロールの開発者向けガイドのページをご覧ください。

 

動画アプリ

推奨事項	説明
アプリに対して正しいストリームの種類を選ぶ	ほとんどの場合、アプリをフォアグラウンドのみでのメディアとして登録する 動画の再生を始めたときにユーザーがバックグラウンドで音楽を再生していると、ストリームによってすべてのバックグラウンドの音楽が自動的に一時停止されます。そのため、ユーザーは動画から流れてくるサウンドを聞くことができます。ユーザーが別のアプリに切り替えたときは、動画の一部を見失うことなく、後で続きから再生できるように自動的に動画を一時停止します。詳しくは、「Windows ストア アプリでのオーディオ再生」をご覧ください。 ユーザーがミュージック 動画を再生するか、または動画の再生リストを作成する場合は、アプリをバックグラウンド メディアとして登録する ユーザーがアプリを音楽プレーヤーのように扱ったり動画をキューに入れて再生したりする場合、ユーザーは、別のアプリに切り替えた後でも再生内容が続けて聞こえることを想定します。詳しくは、「バックグラウンドでオーディオを再生する方法」をご覧ください。
すべてのハードウェアのメディア ボタンに応答する	再生、一時停止、再生と一時停止の切り替え、次のトラック、前のトラックなどのメディア ボタンによるイベントに応答するように登録します。これによって、ユーザーがリモコンやメディア キーボード ボタンからアプリを制御できるようにします。詳しくは、「メディア コントロール キーの構成方法」をご覧ください。

 

関連トピック

Windows ストア アプリの紹介

Windows ストア アプリの UX ガイドライン

メディア再生の概要 (HTML)

メディア再生の概要 (XAML)