Xbox およびテレビ向け設計Designing for Xbox and TV

Windows アプリを設計して、Xbox One と tv 画面で適切に機能していることを確認します。Design your Windows app so that it looks good and functions well on Xbox One and television screens.

10 フィートのエクスペリエンスにおける UWP アプリケーションの対話エクスペリエンスに関するガイダンスについては、「ゲームパッドとリモートコントロールの対話」を参照してください。See Gamepad and remote control interactions for guidance on interaction experiences in UWP applications in the 10-foot experience.

概要Overview

ユニバーサル Windows プラットフォームでは、複数の Windows 10 デバイスで魅力的なエクスペリエンスを実現できます。The Universal Windows Platform lets you create delightful experiences across multiple Windows 10 devices. UWP フレームワークで提供される機能のほとんどは、追加の作業を行わなくても、これらのデバイス間で同じユーザー インターフェイス (UI) をアプリに使用できます。Most of the functionality provided by the UWP framework enables apps to use the same user interface (UI) across these devices, without additional work. ただし、Xbox One とテレビ画面で快適に機能するようにアプリを調整し最適化するには、特別な注意事項があります。However, tailoring and optimizing your app to work great on Xbox One and TV screens requires special considerations.

ソファーに座りながらゲームパッドやリモコンを使って部屋の反対側にあるテレビを操作することを、10 フィート エクスペリエンスといいます。The experience of sitting on your couch across the room, using a gamepad or remote to interact with your TV, is called the 10-foot experience. 通常は画面から約 10 フィート (約 3 m) の距離に座るため、このように呼ばれています。It is so named because the user is generally sitting approximately 10 feet away from the screen. この場合、たとえば PC の操作 (2 フィート エクスペリエンスと呼ばれます) には見られない、特有の課題があります。This provides unique challenges that aren't present in, say, the 2-foot experience, or interacting with a PC. Xbox One や、コントローラーを使って入力しテレビ画面に出力するその他のデバイス向けアプリを開発している場合、この点を常に意識しておく必要があります。If you are developing an app for Xbox One or any other device that outputs to the TV screen and uses a controller for input, you should always keep this in mind.

アプリを 10 フィート エクスペリエンス向けに適切に動作させるためにこの記事のすべての手順が必要なわけではありませんが、手順を理解し、アプリにとって何が適切かを判断することで、アプリ特有のニーズに合わせてカスタマイズされた、優れた 10 フィート エクスペリエンスを提供できます。Not all of the steps in this article are required to make your app work well for 10-foot experiences, but understanding them and making the appropriate decisions for your app will result in a better 10-foot experience tailored for your app's specific needs. 10 フィート環境でアプリを使う場合、次のデザイン原則を検討してください。As you bring your app to life in the 10-foot environment, consider the following design principles.

シンプルSimple

10 フィート環境向けのデザインには特有の課題があります。Designing for the 10-foot environment presents a unique set of challenges. 解像度と視聴距離の点から、ユーザーはあまり多くの情報を処理できない可能性があります。Resolution and viewing distance can make it difficult for people to process too much information. 単純なデザインになるように、ごくシンプルなコンポーネントだけに絞り込むようにしてください。Try to keep your design clean, reduced to the simplest possible components. テレビに表示される情報の量は、デスクトップではなく、携帯電話と同程度にする必要があります。The amount of information displayed on a TV should be comparable to what you'd see on a mobile phone, rather than on a desktop.

Xbox One ホーム画面

一貫性Coherent

10 フィート環境の UWP アプリは、直感的で簡単に使えるようにします。UWP apps in the 10-foot environment should be intuitive and easy to use. 何がポイントなのかを明快、明確にしてください。Make the focus clear and unmistakable. コンテンツの配置を工夫し、コンテンツ間の移動に一貫性を持たせてユーザーが予測できるようにします。Arrange content so that movement across the space is consistent and predictable. ユーザーが目的の操作を最短で実行できるように配慮しましょう。Give people the shortest path to what they want to do.

Xbox One 映画アプリ

スクリーンショットに示されているすべてのムービーは、Microsoft ムービー & テレビで入手できます。All movies shown in the screenshot are available on Microsoft Movies & TV.

魅力的Captivating

最もイマーシブで臨場感のあるエクスペリエンスは、大画面で引き出されます。The most immersive, cinematic experiences take place on the big screen. 画面いっぱいに広がる風景、洗練された動作、鮮やかな色使い、生き生きとした文字が、アプリをワンランク上に引き上げます。Edge-to-edge scenery, elegant motion, and vibrant use of color and typography take your apps to the next level. 大胆で美しいデザインにしましょう。Be bold and beautiful.

Xbox One アバター アプリ

10 フィート エクスペリエンス向けの最適化Optimizations for the 10-foot experience

ここまで、10 フィート エクスペリエンス向けに優れた UWP アプリを設計する原則を説明しました。次に、アプリを最適化して優れたユーザー エクスペリエンスを提供する具体的な方法について、概要を示します。Now that you know the principles of good UWP app design for the 10-foot experience, read through the following overview of the specific ways you can optimize your app and make for a great user experience.

機能Feature 説明Description
UI 要素のサイズUI element sizing ユニバーサル Windows プラットフォームは、スケーリングと有効ピクセルを使い、視聴距離に合わせて UI をスケーリングします。The Universal Windows Platform uses scaling and effective pixels to scale the UI according to the viewing distance. サイズについて理解し UI 全体に適用すれば、アプリを 10 フィート環境用に最適化するのに役立ちます。Understanding sizing and applying it across your UI will help optimize your app for the 10-foot environment.
テレビのセーフ エリアTV-safe area UWP は既定で、テレビのセーフ エリア以外の領域 (画面の端に近い部分) に UI を表示することを自動的に避けます。The UWP will automatically avoid displaying any UI in TV-unsafe areas (areas close to the edges of the screen) by default. ただし、この場合、アスペクト比が変わり、UI がレターボックス化されてしまいます。However, this creates a "boxed-in" effect in which the UI looks letterboxed. テレビでイマーシブなアプリにするには、サポートしているテレビで、画面の端まで広がるようにアプリを変更します。For your app to be truly immersive on TV, you will want to modify it so that it extends to the edges of the screen on TVs that support it.
Colors UWP は配色テーマをサポートしています。システム テーマを引き継ぐアプリは、Xbox One では既定で濃色になります。The UWP supports color themes, and an app that respects the system theme will default to dark on Xbox One. アプリに特定の配色テーマがある場合、テレビではうまく表示されないために一部の色を避ける必要があることに注意してください。If your app has a specific color theme, you should consider that some colors don't work well for TV and should be avoided.
サウンドSound サウンドは、ユーザーを没頭させたりユーザーにフィードバックを提供したりする上で役立ち、10 フィート エクスペリエンスで重要な役割を果たします。Sounds play a key role in the 10-foot experience, helping to immerse and give feedback to the user. UWP には、アプリが Xbox One で実行されているときは一般的なコントロールのサウンドを自動的に有効にする機能があります。The UWP provides functionality that automatically turns on sounds for common controls when the app is running on Xbox One. UWP に組み込まれているサウンド サポートの詳細とその活用方法について説明します。Find out more about the sound support built into the UWP and learn how to take advantage of it.
UI コントロールのガイドラインGuidelines for UI controls いくつかの UI コントロールは、複数のデバイスで問題なく動作しますが、テレビで使用する場合には特定の考慮事項があります。There are several UI controls that work well across multiple devices, but have certain considerations when used on TV. 10 フィート エクスペリエンスを設計する際にこのようなコントロールを使う場合のベスト プラクティスについて説明します。Read about some best practices for using these controls when designing for the 10-foot experience.
Xbox のカスタム表示状態トリガーCustom visual state trigger for Xbox UWP アプリを 10 フィート エクスペリエンス用にカスタマイズする場合、カスタム表示状態トリガーを使用して、アプリが Xbox コンソールで起動されたことを検出したときにアプリのレイアウトが変わるようにすることをお勧めします。To tailor your UWP app for the 10-foot experience, we recommend that you use a custom visual state trigger to make layout changes when the app detects that it has been launched on an Xbox console.

上記の設計とレイアウトの考慮事項に加えて、アプリをビルドするときに考慮する必要がある ゲームパッドとリモートコントロールの対話 の最適化がいくつかあります。In addition to the preceding design and layout considerations, there are a number of gamepad and remote control interaction optimizations you should consider when building your app.

機能Feature 説明Description
XY フォーカス ナビゲーションと操作XY focus navigation and interaction ユーザーは、 XY フォーカスナビゲーションを使用して、アプリの UI 内を移動できます。XY focus navigation enables the user to navigate around your app's UI. ただし、ユーザーの移動は上下左右に制限されます。However, this limits the user to navigating up, down, left, and right. このセクションでは、この点に対応するための推奨事項とその他の考慮事項について説明します。Recommendations for dealing with this and other considerations are outlined in this section.
[マウス モード]Mouse mode XY フォーカスナビゲーションは、マップ、描画、および描画アプリなど、一部の種類のアプリケーションでは実用的ではなく、可能でもありません。XY focus navigation isn't practical, or even possible, for some types of applications, such as maps or drawing and painting apps. このような場合、 マウスモード では、ユーザーは PC 上のマウスと同じように、ゲームパッドやリモコンで自由に移動できます。In these cases, mouse mode lets users navigate freely with a gamepad or remote control, just like a mouse on a PC.
フォーカスの視覚効果Focus visual フォーカスのビジュアルは、現在フォーカスがある UI 要素を強調表示する境界線です。The focus visual is a border that highlights the currently focused UI element. これにより、ユーザーが移動または対話する UI をすばやく識別できます。This helps the user quickly identify the UI they are navigating through or interacting with.
取り組みに焦点を当てるFocus engagement フォーカスを操作するには、UI 要素にフォーカスがあるときに、ユーザーがゲームパッドまたはリモコンの [ A/Select ] ボタンを押す必要があります。Focus engagement requires the user to press the A/Select button on a gamepad or remote control when a UI element has focus in order to interact with it.
ハードウェア ボタンHardware buttons ゲームパッドとリモコンは、まったく異なるボタンと構成を提供します。The gamepad and remote control provide very different buttons and configurations.

注意

このトピックで示すコード スニペットはほとんどが XAMLで/c# ですが、基本原則と概念はすべての UWP アプリに共通です。Most of the code snippets in this topic are in XAML/C#; however, the principles and concepts apply to all UWP apps. Xbox 向けの HTML/JavaScript UWP アプリを開発している場合は、GitHub の TVHelpers ライブラリを参照することをお勧めします。If you're developing an HTML/JavaScript UWP app for Xbox, check out the excellent TVHelpers library on GitHub.

UI 要素のサイズUI element sizing

10 フィート環境でアプリを使うユーザーは、画面から数フィート離れた場所に座ってリモコンやゲームパッドを使っています。そのため、UI のデザインに関して考慮する必要がある注意事項がいくつかあります。Because the user of an app in the 10-foot environment is using a remote control or gamepad and is sitting several feet away from the screen, there are some UI considerations that need to be factored into your design. ユーザーが簡単に要素間を移動したり要素を選んだりできるように、UI があまり雑然とせず、適切なコンテンツの密度になるようにします。Make sure that the UI has an appropriate content density and is not too cluttered so that the user can easily navigate and select elements. 簡潔さが重要です。Remember: simplicity is key.

拡大縮小率とアダプティブ レイアウトScale factor and adaptive layout

拡大縮小率は、アプリが実行されているデバイスにおける適切なサイズで UI 要素が表示されることを保証します。Scale factor helps with ensuring that UI elements are displayed with the right sizing for the device on which the app is running. デスクトップでは、この設定は [設定] > [システム] > [表示] からスライダーで値を指定します。On desktop, this setting can be found in Settings > System > Display as a sliding value. この設定が電話でサポートされている場合、電話にも同じ設定があります。This same setting exists on phone as well if the device supports it.

テキスト、アプリ、その他の項目のサイズを変更する

Xbox One ではこのようなシステム設定はありません。ただし、UWP の UI 要素をテレビ用に適切なサイズにするために、拡大縮小率は既定で 200% (XAML アプリの場合) および 150% (HTML アプリの場合) に設定されます。On Xbox One, there is no such system setting; however, for UWP UI elements to be sized appropriately for TV, they are scaled at a default of 200% for XAML apps and 150% for HTML apps. 他のデバイスで UI 要素のサイズが適切に設定されていれば、テレビでも適切なサイズになります。As long as UI elements are appropriately sized for other devices, they will be appropriately sized for TV. Xbox One ではアプリは 1080 p (1920 x 1080 ピクセル) で表示されます。Xbox One renders your app at 1080p (1920 x 1080 pixels). そのため、PC などの他のデバイスからアプリを移植する場合は、アダプティブ手法を利用して 960 x 540 ピクセル、100% のスケーリング (または HTML アプリの場合、1280 x 720 ピクセル、100% のスケーリング) で UI が適切に表示されるようにしてください。Therefore, when bringing an app from other devices such as PC, ensure that the UI looks great at 960 x 540 px at 100% scale (or 1280 x 720 px at 100% scale for HTML apps) utilizing adaptive techniques.

Xbox 用の設計では、1 つの解像度 (1920 x 1080) だけを考慮すればよいため、PC の設計とは少し異なります。Designing for Xbox is a little different from designing for PC because you only need to worry about one resolution, 1920 x 1080. より良い解決策を持つテレビをユーザーが持っているかどうかは問題ではありません — 。 UWP アプリは常に1080p にスケーリングされます。It doesn't matter if the user has a TV that has better resolution—UWP apps will always scale to 1080p.

また、テレビの解像度に関係なく、アプリが Xbox One で実行されている場合は適切なアセット サイズが 200% (または HTML アプリの場合は 150%) のセットから取得されます。Correct asset sizes from the 200% (or 150% for HTML apps) set will also be pulled in for your app when running on Xbox One, regardless of TV resolution.

コンテンツの密度Content density

アプリを設計する際には、ユーザーは離れた位置から UI を見るということに注意してください。また、リモコンやゲーム コントローラーを使ってアプリを操作するために、マウスやタッチ入力を使うよりも移動に時間がかかることに注意してください。When designing your app, remember that the user will be viewing the UI from a distance and interacting with it by using a remote or game controller, which takes more time to navigate than using mouse or touch input.

UI コントロールのサイズSizes of UI controls

対話型の UI 要素は、最小の高さである 32 epx (有効ピクセル) でサイズを調整する必要があります。Interactive UI elements should be sized at a minimum height of 32 epx (effective pixels). これは一般的な UWP コントロールの既定の設定で、拡大縮小率が 200% のときに UI 要素が遠くから確実に見えるようにし、コンテンツの密度を抑えるためのものです。This is the default for common UWP controls, and when used at 200% scale, it ensures that UI elements are visible from a distance and helps reduce content density.

拡大縮小率 100% と 200% の UWP ボタン

クリックの回数Number of clicks

UI を簡略化するために、ユーザーがテレビ画面の端から端まで移動するときに、クリックは 6 回以内になるようにします。When the user is navigating from one edge of the TV screen to the other, it should take no more than six clicks to simplify your UI. ここでも簡潔さの原則が重要です。Again, the principle of simplicity applies here.

6 つのアイコン分の幅

テキスト サイズText sizes

UI を離れた位置から見えるようにするために、次の経験則に従ってください。To make your UI visible from a distance, use the following rules of thumb:

  • メイン テキストと読解コンテンツ: 最小 15 epxMain text and reading content: 15 epx minimum
  • 不可欠ではないテキストと補助コンテンツ: 最小 12 epxNon-critical text and supplemental content: 12 epx minimum

UI でさらに大きなテキストを使う場合は、画面領域をあまり狭めないサイズを選び、他のコンテンツのためのスペースを圧迫しないようにします。When using larger text in your UI, pick a size that does not limit screen real estate too much, taking up space that other content could potentially fill.

拡大縮小率の無効化Opting out of scale factor

アプリでは拡大縮小率のサポートを利用することをお勧めします。この機能は、各デバイスの種類に合わせて拡大縮小することで、すべてのデバイスでアプリを適切に実行するためのものです。We recommend that your app take advantage of scale factor support, which will help it run appropriately on all devices by scaling for each device type. しかし、この動作を無効にして、すべての UI を 100% の拡大縮小率で設計することもできます。However, it is possible to opt out of this behavior and design all of your UI at 100% scale. 100% 以外の拡大縮小率には変更できないことに注意してください。Note that you cannot change the scale factor to anything other than 100%.

XAML アプリでは、次のコード スニペットを使って倍率を無効にすることができます。For XAML apps, you can opt out of scale factor by using the following code snippet:

bool result =
    Windows.UI.ViewManagement.ApplicationViewScaling.TrySetDisableLayoutScaling(true);

無効化に成功したかどうかは result で通知されます。result will inform you whether you successfully opted out.

HTML/JavaScript のサンプル コードなどの詳細情報については、「スケーリングを無効にする方法」をご覧ください。For more information, including sample code for HTML/JavaScript, see How to turn off scaling.

UI 要素の適切なサイズを計算するときに、このトピックで説明した有効ピクセルの値を倍にして (または HTML アプリの場合は 1.5 倍にして) 実際のピクセル値にすることを忘れないでください。Please be sure to calculate the appropriate sizes of UI elements by doubling the effective pixel values mentioned in this topic to actual pixel values (or multiplying by 1.5 for HTML apps).

テレビのセーフ エリアTV-safe area

歴史的な経緯や技術的な理由により、すべてのテレビで画面の端までコンテンツが表示されるわけではありません。Not all TVs display content all the way to the edges of the screen due to historical and technological reasons. 既定では、UWP はテレビのセーフ エリア以外に UI コンテンツを表示せず、ページの背景のみを描画します。By default, the UWP will avoid displaying any UI content in TV-unsafe areas and instead will only draw the page background.

次の図に、テレビのセーフ エリア以外の領域を青色で示します。The TV-unsafe area is represented by the blue area in the following image.

テレビのセーフ エリア以外の領域

次のコード スニペットに示すように、背景は静的な色、テーマの色、または画像に設定できます。You can set the background to a static or themed color, or to an image, as the following code snippets demonstrate.

テーマの色Theme color

<Page x:Class="Sample.MainPage"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>

ImageImage

<Page x:Class="Sample.MainPage"
      Background="\Assets\Background.png"/>

追加の作業を行わない場合、アプリは次のように表示されます。This is what your app will look like without additional work.

テレビのセーフ エリア

この場合、アプリのアスペクト比が変わり、ナビゲーション ウィンドウやグリッドなど UI の一部が切れて表示されるため、最適とはいえません。This is not optimal because it gives the app a "boxed-in" effect, with parts of the UI such as the nav pane and grid seemingly cut off. ただし、UI の一部を画面の端まで拡張し、アプリに映画のような効果を持たせることで最適化することができます。However, you can make optimizations to extend parts of the UI to the edges of the screen to give the app a more cinematic effect.

端までの UI の描画Drawing UI to the edge

ユーザーに没入感を提供するために、特定の UI 要素を使って画面の端まで拡張することをお勧めします。We recommend that you use certain UI elements to extend to the edges of the screen to provide more immersion to the user. ScrollViewerナビゲーション ウィンドウCommandBar などを使えます。These include ScrollViewers, nav panes, and CommandBars.

一方、対話型の要素とテキストは画面の端に表示されることを常に避け、一部のテレビで表示が切れないようにすることも重要です。On the other hand, it's also important that interactive elements and text always avoid the screen edges to ensure that they won't be cut off on some TVs. 画面の端 5% 以内には重要でない視覚効果のみを描画することをお勧めします。We recommend that you draw only non-essential visuals within 5% of the screen edges. UI 要素のサイズ」で説明したように、Xbox One コンソールの既定の拡大縮小率 200% に従っている UWP アプリは、960 x 540 epx の領域を使います。そのため、アプリの UI では重要な UI を以下の領域に置かないようにします。As mentioned in UI element sizing, a UWP app following the Xbox One console's default scale factor of 200% will utilize an area of 960 x 540 epx, so in your app's UI, you should avoid putting essential UI in the following areas:

  • 上部と下部から 27 epx27 epx from the top and bottom
  • 左側と右側から 48 epx48 epx from the left and right sides

以下のセクションでは、UI を画面の端まで広げる方法について説明します。The following sections describe how to make your UI extend to the screen edges.

コア ウィンドウの境界Core window bounds

10 フィート エクスペリエンスのみを対象とする UWP アプリでは、コア ウィンドウの境界を使う方が簡単です。For UWP apps targeting only the 10-foot experience, using core window bounds is a more straightforward option.

App.xaml.csOnLaunched メソッドで、次のコードを追加します。In the OnLaunched method of App.xaml.cs, add the following code:

Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetDesiredBoundsMode
    (Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow);

このコード行で、アプリ ウィンドウは画面の端まで拡張されます。そのため、前に説明したテレビのセーフ エリアへ、すべての対話型 UI と重要な UI を移動する必要があります。With this line of code, the app window will extend to the edges of the screen, so you will need to move all interactive and essential UI into the TV-safe area described earlier. コンテキスト メニューや開かれた状態の ComboBoxes などの一時的な UI は、テレビのセーフ エリア内に自動的に残ります。Transient UI, such as context menus and opened ComboBoxes, will automatically remain inside the TV-safe area.

コア ウィンドウの境界

ウィンドウの背景Pane backgrounds

通常、ナビゲーション ウィンドウは画面の端近くに描画されるため、不自然なギャップが入らないように背景をテレビのセーフ エリア以外まで広げる必要があります。Navigation panes are typically drawn near the edge of the screen, so the background should extend into the TV-unsafe area so as not to introduce awkward gaps. ナビゲーション ウィンドウの背景の色をアプリの背景の色に変更するだけで、これを行うことができます。You can do this by simply changing the color of the nav pane's background to the color of the app's background.

既に説明したように、コア ウィンドウの境界を使用すると、画面の端まで UI を描画することができますが、さらに SplitView のコンテンツで正の余白を使用してコンテンツがテレビ セーフ エリア内に収まるようにする必要があります。Using the core window bounds as previously described will allow you to draw your UI to the edges of the screen, but you should then use positive margins on the SplitView's content to keep it within the TV-safe area.

画面の端まで拡張されたナビゲーション ウィンドウ

ここでは、ナビゲーション ウィンドウの背景は画面の端まで拡張され、ナビゲーション項目はテレビのセーフ エリア内に収まっています。Here, the nav pane's background has been extended to the edges of the screen, while its navigation items are kept in the TV-safe area. SplitView のコンテンツ (この場合は項目のグリッド) は、途切れずに続いているように見せるために、画面の下部まで拡張されています。一方、グリッドの上部はテレビのセーフ エリア内に収まったままです。The content of the SplitView (in this case, a grid of items) has been extended to the bottom of the screen so that it looks like it continues and isn't cut off, while the top of the grid is still within the TV-safe area. (この方法ついて詳しくは、「リストとグリッドのスクロールの端」で説明します)。(Learn more about how to do this in Scrolling ends of lists and grids).

次のコード スニペットでは、この効果を実現します。The following code snippet achieves this effect:

<SplitView x:Name="RootSplitView"
           Margin="48,0,48,0">
    <SplitView.Pane>
        <ListView x:Name="NavMenuList"
                  ContainerContentChanging="NavMenuItemContainerContentChanging"
                  ItemContainerStyle="{StaticResource NavMenuItemContainerStyle}"
                  ItemTemplate="{StaticResource NavMenuItemTemplate}"
                  ItemInvoked="NavMenuList_ItemInvoked"
                  ItemsSource="{Binding NavMenuListItems}"/>
    </SplitView.Pane>
    <Frame x:Name="frame"
           Navigating="OnNavigatingToPage"
           Navigated="OnNavigatedToPage"/>
</SplitView>

CommandBar も、アプリの 1 つまたは複数の端の近くに置かれることが多いウィンドウの例ですが、そのためにテレビではその背景を画面の端まで拡張する必要があります。CommandBar is another example of a pane that is commonly positioned near one or more edges of the app, and as such on TV its background should extend to the edges of the screen. これには通常、[その他] ボタンも含まれます。[その他] ボタンは右側に表示する "..." で表し、テレビのセーフ エリア内に収める必要があります。It also usually contains a More button, represented by "..." on the right side, which should remain in the TV-safe area. 目的の操作と視覚効果を実現するためのいくつかの異なる方法を次に示します。The following are a few different strategies to achieve the desired interactions and visual effects.

オプション 1: CommandBar の背景色を透明またはページの背景と同じ色に変更します。Option 1: Change the CommandBar background color to either transparent or the same color as the page background:

<CommandBar x:Name="topbar"
            Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
            ...
</CommandBar>

これで、CommandBar がページの残りの部分と同じ背景の上にあるように見え、背景が画面の端まで切れ目なく続きます。Doing this will make the CommandBar look like it is on top of the same background as the rest of the page, so the background seamlessly flows to the edge of the screen.

オプション 2: CommandBar の背景と同じ色で塗りつぶした背景の四角形を追加し、その四角形を CommandBar の下、ページの残りの部分に配置します。Option 2: Add a background rectangle whose fill is the same color as the CommandBar background, and have it lie below the CommandBar and across the rest of the page:

<Rectangle VerticalAlignment="Top"
            HorizontalAlignment="Stretch"      
            Fill="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
<CommandBar x:Name="topbar"
            VerticalAlignment="Top"
            HorizontalContentAlignment="Stretch">
            ...
</CommandBar>

注意

この方法を使う場合、アイコンの下に AppBarButton のラベルを表示できるように、開いた状態の CommandBar の高さが [その他] ボタンによって必要に応じて変更されることに注意してください。If using this approach, be aware that the More button changes the height of the opened CommandBar if necessary, in order to show the labels of the AppBarButtons below their icons. サイズ変更を避けるために、アイコンの右側へラベルを移動することをお勧めします。We recommend that you move the labels to the right of their icons to avoid this resizing. 詳しくは、「CommandBar のラベル」をご覧ください。For more information, see CommandBar labels.

これらのアプローチはいずれも、このセクションに示されている他の種類のコントロールにも適用されます。Both of these approaches also apply to the other types of controls listed in this section.

リストとグリッドのスクロールの端Scrolling ends of lists and grids

リストとグリッドに一度に画面に表示できるよりも多くの項目を含めることはよくあります。It's common for lists and grids to contain more items than can fit onscreen at the same time. この場合、リストまたはグリッドを画面の端まで拡張することをお勧めします。When this is the case, we recommend that you extend the list or grid to the edge of the screen. リストとグリッドを横方向にスクロールする場合は右端まで、垂直方向にスクロールする場合は一番下まで拡張するようにします。Horizontally scrolling lists and grids should extend to the right edge, and vertically scrolling ones should extend to the bottom.

テレビのセーフ エリアでのグリッドの切り捨て

リストまたはグリッドは次のように拡張されますが、フォーカス表示とその関連項目をテレビのセーフ エリア内に収めることが重要です。While a list or grid is extended like this, it's important to keep the focus visual and its associated item inside the TV-safe area.

グリッドのフォーカスのスクロールをテレビのセーフ エリア内に収める

UWP にはフォーカス表示を VisibleBounds 内に保持する機能がありますが、リストやグリッドの項目をセーフ エリアの表示領域内までスクロールできるように余白を追加する必要があります。The UWP has functionality that will keep the focus visual inside the VisibleBounds, but you need to add padding to ensure that the list/grid items can scroll into view of the safe area. 具体的には、次のコード スニペットのように、ListView または GridViewItemsPresenter に正の余白を追加します。Specifically, you add a positive margin to the ListView or GridView's ItemsPresenter, as in the following code snippet:

<Style x:Key="TitleSafeListViewStyle"
       TargetType="ListView">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListView">
                <Border BorderBrush="{TemplateBinding BorderBrush}"
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <ScrollViewer x:Name="ScrollViewer"
                                  TabNavigation="{TemplateBinding TabNavigation}"
                                  HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                  HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                  IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                                  VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                  IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                                  IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                  IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                  ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                                  IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                  BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                  AutomationProperties.AccessibilityView="Raw">
                        <ItemsPresenter Header="{TemplateBinding Header}"
                                        HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                        HeaderTransitions="{TemplateBinding HeaderTransitions}"
                                        Footer="{TemplateBinding Footer}"
                                        FooterTemplate="{TemplateBinding FooterTemplate}"
                                        FooterTransitions="{TemplateBinding FooterTransitions}"
                                        Padding="{TemplateBinding Padding}"
                                        Margin="0,27,0,27"/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

前のコード スニペットをページまたはアプリのリソースに含め、次のようにアクセスします。You would put the previous code snippet in either the page or app resources, and then access it in the following way:

<Page>
    <Grid>
        <ListView Style="{StaticResource TitleSafeListViewStyle}"
                  ... />

注意

このコード スニペットは ListView 専用です。GridView のスタイルの場合、ControlTemplateStyle の両方の TargetType 属性を GridView に設定します。This code snippet is specifically for ListViews; for a GridView style, set the TargetType attribute for both the ControlTemplate and the Style to GridView.

項目をどのように表示するかを細かく制御するには、アプリケーションがバージョン1803以降を対象としている場合は、 UIElement. Bringare View要求されたイベントを使用できます。For more fine-grained control over how items are brought into view, if your application targets version 1803 or later, you can use the UIElement.BringIntoViewRequested event. 次のコードスニペットのように、 ListViewGridView のItemsPanelに配置して、 / GridView内部ScrollViewerの前にキャッチすることができます。You can put it on the ItemsPanel for the ListView/GridView to catch it before the internal ScrollViewer does, as in the following code snippets:

<GridView x:Name="gridView">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal"
                           BringIntoViewRequested="ItemsWrapGrid_BringIntoViewRequested"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>
// The BringIntoViewRequested event is raised by the framework when items receive keyboard (or Narrator) focus or 
// someone triggers it with a call to UIElement.StartBringIntoView.
private void ItemsWrapGrid_BringIntoViewRequested(UIElement sender, BringIntoViewRequestedEventArgs args)
{
    if (args.VerticalAlignmentRatio != 0.5)  // Guard against our own request
    {
        args.Handled = true;
        // Swallow this request and restart it with a request to center the item.  We could instead have chosen
        // to adjust the TargetRect’s Y and Height values to add a specific amount of padding as it bubbles up, 
        // but if we just want to center it then this is easier.

        // (Optional) Account for sticky headers if they exist
        var headerOffset = 0.0;
        var itemsWrapGrid = sender as ItemsWrapGrid;
        if (gridView.IsGrouping && itemsWrapGrid.AreStickyGroupHeadersEnabled)
        {
            var header = gridView.GroupHeaderContainerFromItemContainer(args.TargetElement as GridViewItem);
            if (header != null)
            {
                headerOffset = ((FrameworkElement)header).ActualHeight;
            }
        }

        // Issue a new request
        args.TargetElement.StartBringIntoView(new BringIntoViewOptions()
        {
            AnimationDesired = true,
            VerticalAlignmentRatio = 0.5, // a normalized alignment position (0 for the top, 1 for the bottom)
            VerticalOffset = headerOffset, // applied after meeting the alignment ratio request
        });
    }
}

Colors

既定では、アプリが適切に表示されるように、ユニバーサル Windows プラットフォームはアプリの色をテレビ セーフの範囲 (詳しくは「テレビ セーフ カラー」を参照) に対応させています。By default, the Universal Windows Platform scales your app's colors to the TV-safe range (see TV-safe colors for more information) so that your app looks good on any TV. また、テレビでの視覚エクスペリエンスを向上させるために、アプリで使う色のセットを改善できます。In addition, there are improvements that you can make to the set of colors your app uses to improve the visual experience on TV.

アプリケーション テーマApplication theme

アプリに合わせて適切なアプリケーション テーマ (濃色または淡色) を選ぶか、テーマを無効にすることができます。You can choose an Application theme (dark or light) according to what is right for your app, or you can opt out of theming. テーマの一般的な推奨事項については、「配色テーマ」をご覧ください。Read more about general recommendations for themes in Color themes.

UWP では、アプリが実行されているデバイスから提供されるシステム設定に基づいて、アプリでテーマを動的に設定することもできます。The UWP also allows apps to dynamically set the theme based on the system settings provided by the devices on which they run. UWP では、ユーザーが指定したテーマ設定が常に適用されますが、各デバイスは、適切な既定のテーマも提供します。While the UWP always respects the theme settings specified by the user, each device also provides an appropriate default theme. Xbox One はその性質上、生産性エクスペリエンスよりもメディア エクスペリエンスを期待されているため、既定で濃色のシステム テーマに設定されます。Because of the nature of Xbox One, which is expected to have more media experiences than productivity experiences, it defaults to a dark system theme. アプリのテーマがシステム設定を基にしている場合、Xbox One では既定で濃色に設定されるはずです。If your app's theme is based on the system settings, expect it to default to dark on Xbox One.

アクセント カラーAccent color

UWP には、ユーザーがシステム設定から選んだアクセント カラーを公開する便利な方法が用意されています。The UWP provides a convenient way to expose the accent color that the user has selected from their system settings.

PC でアクセント カラーを選べるように、ユーザーは Xbox One でユーザーの色を選ぶことができます。On Xbox One, the user is able to select a user color, just as they can select an accent color on a PC. アプリでブラシやカラー リソースからこれらのアクセント カラーを呼び出していれば、ユーザーがシステム設定で選んだ色が使われます。As long as your app calls these accent colors through brushes or color resources, the color that the user selected in the system settings will be used. Xbox One ではアクセント カラーはシステムごとではなくユーザーごとであることに注意してください。Note that accent colors on Xbox One are per user, not per system.

また、Xbox One と PC、電話、その他のデバイスでは、ユーザーの色のセットが異なることに注意してください。Please also note that the set of user colors on Xbox One is not the same as that on PCs, phones, and other devices.

アプリで SystemControlForegroundAccentBrush などのブラシ リソースやカラー リソース (SystemAccentColor) を使うか、代わりに UIColorType.Accent* API からアクセント カラーを直接呼び出していれば、これらの色は Xbox One で利用可能なアクセント カラーに置き換えられます。As long as your app uses a brush resource such as SystemControlForegroundAccentBrush, or a color resource (SystemAccentColor), or instead calls accent colors directly through the UIColorType.Accent* API, those colors are replaced with accent colors available on Xbox One. ハイ コントラストのブラシの色も、PC や電話と同じ方法でシステムから取得されます。High contrast brush colors are also pulled in from the system the same way as on a PC and phone.

アクセント カラー全般について詳しくは、「アクセント カラー」をご覧ください。To learn more about accent color in general, see Accent color.

テレビごとのカラーの変化Color variance among TVs

テレビ向けに設計するときには、レンダリングされるテレビごとに色の表示が大きく異なることに注意してください。When designing for TV, note that colors display quite differently depending on the TV on which they are rendered. モニター上とまったく同じ色に見えるとは限りません。Don't assume colors will look exactly as they do on your monitor. アプリで UI の各部を区別するために色のわずかな違いを利用している場合、色が混ざり合ってユーザーが混乱する可能性があります。If your app relies on subtle differences in color to differentiate parts of the UI, colors could blend together and users could get confused. どのテレビであっても、ユーザーがはっきり区別できる違いがある色を使うようにしてください。Try to use colors that are different enough that users will be able to clearly differentiate them, regardless of the TV they are using.

テレビ セーフ カラーTV-safe colors

色の RGB 値は、赤、緑、青の輝度を表します。A color's RGB values represent intensities for red, green, and blue. Tv は極端な輝度を処理しないので — 、奇数の縞模様を生成したり、特定のテレビで色を薄く表示したりすることができます。TVs don't handle extreme intensities very well—they can produce an odd banded effect, or appear washed out on certain TVs. また、高輝度色はブルーミング (隣接するピクセルが同じ色を描画する現象) を起こす可能性があります。Additionally, high-intensity colors may cause blooming (nearby pixels start drawing the same colors). どのような色をテレビ セーフ カラーと見なすかについてはいくつかの考え方がありますが、一般に、RGB 値 16 ~ 235 (16 進数では 10 ~ EB) の色はテレビで使っても安全です。While there are different schools of thought in what are considered TV-safe colors, colors within the RGB values of 16-235 (or 10-EB in hexadecimal) are generally safe to use for TV.

テレビ セーフ カラーの範囲

従来、Xbox 上のアプリは、この "テレビ セーフ" カラーの範囲内に収まるように色を調整する必要がありました。ただし、Fall Creators Update 以降、Xbox One はすべての範囲のコンテンツをテレビ セーフ範囲に自動的に対応させています。Historically, apps on Xbox had to tailor their colors to fall within this "TV-safe" color range; however, starting with the Fall Creators Update, Xbox One automatically scales full range content into the TV-safe range. つまり、ほとんどのアプリ開発者がテレビ セーフ カラーについて心配する必要がなくなりました。This means that most app developers no longer have to worry about TV-safe colors.

重要

既にテレビ セーフ カラーの範囲内にあるビデオ コンテンツは、メディア ファンデーション を使用して再生する場合、このカラー スケール効果は適用されません。Video content that's already in the TV-safe color range doesn't have this color scaling effect applied when played back using Media Foundation.

DirectX 11 または DirectX 12 を使ってアプリを開発し、UI またはビデオをレンダリングするために独自のスワップ チェーンを作成している場合、IDXGISwapChain3::SetColorSpace1 を呼び出して使用する色空間を指定できるため、色の操作が必要かどうかをシステムに通知します。If you're developing an app using DirectX 11 or DirectX 12 and creating your own swap chain to render UI or video, you can specify the color space you use by calling IDXGISwapChain3::SetColorSpace1, which will let the system know if it needs to scale colors or not.

UI コントロールのガイドラインGuidelines for UI controls

いくつかの UI コントロールは、複数のデバイスで問題なく動作しますが、テレビで使用する場合には特定の考慮事項があります。There are several UI controls that work well across multiple devices, but have certain considerations when used on TV. 10 フィート エクスペリエンスを設計する際にこのようなコントロールを使う場合のベスト プラクティスについて説明します。Read about some best practices for using these controls when designing for the 10-foot experience.

ピボット コントロールPivot control

ピボットは、別のヘッダーやタブを選択することにより、アプリ内でビューのすばやいナビゲーションを提供します。A Pivot provides quick navigation of views within an app through selecting different headers or tabs. このコントロールでは、フォーカスがあるヘッダーに下線が引かれ、ゲームパッド/リモコンを使用している場合に、現在選択されているヘッダーがわかりやすくなります。The control underlines whichever header has focus, making it more obvious which header is currently selected when using gamepad/remote.

ピボットの下線

Pivot.IsHeaderItemsCarouselEnabled プロパティを true に設定すると、選択したピボット ヘッダーが常に最初の位置に移動する代わりに、ピボットが常に同じ位置に固定されます。You can set the Pivot.IsHeaderItemsCarouselEnabled property to true so that pivots always keep the same position, rather than having the selected pivot header always move to the first position. ヘッダーの折り返しを煩わしいと感じるユーザーもいるため、これでテレビなどの大画面表示でエクスペリエンスが向上します。This is a better experience for large-screen displays such as TV, because header wrapping can be distracting to users. すべてのピボット ヘッダーが同時に画面に収まらない場合、ユーザーは表示されるスクロール バーを使って他のヘッダーを表示できますが、最良のエクスペリエンスを提供するためには、すべてのピボット ヘッダーが画面に収まることを確認する必要があります。If all of the pivot headers don't fit onscreen at once, there will be a scrollbar to let customers see the other headers; however, you should make sure that they all fit on the screen to provide the best experience. 詳しくは、「タブとピボット」をご覧ください。For more information, see Tabs and pivots.

ナビゲーション ウィンドウ (ハンバーガー メニューとも呼ばれる) は、UWP アプリでよく使われるナビゲーション コントロールです。A navigation pane (also known as a hamburger menu) is a navigation control commonly used in UWP apps. 通常、リスト スタイルのメニューから選択できる複数のオプションを表示するウィンドウであり、ユーザーに異なるページを表示します。Typically it is a pane with several options to choose from in a list style menu that will take the user to different pages. 一般的に、このウィンドウは領域を節約するために折りたたまれた状態で表示され、ユーザーがボタンをクリックすることで開くことができます。Generally this pane starts out collapsed to save space, and the user can open it by clicking on a button.

ナビゲーション ウィンドウは、マウスやタッチを使う場合に非常にアクセシビリティが高く、ゲームパッド/リモコンを使う場合はウィンドウを開くボタンに移動する必要があるためアクセシビリティは低くなります。While nav panes are very accessible with mouse and touch, gamepad/remote makes them less accessible since the user has to navigate to a button to open the pane. そのため、ユーザーがページの左端まで移動してナビゲーション ウィンドウを開くことができるだけでなく、表示ボタンでナビゲーション ウィンドウを開く操作を可能にすることをお勧めします。Therefore, a good practice is to have the View button open the nav pane, as well as allow the user to open it by navigating all the way to the left of the page. この設計パターンを実装する方法を示すコード サンプルは、「プログラムによるフォーカス ナビゲーション」にあります。Code sample on how to implement this design pattern can be found in Programmatic focus navigation document. これにより、ユーザーは非常に簡単にウィンドウの内容にアクセスすることができます。This will provide the user with very easy access to the contents of the pane. さまざまな画面サイズでのナビゲーション ウィンドウの動作と、ゲームパッド/リモコンでのナビゲーションのベスト プラクティスについては、「ナビゲーション ウィンドウ」をご覧ください。For more information about how nav panes behave in different screen sizes as well as best practices for gamepad/remote navigation, see Nav panes.

CommandBar のラベルCommandBar labels

CommandBar のアイコンの高さを最小化し、一貫性が保たれるようにするために、アイコンの右側にラベルを配置することをお勧めします。It is a good idea to have the labels placed to the right of the icons on a CommandBar so that its height is minimized and stays consistent. CommandBar.DefaultLabelPosition プロパティを CommandBarDefaultLabelPosition.Right に設定することによって、これを実現できます。You can do this by setting the CommandBar.DefaultLabelPosition property to CommandBarDefaultLabelPosition.Right.

アイコンの右側にラベルが配置された CommandBar

また、このプロパティを設定するとラベルが常に表示されるようになり、ユーザーのクリック数を最小限に抑えることができるため、10 フィート エクスペリエンスに適しています。Setting this property will also cause the labels to always be displayed, which works well for the 10-foot experience because it minimizes the number of clicks for the user. また、これは他の種類のデバイスでも従うべき優れたモデルです。This is also a great model for other device types to follow.

ヒントTooltip

Tooltip コントロールは、ユーザーが要素の上にマウスを置くか、要素をタップして長押ししたときに UI の詳しい情報を提供する方法として導入されました。The Tooltip control was introduced as a way to provide more information in the UI when the user hovers the mouse over, or taps and holds their figure on, an element. ゲームパッドとリモコンの場合、Tooltip は、要素にフォーカスが設定されて少し時間が経つと表示され、しばらく画面に表示された後で消えます。For gamepad and remote, Tooltip appears after a brief moment when the element gets focus, stays onscreen for a short time, and then disappears. 使う Tooltip が多すぎると、ユーザーがこの動作を煩わしいと感じる可能性があります。This behavior could be distracting if too many Tooltips are used. テレビを設計するときには Tooltip を使わないようにしてください。Try to avoid using Tooltip when designing for TV.

ボタンのスタイルButton styles

標準的な UWP ボタンもテレビで適切に機能しますが、ボタンのいくつかの視覚スタイルは、より UI に注意を引きます。そのため、すべてのプラットフォーム、特に 10 フィート エクスペリエンスでは、どこにフォーカスがあるかを明確に通知できるというメリットがあるため、検討することをお勧めします。While the standard UWP buttons work well on TV, some visual styles of buttons call attention to the UI better, which you may want to consider for all platforms, particularly in the 10-foot experience, which benefits from clearly communicating where the focus is located. そのようなスタイルについて詳しくは、「ボタン」をご覧ください。To read more about these styles, see Buttons.

入れ子になった UI 要素Nested UI elements

入れ子になった UI は、コンテナー UI 要素内部に囲まれた、操作できる入れ子になったアイテムを公開します。入れ子になったアイテムとコンテナー アイテムはどちらも互いに、個別のフォーカスを取得することが可能です。Nested UI exposes nested actionable items enclosed inside a container UI element where both the nested item as well as the container item can take independent focus from each other.

入れ子になった UI がうまく機能する入力の種類もありますが、XY ナビゲーションに依存するゲームパッドやリモコンでは、うまく機能するとは限りません。Nested UI works well for some input types, but not always for gamepad and remote, which rely on XY navigation. このトピックのガイダンスに従い、UI が 10 フィート環境に最適化され、ユーザーが対話可能なすべての要素に容易にアクセスできるようにしてください。Be sure to follow the guidance in this topic to ensure that your UI is optimized for the 10-foot environment, and that the user can access all interactable elements easily. 一般的な解決策の1つは、入れ子になった UI 要素をに配置することです ContextFlyoutOne common solution is to place nested UI elements in a ContextFlyout.

入れ子になった UI について詳しくは、「リスト項目の入れ子になった UI」をご覧ください。For more information on nested UI, see Nested UI in list items.

MediaTransportControlsMediaTransportControls

MediaTransportControls 要素によって、ユーザーが再生、一時停止、クローズド キャプションの有効化などの操作を実行できる既定の再生エクスペリエンスが提供され、ユーザーはメディアを操作することができます。The MediaTransportControls element lets users interact with their media by providing a default playback experience that allows them to play, pause, turn on closed captions, and more. このコントロールは、MediaPlayerElement のプロパティであり、1 行2 行の 2 つのレイアウト オプションをサポートしています。This control is a property of MediaPlayerElement and supports two layout options: single-row and double-row. 1 行のレイアウトでは、スライダーと再生ボタンはすべて 1 つの行に配置され、スライダーの左側に再生/一時停止ボタンが配置されます。In the single-row layout, the slider and playback buttons are all located in one row, with the play/pause button located to the left of the slider. 2 行のレイアウトでは、スライダーは独自の行に配置され、再生ボタンは下側の別の行に配置されます。In the double-row layout, the slider occupies its own row, with the playback buttons on a separate lower row. 10 フィート エクスペリエンス向けに設計する場合は、ゲームパッドでのナビゲーションが向上するため、2 行のレイアウトを使用してください。When designing for the 10-foot experience, the double-row layout should be used, as it provides better navigation for gamepad. 2 行のレイアウトを有効にするには、MediaPlayerElementTransportControls プロパティの MediaTransportControls 要素で IsCompact="False" を設定します。To enable the double-row layout, set IsCompact="False" on the MediaTransportControls element in the TransportControls property of the MediaPlayerElement.

<MediaPlayerElement x:Name="mediaPlayerElement1"  
                    Source="Assets/video.mp4"
                    AreTransportControlsEnabled="True">
    <MediaPlayerElement.TransportControls>
        <MediaTransportControls IsCompact="False"/>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

アプリにメディアを追加する方法について詳しくは、「メディア再生」をご覧ください。Visit Media playback to learn more about adding media to your app.

![注] MediaPlayerElement は Windows 10 バージョン 1607 以降でのみ使用できます。![NOTE] MediaPlayerElement is only available in Windows 10, version 1607 and later. Windows 10 の以前のバージョン用にアプリを開発する場合は、代わりに MediaElement を使用する必要があります。If you're developing an app for an earlier version of Windows 10, you'll need to use MediaElement instead. 上記の推奨事項は MediaElement にも適用され、TransportControls プロパティも同じ方法でアクセスされます。The recommendations above apply to MediaElement as well, and the TransportControls property is accessed in the same way.

検索エクスペリエンスSearch experience

コンテンツの検索は 10 フィート エクスペリエンスで最もよく実行される機能の 1 つです。Searching for content is one of the most commonly performed functions in the 10-foot experience. アプリが検索エクスペリエンスを提供する場合、ユーザーがゲームパッドの Y ボタンをアクセラレータとして使用して、検索へのクイックアクセスができるようにすると便利です。If your app provides a search experience, it is helpful for the user to have quick access to it by using the Y button on the gamepad as an accelerator.

このアクセラレータは既に多くのユーザーに使用されていますが、必要に応じて UI に視覚的な Y グリフを追加して、ユーザーがこのボタンを使用して検索機能にアクセスできることを示すことも可能です。Most customers should already be familiar with this accelerator, but if you like you can add a visual Y glyph to the UI to indicate that the customer can use the button to access search functionality. このヒントを追加する場合は、Xbox のシェルやその他のアプリとの一貫性を維持するため、必ず Segoe Xbox シンボル MDL2 フォント (XAML アプリの場合は &#xE3CC;、HTML アプリの場合は \E426) のシンボルを使用します。If you do add this cue, be sure to use the symbol from the Segoe Xbox MDL2 Symbol font (&#xE3CC; for XAML apps, \E426 for HTML apps) to provide consistency with the Xbox shell and other apps.

注意

Segoe Xbox MDL2 シンボル フォントは Xbox にのみ対応するフォントであるため、PC ではシンボルが正しく表示されません。Because the Segoe Xbox MDL2 Symbol font is only available on Xbox, the symbol won't appear correctly on your PC. ただし、テレビに Xbox を展開した後はテレビで表示できます。However, it will show up on the TV once you deploy to Xbox.

Y ボタンはゲームパッドのみで利用できるため、検索にアクセスするための他の方法 (UI のボタンなど) を提供するようにします。Since the Y button is only available on gamepad, make sure to provide other methods of access to search, such as buttons in the UI. そうしない場合、一部のユーザーが検索機能にアクセスすることができない可能性があります。Otherwise, some customers may not be able to access the functionality.

10 フィート エクスペリエンスではディスプレイのスペースが限られるため、通常、ユーザーは全画面表示の検索エクスペリエンスを使うほうが便利です。In the 10-foot experience, it is often easier for customers to use a full screen search experience because there is limited room on the display. 全画面表示でも部分的な表示でも、「インプレース」検索により、ユーザーが検索エクスペリエンスを開いたときにスクリーン キーボードが表示され、ユーザーが検索用語を入力できるようにすることをお勧めします。Whether you have full screen or partial-screen, "in-place" search, we recommend that when the user opens the search experience, the onscreen keyboard appears already opened, ready for the customer to enter search terms.

Xbox のカスタム表示状態トリガーCustom visual state trigger for Xbox

UWP アプリを 10 フィート エクスペリエンス用にカスタマイズする場合、アプリが Xbox コンソールで起動されたことを検出したときにアプリのレイアウトが変わるようにすることをお勧めします。To tailor your UWP app for the 10-foot experience, we recommend that you make layout changes when the app detects that it has been launched on an Xbox console. これを行う方法の 1 つが、カスタム表示状態トリガーを使用することです。One way to do this is by using a custom visual state trigger. 表示状態トリガーは、Blend for Visual Studio で編集する場合に最も有用です。Visual state triggers are most useful when you want to edit in Blend for Visual Studio. 次のコード スニペットは、Xbox の表示状態トリガーを作成する方法を示しています。The following code snippet shows how to create a visual state trigger for Xbox:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <triggers:DeviceFamilyTrigger DeviceFamily="Windows.Xbox"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="RootSplitView.OpenPaneLength"
                        Value="368"/>
                <Setter Target="RootSplitView.CompactPaneLength"
                        Value="96"/>
                <Setter Target="NavMenuList.Margin"
                        Value="0,75,0,27"/>
                <Setter Target="Frame.Margin"
                        Value="0,27,48,27"/>
                <Setter Target="NavMenuList.ItemContainerStyle"
                        Value="{StaticResource NavMenuItemContainerXboxStyle}"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

このようなトリガーを作成するには、アプリに次のクラスを追加します。To create the trigger, add the following class to your app. これは、前の XAML コードで参照されているクラスです。This is the class that is referenced by the XAML code above:

class DeviceFamilyTrigger : StateTriggerBase
{
    private string _currentDeviceFamily, _queriedDeviceFamily;

    public string DeviceFamily
    {
        get
        {
            return _queriedDeviceFamily;
        }

        set
        {
            _queriedDeviceFamily = value;
            _currentDeviceFamily = AnalyticsInfo.VersionInfo.DeviceFamily;
            SetActive(_queriedDeviceFamily == _currentDeviceFamily);
        }
    }
}

カスタム トリガーを追加した場合、アプリは、Xbox One コンソールで実行されていることを検出すると XAML コードで指定されたレイアウトを自動的に変更します。After you've added your custom trigger, your app will automatically make the layout modifications you specified in your XAML code whenever it detects that it is running on an Xbox One console.

アプリが Xbox で実行されていることを確認した後、適切な調整を行うためのもう 1 つの方法は、コードを使うことです。Another way you can check whether your app is running on Xbox and then make the appropriate adjustments is through code. 次の単純な変数を使って、Xbox でアプリが実行されているかどうかを確認できます。You can use the following simple variable to check if your app is running on Xbox:

bool IsTenFoot = (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily ==
                    "Windows.Xbox");

次に、このチェックに続くコード ブロックで、UI に適切な調整を行うことができます。Then, you can make the appropriate adjustments to your UI in the code block following this check.

まとめSummary

10 フィート エクスペリエンスの設計には、他のプラットフォーム向けの設計とは対応を変える必要がある、特別な考慮事項があります。Designing for the 10-foot experience has special considerations to take into account that make it different from designing for any other platform. UWP アプリを Xbox One に単純に移植し、うまく動かすことができたとしも、必ずしも 10 フィート エクスペリエンス向けに最適化されるわけではありません。ユーザーのフラストレーションを招くことさえあります。While you can certainly do a straight port of your UWP app to Xbox One and it will work, it won't necessarily be optimized for the 10-foot experience and can lead to user frustration. この記事のガイドラインに従うと、テレビに組み込まれているかのようなすばらしいアプリにすることができます。Following the guidelines in this article will make sure that your app is as good as it can be on TV.