タッチ操作

このトピックでは、Windows アプリでタッチに最適化されたカスタム エクスペリエンスを構築するための設計ガイドラインを提供します。

概要

タッチは、Windows や Windows アプリの主要な入力形式であり、1 本以上の指 (またはタッチ接触) を使用します。 これらのタッチ接触とその動きは、タッチ ジェスチャと操作として解釈され、さまざまなユーザー操作をサポートしています。

Windows SDK と Windows App SDK では、Windows アプリ全体で堅牢で一貫したエクスペリエンスをもたらす、タッチに最適化されたコントロールが網羅されています。

Windows アプリのカスタム コントロール、エクスペリエンス、フレームワークを作成する際には、次のガイドラインを使用してください。

設計原則

Windows アプリのタッチ エクスペリエンスを設計する際には、次の点を考慮してください。

タッチ最適化

Windows アプリのエクスペリエンスは、タッチが快適で、直接操作が可能で、精度の低い操作にも対応できるものにする必要があります。 ジェスチャや、ペン、音声の統合を含むタッチ アクセラレーターを検討してください。

姿勢を問わない一貫性

アプリは、ユーザーの入力方法や姿勢にかかわらず、一貫したエクスペリエンスをもたらす必要があります。 従来のデスクトップの姿勢からタブレットの姿勢への変更 (「タブレットのエクスペリエンスを向上させるための推奨設定」を参照) や向きの変更は、混乱を招くものであってはならず、むしろ繊細で、必要に応じてのみ行う必要があります。 アプリでは、UI を繊細な方法で再構成して、ユーザーがいる場所に合わせて馴染みのある一貫したエクスペリエンスをもたらす必要があります。

レスポンシブ

アプリとの対話式操作では、操作の各段階 (タッチダウン、アクション、タッチアップ) で、ユーザーの現在の状態に反応しつつ、可能な操作を示すアニメーションを使用して、ユーザーにフィードバックを提供する必要があります。 アニメーションはまた、スムーズでモダンな感じを与えるために、60 fps 以上を維持する必要があります。

タッチの慣習の遵守

反応の良いフィードバック

アプリとの対話式操作中に適切な視覚的フィードバックがあれば、ユーザーはアプリと Windows プラットフォームの両方で自分の操作がどのように解釈されるかを認識し、理解を深め、適応できます。 ユーザーのタッチに対して、目立ち、わかりやすく、注意散漫にならない、即時かつ連続的なフィードバックが表示されるようにしてください。 この即時のフィードバックにより、ユーザーはアプリの対話的な要素を学習し、探索できます。

• フィードバックはタッチダウン時に即座に行われ、動くオブジェクトはユーザーの指に追従する必要があります。
• UI はユーザーの速度や動きに合わせてジェスチャに反応する必要があります。キー フレーム アニメーションの使用は避けてください。
• 視覚的フィードバックは、ユーザーが行動を起こす前に、起こり得る結果を伝える必要があります。

詳細については、「視覚的フィードバックのガイドライン」と「Windows 11 におけるモーション」を参照してください。

タッチ操作のパターン

これらの一般的なインタラクションとジェスチャのパターンを遵守して、一貫した予測可能なエクスペリエンスを作り出しましょう。

一般的な操作

ユーザーに馴染みがあり、すべての Windows エクスペリエンスで一貫して機能することを想定される、一般的なタッチ操作とジェスチャのセットがあります。

• タップして、アイテムをアクティブにしたり選択したりする
• 短押ししてドラッグして、オブジェクトを移動する
• 長押しして、二次的なコンテキスト コマンドのメニューにアクセスする
• スワイプ (またはドラッグ アンド リリース) して、コンテキスト コマンドを実行する
• 時計回りまたは反時計回りに回転してピボットする

詳細については、「視覚的フィードバックのガイドライン」と「Windows 11 におけるモーション」を参照してください。

手ぶり

ジェスチャを使用すると、ユーザーの一般的な移動操作や対話式操作に必要な労力が軽減されます。 可能な場合は、タッチ ジェスチャを使用した UI をサポートして、ユーザーがアプリ内で簡単に移動して操作できるようにします。

ビュー間を移動する場合は、アニメーションを使用して、ドラッグ中に既存の状態と新しい状態の両方が表示されるようにします。 UI との対話式操作では、アイテムはユーザーの動きに追従し、フィードバックを提供します。離されると、ドラッグ位置のしきい値に基づいて追加のアクションで反応する必要があります。

また、ジェスチャは慣性に基づいたフリックやスワイプで操作可能であり、快適な動きの範囲内にある必要があります。

• ドラッグまたはフリックして前後に移動する
• ドラッグして閉じる
• 引っ張って更新する

詳細については、「ページ遷移」と「引っ張って更新」を参照してください。

カスタム ジェスチャ

カスタム ジェスチャを使用して、頻繁に使用するキーボード ショートカットやトラック パッド ジェスチャをタッチ操作に取り入れましょう。 アニメーションや視覚的な状態による専用のアフォーダンスを通じて、操作の見つけやすさと応答性を高めます (たとえば、3 本の指で画面をタップすると、ウィンドウが縮小して視覚的フィードバックが表示されるようにします)。

• ユーザーの混乱を招く可能性があるため、一般的なジェスチャを上書きしないでください。
• カスタム アクションにマルチフィンガー ジェスチャを使用することを検討してください。ただし、アプリとデスクトップを迅速に切り替えるために一部のマルチフィンガー ジェスチャはシステムによって予約されています。
• 画面の端付近で発生するカスタム ジェスチャには注意してください。エッジ ジェスチャは OS レベルの動作用に予約されており、誤って呼び出される可能性があります。

誤った操作を避ける

アプリやゲームで画面の端付近で操作が頻繁に発生する可能性がある場合は、誤ってシステム メニューが表示されないように、Fullscreen Exclusive (FSE) モードでのエクスペリエンスを検討してください (FSE モード時、ユーザーは関連するシステム メニューを表示するために、一時的なタブを直接スワイプすることが必要になります)。

タッチ キーボード エクスペリエンス

タッチ キーボードを使用すると、タッチをサポートするデバイスでテキストを入力できます。 Windows アプリのテキスト入力コントロールでは、ユーザーが編集可能な入力フィールドをタップしたときに、既定でタッチ キーボードが表示されます。

テキスト フィールドのタップで呼び出し

ユーザーがテキスト入力フィールドをタップすると、タッチ キーボードがポップアップします。この動作は、システム API を使用してキーボードの表示と非表示を切り替えることで自動的に行われます。 「タッチ キーボードの表示への応答」を参照してください。

標準のテキスト入力コントロールの使用

一般的なコントロールを使用することで、想定どおりの動作が行われて、ユーザーの驚きを最小限に抑えることができます。

Text Services Framework (TSF) をサポートするテキスト コントロールは図形書き込み (キーボード スワイプ) 機能を提供します。

タッチ キーボード シグナル

入力、姿勢、ハードウェア シグナルなど、タッチ キーボードが主な入力モードになる要因 (ハードウェア キーボードが取り外された、タッチでエントリ ポイントが呼び出された、入力する意図が明示された) を考慮します。

適切なレイアウト調整

• 小型デバイスではキーボードが画面の 50% を占めることに留意してください。
• タッチ キーボードでアクティブなテキスト フィールドが隠れないようにしてください。
• タッチ キーボードでアクティブなテキスト フィールドが隠れる場合は、フィールドが見えるようになるまで、アプリのコンテンツを (アニメーションを使用して) 上にスクロールします。
• タッチ キーボードでアクティブなテキスト フィールドが隠れているが、アプリのコンテンツを上にスクロールできない場合は、(アニメーションを使用して) アプリ コンテナーを移動してみてください。

ターゲットのヒット

ヒット ターゲットが快適でタッチしやすいことを確認します。 ヒット ターゲットが小さすぎたり、密集したりしていると、ユーザーはより正確なタッチを求められ、タッチするのが難しくなり、エクスペリエンスが低下する可能性があります。

タッチ可能サイズ

タッチ可能サイズは、ビジュアルが小さい場合でも最小 40 x 40 epx (または幅が 120 epx 以上の場合は高さ 32 epx) と定義されています。

Microsoft の一般的なコントロールはこの標準に準拠しています (マウスとタッチの両方のユーザー向けに最適化されています)。

タッチに最適化

タッチ操作に最適化された UI では、ターゲット間の可視スペースを 4 epx 以上に、ターゲット サイズを 44 x 44 epx 以上にすることを検討してください。

2 つの既定の動作をお勧めします。常にタッチに最適化するか、デバイス シグナルに基づいて遷移するかのいずれかにしてください。

マウス ユーザーを犠牲にすることなくアプリをタッチに最適化できる場合、特にアプリが主にタッチで使用される場合は、常にタッチに最適化してください。

デバイスの姿勢に応じたデバイス シグナルに基づいて UI を遷移させる場合は、姿勢を問わず常にエクスペリエンスが一貫するようにしてください。

ビジュアルをタッチ ターゲットに合わせる

タッチ ターゲットのサイズが変更された場合は、ビジュアルの更新を検討しましょう。 たとえば、ユーザーがタブレットの姿勢になったときにヒット ターゲットが大きくなる場合は、ヒット ターゲットを表す UI も更新し、ユーザーが状態の変化と更新されたアフォーダンスを理解できるようにします。 詳細については、「Windows アプリのコンテンツ デザインの基本」、「タッチ ターゲットのガイドライン」、「コントロールのサイズと密度」を参照してください。

縦向きに最適化

アプリが横向きと縦向きの両方に最適化されるように、縦長と横長の両方のウィンドウを考慮したレスポンシブ レイアウトをサポートするようにしましょう。

これにより、向きや画面サイズに関係なく、マルチタスクのシナリオ (アプリが縦長の縦横比で左右に並べて表示されるなど) でも、アプリ ウィンドウに主要な UI ビジュアルが適切に表示されるようになります。