Xbox およびテレビ向け設計

[アーティクル]
01/19/2024

Xbox One とテレビ画面で見栄えよく表示され、適切に機能するように Windows アプリの設計を行います。

"10 フィート」エクスペリエンスでの UWP アプリケーションでの操作エクスペリエンスに関するガイダンスは、「ゲームパッドとリモコンの操作」を参照してください。

概要

ユニバーサル Windows プラットフォームを使用すると、複数の Windows デバイス間で快適なエクスペリエンスを楽しむことができます。 UWP フレームワークによって提供される機能のほとんどは、アプリが追加の作業を行わずに、これらのデバイス間で同じユーザーインターフェイス（UI）を使用できるようにします。ただし、Xbox One およびテレビ画面でアプリを適切に動作するように調整および最適化するには、特別な考慮事項が必要です。

ソファーに座りながらゲームパッドやリモコンを使って部屋の反対側にあるテレビを操作することを、10 フィートエクスペリエンスといいます。通常は画面から約 10 フィート（約 3 m）の距離に座るため、このように呼ばれています。この場合、たとえば PC の操作（2 フィート エクスペリエンスと呼ばれます）には見られない、特有の課題があります。 Xbox One またはテレビ画面に出力し、入力にコントローラーを使用するその他のデバイス用のアプリを開発している場合は、常にこの点に留意する必要があります。

この記事のすべてのステップは、アプリを 10 フィートエクスペリエンスに適したものにするために必要なわけではありませんが、それらのステップを理解し、アプリに適切な決定を行うと、アプリの特定のニーズに合わせて調整されたより良い 10 フィートエクスペリエンスが得られます。 10 フィート環境でアプリを動作させる場合は、次の設計原則を検討してください。

簡易

10 フィート環境向けの設計には、特有の一連の課題が伴います。解像度と表示距離によって、ユーザーがあまりにも多くの情報を処理することが困難になる場合があります。デザインをクリーンに保ち、可能な限りシンプルなコンポーネントに減してください。テレビに表示される情報量は、デスクトップではなく、携帯電話に表示されるものと同等である必要があります。

Xbox One ホーム画面

コヒーレント

10 フィート環境の UWP アプリは、直感的で使いやすいものにする必要があります。フォーカスを明確にし、争われないようにします。空間全体の移動が一貫して予測可能になるようにコンテンツを配置します。ユーザーに、自分のやりたいことへの最短のパースを与えます。

Xbox One Movies アプリ

スクリーンショットに示す映画はすべて、Microsoft Movies & TVでご利用いただけます。

魅惑

最も臨場感あふれる映画体験は、大画面で行われます。エッジツーエッジの風景、エレガントなモーション、色と文字体裁の鮮やかな使用は、アプリが次のレベルに引き上げられます。大胆で美しい。

10 フィートエクスペリエンスのための最適化

これで、10 フィートエクスペリエンスの優れた UWP アプリ設計の原則がわかったので、アプリを最適化して優れたユーザーエクスペリエンスを実現するための具体的な方法についての次の概要を読んでください。

機能	説明
UI 要素のサイズ設定	ユニバーサル Windows プラットフォームでは、スケーリングと有効ピクセルを使用して、表示距離に応じて UI を拡大縮小します。サイズ設定を理解し、UI 全体に適用すると、10 フィート環境用にアプリを最適化するのに役立ちます。
テレビセーフエリア	UWP では、デフォルトでは、テレビの安全でない領域（画面の端に近い領域）に UI が自動的に表示されなくなります。ただし、これにより、UI がレターボックス化されたように見える「ボックス化された」効果が作成されます。アプリをテレビで真にイマーシブにするには、それをサポートするテレビの画面の端まで広がるように変更する必要があります。
色	UWP はカラーテーマをサポートしており、システムテーマを守るアプリは Xbox One ではデフォルトで濃色になります。アプリに特定の色のテーマがある場合は、一部の色はテレビでは適切に機能しないため、避ける必要があることを考慮する必要があります。
サウンド	サウンドは、10 フィートエクスペリエンスで重要な役割を果たし、ユーザーにフィードバックを提供するのに役立ちます。 UWP は、アプリが Xbox One で実行されているときに、一般的なコントロールのサウンドを自動的にオンにする機能を提供します。 UWP に組み込まれているサウンドサポートの詳細を確認し、それを活用する方法を学びましょう。
UI コントロールのガイドライン	複数のデバイスで適切に機能する UI コントロールがいくつかありますが、テレビで使用する場合はいくつかの考慮事項があります。 10 フィートエクスペリエンス用の設計時にこれらのコントロールを使用するためのベストプラクティスについてお読みください。
Xbox のカスタムビジュアル状態トリガー	10 フィートエクスペリエンス用に UWP アプリを調整するには、カスタムビジュアル状態トリガーを使用して、Xbox コンソールで起動されたことをアプリが検出したときにレイアウトを変更することをお勧めします。

前述のデザインとレイアウトに関する考慮事項に加え、アプリを構築するときに考慮すべきゲームパッドとリモコンの操作の最適化がいくつかあります。

機能	説明
XY フォーカスナビゲーションとインタラクション	XY フォーカスナビゲーションにより、ユーザーはアプリの UI 内を移動できるようになります。ただし、これにより、ユーザーは上下左右に移動することが制限されます。このセクションでは、これに対処するための推奨事項とその他の考慮事項について説明します。
[マウスモード]	マップ、描画アプリ、ペイントアプリなど、アプリケーションの種類によっては、XY フォーカスナビゲーションが実用的ではなかったり、不可能である場合もあります。このような場合、マウスモードを使用すると、ユーザーは PC のマウスと同様に、ゲームパッドまたはリモコンを使って自由に移動できます。
フォーカスビジュアル	フォーカスの視覚効果は、現在フォーカスがある UI 要素を強調表示する境界線です。これにより、ユーザーは移動中または操作中の UI をすばやく識別できます。
フォーカスエンゲージメント	フォーカスエンゲージメントでは、ユーザーは UI 要素を操作するために、その要素にフォーカスがあるときに、ゲームパッドまたはリモコンの A/[選択] ボタンを押す必要があります。
ハードウェアボタン	ゲームパッドとリモコンでは、ボタンと構成が大きく異なります。

Note

このトピックのコードスニペットはほとんどが XAML/C# で記述されていますが、原則と概念はすべての UWP アプリに適用されます。 Xbox 向けの HTML/JavaScript UWP アプリを開発している場合は、GitHub の優れた TVHelpers ライブラリを確認してください。

UI 要素のサイズ設定

10 フィート環境のアプリのユーザーは、リモコンまたはゲームパッドを使用しており、画面から数フィート離れているため、設計に考慮する必要がある UI に関するいくつかの考慮事項があります。 UI に適切なコンテンツ密度があり、ユーザーが簡単に移動して要素を選択できるように、乱雑すぎないことを確認してください。シンプルさが重要だと覚えておいてください。

スケールファクターとアダプティブレイアウト

スケールファクター は、アプリが実行されているデバイスに適したサイズ設定で UI 要素が表示されるようにするのに役立ちます。デスクトップでは、この設定は [設定] > [システム] > [表示] からスライダーで値を指定します。デバイスでサポートされている場合も、これと同じ設定が電話にも存在します。

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

Xbox One では、このようなシステム設定はありません。ただし、UWP UI 要素のサイズをテレビに合わせて調整する場合、XAML アプリの場合はデフォルト値の 200% 、HTML アプリの場合は 150% に拡大縮小されます。 UI 要素が他のデバイスに対して適切なサイズである限り、TV に対しても適切なサイズになります。 Xbox One は、アプリを 1080p （1920 x 1080 ピクセル）でレンダリングします。したがって、PC などの他のデバイスからアプリを取り込む場合は、アダプティブ手法を利用して、UI が 960 x 540 ピクセル（HTML アプリの場合は 100% スケールで 1280 x 720 ピクセル）に見えるかどうかを確認してください。

Xbox 向けの設計は、1920 x 1080 の解像度だけを考慮すればよいため、、PC 用の設計とは少し異なります。ユーザーがそれ以上の解像度のテレビを使っていても関係ありません。UWP アプリは常に 1080 p に拡大縮小されます。

テレビの解像度に関係なく、Xbox One で実行する場合は、アプリの 200% （または HTML アプリの場合は 150%）の適切なアセットサイズも取得されます。

コンテンツ密度

アプリを設計するときは、ユーザーが離れた場所から UI を表示し、リモートまたはゲームコントローラーを使用して UI を操作することになるため、マウスやタッチ入力を使用するよりも操作に時間がかかることに注意してください。

UI コントロールのサイズ

対話型 UI 要素のサイズは、最小高さ 32 epx （有効ピクセル）にする必要があります。これは一般的な UWP コントロールのデフォルト値であり、200% のスケールで使用すると、UI 要素が遠くから確実に表示され、コンテンツの密度を下げるのに役立ちます。

クリックの回数

ユーザーがテレビ画面の端から別の端に移動する場合、UI を簡素化するために 6 回以内のクリックしかかかりません。ここでも、シンプルさの原則が適用されます。

6 つのアイコン

テキストのサイズ

UI を遠くからでも見えるようにするには、次の経験則を利用してください。

メインテキストと読み取りコンテンツ：最小 15 epx
重要でないテキストと補足コンテンツ：最小 12 epx

UI で大きなテキストを使用する場合は、画面の領域を制限しすぎず、他のコンテンツが埋める可能性のあるスペースを占有しないサイズを選択してください。

スケールファクターのオプトアウト

アプリでは、スケールファクターのサポートを利用することをお勧めします。これは、デバイスの種類ごとにスケーリングすることで、すべてのデバイスで適切に実行できるようになります。ただし、この動作をオプトアウトし、すべての UI を 100% のスケールで設計することができます。スケールファクターを 100% 以外に変更できないことに注意してください。

XAML アプリの場合、次のコードスニペットを使用してスケール係数をオプトアウトできます。

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

result は、オプトアウトに成功したかどうかを通知します。

HTML/JavaScript のサンプルコードを含む詳細については、「スケーリングをオフにする方法」を参照してください。

このトピックでメンション有効なピクセル値を実際のピクセル値に 2 倍（または HTML アプリの場合は 1.5 を掛ける）ことによって、UI 要素の適切なサイズを計算してください。

テレビセーフエリア

歴史的および技術的な理由により、すべてのテレビが画面の端までコンテンツを表示するわけではありません。デフォルトでは、UWP はテレビの安全でない領域に UI コンテンツを表示することを回避し、代わりにページの背景のみを描画します。

テレビの安全でない領域は、次の図の青い領域で表されています。

テレビの安全でない領域

次のコードスニペットが示すように、背景を静的色またはテーマ色またはイメージに設定できます。

テーマの色

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

Image

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

これは、追加の作業なしでアプリが表示される内容です。

テレビセーフエリア

ナビゲーションペインやグリッドなどの UI の一部が切り取られたように見えるため、アプリに「ボックス化された」効果を与えるため、これは最適ではありません。ただし、最適化を行って UI の一部を画面の端まで拡張して、アプリのより映画的な効果を得ることができます。

エッジへの UI の描画

ユーザーの没入感をさらに高めるために、特定の UI 要素を使用して画面の端まで拡張することをお勧めします。これには、ScrollViewers、ナビゲーションペイン、および CommandBar が含まれます。

一方、インタラクティブな要素とテキストは、一部のテレビで切り離されないように、画面の端を常に回避することも重要です。画面の端の 5% 以内に重要でないビジュアルのみを描画することをお勧めします。 UI 要素のサイズ設定にメンション、Xbox One コンソールのデフォルトの倍率 200% に従う UWP アプリでは 960 x 540 epx の領域が使用されるため、アプリの UI では、次の領域に重要な UI を配置しないようにする必要があります。

上下から 27 epx
左右から 48 epx

次のセクションでは、UI を画面の端まで拡張する方法について説明します。

コアウィンドウの境界

10 フィートエクスペリエンスのみを対象とする UWP アプリの場合、コアウィンドウ境界の使用はより簡単なオプションです。

App.xaml.csのOnLaunchedメソッドに次のコードを追加します。

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

このコード行では、アプリウィンドウは画面の端まで拡張されるため、前述のテレビセーフエリアにすべてのインタラクティブで重要な UI を移動する必要があります。コンテキストメニューや開いた ComboBox などの一時的な UI は、自動的にテレビセーフエリア内に残ります。

コアウィンドウの境界

ペインの背景

ナビゲーションペインは通常、画面の端の近くに描画されるため、背景はテレビの安全でない領域に拡張して、ぎこちないギャップが生じないようにする必要があります。これを行うには、ナビゲーションペインの背景の色をアプリの背景の色に変更するだけです。

前述のようにコアウィンドウの境界を使用すると、UI を画面の端まで描画できますが、SplitView のコンテンツを TV セーフエリア内に収めるために、SplitView のコンテンツに正のマージンを使用する必要があります。

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

ここでは、ナビゲーションペインの背景が画面の端まで拡張され、ナビゲーション項目はテレビセーフエリアに保持されています。 SplitView のコンテンツ（この場合、アイテムのグリッド）は、継続していて途切れていないように見えるように画面の下部まで拡張されていますが、グリッドの上部はまだテレビセーフエリア内にあります。（これを行う方法の詳細については、「リストとグリッドの最後をスクロールする」を参照してください）。

次のコードスニペットはこの効果を実現します。

<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 つ以上の端の近くに配置されるペインのもう 1 つの例であり、テレビではその背景が画面の端まで広がる必要があります。また、通常は右側の「...」で表される [その他] ボタンも含まれており、これは TV セーフエリアに残しておく必要があります。望ましいインタラクションと視覚効果を実現するためのいくつかの異なる戦略を次に示します。

オプション 1：CommandBar の背景色を透明またはページの背景と同じ色のいずれかに変更します。

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

これを行うと、CommandBar がページの残りの部分と同じ背景の上にあるように見えるため、背景が画面の端までシームレスに流れます。

オプション 2：塗りつぶしが CommandBar の背景と同じ色の背景の矩形を追加し、それを CommandBar の下およびページの残りの部分に配置します。

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

Note

このアプローチを使用する場合は、アイコンの下に CommandBar のラベルを表示するために、必要に応じて [その他] ボタンにより開いた AppBarButton の高さが変更されることに注意してください。このサイズ変更を回避するために、ラベルをアイコンの右側に移動することをお勧めします。詳細については、「CommandBarのラベル」を参照してください。

これらのアプローチは両方とも、このセクションにリストされている他のタイプのコントロールにも適用されます。

リストとグリッドの最後をスクロールする

リストとグリッドには、同時に画面上に収まりきらないほど多くのアイテムが含まれるのが一般的です。このような場合は、リストまたはグリッドを画面の端まで拡張することをお勧めします。水平方向にスクロールするリストとグリッドは右端まで拡張し、垂直方向にスクロールするリストとグリッドは下部まで拡張する必要があります。

テレビセーフエリアグリッドカットオフ

リストやグリッドはこのように拡張されますが、フォーカスのビジュアルとそれに関連するアイテムをテレビセーフエリア内に保持することが重要です。

スクロールグリッドフォーカスは、テレビの安全な領域に保持する必要があります

UWP には、VisibleBounds 内にフォーカスビジュアルを保持する機能がありますが、リスト/グリッド項目が安全な領域の表示にスクロールできるようにパディングを追加する必要があります。具体的には、次のコードスニペットのように、ListView または GridView の ItemsPresenter に正の余白を追加します。

<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>

前のコードスニペットをページまたはアプリリソースに配置し、次の方法でアクセスします。

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

Note

このコードスニペットは、ListView専用です。GridView スタイルの場合は、ControlTemplate と Style の両方の TargetType 属性をGridViewに設定します。

項目の表示方法をより細かく制御するには、アプリケーションがバージョン 1803 以降をターゲットとしている場合、UIElement.BringIntoViewRequested イベントを使用できます。これを ListView/GridView の ItemsPanel に配置することで、次のコードスニペットのように内部の ScrollViewer よりも先にキャッチできます。

<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
        });
    }
}

色

既定では、ユニバーサル Windows プラットフォームは、アプリがどのテレビでも適切に表示されるように、アプリの色をテレビで安全な範囲（詳細については、「テレビセーフカラー」を参照）に調整します。さらに、テレビでの視覚エクスペリエンスを向上させるために、アプリで使用する色のセットを改善できます。

アプリケーションテーマ

アプリに適したものに応じてアプリケーションテーマ （ダークまたはライト）を選択することも、テーマをオプトアウトすることもできます。カラーテーマのテーマに関する一般的な推奨事項の詳細を参照してください。

また、UWP を使用すると、アプリは、アプリが実行するデバイスによって提供されるシステム設定に基づいてテーマを動的に設定することもできます。 UWP は常にユーザーが指定したテーマ設定を守りますが、各デバイスには適切なデフォルトのテーマも提供されています。 Xbox One の性質上、生産性エクスペリエンスよりもメディア エクスペリエンスが期待されるため、デフォルトではダークシステムテーマが設定されています。アプリのテーマがシステム設定に基づいている場合は、Xbox One ではデフォルトでダークになることが予想されます。

アクセントカラー

UWP は、ユーザーがシステム設定から選択したアクセントカラーを公開する便利な方法を提供します。

Xbox One では、ユーザーはPC でアクセントカラーを選択できるのと同様に、ユーザーの色を選択できます。アプリがブラシまたはカラーリソースを使用してこれらのアクセントカラーを呼び出す限り、ユーザーがシステム設定で選んだ色が使用されます。 Xbox One のアクセントカラーはシステムごとではなくユーザーごとであることに注意してください。

Xbox One のユーザーカラーのセットは、PC、携帯電話、その他のデバイスのユーザーカラーのセットと同じではないことにも注意してください。

アプリが SystemControlForegroundAccentBrush などのブラシリソースやカラーリソース（SystemAccentColor）を使用している限り、または代わりに UIColorType.Accent* API を通じてアクセントカラーを直接呼び出している限り、それらのカラーは Xbox One で利用可能なアクセントカラーに置き換えられます。ハイコントラストのブラシカラーも、PC や携帯電話と同じようにシステムから取り込まれます。

アクセントカラー全般の詳細については、「アクセントカラー」を参照してください。

テレビごとの色の違い

テレビ用にデザインする場合、レンダリングされるテレビによって色の表示が大きく異なることに注意してください。色がモニターとまったく同じように見えるとは想定しないでください。アプリが UI の部分を区別するために色の微妙な違いに依存している場合、色が混ざり合って、ユーザーが混乱する可能性があります。使用しているテレビに関係なく、ユーザーが明確に区別できるように、十分に異なる色を使用してみてください。

テレビセーフカラー

色の RGB 値は、赤、緑、青の強度を表します。テレビでは、極端な輝度をあまりうまく処理できません。不自然な縞模様になったり、一部のテレビでは色あせて表示されたりする可能性があります。さらに、高輝度の色が発生すると、ブルームが発生する可能性があります（近くのピクセルが同じ色を描画し始める）。テレビセーフカラーと見なされるものにはさまざまな考え方がありますが、RGB 値 16 から 235 （または 16 進数の 10 EB）内の色は、一般的にテレビで使用しても安全です。

テレビの安全な色の範囲

これまで、Xbox 上のアプリでは、この「テレビセーフ」色の範囲内に収まるように色を調整する必要がありました。ただし、Fall Creators Update 以降では、Xbox One はテレビセーフな範囲にフルレンジコンテンツを自動的にスケーリングします。これは、ほとんどのアプリ開発者がテレビセーフカラーについて心配する必要がなくなったことを意味します。

重要

既にテレビセーフカラー範囲にあるビデオコンテンツでは、Media Foundationを使用して再生したときにこのカラースケーリング効果は適用されません。

DirectX 11 または DirectX 12 を使用してアプリを開発し、独自のスワップチェーンを作成して UI またはビデオをレンダリングする場合は、 IDXGISwapChain3::SetColorSpace1を呼び出して使用する色空間を指定できます。これは、色をスケーリングする必要があるかどうかをシステムに知らせます。

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

複数のデバイスで適切に機能する UI コントロールがいくつかありますが、テレビで使用する場合はいくつかの考慮事項があります。 10 フィートエクスペリエンス用の設計時にこれらのコントロールを使用するためのベストプラクティスについてお読みください。

ナビゲーションペイン（ハンバーガーメニューとも呼ばれます）は、UWP アプリでよく使用されるナビゲーションコントロールです。通常、これはリストスタイルのメニューから選択できるいくつかのオプションを備えたペインであり、ユーザーはさまざまなページに移動します。通常、このペインはスペースを節約するために折りたたまれた状態で開始され、ユーザーはボタンをクリックして開くことができます。

ナビゲーションペインはマウスとタッチで簡単にアクセス可能ですが、ゲームパッド/リモートでは、ユーザーがペインを開くためにボタンに移動する必要があるため、アクセシビリティが低下します。そのため、[表示] ボタンでナビゲーションペインを開き、ユーザーがページの左側まで移動して開くことをお勧めします。この動作を実装する方法を示すコードサンプルは、「プログラムによるフォーカスナビゲーション」ドキュメントにあります。これにより、ユーザーはペインの内容に非常に簡単にアクセスできるようになります。さまざまな画面サイズでのナビゲーションペインの動作と、ゲームパッド/リモートナビゲーションのベストプラクティスの詳細については、「ナビゲーションペイン」を参照してください。

CommandBar ラベル

CommandBar 上のアイコンの右側にラベルを配置し、その高さが最小限に抑えられ、一貫性が維持されるようにすることをお勧めします。これを行うには、CommandBar.DefaultLabelPosition プロパティを CommandBarDefaultLabelPosition.Right に設定します。

アイコンの右側にラベルが付いた CommandBar

このプロパティを設定すると、ラベルが常に表示されるようになります。これは、ユーザーのクリック数が最小限に抑えられるため、10 フィートエクスペリエンスに適しています。これは、他のタイプのデバイスが追従する優れたモデルでもあります。

Tooltipコントロールは、ユーザーがマウスをポイントしたとき、または要素をタップして図形を押したままにしたときに、UI に詳細情報を提供する方法として導入されました。ゲームパッドとリモコンの場合、Tooltip は要素にフォーカスが当たると一瞬の後に表示され、画面上に短時間留まり、その後消えます。使用される Tooltip が多すぎる場合、この動作は気が散る可能性があります。テレビ用にデザインする場合は、Tooltip の使用を避けるようにしてください。

ボタンスタイル

標準的な UWP ボタンはテレビでうまく機能しますが、ボタンの一部の視覚スタイルは UI への注意をより喚起します。これは、特にフォーカスがある場所を明確に伝える利点がある 10 フィートエクスペリエンスでは、すべてのプラットフォームで考慮することをお勧めします。これらのスタイルの詳細については、「ボタン」を参照してください。

ネスト UI 要素

ネスト UI 要素は、ネストアイテムとコンテナーアイテムの両方が互いに独立したフォーカスを取ることができる、コンテナー UI 要素内で囲まれたネスト操作可能な項目を公開します。

ネストされた UI は一部の入力タイプではうまく機能しますが、XY ナビゲーションに依存するゲームパッドやリモコンでは必ずしも機能するとは限りません。必ずこのトピックのガイダンスに従って、UI が 10 フィート環境向けに最適化されていること、およびユーザーが対話可能なすべての要素に簡単にアクセスできることを確認してください。一般的な解決方法は、ネスト UI 要素を ContextFlyout で囲むことです。

ネスト UI 要素の詳細については、リストアイテムのネスト UI 要素を参照してください。

MediaTransportControls

MediaTransportControls要素を使用すると、再生、一時停止、閉じたキャプションの有効化などを可能にするデフォルトの再生エクスペリエンスを提供することで、ユーザーがメディアを操作できるようになります。このコントロールは MediaPlayerElement のプロパティであり、単一行と 2 行の 2 つのレイアウトオプションをサポートしています。単一行レイアウトでは、スライダーと再生ボタンはすべて 1 行に配置され、再生/一時停止ボタンはスライダーの左側に配置されます。 2 行レイアウトでは、スライダーは独自の行を占有し、再生ボタンは別の下の行に配置されます。 10 フィートエクスペリエンス用に設計する場合は、ゲームパッドのナビゲーションが向上するため、2 行レイアウトを使用する必要があります。 2 行レイアウトを有効にするには、IsCompact="False" の TransportControls プロパティの MediaTransportControls 要素に MediaPlayerElement を設定します。

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

アプリへのメディアの追加の詳細については、メディアの再生に関するページを参照してください。

Note

MediaPlayerElement は Windows 10 バージョン 1607 以降でのみ使用できます。以前のバージョンの Windows 10 用のアプリを開発している場合は、代わりに MediaElement を使用する必要があります。上記の推奨事項は MediaElement にも適用され、TransportControls プロパティにも同じ方法でアクセスされます。

検索エクスペリエンス

コンテンツの検索は、10 フィートエクスペリエンスで最も一般的に実行されるファンクションの 1 つです。アプリで検索エクスペリエンスが提供される場合は、ゲームパッドのYボタンをアクセラレータとして使用して、ユーザーが簡単にアクセスできます。

ほとんどのお客様は既にこのアクセラレータに精通しているはずですが、必要に応じて UI にビジュアル Y グリフを追加して、ユーザーがボタンを使用して検索機能にアクセスできることを示すことができます。このキューを追加する場合は、Xbox シェルおよび他のアプリとの一貫性を保つために、必ず Segoe Xbox MDL2 シンボル フォントの記号（XAML アプリの場合は 、HTML アプリの場合は \E426）を使用してください。

Note

Segoe Xbox MDL2 Symbol フォントは Xbox でのみ使用できるため、PC ではシンボルが正しく表示されません。ただし、Xbox に配置するとテレビに表示されます。

[Y] ボタンはゲームパッドでのみ使用できるため、UI のボタンなど、検索にアクセスする他の方法を必ず提供してください。そうしないと、一部のお客様が機能にアクセスできない場合があります。

10 フィートエクスペリエンスでは、多くの場合、ディスプレイにスペースが限られているため、全画面表示の検索エクスペリエンスを使用する方が簡単です。全画面表示または一部画面の「インプレース」検索のいずれを使用する場合でも、ユーザーが検索エクスペリエンスを開くと、画面上のキーボードが既に開いている状態で表示され、顧客が検索語句を入力できる状態にすることをお勧めします。

Xbox のカスタムビジュアル状態トリガー

10 フィートエクスペリエンスに合わせて UWP アプリを調整するには、アプリが Xbox コンソールで起動されたことが検出されたときにレイアウトを変更することをお勧めします。これを行う 1 つの方法は、カスタムのビジュアル状態トリガーを使用することです。表示状態トリガーは、Blend for Visual Studio で編集する場合に最も便利です。次のコードスニペットは、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>

トリガーを作成するには、次のクラスをアプリに追加します。これは、上記の XAML コードによって参照されるクラスです。

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 コードで指定したレイアウト変更を自動的に行います。

アプリが Xbox で実行されているかどうかをチェックし、適切な調整を行うもう 1 つの方法は、コードを使用することです。アプリが Xbox で実行されている場合は、次の単純な変数を使用してチェックできます。

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

次に、このチェックの後のコードブロックで UI に適切な調整を行うことができます。

まとめ

10 フィートエクスペリエンスの設計には、他のプラットフォーム用の設計とは異なる特別な考慮事項を考慮する必要があります。 UWP アプリを Xbox One に直接移植することはできますが、必ずしも 10 フィートエクスペリエンス用に最適化されるとは限らず、ユーザーの不満につながる可能性があります。この記事のガイドラインに従うと、アプリがテレビに表示されるのと同じくらい適切であることが確認されます。

次の方法で共有

Xbox およびテレビ向け設計

概要

簡易

コヒーレント

魅惑

10 フィートエクスペリエンスのための最適化

UI 要素のサイズ設定

スケールファクターとアダプティブレイアウト

コンテンツ密度

UI コントロールのサイズ

クリックの回数

テキストのサイズ

スケールファクターのオプトアウト

テレビセーフエリア

テーマの色

Image

エッジへの UI の描画

コアウィンドウの境界

ペインの背景

リストとグリッドの最後をスクロールする

色

アプリケーションテーマ

アクセントカラー

テレビごとの色の違い

テレビセーフカラー

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

ナビゲーションペイン

CommandBar ラベル

Tooltip

ボタンスタイル

ネスト UI 要素

MediaTransportControls

検索エクスペリエンス

Xbox のカスタムビジュアル状態トリガー

まとめ

その他のリソース

次の方法で共有

Xbox およびテレビ向け設計

概要

簡易

コヒーレント

魅惑

10 フィート エクスペリエンスのための最適化

UI 要素のサイズ設定

スケール ファクターとアダプティブ レイアウト

コンテンツ密度

UI コントロールのサイズ

クリックの回数

テキストのサイズ

スケール ファクターのオプトアウト

テレビセーフエリア

テーマの色

Image

エッジへの UI の描画

コア ウィンドウの境界

ペインの背景

リストとグリッドの最後をスクロールする

色

アプリケーション テーマ

アクセント カラー

テレビごとの色の違い

テレビ セーフ カラー

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

ナビゲーション ペイン

CommandBar ラベル

Tooltip

ボタン スタイル

ネスト UI 要素

MediaTransportControls

検索エクスペリエンス

Xbox のカスタム ビジュアル状態トリガー

まとめ

関連記事

その他のリソース

10 フィートエクスペリエンスのための最適化

スケールファクターとアダプティブレイアウト

スケールファクターのオプトアウト

コアウィンドウの境界

アプリケーションテーマ

アクセントカラー

テレビセーフカラー

ナビゲーションペイン

ボタンスタイル

Xbox のカスタムビジュアル状態トリガー