Xbox ベスト プラクティスXbox best practices

既定では、すべての UWP アプリは何もしなくても Xbox One で動きます。By default, all UWP apps will run on Xbox One without any extra effort on your part. ただし、アプリを引き立たせ、ユーザーを楽しませて、Xbox に最適なアプリ エクスペリエンスを備えるには、以下のようにする必要があります。However, if want your app to shine, delight your customers, and compete with the best app experiences on Xbox, you should follow the practices below.


始める前に、「Xbox およびテレビ向け設計」で示されている設計ガイドラインを確認します。Before you start, take a look at the design guidelines laid out in Designing for Xbox and TV.

Xbox One 向けの最適なエクスペリエンスを構築するにはTo build the best experiences for Xbox One

操作を行います。 マウス モードをオフにします。Do: Turn off mouse mode

Xbox のユーザーには、そのコント ローラーが大好きです。Xbox users love their controllers. コント ローラーの入力を最適化するマウス モードを無効にする方向ナビゲーションを有効にして (とも呼ばれますXY フォーカスのナビゲーションや操作)。To optimize for controller input, disable mouse mode and enable directional navigation (also known as XY focus navigation and interaction). フォーカスのトラップとアクセスできない UI ご覧ください。Watch out for focus traps and inaccessible UI.

操作を行います。 ある 10 フィート エクスペリエンスに適したフォーカス四角形を描画します。Do: Draw a focus rectangle that is appropriate for a 10-foot experience

ほとんどの Xbox ユーザーは室内でテレビに向かって座っているので、標準的なフォーカス用の四角形では 10 フィート離れた場所からでは見えにくいことに留意してください。Most Xbox users are sitting across the living room from their TV, so keep in mind that the standard focus rectangle is hard to see from ten feet away. 入力フォーカスのある UI 要素がユーザーに常にはっきり見えるようにするには、フォーカス表示のガイドラインに従ってください。To ensure that the UI element with the input focus is clearly visible to the user at all times, follow the Focus visual guidelines. XAML では、アプリが Xbox で動いているときは何もしなくてもそのように動作しますが、HTML アプリの場合はカスタム CSS スタイルを使用する必要があります。In XAML you will get this behavior for free when your app runs on Xbox, but HTML apps will need to use a custom CSS style.

操作を行います。 SystemMediaTransportControls クラスとの統合します。Do: Integrate with the SystemMediaTransportControls class

Xbox のユーザーは、Xbox メディア リモコン Cortana (特に、"再生" と "一時停止" の音声コマンド) および Xbox SmartGlass を使用してメディア アプリを操作するのを好みます。Xbox users want to control media apps with the Xbox Media Remote, Cortana (especially the "Play" and "Pause" voice commands), and Xbox SmartGlass. これらの機能を自作しないでアプリに組み込むには、SystemMediaTransportControls クラスを使用する必要があります。このクラスは、Xbox メディア コントロールに自動的に含まれます。To get these features for free your app should use the SystemMediaTransportControls class, which is automatically included in the Xbox media controls. アプリでカスタム メディア コントロールを使用する場合は、SystemMediaTransportControls クラスと統合してユーザーにこれらの機能を提供します。If your app has custom media controls, make sure to integrate with the SystemMediaTransportControls class to provide these features to your users. バックグラウンド音楽アプリを作成している場合は、SystemMediaTransportControls クラスと統合して、バックグラウンド音楽コントロールが Xbox のマルチタスク タブで正しく動作するようにします。If you are creating a background music app, integrate with the SystemMediaTransportControls class to ensure that the background music controls work correctly in the Xbox multitasking tab.

検討してください。 画面の端を描画します。Consider: Draw to the edge of the screen

多くのテレビでは画面の端が切れるので、アプリの重要なコンテンツはすべて、テレビのセーフ エリアの内側に表示する必要があります。Many TVs cut off the edges of the display, so all of your app's important content should be displayed within the TV-safe area. UWP はオーバースキャンを使用してコンテンツをテレビのセーフ エリアの内側に維持しますが、この既定の動作ではアプリの周囲に目立つ境界線が描画されることがあります。UWP uses overscan to keep the content within the TV-safe area, but this default behavior can draw an obvious border around your app. 最善のエクスペリエンスを提供するには、既定の動作を無効にして、「画面の端に UI を描画する方法」の指示に従ってください。To provide the best experience, turn off the default behavior and follow the instructions at How to draw UI to the edge of the screen.


オーバースキャンを無効にした場合、対話要素とテキストをテレビのセーフ エリア内に収める処理はアプリで行う必要があります。If you disable overscan, it's your responsibility to make sure that interactive elements and text remain within the TV-safe area.

検討してください。 テレビの安全な色を使用します。Consider: Use TV-safe colors

テレビでは、コンピューター モニターほど極端な色の輝度は処理されません。TVs don't handle extreme color intensities as well as computer monitors do. 不自然な縞模様や色あせた画像が表示されないように、アプリでは高輝度の色を使わないようにする必要があります。Avoid high-intensity colors in your app so that users don't see odd banded effects or a washed-out image. また、テレビの間の違いに留意してください。テレビによって色の表現が大きく異なる場合があります Also, be aware that differences between TVs mean that colors that look great on your TV might look very different to your users. 読み取り美しく表示すべてのユーザーにアプリを作成する方法を理解します。Read Colors to understand how to make your app look great to everybody!

注意してください。 スケーリングを無効にします。Remember: You can disable scaling

UWP アプリは、コントロールやフォントなどの UI 要素がすべてのデバイスで読みやすいように自動的にスケーリングされます。UWP apps are automatically scaled to ensure that UI elements such as controls and fonts are legible on all devices. XAML を使用するアプリは 200% に、HTML を使用するアプリは 150% にスケーリングされます。Apps that use XAML are scaled by 200%, while apps that use HTML are scaled by 150%. Xbox でのアプリの表示をさらに細かく制御する場合は、既定の倍率を無効にして、HDTV (1920 x 1080) の実際のピクセル サイズを使用します。If you want more control over how your app looks on Xbox, disable the default scale factor to use the actual pixel dimensions of an HDTV (1920x1080). Xbox で適切に表示されるようにアプリを調整する方法については、「スケーリングを無効にする方法」および「有効ピクセルとスケーリング」をご覧ください。Take a look at How to turn off scaling and Effective pixels and scaling for information about tailoring your app to look great on Xbox.

これらのプラクティスが適用された UWP アプリを見てみるには、次のビデオをチェックしてください。If you want to get a glimpse of these practices applied to a UWP app, check out this video!

Channel 9Channel 9

Channel 9 の以下の講演は、Xbox でのすばらしいアプリの開発に関する優れたソースです。The following talks on Channel 9 are a great source of information for building amazing apps on Xbox:

Xbox アプリ開発App Dev on Xbox

Xbox アプリ開発イベントは、新しい xbox アプリを構築する開発者向けの優れた出発点です。The App Dev on Xbox event is a great starting point for developers new to building apps on Xbox.

関連項目See also