Xbox ベスト プラクティス

既定では、すべての UWP アプリは何もしなくても Xbox One で動きます。 ただし、アプリを引き立たせ、ユーザーを楽しませて、Xbox に最適なアプリ エクスペリエンスを備えるには、以下のようにする必要があります。

注意

始める前に、「Xbox およびテレビ向け設計」で示されている設計ガイドラインを確認します。

Xbox One 向けの最適なエクスペリエンスを構築するには

行うこと: マウス モードをオフにします

Xbox ユーザーはコントローラーを好みます。 コントローラー入力に最適化するには、マウス モードを無効にし、方向ナビゲーション (XY フォーカス ナビゲーションと操作とも呼ばれます) を有効にします。 フォーカス トラップとアクセスできない UI に注意してください。

行うこと: 10 フィート エクスペリエンス向けの適切なフォーカス用の四角形を描画します

ほとんどの Xbox ユーザーは室内でテレビに向かって座っているので、標準的なフォーカス用の四角形では 10 フィート離れた場所からでは見えにくいことに留意してください。 入力フォーカスのある UI 要素がユーザーに常にはっきり見えるようにするには、フォーカス表示のガイドラインに従ってください。 XAML では、アプリが Xbox で動いているときは何もしなくてもそのように動作しますが、HTML アプリの場合はカスタム CSS スタイルを使用する必要があります。

行うこと: SystemMediaTransportControls クラスと統合します

Xbox のユーザーは、Xbox メディア リモコン Cortana (特に、"再生" と "一時停止" の音声コマンド) および Xbox SmartGlass を使用してメディア アプリを操作するのを好みます。 これらの機能を自作しないでアプリに組み込むには、SystemMediaTransportControls クラスを使用する必要があります。このクラスは、Xbox メディア コントロールに自動的に含まれます。 アプリでカスタム メディア コントロールを使用する場合は、SystemMediaTransportControls クラスと統合してユーザーにこれらの機能を提供します。 バックグラウンド音楽アプリを作成している場合は、SystemMediaTransportControls クラスと統合して、バックグラウンド音楽コントロールが Xbox のマルチタスク タブで正しく動作するようにします。

考慮すること: 画面の端に描画するようにします

多くのテレビでは画面の端が切れるので、アプリの重要なコンテンツはすべて、テレビのセーフ エリアの内側に表示する必要があります。 UWP では、オーバースキャンを使用してコンテンツをテレビのセーフ エリア内に維持しますが、この既定の動作ではアプリの周囲に目立つ境界線が描画されることがあります。 最善のエクスペリエンスを提供するには、既定の動作を無効にして、「画面の端に UI を描画する方法」の指示に従ってください。

重要

オーバースキャンを無効にした場合、対話要素とテキストをテレビのセーフ エリア内に収める処理はアプリで行う必要があります。

考慮すること: テレビ セーフ カラーを使用します

テレビでは、コンピューター モニターほど極端な色の輝度は処理されません。 不自然な縞模様や色あせた画像が表示されないように、アプリでは高輝度の色を使わないようにする必要があります。 また、テレビの間の違いに留意してください。テレビによって色の表現が大きく異なる場合があります。」を参照して、アプリの表示がすべてのユーザーに対して適切になるようにする方法を理解してください。

憶えておくこと: スケーリングを無効にできます

UWP アプリは、コントロールやフォントなどの UI 要素がすべてのデバイスで読みやすいように自動的にスケーリングされます。 XAML を使用するアプリは 200% に、HTML を使用するアプリは 150% にスケーリングされます。 Xbox でのアプリの表示をさらに細かく制御する場合は、既定の倍率を無効にして、HDTV (1920 x 1080) の実際のピクセル サイズを使用します。 Xbox で見栄えの良いアプリを調整する方法については、「 スケーリングをオフにする方法 」を参照してください。

こちらもご覧ください