タッチ ターゲットのガイドライン

  • [アーティクル]

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 サイズにより、より高いレベルの情報密度を表示できます。 Compact サイズにより、UI 要素を 32x32 epx ターゲットに揃えます。これにより、UI 要素をタイトなグリッドに位置合わせし、システム レベルのスケーリングに基づいて適切にスケーリングできます。

例

Compact サイズは、ページ レベルまたはグリッド レベルで適用できます。

ページ レベル

<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.5 mm の正方形の範囲に設定します (1.0x のスケール プラトーで 135 ppi のディスプレイで 40x40 ピクセル)。 通常、UWP コントロールは 7.5 mm のタッチ ターゲットと一致します (これは、特定のコントロールおよび一般的な使用パターンによって異なる場合があります)。 詳細については、「コントロールのサイズと密度」を参照してください。

表に示したターゲット サイズの推奨サイズは、個々のシナリオの必要に応じて調整できます。 考慮事項をいくつか以下に示します。

  • タッチの頻度 - 繰り返しタッチされたり、頻繁にタッチされたりするターゲットは、最小サイズより大きくするようにしてください。
  • エラー防止 - 誤ってタッチすると重大な結果をもたらすターゲットは、大きな余白を取り、コンテンツ領域の端から離して配置する必要があります。 特に当てはまるのは頻繁にタッチされるターゲットです。
  • コンテンツ領域での位置。
  • フォーム ファクターと画面サイズ。
  • 指の位置。
  • タッチの視覚エフェクト。

サンプル

サンプルのアーカイブ