タッチ

すべての Microsoft® Windows® アプリケーションには優れたタッチ エクスペリエンスを持たせる必要があります。これは、思いのほか簡単に実現できます。

デザイン コンセプト
ガイドライン
   コントロールの使い方
   コントロールのサイズ
   コントロールのレイアウトと間隔
   対話操作
   Windows タッチ ジェスチャー
   寛容性
ドキュメント

"タッチ" とは、Windows で実現されている、指を使ってコンピューターと直接対話する方法です。多くの場合、タッチはマウス、キーボード、またはペンを使用するよりも自然で、魅力的で、便利です。

タッチ スクリーンを指で触っている図

タッチを使用しているところ。

多くのタッチ操作は、ジェスチャーやフリックを使って行います。"ジェスチャー" とは、画面上で行われる 1 本以上の指のすばやい動きです。コンピューターではこの操作がマウスの動き、書き込み、描画ではなくコマンドとして解釈されます。Windows 7 には、パン、ズーム、回転、マルチ タップ、プレス アンド タップといった新しいマルチタッチ ジェスチャーがあります。ジェスチャーのうち、最も高速かつ簡単に実行されるものにフリックがあります。"フリック" とは、ナビゲーションやコマンドの編集を行うための簡単なジェスチャーです。ナビゲーション フリックには、上へドラッグ、下へドラッグ、戻る、進むがあり、編集フリックには、コピー、貼り付け、元に戻す、削除があります。

"操作" とは、オブジェクトのリアルタイムで物理的な処理のことです。操作がジェスチャーと異なるのは、現実世界の操作に対するオブジェクトの自然な反応に、入力が直接対応している点です。たとえば、写真閲覧アプリケーションでは、イメージを移動、ズーム、サイズ変更、および回転させて写真を操作できるようになっています。"マルチタッチ操作" では、同時に複数の接触ポイントを使用します。

細かい動きやホバーが必要なタスクの場合、Windows Vista® では "タッチ ポインター" を使用できます。タッチ ポインターは、マウスのような外観の画面上の移動ポインターです。タッチ ポインターは直接入力に比べると使いにくいため、タッチ可能なプログラムでタッチ ポインターを多用することは避けます。Windows 7 の既定では、タッチ ポインターは無効になっています。

Windows のタッチ機能のみがサポートされ、最も重要なタスクのコントロールが簡単にタッチできるプログラムは、"タッチ可能" と見なされます (爪を使わなければならないようなタスクは、タッチに適しているとはいえません。タッチ可能なコントロールは、指を使った対象の指定が簡単に行えるよう十分な大きさでなければなりません)。実際には、次の場合が該当します。

  • プログラムの対話型コントロールは、簡単にタッチできる十分な大きさ (23 × 23 ピクセルまたは 13 × 13 ダイアログ ユニット (DLU) 以上) です。
  • フリック、マルチタッチ ジェスチャー、ドラッグ アンド ドロップなどの関連するシステム ジェスチャーが機能するように、プログラムでキーボードおよびマウスが適切にサポートされています。
  • タスクにホバー操作やタッチ ポインターが必要ありません。
  • すべてのコントロールで Microsoft Active Accessibility (MSAA) を使用し、支援テクノロジにプログラムによる UI アクセスを提供しています。

プログラムが主なタスクでのタッチ用にデザインされている場合、"タッチ対応" と見なされます。通常は、次の場合が該当します。

  • 使用頻度の最も高いコントロールが 40 × 40 ピクセル (23 × 22 DLU) 以上です。
  • 関連するジェスチャー (パン、ズーム、回転、マルチ タップ、プレス アンド タップなど) がサポートされ、接触時にその効果が現れます。
  • プログラムが、パン、ズーム、および回転中に視覚的にスムーズに反応するため、対話性が高いと感じさせます。

プログラムが特にタッチ用にデザインされている場合、"タッチに最適化されている" と見なされます。通常は、次の場合が該当します。

  • 最も頻繁に実行するコマンドを、ドロップダウン メニューではなく、直接 UI やコンテンツに表示することで、簡単にタッチできるようにタスクがデザインされています。
  • プログラム専用のエクスペリエンスが、マルチタッチ操作を使ったり、弾みや抵抗などの現実世界の物理的な特性で反応するなど、(おそらく生のタッチ入力データを使用する) 没入型のタッチ エクスペリエンスになるようにデザインされています。
  • タスクに寛容性があり、タッチやドラッグによって、ミスを簡単に修正したり、間違いを処理したりできます。
  • 大量のテキスト入力や厳密な選択の必要性をなくしたり、軽減したりするようにタスクがデザインされています。

注: マウスペン、およびアクセシビリティに関するガイドラインは、それぞれ別の項目として記載しています。

デザイン コンセプト

入力にタッチを使用することには次の特徴があります。

  • 自然で直感的です。指でポイントしたり、物を触ったりする方法はだれでも理解できます。オブジェクトの対話操作は、現実の世界でユーザーがオブジェクトを操作する方法と同じになるように設計されています。
  • それほど邪魔になりません。タッチは静かに使用できるので、特に会議のような社会的な状況ではタイピングやクリックほど気が散ることがありません。ペンに比べて、指は特に便利です。指を使用すれば、ペンを探したり、持ち上げたりする必要がないからです。
  • 持ち運びできます。キーボード、マウス、タッチパッドなしでほとんどのタスクを実行できるので、タッチ対応のコンピューターの方がコンパクトです。操作領域を必要としないため、柔軟性に優れ、コンピューター使用の新しい場所やシナリオに対応できます。
  • 直接的で魅力的です。タッチには、画面上のオブジェクトを直接操作する感覚があります。マウスやタッチパッドの場合は、手の動きをそれぞれの画面上のポインターの動きと連係させる必要があるため、間接的に感じます。
  • 正確さが低下します。タッチでは、マウスやペンほどオブジェクトを正確に対象として指定できません。このため、ユーザーが小さなオブジェクトをタップしたり、操作したりすることを期待できません。

タッチでは、現実世界にいるような感覚で自然に操作できます。この感覚は、直接操作やアニメーションによって、オブジェクトが現実的で動的な動きや反応をすることによって得られます。たとえば、トランプ ゲームについて考えてみましょう。指を使用すると、トランプを引くことが便利で簡単になるだけではありません。まったく本物のトランプのように、トランプを配ったり、滑らせたり、回転させたり、跳ねさせたりできると、エクスペリエンスが魅力的な現実世界の感覚を帯びてきます。また、移動できないトランプを移動させようとした場合、操作は認識されていても実行できないことを明確に示すために、トランプが動かないのではなく、動きに抵抗を示すようにし、トランプを放すと元の位置に収まるようにすると、エクスペリエンスが向上します。

すべての Windows プログラムをタッチ可能にする

タッチは従来 Tablet PC に関連するものですが、通常のコンピューターでも一般的になりつつあります。Windows Tablet とタッチ テクノロジは Windows Vista および Windows 7 の標準コンポーネントであり、適切なハードウェアさえあれば、互換性のあるすべてのコンピューターでタッチを利用することが可能です。その結果、コンピューターの製造元により、通常のラップトップやデスクトップ モニターにもタッチスクリーンが搭載されるようになりました。

タッチが Tablet PC 以外の種類のコンピューターにまで広がると、ソフトウェア プログラムの開発者やデザイナーの間でも、タッチをサポートすることがますます重要と考えられるようになります。すべての Windows プログラムには優れたタッチ エクスペリエンスを持たせる必要があります。指を使用して、プログラムの最も重要なタスクを効率よく実行できる必要があります。タイピングや詳細なピクセル操作などタッチ操作には適していない一部のタスクであっても、タッチ可能にしておく必要はあります。

幸いにも、プログラムが既に適切にデザインされていれば、優れたタッチ エクスペリエンスを実現することは簡単です。優れたタッチ エクスペリエンスを提供できるプログラムは、次のような点で適切にデザインされています。

  • 適切なマウス サポート。対話型コントロールのアフォーダンスがはっきりと表示されます。標準のマウス操作 (左シングルクリック、左ダブルクリック、右クリック、ホバー) に対して、オブジェクトに標準の動作が用意されています。
  • 適切なキーボード サポート。標準のショートカット キー割り当てを提供し、特にナビゲーションや編集コマンドでショートカット キーを使用して (タッチ ジェスチャーを使用することもできます) 作業の効率を向上させることができます。
  • タッチに適した大きなコントロール。コントロールの最小サイズは 23 × 23 ピクセル (13 × 13 DLU)、最もよく使用されるコントロールは 40 × 40 ピクセル (23 × 22 DLU) 以上です。 無応答をなくすために、ターゲットの間隔が狭くならないようにします。UI 要素の間隔は、隣のターゲットと接触しているか、5 ピクセル (3 DLU) 以上空いているかのどちらかにする必要があります。
  • 必要に応じて、スムーズに応答するパンやズームを実行。イベントのパンやズームの速度に十分対応する速さで再描画されるため、ジェスチャー中に対話的な感覚がもたらされます。
  • アクセシビリティ。Microsoft Active Accessibility (MSAA) を使用し、支援テクノロジにプログラムによる UI アクセスを提供しています。プログラムがテーマやシステムのメトリクスの変更に適切に応答します。
  • 120 dpi (ドット/インチ) ディスプレイで正常に機能し、適切に表示。120 dpi は、Windows タッチ対応コンピューターに推奨される既定の解像度です。
  • コモン コントロールの使用。ほとんどのコモン コントロールは、適切なタッチ エクスペリエンスをサポートするようデザインされています。プログラムに必要な場合は、ターゲット指定や対話型操作を容易にするためにデザインされたカスタム コントロールが適切に実装されています。
  • 有効な値の範囲のみ受け付けるコントロールの使用。簡単にタッチでターゲット指定できるデザインにするには、テキスト ボックスなどのコントロールよりも、リストやスライダーなどの選択範囲が限定されたコントロールの方が、テキスト入力の必要性が低下するので適しています。
  • 適切な既定値の設定。最も安全 (データの消失やシステム アクセスが失われることを防ぐため) で、最もセキュリティの高いオプションを既定で選択している。安全性とセキュリティを判断要素として考える必要がない場合は、最もよく使用されるオプションまたは最も便利なオプションを選択し、不要な対話操作を省いています。
  • テキストのオートコンプリート機能。最もよく使用されるか最近使用された入力値の一覧を提供し、テキスト入力を簡易化しています。

逆に、プログラムが適切にデザインされていない場合、タッチを使用するユーザーに対して、プログラムの欠点が特に浮き彫りになります。

アクセシビリティ対応のソフトウェアはすべてのユーザーに役立つのと同じように、基本的な操作が簡単に実行でき、効率性、応答性、および寛容性に優れている場合、優れたタッチ エクスペリエンスの提供はすべてのユーザーに役立ちます

タッチの対話操作モデル

タッチの使用経験がない場合は、実際に使用して理解するのが一番です。タッチ対応のコンピューターを使用し、マウスとキーボードを取りはずして、普段のタスクをタッチを使用して実行します。タブレット PC を使用する場合、膝の上などに乗せたり、平らなテーブルに置いたり、起立して腕で抱えて試します。縦や横にして使用してみてください。

タッチを使用してみると、次のようなことがわかります。

  • 小さなコントロールは使いにくい。コントロールのサイズは対話操作の効率に大きく影響します。指で操作できるのは 23 × 23 ピクセル (13 × 13 DLU) 以上のコントロールですが、快適に操作できるのは、それよりも大きい 40 × 40 ピクセル (23 × 22 DLU) 以上のコントロールです。たとえば、スタート メニュー (42 × 35 ピクセル) は簡単にタッチできますが、スピン コントロール (15 × 11 ピクセル) は小さすぎて、指では操作できません。
  • タスクを狭い範囲で実行できるようにする必要がある。画面上でポインターを 30 cm 移動する場合はマウスを 6 cm 動かすだけで済みますが、タッチを使用すると手を 30 cm 動かす必要があります。互いに離れているターゲットの間を何度も移動するのは手間がかかるため、タスクの対話操作をできる限り手に負担がかからない範囲に収めるのが適切です。コンテキスト メニューは手の移動が必要ないので便利です。
  • ホバーは必ずしも必要ではない。ほとんどのタッチスクリーン テクノロジでは、ペンによるホバーは検出できても、指によるホバーは検出されません。ホバーに依存するタスクがある場合、タッチを使用して効率的に実行することはできません。
  • テキストの入力と選択が難しい。タッチで長文のテキストを入力するのは特に難しいため、オートコンプリート機能や許容できるテキストの既定値があるとタスクが大幅に簡単になります。テキストの選択も非常に難しいため、カーソルを正確に配置する必要がないとタスクが簡単になります。
  • ディスプレイの縁端付近にある小さなターゲットをタッチするのは非常に難しい。一部のディスプレイではベゼル幅が広く、一部のタッチスクリーン技術では縁端部の感度が低いため、縁端付近にあるコントロールが使いにくくなっています。たとえば、ウィンドウを最大化すると、タイトル バーにある最小化、最大化、元のサイズに戻す、閉じるの各ボタンが使いにくくなります。

ここではさまざまな課題がありますが、それらに対処することですべてのユーザーのエクスペリエンスが向上します。

基本的なタッチのデザイン原則

それぞれの入力デバイスには、長所もあれば短所もあります。キーボードは、テキスト入力や最小限の手の動きでコマンドを指定するのに最適です。マウスは、効率的で正確なポイントに最適です。タッチは、オブジェクトの操作や簡単なコマンドの指定に最適です。ペンは、手書きや描画などのフリーフォームの表現に最適です。

プログラムでのタッチのサポートについて考える場合、次の点に留意します。

  • UI がマウスで適切に動作する場合、タッチでも同様だと思い込まない。適切なマウスのサポートは第 1 条件ですが、優れたタッチ エクスペリエンスにはさらにいくつか要件があります。
  • UI が指で適切に動作する場合、ペンでも同様と考えることはできる。プログラムをタッチ可能にすることは、ペンを適切にサポートするのに大いに役立ちます。主な違いは、指は正確にポイントできないため、より大きな対象が必要になることです。また、ホバーは省略可能にする必要があります。ペン入力のサポートに関するガイドラインについては、「ペン」を参照してください。
  • タッチの UI に関する問題を修正するために、タッチ ポインターに依存しない。タッチ ポインターは直接入力ほど簡単に使用できないため、タッチ ポインターは、タッチ用にデザインされていないプログラムの最後の手段と考えます。

コントロールのサイズ

フィッツの法則では、対象の操作に必要な時間は、対象のサイズとそこまでの距離によって変わります。対象が小さく、距離が離れているほど、ますます操作しにくくなります。しかし、指先の表面の領域が広いために、密接した小さなコントロールを正確に対象指定することが難しくなることもあります。

一般的なルールとしては、23 × 23 ピクセル (13 × 13 DLU) のコントロール サイズは、すべての入力デバイスに最適な対話型コントロールの最小サイズです。それに対して、15 × 11 ピクセルのスピン コントロールは、タッチで効果的に操作するには小さすぎます。

スピン コントロールとその寸法のスクリーン ショット

スピン コントロールは、タッチするには小さすぎます。

最小サイズは、実際に、ピクセルや DLU などのレイアウト メトリックではなく、物理的領域に基づいています。研究により、指を使用して効率的で正確な操作を行うための最小の対象領域は 6 × 6 mm であることがわかっています。この領域は、次のようなレイアウト メトリックで表されます。

フォントサイズ (mm)相対ピクセルDLU
9 ポイント、Segoe UI6 × 623 × 2313 × 13
8 ポイント、Tahoma6 × 623 × 2315 × 14

さらに、10 × 10 mm (約 40 × 40 ピクセル) の最小サイズでは、速度や正確さが向上し、またユーザーがより快適に感じるがことが調査でわかっています。最も重要なコマンドや使用頻度が最も高いコマンドに使用する場合、通常はこの大きいサイズのコマンド ボタンを使用します。

最小サイズより大きいボタンのスクリーン ショット

この例では、Microsoft Word で、最も重要なコマンドに 10 × 10 mm より大きいボタンを使用しています。

大きいボタンを使用した電卓のスクリーン ショット

この電卓のバージョンでは、使用頻度も最も高いコマンドに 10 × 10 mm より大きいボタンを使用しています。

目的は、大きなコントロールを作成することではありません。必要なのは、簡単にタッチできるコントロールにすることだけです。この記事の後半のガイドライン セクションに一覧表示された手法を使用すると、コントロールを過度に大きく見せることなく、簡単にタッチ可能にすることができます。

注: コントロールのサイズを指定する場合、96 dpi を対象とします。解像度を上げると、ユーザーのタッチ操作が向上します。

コントロールの間隔

コントロール間の間隔も、コントロールを簡単にタッチ可能にする決定要因です。指をポインティング デバイスとして使用する場合、対象指定はすばやくできても、正確さが劣るため、目的の対象から外れた場所をタップすることがよくあります。対話型コントロールが非常に近くに配置されているものの実際には接触していない場合、ユーザーがそれらのコントロールの間の非アクティブな領域をクリックすることがあります。非アクティブな領域をクリックしても効果や視覚的なフィードバックが得られないので、多くの場合ユーザーは何が悪かったのかがわかりません。小さなコントロールが狭すぎる間隔で配置されていると、間違って別のオブジェクトをタップしないように、ユーザーは正確にタップしなければならなくなります。これらの問題に対処するには、対話型コントロールのターゲット領域の間隔は、隣のコントロールのターゲット領域と接触しているか、5 ピクセル (3 DLU) 以上空いているかのどちらかにする必要があります。

コントロール間の垂直方向の間隔を推奨されるサイズより広げると、グループ内のコントロールを区別しやすくなります。たとえば、高さが 19 ピクセルのラジオ ボタンは、推奨される最小サイズの 23 ピクセルよりも低くなっています。垂直方向の領域が空いている場合、標準の 7 ピクセルに 4 ピクセルの間隔を追加することで、推奨サイズとだいたい同じ効果が得られます。

正しい例:
通常サイズの間隔を使用したダイアログ ボックスのスクリーン ショット

より良い例:
間隔を広げたダイアログ ボックスのスクリーン ショット

より良い例では、間隔を広げることで、ラジオ ボタンが区別しやすくなっています。

間隔を広げることは、タッチを使用する場合は望ましくても、マウスやキーボードを使用する場合には必要ないという状況もあります。このような状況では、タッチを使用して開始する操作では、間隔の広いデザインのみを使用する必要があります。

コントロールの位置

タスクの配置を狭い範囲に収めると、画面を何度も往復する手間が減ります。手の移動をできるだけ少なくするには、最も使用されそうな場所から近いところにコントロールを配置します。

間違った例:
ツールから離れたカラー パレットのスクリーン ショット

Windows XP のこの例では、カラー パレットが使用されると思われる場所から離れすぎています。

ユーザーの現在の位置からターゲットまでが最も近くなるようにすると、簡単に使用できるようになります。以下に示すように、コンテキスト メニューでは Microsoft Office のミニ ツール バーと同じく、フィッツの法則が最大限活用されています。

メニューの近くに表示されたポインターのスクリーン ショット

現在のポインターの位置は常に、最も簡単に使用できる場所にあります。

ディスプレイ縁端付近のターゲットが小さいとタッチが難しいため、小さなコントロールをウィンドウ縁端付近に配置しないようにします。ウィンドウが最大化されているときでも簡単にコントロールをポイントできるようにするには、コントロールのサイズを 23 × 23 ピクセル (13 × 13 DLU) 以上にするか、ウィンドウ縁端部から離れたところにコントロールを配置します。

タッチの対話操作

システム ジェスチャー

システム ジェスチャーは Windows によって定義され処理されます。このため、すべての Windows プログラムでシステム ジェスチャーを使用できます。これらのジェスチャーには、マウス、キーボード、およびアプリケーションに対応するコマンド メッセージがあります。

システム ジェスチャー生成される対応メッセージ
ホバー (サポートされている場合)マウスでのホバー
タップ (軽くたたく)マウスでの左クリック
ダブルタップ ("軽くたたく" を 2 回) マウスでの左ダブルクリック
プレス アンド ホールド (押して一時停止し、上げる)マウスでの右クリック
ドラッグ (押して移動し、上げる)マウスでの左ドラッグ
プレス アンド ホールド アンド ドラッグ (押して一時停止したのち移動し、上げる)マウスでの右ドラッグ
選択 (押して選択可能オブジェクト上を移動したのち、上げる)マウスでの選択

開発者向け情報: 詳細については、SystemGesture の列挙に関するページ を参照してください。

フリック

フリックとは簡単なジェスチャーであり、キーボード ショートカットとほぼ同等です。ナビゲーション フリックには、上へドラッグ、下へドラッグ、戻る、進むがあり、編集フリックには、コピー、貼り付け、元に戻す、削除があります。フリックを使用するには、プログラムが関連するキーストロークのコマンドに対応していることだけが必要です。または、プログラムでイベントを直接処理できれば問題ありません。

移動ジェスチャーなどのフリック ジェスチャーの図

これは、Windows 7 の 8 個のフリック ジェスチャーとその既定の割り当てです。ナビゲーション フリックは、スクロール (オブジェクトがジェスチャーとは反対の方向) ではなく、パン (オブジェクトがジェスチャーに一致する方向に移動) に対応するように変更されています。

移動ジェスチャーなどのフリック ジェスチャーの図

これは、Windows Vista の 8 個のフリック ジェスチャーとその既定の割り当てです。

ナビゲーション フリックでは、学習や記憶が容易になるように自然な割り当てが行われています。編集フリックは高い精度が必要な斜め方向への移動で、割り当てはあまり自然ではないため ([ごみ箱] の方向にフリックすると削除され、[戻る] 矢印の方向にフリックすると元に戻す処理が行われます)、既定では有効にされていません。すべてのフリック操作は、コントロール パネル アイテムのペンと入力デバイスを使用してカスタマイズすることができます。

フリック生成される対応メッセージ
左へフリック[進む] コマンド (Windows Vista では [戻る] コマンド)
右へフリック[戻る] コマンド (Windows Vista では [進む] コマンド)
上へフリックキーボードでの下へスクロール
下へフリックキーボードでの上へスクロール
左上へフリックキーボードでの削除
左下へフリックキーボードでの元に戻す
右上へフリックキーボードでのコピー
右下へフリックキーボードでの貼り付け

アプリケーション ジェスチャー

アプリケーションでは、他のジェスチャーも定義し処理することができます。Microsoft Gesture Recognizer では、40 ジェスチャー以上認識することができます。アプリケーション ジェスチャーを使用するには、プログラムで認識するジェスチャーを定義し、発生したイベントを処理する必要があります。

ホバー

ホバーは、操作を開始する前にヒントによって追加情報を得られるため、便利な操作です。ヒントによって追加情報を得ることで、ユーザーは自信が付き、ミスが少なくなります。

残念なことに、ホバーはタッチ テクノロジではサポートされていないため、指を使ってホバーを行うことはできません。この問題の簡単な解決策は、ホバーを十分に活用することですが、それは操作を実行する必要がない場合に限ります。これは、通常、実際にはこの操作はクリックでも実行でき、必ずしもまったく同じ方法で実行するとは限らないということです。

ホバーとクリックの結果を示すスクリーン ショット

この例では、今日の日付をホバー、クリックのいずれかで確認できます。

応答性と一貫性

応答性は、直接的で魅力的なタッチ エクスペリエンスを作り出すのに不可欠です。直接的な感じを与えるには、ジェスチャーが即座に効果を現し、ジェスチャーの間、ユーザーの指でオブジェクトの接点が滑らかに保たれることが必要です。操作の効果は、ユーザーの動きに直接対応している必要があります。たとえば、ユーザーが指を 90°回転させると、オブジェクトも 90°回転するようにします。応答が遅れる、安定しない、接点が失われる、正確に応答しないなどが起こると、直接操作の感覚も魅力もなくなります。

一貫性は、自然で直感的なタッチ エクスペリエンスを作り出すのに不可欠です。ユーザーが標準のジェスチャーを習得した場合、そのジェスチャーがすべてのアプリケーション プログラムで同じ効果を生むと考えます。混乱や不満をなくすため、標準のジェスチャーには非標準の意味を割り当てないでください。プログラムに特有の対話操作にはカスタム ジェスチャーを使用します。

寛容性

タッチが自然で、表現力豊かで、効率的で、魅力的なものである要因は、その直接性にあります。実際、タッチ操作は直接操作と言われることがよくあります。ただし、直接操作を行う場面では、操作ミスが起こる可能性があり、そのために寛容性が必要になります。

"寛容性" とは、好ましくない操作を簡単に元に戻したり、修正したりできることです。タッチ エクスペリエンスで寛容性を確保するには、元に戻す操作を行う、適切な視覚的フィードバックを行う、使用頻度の高いコマンドとリスクのあるコマンドとの間の物理的な区切りをはっきりさせる、ユーザーがミスを簡単に修正できるようにする、といった方法があります。寛容性に関連して、好ましくない操作が実行されることを最初の段階で防ぐこともできます。これは、意図しない結果を招く可能性があるリスクのある操作やコマンドに対して、制限付きのコントロールと確認を使用することで実現できます。

テキストの編集

テキストの編集は、指を使用する場合、最も困難な操作の 1 つです。選択範囲が限定されたコントロール、適切な既定値、オートコンプリート機能を使用すると、テキスト入力の必要性がなくなるか減少します。ただし、プログラムにテキストの編集が含まれる場合、タッチ使用時に既定で自動的に入力 UI を最大 150% 拡大すると、ユーザーの生産性を上げることができます。

たとえば電子メール プログラムでは標準のタッチ可能なサイズで UI を表示しますが、メッセージ作成時に入力 UI を 150% に拡大することができます。

大きなフォントで入力された Outlook メッセージのスクリーン ショット

この例では、入力 UI が 150% に拡大されています。

6 つの重要な点
1. Windows プログラムに適切なタッチ エクスペリエンスが備わっているようにします。ユーザーが指を使用し、プログラムの最も重要なタスクを効率よく実行できることが必要です (最低でも、そうしたタスクで多量のタイピングや精緻なピクセル操作を必要としないようにします)。
2. コモン コントロールについては、標準的なコントロールのサイズを使用します。その他のコントロールでは、静的な外観が非常に小さい場合でも、クリック対象領域が 23 × 23 ピクセル (13 × 13 DLU) 以上になるようにします。
3.  ホバーを使用しますが、これが操作を実行する唯一の方法にならないようにします。ホバーは、ほとんどのタッチスクリーン テクノロジでサポートされていません。
4. 直接的で魅力的なエクスペリエンスを作り出すには、ジェスチャーが即座に反映され、ジェスチャーの間、ユーザーの指で接点が滑らかに保たれ、ジェスチャーの効果が直接ユーザー動作に割り当てられるようにします。
5. 自然で直感的なエクスペリエンスを作り出すには、適切な標準ジェスチャーをサポートし、それぞれの標準の意味を割り当てます。プログラムに特有の対話操作にはカスタム ジェスチャーを使用します。
6.  プログラムで、特にリスクのあるコマンドなどの好ましくない操作を元に戻したり、修正したりできるようにします。タッチ操作では、操作ミスが起こる可能性が高くなります。

ガイドライン

コントロールの使い方

  • コモン コントロールを優先して使用します。ほとんどのコモン コントロールは、適切なタッチ エクスペリエンスをサポートするようデザインされています。
  • タッチをサポートするようにデザインされたカスタム コントロールを選択します。プログラムに特有のエクスペリエンスをサポートするカスタム コントロールが必要になることがあります。次のようなカスタム コントロールを選択します。
    • 簡単にタッチできる十分な大きさのサイズに設定できる。
    • 弾みや抵抗などを付けることによって、操作時に現実世界のオブジェクトのように移動したり反応したりする。
    • ユーザーが簡単にミスを修正できるようにして寛容性を確保している。
    • クリックやドラッグによる間違いの寛容性を確保している。移動先の近くにドロップされたオブジェクトが正しい位置にドロップされるようにします。
    • 指がコントロールの上に重なっている場合でも、波及効果のようにはっきりとフィードバックが見える。
  • できるだけ制約付きコントロールを使用します。テキスト入力の負担を減らすために、テキスト ボックスのような制約のないコントロールではなく、リストやスライダーといった制約付きコントロールをできる限り使用します。
  • 適切な既定値を設定します。最も安全 (データの消失やシステム アクセスが失われることを防ぐため) で、最もセキュリティの高いオプションを既定で選択します。安全性およびセキュリティを判断要素として考える必要がない場合は、最もよく使用されるオプションまたは最も便利なオプションを選択し、不要な対話操作を省きます。
  • テキストのオートコンプリート機能を実装します。最もよく使用されるか最近使用された入力値の一覧を提供し、テキスト入力を簡易化します。
  • 複数の選択項目を使用する重要なタスクについては、標準的な複数選択リストが通常使用される場合は代わりにチェック ボックス リストを使用するオプションを提供します。

コントロールのサイズ

  • コモン コントロールについては、コントロールに推奨されるサイズを使用します。推奨されるコントロールのサイズは、23 × 23 ピクセル (13 × 13 DLU) の最小サイズ以上です。ただし、チェック ボックスやラジオ ボタン (テキスト ボックスの幅でいくらかサイズが埋まります)、スピン コントロール (タッチでは操作できませんが、冗長になっています)、およびスプリッターを除きます。

    推奨されるサイズのコントロールのスクリーン ショット

    推奨されるコントロールのサイズは簡単にタッチできます。

  • 最も重要なコマンドや最も使用頻度の高いコマンドに使用するコマンド ボタンでは、実際に使用する場合、必ず最小サイズ 40 × 40 ピクセル (23 × 22 DLU) を使用します。そうすることで速度や正確さが向上し、ユーザーがより快適に感じるようにもなります。

    小、中、大のボタンのスクリーン ショット

    実際に使用する場合、重要なコマンドや使用頻度の高いコマンドには大きめのコマンド ボタンを使用します。

  • その他のコントロールの場合、次の点に留意します。
    • 大きめのクリック対象を使用する。小さいコントロールでは、対象のサイズを静的に表示されている UI 要素よりも大きくします。たとえば、16 × 16 ピクセルのアイコン ボタンには、23 × 23 ピクセルのクリック対象ボタンを設定し、テキスト要素には、テキストよりも幅が 8 ピクセル、高さが 23 ピクセル大きい選択範囲を設定できます。

      正しい例:
      大きめの対象領域を使用したヘルプ ボタンのスクリーン ショット  Cc872774.Touch22b(ja-jp,MSDN.10).png

      間違った例:
      対象領域が小さいアイコンのスクリーン ショット

      正しい例:
      対象領域が大きいアイコンのスクリーン ショット

      正しい例では、クリック対象が静的に表示されている UI 要素よりも大きくなっています。

    • 冗長なクリック対象を使用する。コントロールに冗長な機能がある場合、クリック対象が最小サイズよりも小さくなってもかまいません。

      たとえば、ツリー ビュー コントロールで使用される段階的表示の三角形は 6 × 9 ピクセルしかありませんが、その機能は関連するアイテム ラベルと重複しています。

      "展開" 三角形を使用したツリー ビューのスクリーン ショット

      ツリー ビューの三角形は小さすぎて簡単にタッチできませんが、関連する大きなラベルと機能において冗長になっています。

  • システムのメトリクスを尊重します。すべてのサイズでシステムのメトリクスを使用し、ハードウェア組み込みのサイズは使用しません。必要な場合は、ユーザーがシステムのメトリクスまたは dpi を適宜変更することができます。ただし、通常はユーザー側でシステム設定を調整して UI を使用可能にすることは望ましくないので、これは最終的な手段にします。

    標準サイズおよび大きいサイズ メニューのスクリーン ショット

    この例ではメニューの高さに関して、システムのメトリクスが変更されています。

コントロールのレイアウトと間隔

  • 最も使用されると思われる場所に近いところにコントロールを配置するレイアウトを選択します。できる限り狭い範囲にタスクの対話操作を収めます。コモン タスクとドラッグでは特に、手の移動距離が長くならないようにします。
  • 推奨される間隔を使用します。推奨される間隔はタッチに適しています。しかし、大きいサイズや広い間隔を使用するメリットがプログラムにある場合は、推奨されるサイズと間隔を最小値と考えます。
  • 対話型コントロールの間隔は、隣のコントロールと接触しているか、5 ピクセル (3 DLU) 以上空いているかのどちらかにする必要があります。そうすることで、ユーザーがターゲットの外側をタッチしても混乱しません。
  • コマンド リンク、チェック ボックス、ラジオ ボタンなどのコントロールのグループ内およびグループ間では、推奨される上下の間隔よりも広く間隔を空けます。そうすることで、差異化しやすくなります。
  • タッチを使って操作を開始する場合、垂直方向の推奨される間隔を動的に広げることを検討します。間隔を広げることで、オブジェクトを区別しやすくなりますが、キーボードやマウスを使用する場合、間隔を広げなくても簡単に区別できます。間隔は、通常サイズの 3 分の 1 または 8 ピクセル以上追加します。

    標準間隔の一覧および間隔の広い一覧のスクリーン ショット

    この例では、Windows 7 のタスク バーのジャンプ リストは、タッチを使って表示するときに間隔が広がります。

対話操作

  • ホバーを唯一の操作にしません。ホバーを利用しますが、操作を実行する必要がない場合に限ります。これは、通常、実際にはこの操作はクリックでも実行でき、必ずしもまったく同じ方法で実行するとは限らないということです。ホバーはほとんどのタッチ テクノロジではサポートされていないため、そうしたタッチスクリーンを使用しているユーザーは、ホバーを必要とするタスクを実行できません。
  • テキスト入力が必要なプログラムでは、次の方法で、タッチ キーボード機能を完全に統合します。
    • ユーザー入力のための適切な既定値を用意する。
    • 必要に応じて、オートコンプリートの候補を用意する。

    開発者向け情報: タッチ キーボードの統合の詳細については、ITextInputPanel インターフェイスに関するページ (英語) を参照してください。

  • プログラムにテキスト編集を必要とするタスクがある場合は、ユーザーがコンテンツ UI を拡大できるようにします。タッチ使用時は自動的に 150% に拡大されるようにします。
  • 必要に応じて、スムーズに応答するパンやズームを実行します。応答し続けるために、パンやズームの後にすばやく再描画します。これは、直接操作が真に直接的な感覚をもたらすために必要です。
  • パンまたはズーム中、ジェスチャー全体にわたって接触ポイントが指の下から放れないようにします。そうしないと、パンやズームを制御しにくくなります。
  • ジェスチャーは記憶されるため、プログラム全体で一貫して意味を割り当てます。確定した意味を持つジェスチャーに別の意味を割り当てないでください。適切なプログラム特有のジェスチャーを使用します。

Windows タッチ ジェスチャー

次のジェスチャーをプログラムで使用できる場合、必ず使用します。これらは最も便利で自然なジェスチャーです。

  • パン
    入力状態: 1 本または 2 本の指で画面に触れます。
    動作: 互いの指が同じ位置をキープしたままドラッグします。
    終了状態: 最後の指を画面から放すと、ジェスチャーが終了します。
    効果: 指が動くと、直ちに下のオブジェクトが移動します。ジェスチャー全体にわたって、接触ポイントが指の下から離れないようにします。

    指でタッチ/ドラッグしている図

    パンのジェスチャーです。

  • ズーム
    入力状態: 同時に 2 本の指で画面に触れます。
    動作: 2 本の指を軸に沿って引き離すか、合わせ (つまみ) ます。
    終了状態: 指を画面から放してジェスチャーを終了させるか、指で軸を中断します。
    効果: 指が軸から離れたり、軸に近づいたりすると、直ちに下のオブジェクトが拡大したり、縮小したりします。ジェスチャー全体にわたって、接触ポイントが指の下から離れないようにします。

    指を引き離している図

    ズームのジェスチャーです。

    綿密にアニメーション化を行う場合、パン中にズームできるようになると、効果的かつ効率的に操作できます。
  • 回転
    入力状態: 同時に 2 本の指で画面に触れます。
    動作: 1 本または 2 本の指を、2 本の指をつなぐ直線に対して垂直に動かし、他方を軸にして回転させます。
    終了状態: 指を画面から放すと、ジェスチャーが終了します。
    効果: 指の回転と同じだけ下のオブジェクトが回転します。ジェスチャー全体にわたって、接触ポイントが指の下から離れないようにします。

    指を円を描くように動かしている図

    回転のジェスチャーです。

    回転は、一定の種類のオブジェクトでのみ有効であるため、Windows システムの操作には対応しません。

    回転は、ユーザーによってさまざまな動作になることがよくあります。軸指の周りで指を回転させる場合もあれば、両方の指を円を描くように回転させる場合もあります。ほとんどの場合、2 本を組み合わせて、1 本の指を他方よりも動かして回転させます。任意の角度へのスムーズな回転は、写真の閲覧などの多くのコンテンツで最も効果的な操作ですが、ユーザーが手を放すと、90°回転した状態に落ち着くのが最適な操作です。写真の編集では、写真のゆがみを修正するために小さな回転を使用できます。

  • マルチ タップ
    入力状態: 同時に 2 本の指で画面に触れます。
    動作: 動作はありません。
    終了状態: 指を画面から放すと、ジェスチャーが終了します。
    効果: 指の間にあるオブジェクトの既定の表示をズームしたり、復元したりすることもできます。

    2 本の指でタップしている図

    マルチ タップのジェスチャーです。

  • プレス アンド タップ
    入力状態: 1 本の指で画面に触れ、その後 2 本目の指で触れます。
    動作: 動作はありません。
    終了状態: 2 本目の指を画面から放すと、ジェスチャーが終了します。
    効果: 最初の指の下にあるオブジェクトの右クリックを実行します。

    1 本の指で押し、2 本目の指でタップしている図

    プレス アンド タップのジェスチャーです。

寛容性

  • [元に戻す] コマンドを用意します。すべてのコマンドに元に戻す簡単な方法を用意するのが理想的ですが、プログラムにはコマンドの効果を元に戻すことができないものが含まれていることがあります。
  • 実用的な場合は必ず、指が触れていることの適切なフィードバックを提供しますが、指が離れるまでは操作が反映されないようにします。こうすると、ユーザーは事前に間違いを修正できます。
  • 実用的な場合は必ず、ユーザーが簡単に間違いを修正できるようにします。指を離したときに操作が反映される場合は、指が触れている間にスライドによって間違いを修正できるようにします。
  • 実際の操作では、動作に抵抗を示すことで直接操作が実行できないことを示します。動作が起こるようにしても、オブジェクトを放すと元の位置に戻るようにして、操作が認識されても実行できないということを明確に示します。
  • 頻繁に使用されるコマンドとリスクのあるコマンドを、物理的にはっきり見分けられるようにします。そうでない場合、リスクのあるコマンドを誤ってタッチするおそれがあります。その結果が広範囲におよび、簡単に元に戻せないか、結果がすぐには表れない場合は、リスクのあるコマンドと見なされます。
  • リスクのある操作のコマンドまたは意図しない結果をもたらすコマンドを確認します。このためには、確認ダイアログ ボックスを使用します。
  • タッチを使ったときに誤って実行しがちで、気付かないままになるか、元に戻すのが難しい他の操作を確認することを検討します。通常、これを日常的な操作に対する確認といいますが、このようなコマンドはマウスやキーボードでは誤って発行されることがあまりないことを想定し、推奨されていません。不要な確認を行わないようにするには、タッチを使ってコマンドが開始された場合にのみ、確認ダイアログ ボックスを表示します。

    [削除] ダイアログ ボックスの [はい]/[いいえ] ボタンのスクリーン ショット

    日常的な操作に対する確認は、ユーザーがタッチを使ってよく誤って実行する操作で利用できます。

    開発者向け情報: マウス イベントとタッチ イベントは、GetMessageExtraInfo API を使用して判別できます。

ドキュメント

タッチに言及するときは、以下のことに留意します。

  • 入力デバイスとして使用する場合のユーザーの手は、1 本または複数本の "指" とします。
  • キーボード、マウス、トラックボール、ペン、指を総称して "入力デバイス" と呼びます。
  • 指またはペンの使用に特定した手順を記す場合は、"クリック" ではなく "タップ" (および "ダブルタップ") を使用します。タップとは、画面を押し、ホールド タイム前に持ち上げることを意味します。マウス クリックの生成に使用することが許可されることもあれば、禁止されることもあります。指またはペンを使用しない対話操作の場合は、引き続き "クリック" を使用します。
  • "タッチスクリーン" と "タッチパッド" は、単一の複合語です。"タッチ スクリーン" や "タッチ パッド" としないでください。
表示: