Windows のタッチ操作

[アーティクル]
04/07/2015

Windows 8.1 には、システム全体で使われるタッチ操作の簡単なセットが用意されています。このタッチ言語を一貫して適用することで、ユーザーに、自分が使い慣れたアプリと似ていると感じさせることができます。アプリの使い方をわかりやすくすることで、ユーザーの信頼感が増します。タッチ言語の実装について詳しくは、「ジェスチャ、操作、対話的操作」をご覧ください。

タッチを使ってタブレットを操作するユーザー

この記事の内容:

タッチの設計原則
タッチ言語
タッチターゲット
位置と持ち方
関連トピック

タッチの設計原則

即座にフィードバックを返す

画面がタッチされたときにすばやく視覚的フィードバックを返すようにすると、ユーザーが安心して操作できます。操作に対して、色やサイズの変更、移動で応答する必要があります。操作できない要素は、画面がタッチされたときだけタッチ画像を表示するようにします。

コンテンツが指の動きに付いていくようにする

キャンバスやスライダーなど、ユーザーが移動またはドラッグできる要素は、画面上の指の動きに付いていく必要があります。移動できないボタンなどの要素は、指を離したときに既定の状態に戻る必要があります。

逆方向の操作ができるようにする

本棚から取り出した本は、元の場所に戻すことができます。それと同じように、タッチ操作は元に戻すことができることが必要です。ユーザーが指を離したときに何が起こるかを、視覚的フィードバックで示します。これによって、タッチ操作で安心してアプリを使用できるようになります。

複数の指を使うことができるようにする

ユーザーは意識せずに複数の指を使ってタッチしていることがよくあります。そのため、画面をタッチする指の数が変わったときにタッチ操作を大きく変化させないようにしてください。現実世界と同じように、1 本の指でスライドするときも、3 本の指でスライドするときも、結果が変わらないようにしてください。

タッチ言語

長押しによる情報の表示

このタッチ操作では、詳細情報や説明を伝える視覚効果 (ヒントやショートカットメニューなど) が表示されます。操作をコミットする必要はありません。ユーザーが指でスライドを開始したときに、このような表示によってパンが妨げられないようにしてください。

重要水平方向と垂直方向のパンが有効である場合は、長押しを選択に使うことができます。

タップによるプライマリ操作

要素をタップするとプライマリ操作 (アプリの起動、コマンドの実行など) が呼び出されます。

スライドによるパン

スライドは主にパン操作に使われますが、移動 (パンの方向が 1 方向に制限されている場合)、描画、筆記などの操作に使うこともできます。また、スライドは、スクラブ操作 (ラジオボタンなどの関連したオブジェクトを指でスライドする操作) によって、小さな密集した複数の要素をターゲットとするときにも使うことができます。

スワイプによる選択、コマンド、移動

パン方向に対して垂直方向に指を少しスライドさせると (パンの方向が 1 方向に制限されている場合)、一覧またはグリッドの中のオブジェクトが選択されます。オブジェクトが選択されると、関連するコマンドを含むアプリバーが表示されます。

ピンチとストレッチによるズーム

ピンチジェスチャとストレッチジェスチャは一般的にサイズ変更に使われますが、セマンティックズームによってコンテンツ内の最初、最後、または任意の場所に移動することもできます。セマンティックズームは、アイテムのグループを表示し、それにすばやく戻ることができるズームアウトビューを提供します。

指を違う方向に動かすことによる回転

2 本以上の指を別々の方向になぞると、オブジェクトが回転します。画面全体を回転させるには、デバイスを回転させます。

端からのスワイプによるアプリコマンドの表示

画面の上端または下端からスワイプすると、アプリコマンドが表示されます。アプリバーを使ってアプリコマンドを表示します。

端からのスワイプによるシステムコマンドの表示

画面の右端からスワイプすると、システムコマンドが含まれたチャームが表示されます。

左端からスワイプすると、現在実行中のアプリが順に表示されます。

画面の上端から下端へスライドすると、現在のアプリを閉じます。

画面の上端から少し下げて、左端または右端へスライドすると、現在のアプリをスライドした側に配置します。

注ユーザーは、スライドによるパン、ピンチによるズーム、指を違う方向に動かすことでの回転などの直接的な操作を、多数のタッチポイントで同時に行えます。

タッチターゲット

サイズと効率: ターゲットのサイズは誤操作の発生率に影響する

ターゲットが大きくなるとタッチの誤操作が少なくなるようすを示すグラフ

タッチターゲットには、完ぺきなサイズというものはありません。状況が異なれば、有効なサイズも異なります。削除、閉じるなど、大きな変化が起こる操作や、よく使う操作には、大きなタッチターゲットを使う必要があります。大きな変化が起きない、あまり使われない操作には、小さなターゲットを使うことができます。

ターゲットのサイズのガイドライン

7x7 mm: お勧めの最小サイズ

タッチミスを 1 回または 2 回のジェスチャで修正できる場合、または 5 秒以内で修正できる場合は、7 x 7 mm はお勧めの最小サイズです。ターゲット間の余白は、ターゲットサイズと同じくらい重要です。

正確さが重視される場合

閉じる、削除など、大きな変化が起こる操作にはタッチミスが許されません。タッチミスの修正に 2 回以上のジェスチャが必要な場合、 5 秒よりかかる場合、またはコンテキストの大幅な変更が必要な場合は、9 x 9 mm のターゲットを使います。

入りきらない場合

どうしても範囲内に入りきらない場合は、タッチミスを 1 回のジェスチャで修正できるなら、5x5 mm のターゲットを使ってもよいでしょう。この場合、ターゲット間に 2 mm の余白を入れることが、非常に重要になります。

アクセシビリティ

アプリでサポートされる対話式操作と UI を計画する際は、ユーザーによってできる操作、できない操作、好ましい操作が大きく異なることを心に留めておいてください。初めからアクセシビリティに対応した設計原則に従っておくことで、アプリの対象ユーザーの間口が広がります。アクセシビリティの計画について詳しくは、「アクセシビリティのガイドライン」をご覧ください。

指のサイズ

"指が太い" と自分を責める人がよくいます。しかし、赤ちゃんの指でさえ、タッチターゲットより大きいことがよくあります。

左の図によると、成人の平均的な指の太さは約 11 mm で、赤ちゃんは 8 mm です。バスケットボールの選手は 19 mm を超える場合もあります。

指の太さで考えられるばらつきを示す図

位置と持ち方

タッチの設計は、画面上のオブジェクトの設計よりも重要です。また、デバイスの握り方 (持ち方) も考慮する必要があります。

一般的に、ユーザーによって、タブレットを使う際のお気に入りの持ち方がいくつかあります。

現在の作業と、その表示方法によって、持ち方が変わってきます。それだけでなく、周囲の状況や使い勝手によっても、その持ち方がどのくらいの時間続くのか、どの程度の頻度で変わるのかが変わってきます。

さまざまな持ち方に対応できるようにアプリを最適化してください。ただし、ある操作をするときは自然に特定の持ち方になる場合は、その持ち方に対して最適化します。

操作領域

スレートは両端を持つことが多いため、操作する要素は下の隅と、左右の端に置くのがお勧めです。

操作領域

読み取り領域

画面の上半分のコンテンツは、手で覆われたり無視されたりしやすい下半分のコンテンツよりも読みやすくなります。

読み取り領域

よく使われる持ち方

持ち方	持ち方と操作	設計時の考慮事項
	片手で持ち、もう一方の手で簡単な操作から中程度の操作まで行う	右端または下部に配置したオブジェクトは、すばやく操作できます。右下隅は手や手首でふさがれる場合があります。届く範囲が制限されるため、タッチが正確になります。読み取り、閲覧、メール、簡単な入力。
	両手で持ち、親指で簡単な操作から中程度の操作まで行う	左下隅と右下隅に配置したオブジェクトは、すばやく操作できます。親指が固定されているため、タッチが正確になります。画面の中央には届きにくくなります。画面の中央をタッチするには、持ち換える必要があります。読み取り、閲覧、簡単な入力、ゲーム。
	デバイスをテーブルや膝の上に置き、両手で簡単な操作から中程度の操作まで行う	画面の下部に配置したオブジェクトは、すばやく操作できます。下の隅は手や手首でふさがれる場合があります。指を伸ばす必要が少なくなるため、タッチが正確になります。読み取り、閲覧、メール、大量の入力。
	操作するしないに関係なく、デバイスをテーブルや台の上に置く	画面の下部に配置したオブジェクトは、すばやく操作できます。画面の上部をタッチすると、コンテンツが見えなくなります。画面の上部をタッチすると、置かれているデバイスがぐらつく場合があります。画面から離れて操作するため、読みやすさと正確さが損なわれます。ターゲットのサイズを大きくすると、読みやすさと正確さが増します。映画、音楽の視聴。