次の方法で共有

タッチターゲットに関するガイドライン

Windows アプリケーションのすべての対話型 UI 要素は、デバイスの種類や入力方法に関係なく、ユーザーが正確にアクセスして使用できる十分な大きさである必要があります。

タッチ入力 (およびタッチ接触領域の比較的不正確な性質) をサポートするには、タッチ デジタイザーによって報告されるより大きく複雑な入力データセットを使用して、ユーザーの意図した (または最も可能性の高い) ターゲットを決定するため、ターゲット サイズとコントロール レイアウトに関してさらに最適化が必要です。

すべての UWP コントロールは、既定のタッチ ターゲット サイズとレイアウトを使用して設計されており、快適で使いやすく、自信を与える視覚的にバランスのとれた魅力的なアプリを構築できます。

このトピックでは、プラットフォーム コントロールとカスタム コントロールの両方を使用してアプリを最大限に使えるように設計できるように、これらの既定の動作について説明します (アプリで必要な場合)。

重要な API: Windows.UI.Core 、Windows.UI.Input、Windows.UI.Xaml.Input

Fluent Standard のサイズ設定

Fluent Standard のサイズ変更 は、情報密度とユーザーの快適性のバランスを取るために作成されました。 実質的に、画面上のすべての項目は 40 x 40 有効ピクセル (epx) ターゲットに揃えられます。これにより、UI 要素をグリッドに揃え、システム レベルのスケーリングに基づいて適切にスケーリングできます。

注

有効ピクセルとスケーリングの詳細については、「画面のサイズとブレークポイントの を参照してください。

システム レベルのスケーリングの詳細については、「配置、余白、埋め込みを参照してください。

Fluent Compact のサイズ設定

アプリケーションは、Fluent Compact サイズ設定を使用することで、より高いレベルの情報密度を表示できます 。 コンパクトなサイズ設定では、UI 要素を 32 x 32 epx ターゲットに合わせて調整します。これにより、UI 要素をより狭いグリッドに合わせ、システム レベルのスケーリングに基づいて適切にスケーリングできます。

例示

コンパクトなサイズ設定は、ページ レベルまたはグリッド レベルで適用できます。

ページレベル

<Page.Resources>
    <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Page.Resources>

グリッド レベル

<Grid>
    <Grid.Resources>
        <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
    </Grid.Resources>
</Grid>

ターゲット サイズ

一般に、タッチターゲットサイズを7.5mm平方範囲(1.0xスケーリングプラトーの135 PPIディスプレイでは40x40ピクセル)に設定します。 通常、UWP コントロールは 7.5 mm タッチ ターゲットに合わせて調整されます (これは、特定のコントロールと一般的な使用パターンによって異なる場合があります)。 詳細については、「コントロールのサイズと密度」を参照してください。

これらのターゲット サイズの推奨事項は、特定のシナリオで必要に応じて調整できます。 考慮すべき点を次に示します。

  • タッチの頻度 - 繰り返しまたは頻繁に押されるターゲットを最小サイズよりも大きくすることを検討してください。
  • エラーの結果 - エラーが発生した場合に重大な影響を及ぼすターゲットは、より大きなパディングを持ち、コンテンツ領域の端から離れて配置する必要があります。 これは、頻繁にタッチされるターゲットに特に当てはまります。
  • コンテンツ領域内の位置。
  • フォーム ファクターと画面サイズ。
  • 指の姿勢。
  • タッチの視覚エフェクト。

サンプル

アーカイブサンプル

  • DirectX タッチ入力サンプル