Xbox およびテレビ向け設計

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

コヒーレント

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

Xbox One Movies app

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

魅惑

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

Xbox One Avatar app

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 要素が表示されるようにするのに役立ちます。 デスクトップでは、この設定は [設定] > [システム] > [表示] からスライダーで値を指定します。 デバイスでサポートされている場合も、これと同じ設定が電話にも存在します。

Change the size of text, apps, and other items

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 要素が遠くから確実に表示され、コンテンツの密度を下げるのに役立ちます。

UWP button at 100% and 200% scale

クリックの回数

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

6 icons across

テキストのサイズ

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 コンテンツを表示することを回避し、代わりにページの背景のみを描画します。

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

TV-unsafe area

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

テーマの色

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

Image

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

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

TV-safe area

ナビゲーション ペインやグリッドなどの 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.csOnLaunchedメソッドに次のコードを追加します。

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

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

Core window bounds

ペインの背景

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

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

Nav pane extended to edges of screen

ここでは、ナビゲーション ペインの背景が画面の端まで拡張され、ナビゲーション項目はテレビセーフエリアに保持されています。 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 セーフ エリアに残しておく必要があります。 望ましいインタラクションと視覚効果を実現するためのいくつかの異なる戦略を次に示します。

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

<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のラベル」を参照してください。

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

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

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

TV safe area grid cutoff

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

Scrolling grid focus should be kept in TV-safe area

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

<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 スタイルの場合は、ControlTemplateStyle の両方の TargetType 属性を GridView に設定します。

項目の表示方法をより細かく制御するには、アプリケーションがバージョン 1803 以降をターゲットとしている場合、UIElement.BringIntoViewRequested イベントを使用できます。 これを ListView/GridViewItemsPanel に配置することで、次のコード スニペットのように内部の 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) 内の色は、一般的にテレビで使用しても安全です。

TV-safe color range

これまで、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 with labels to the right of icons

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

Tooltip

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 アプリの場合は &#xE3CC;、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 フィートエクスペリエンス用に最適化されるとは限らず、ユーザーの不満につながる可能性があります。 この記事のガイドラインに従うと、アプリがテレビに表示されるのと同じくらい適切であることが確認されます。