タッチパッドの設計ガイドライン
ユーザーがタッチパッドで操作できるようにアプリを設計します。 タッチパッドは、間接的なマルチタッチ入力と、マウスのようなポインティング デバイスの精密入力を組み合わせたものです。 この組み合わせにより、タッチパッドはタッチに最適化された UI にも、生産性アプリのより小さいターゲットにも適しています。
タッチパッド操作には、次の 3 つが必要です。
標準のタッチパッド、または Windows 高精度タッチパッド。
高精度タッチパッドは、Windows アプリ デバイスに最適化されています。 高精度タッチパッドを使用すると、システムが指の追跡や手のひら検出などの一部のタッチパッド操作をネイティブに処理でき、さまざまなデバイス全体での一貫した操作を実現しやすくなります。
タッチパッドへの 1 本以上の指の直接的な接触。
タッチ接触の動き (または、時間のしきい値に基づく動きの欠落)。
タッチパッド センサーから提供される入力データは、次のように使うことができます。
- 1 つ以上の UI 要素に直接的な操作 (パン、回転、サイズ変更、移動など) を行う物理的なジェスチャとして解釈する。 プロパティ ウィンドウやその他のダイアログ ボックスを通じた要素との対話的操作は、間接的な操作と見なされます。
- マウス、ペンなどの代替の入力方式として見なす。
- 他の入力方法の外観を補完するために使う (ペンで描画したインク ストロークをこするなど)。
タッチパッドは、間接的なマルチタッチ入力と、マウスのようなポインティング デバイスの精密入力を組み合わせたものです。 この組み合わせにより、タッチパッドはタッチに最適化された UI にも、生産性アプリとデスクトップ環境で使用される一般的に小さなターゲットにも適しています。 Windows アプリの設計はタッチ入力用に最適化し、既定のタッチパッドのサポートを利用します。
タッチパッドでサポートされている操作エクスペリエンスは複合的なので、PointerEntered イベントを使って、タッチ入力の組み込みサポートの他にマウス スタイル UI コマンドも提供することをお勧めします。 たとえば、コンテンツをパンするだけでなく、"前へ" ボタンと "次へ" ボタンを使ってコンテンツのページをフリップできるようにします。
このトピックで説明されているジェスチャとガイドラインを利用することで、アプリはタッチパッド入力を最小限のコードでシームレスにサポートできます。
タッチパッド言語
システム内では一貫して、タッチパッド操作の簡単なセットが使われます。 アプリをタッチとマウス入力用に最適化すると、ユーザーが慣れている操作感がこの言語によって実現されるので、信頼感が高まり、アプリの習得や使用も簡単になります。
高精度タッチパッドでは、標準のタッチパッドよりはるかに多くのジェスチャや操作の動作を設定できます。 次の 2 つの画像は、それぞれ標準のタッチパッドと高精度タッチパッドのさまざまなタッチパッド設定ページ ([設定] > [デバイス] > [マウスとタッチパッド]) を示しています。
標準タッチパッドの設定
Windows 高精度タッチパッドの設定
以下に、一般的なタスクを実行するためのタッチパッドに最適化されたジェスチャの例を示します。
| 用語 | 説明 |
|---|---|
3 本指でのタップ |
Cortana を使って検索、またはアクション センターを表示するためのユーザー設定。 |
3 本指でのスライド |
仮想デスクトップのタスク ビュー開く、デスクトップを表示、または開いているアプリを切り替えるためのユーザー設定。 |
1 本指でのタップによるプライマリ操作 |
1 本指を使って要素をタップすると、プライマリ操作 (アプリの起動、コマンドの実行など) が呼び出されます。 |
2 本指でのタップによる右クリック |
要素を同時に 2 本の指でタップして、その要素を選択し、状況依存のコマンドを表示します。 |
2 本指でのスライドによるパン |
スライドは主にパン操作に使われますが、移動、描画、筆記などの操作に使うこともできます。 |
ピンチとストレッチによるズーム |
ピンチ ジェスチャとストレッチ ジェスチャは、通常、サイズ変更とセマンティック ズームに使われます。 |
1 本指でのプレスとスライドによる移動 |
要素をドラッグします。 |
1 本指でのプレスとスライドによるテキストの選択 |
選択可能なテキスト内を押してスライドし、選択します。 単語を選択するには、ダブルタップします。 |
左と右のクリック ゾーン |
マウス デバイスの左ボタンと右ボタンの機能をエミュレートします。 |
ハードウェア
マウス デバイス機能 (MouseCapabilities) を照会して、タッチパッド ハードウェアから直接アクセスできるアプリ UI の要素を識別します。 タッチ入力とマウス入力の両方の UI を用意することをお勧めします。
デバイス機能の照会について詳しくは、「入力デバイスの識別」をご覧ください。
視覚的なフィードバック
- 移動イベントまたはホバー イベントを通じてタッチパッド カーソルが検出されたら、マウス固有の UI を表示して、要素によって公開されている機能を示します。 タッチパッド カーソルが一定の期間動かされなかった場合や、ユーザーがタッチ操作を始めた場合は、タッチパッド UI を徐々に非表示にします。 これにより、UI の簡潔さが保たれます。
- ホバーのフィードバックにカーソルを使わないでください。要素によるフィードバックで十分です (以下の「カーソル」をご覧ください)。
- 静的テキストなど、要素で対話式操作がサポートされていない場合は、視覚的なフィードバックを返さないでください。
- タッチパッド操作ではフォーカス用の四角形を使わないでください。 これはキーボード操作専用です。
- 同じ入力対象を表すすべての要素に対して視覚的なフィードバックを同時に表示します。
視覚的なフィードバックに関する一般的なガイダンスについては、「視覚的なフィードバックのガイドライン」をご覧ください。
カーソル
タッチパッド ポインターとして利用できる標準のカーソル セットが用意されています。 これらが要素のプライマリ操作を示すために使われます。
標準のカーソルには、それぞれ対応する既定の画像が関連付けられています。 ユーザーまたはアプリは、標準のカーソルに関連付けられている既定の画像をいつでも変更できます。 UWP アプリでは、PointerCursor 関数を使用して、カーソル画像を指定します。
マウス カーソルをカスタマイズする必要がある場合は、以下のガイドラインに従ってください。
- クリック可能な要素には常に矢印カーソル (
) を使います。 リンクなどのインタラクティブな要素には手の形のポインティング カーソル (
) を使いません。 代わりに、前に説明したホバー効果を使います。 - 選択可能なテキストにはテキスト カーソル (
) を使います。 - ドラッグやトリミングなど、移動がメインの操作である場合は、移動カーソル (
) を使います。 スタート画面のタイルなどでのナビゲーションがメインの操作である場合は、要素に対して移動カーソルを使いません。 - サイズ変更ができるオブジェクトに対しては、横、縦、対角線のサイズ変更カーソル (
、
、
、
) を使います。 - 地図など、固定キャンバス内のコンテンツのパンを行うときは、手でつかむ形のカーソル (
、
) を使います。