Xbox ベスト プラクティス

既定では、すべての UWP アプリは Xbox One で実行され、追加の作業は必要ありません。 ただし、アプリを輝かせ、顧客を喜ばせたり、Xbox で最高のアプリ エクスペリエンスと競争したりするには、以下のプラクティスに従う必要があります。

Note

開始する前に、「xbox とテレビ用のデザインに関するページに記載されている設計ガイドラインを確認してください。

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

Do: マウス モードをオフにする

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

Do: 10 フィート エクスペリエンスに適したフォーカス四角形を描画する

ほとんどの Xbox ユーザーはテレビからリビングルームの向こう側に座っているので、標準的なフォーカスの四角形は 10 フィート離れた場所からは見えにくいことに注意してください。 入力フォーカスを持つ UI 要素が常にユーザーに明確に表示されるようにするには、 Focus ビジュアル ガイドラインに従ってください。 XAML では、アプリが Xbox で実行されている場合、この動作は無料で取得されますが、HTML アプリではカスタム CSS スタイルを使用する必要があります。

Do: SystemMediaTransportControls クラスと統合する

Xbox ユーザーは、Xbox Media Remote、Cortana (特に "再生" および "一時停止" 音声コマンド)、Xbox SmartGlass を使用してメディア アプリを制御したいと考えています。 これらの機能を無料で入手するには、Xbox メディア コントロールに自動的に含まれる SystemMediaTransportControls クラスを使用する必要があります。 アプリにカスタム メディア コントロールがある場合は、 SystemMediaTransportControls クラスと統合して、これらの機能をユーザーに提供してください。 バックグラウンド ミュージック アプリを作成する場合は、 SystemMediaTransportControls クラスと統合して、Xbox マルチタスク タブでバックグラウンド ミュージック コントロールが正しく動作することを確認します。

考慮事項: 画面の端に描画する

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

重要

オーバースキャンを無効にした場合は、インタラクティブな要素とテキストがテレビセーフエリア内に残っていることを確認する必要があります。

考慮事項: テレビセーフな色を使用する

テレビは、コンピューター モニターと同様に極端な色の強さを処理しません。 ユーザーに奇数の縞模様の効果や洗い流された画像が表示されないように、アプリで高い強度の色を使用しないようにします。 また、テレビの違いは、テレビの見た目がユーザーによって大きく異なる可能性があることを意味します。 「」を参照して、アプリの表示がすべてのユーザーに対して適切になるようにする方法を理解してください。

注意: スケーリングを無効にすることができます

UWP アプリは、コントロールやフォントなどの UI 要素がすべてのデバイスで読みやすくするために自動的にスケーリングされます。 XAML を使用するアプリは 200% スケールされますが、HTML を使用するアプリは 150% スケールされます。 Xbox でのアプリの外観をより詳細に制御する場合は、HDTV (1920x1080) の実際のピクセル ディメンションを使用するように既定のスケール ファクターを無効にします。 「 スケーリングをオフにする方法 Xbox で見栄えの良いアプリを調整する方法について説明します。

関連項目