ペン

すべての Microsoft® Windows® アプリケーションはペン対応にする必要があります。これは、思いのほか簡単に実現できます。

デザイン コンセプト
ガイドライン
   コントロールの使い方
   コントロールのサイズ、レイアウト、間隔
   対話操作
   利き手
   寛容性
ドキュメント

"ペン入力" とは、Windows で実現されている、ペンを使用してコンピューターと直接対話する方法です。ペンはポイントとジェスチャー、単純なテキスト入力に使用するほか、デジタル インクを使用して自由に考えを記入することができます。

入力に使用する "ペン" の先端は滑らかで微細であるため、ポイント、書き込み、インクによる描画を高精細に行うことができます。ペンには、オプションで "ペン ボタン" (右クリック用) と "消しゴム" (インク消去用) が備わっていることがあります。ほとんどのペンでは、ホバー機能がサポートされています。

典型的なペンの図

典型的なペン

ペンを手書きに使用する場合、"手書き認識" を使用してユーザーのストロークをテキストに変換することができます。ストロークは実際に書き込まれた状態を保持でき、バックグラウンドで実行される認識では、テキストとしての検索機能とコピー機能がサポートされます。このような無変換のストロークは、デジタル "インク" と呼ばれます。

OneNote のページ上の手書き入力のスクリーン ショット

インク入力の例

ほとんどの Windows プログラムは、マウスの代わりにペンを使用でき、ほとんどの重要なタスクと対話操作で円滑に機能します。また、プログラムがジェスチャーに応答するという意味では既に "ペンに対応" しています。プログラムで手書きのテキスト入力が支援されている場合は、"手書きに対応" したプログラムになります。ペン ストロークを同等のテキストまたはマウス動作に変換する必要がなく、インクを直接扱うことができるようになると、"インク対応" になります。これにより、ユーザーは高品質のデジタル インクを使用して自由にコメントを書き込んだり、描画、追加できるようになります。インクの方がマウスよりも高い解像度とサンプル レートが必要であり、また、インクには筆圧や傾きの微妙な違いも加わるため、インクの取得はマウス イベントの取得とは異なります。手書きに適したプログラムとインク対応のプログラムの作成方法については、インクの統合に関するページ (英語) およびペンを使用したテキスト入力に関するページ (英語) を参照してください。

ペンの位置を特定するとき、ペンの先端自体がポイント先なのでカーソルはあまり必要ありません。ただし Windows では、ターゲット指定を支援するために小さな "ペン カーソル" を用意し、現在のペンの位置を示しています。ペン カーソルはマウス ポインターとは異なり、ペンがディスプレイに接近している場合を除いては必要ないため、非アクティブな状態が数秒続いた後に非表示になり、情報がよく見えるようになります。

ペンに適したほとんどのプログラムでは、ジェスチャーがサポートされています。"ジェスチャー" とは、画面上で行われるペンのすばやい動きです。コンピューターではこの操作がマウスの動き、書き込み、描画ではなくコマンドとして解釈されます。ジェスチャーのうち、最も高速かつ簡単に実行されるものにフリックがあります。"フリック" とは、ナビゲーションやコマンドの編集を行うための簡単なジェスチャーです。ナビゲーション フリックには、上へドラッグ、下へドラッグ、戻る、進むがあり、編集フリックには、コピー、貼り付け、元に戻す、削除があります。

ビジー ポインターを除くすべてのポインターには単一ピクセルの "ホット スポット" があり、これによってポインターの画面上の正確な位置が定められます。ホット スポットによって、対話操作の影響を受けるオブジェクトが決まります。ホット スポットがオブジェクト上にあると判断する領域を "ホット ゾーン" といい、各オブジェクトに定義されています。通常、ホット ゾーンはオブジェクトの境界と一致しますが、対話操作を容易にするために、それより広い範囲に設定されている場合もあります。

ペンの方が指よりも精確にポイントできるため、ユーザー インターフェイスでタッチが正常に機能している場合は、ペンも正常に機能します。このため、この記事では、既にタッチ用に設計されているプログラムに、ペンのサポートを追加することを中心に説明します。

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

デザイン コンセプト

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

  • 自然で直感的です。ペンでポイントやタップを行う方法はだれでも理解できます。オブジェクトの対話操作は、現実の世界でユーザーがオブジェクトを操作する方法と同じになるように設計されています。
  • 表現力が豊かになります。マウスを使用するよりも、ペンのストロークの方が、コントロール、書き込み、描画、スケッチ、ペイント、コメントを簡単に実行できます。
  • 個人的な感じが強くなります。手書きのメモまたは署名の方がタイプ入力よりも個人的な感じが強くなるように、デジタルの手書きのメモまたは署名についても同じことがいえます。
  • それほど邪魔になりません。ペンは静かに使用できるので、特に会議のような社会的な状況ではタイピングやクリックほど気が散ることがありません。
  • 持ち運びできます。キーボード、マウス、タッチパッドなしでほとんどのタスクを実行できるので、ペン対応のコンピューターの方がコンパクトです。操作領域を必要としないため、柔軟性に優れ、コンピューター使用の新しい場所やシナリオに対応できます。
  • 直接的で魅力的です。ペンを使用すると、画面上のオブジェクトを直接操作する感覚があります。マウスやタッチパッドの場合は、手の動きをそれぞれの画面上のポインターの動きと連係させる必要があるため、間接的に感じます。

すべての 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 Journal のようなインク対応プログラムと、インク非対応のプログラムの両方を試します。タブレット PC を使用する場合、膝の上などに乗せたり、平らなテーブルに置いたり、起立して腕で抱えて試します。縦方向と横方向の両方で使用したり、ペンでの書き込みとポイントを行ったり、右手と左手の両方でペンを使用してみます。

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

  • 小さなコントロールは使いにくい。コントロールのサイズは対話操作の効率に大きく影響します。サイズが 10 × 10 ピクセルのコントロールはペンでも問題なく機能しますが、コントロールのサイズが大きいほど快適に使用できます。たとえば 15 × 11 ピクセルのスピン コントロールは、ペンで快適に使用するには小さすぎます。
  • 利き手が重要になる。確認や操作の対象が手で隠れることがあります。たとえば、ユーザーが右利きの場合、コンテキスト メニューをクリック ポイントの右に表示すると使いにくくなるので、左側に表示するのが適切です。Windows® では、ユーザーがコントロール パネルの Tablet PC 設定で自分の利き手を指定できます。
  • タスクを狭い範囲で実行できるようにする必要がある。画面上でポインターを 30 cm 移動する場合はマウスを 6 cm 動かすだけで済みますが、ペンを使用すると手を 30 cm 動かす必要があります。互いに離れているターゲットの間を何度も移動するのは手間がかかるため、タスクの対話操作をできる限り手に負担がかからない範囲に収めるのが適切です。コンテキスト メニューは手の移動が必要ないので便利です。
  • テキストの入力と選択が難しい。ペンで長文のテキストを入力するのは特に難しいため、オートコンプリート機能や許容できるテキストの既定値があるとタスクが大幅に簡単になります。テキストの選択も非常に難しいため、カーソルを正確に配置する必要がないとタスクが簡単になります。
  • ディスプレイの縁端付近にある小さなターゲットをタップするのは非常に難しい。一部のディスプレイではベゼル幅が広く、一部のタッチスクリーン技術では縁端部の感度が低いため、縁端付近にあるコントロールが使いにくくなっています。たとえば、ウィンドウを最大化すると、タイトル バーにある最小化、最大化、元のサイズに戻す、閉じるの各ボタンが使いにくくなります。

コントロールの位置

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

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

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 ジェスチャー以上認識することができます。アプリケーション ジェスチャーを使用するには、プログラムで認識するジェスチャーを定義し、発生したイベントを処理する必要があります。

応答性と一貫性

応答性は、直接的で魅力的なペン エクスペリエンスを作り出すのに不可欠です。直接的な感じを与えるには、ジェスチャーが即座に効果を現し、ジェスチャーの間、ペン部分でオブジェクトの接点が滑らかに保たれることが必要です。応答が遅れる、安定しない、接点が失われる、正確に応答しないなどが起こると、直接操作の感覚も魅力もなくなります。

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

インクとテキストの編集

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

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

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

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

4 つの重要な点
1. Windows プログラムに適切なペン エクスペリエンスが備わっているようにします。ユーザーがペンを使用し、プログラムの最も重要なタスクを効率よく実行できることが必要です (最低でも、そうしたタスクで多量のタイピングや精緻なピクセル操作を必要としないようにします)。
2. 最も適切なシナリオで、インクを使用した直接的な書き込み、描画、コメントのサポートを加えることを検討します。
3. 直接的で魅力的なエクスペリエンスを作り出すには、ジェスチャーが即座に反映され、ジェスチャーの間、ユーザーのペン部分で接点が滑らかに保たれ、ジェスチャーの効果が直接ユーザー動作に割り当てられるようにします。
4. 自然で直感的なエクスペリエンスを作り出すには、適切な標準ジェスチャーをサポートし、それぞれの標準の意味を割り当てます。プログラムに特有の対話操作にはカスタム ジェスチャーを使用します。

ガイドライン

コントロールの使い方

  • コモン コントロールを優先して使用します。ほとんどのコモン コントロールは、適切なペン エクスペリエンスをサポートするようデザインされています。
  • できるだけ制約付きコントロールを使用します。テキスト入力の負担を減らすために、テキスト ボックスのような制約のないコントロールではなく、リストやスライダーといった制約付きコントロールをできる限り使用します。
  • 適切な既定値を設定します。最も安全 (データの消失やシステム アクセスが失われることを防ぐため) で、最もセキュリティの高いオプションを既定で選択します。安全性およびセキュリティを判断要素として考える必要がない場合は、最もよく使用されるオプションまたは最も便利なオプションを選択し、不要な対話操作を省きます。
  • テキストのオートコンプリート機能を実装します。最もよく使用されるか最近使用された入力値の一覧を提供し、テキスト入力を簡易化します。
  • 複数の選択項目を使用する重要なタスクについては、標準的な複数選択リストが通常使用される場合は代わりにチェック ボックス リストを使用するオプションを提供します。
  • システムのメトリクスを尊重します。すべてのサイズでシステムのメトリクスを使用し、ハードウェア組み込みのサイズは使用しません。必要な場合は、ユーザーがシステムのメトリクスまたは dpi を適宜変更することができます。ただし、通常はユーザー側でシステム設定を調整して UI を使用可能にすることは望ましくないので、これは最終的な手段にします。

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

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

コントロールのサイズ、レイアウト、間隔

  • コモン コントロールについては、コントロールに推奨されるサイズを使用します。これらにはスピン コントロール (ペンで使用できませんが、代替手段があります) を除き、適切なペン エクスペリエンスが得られる大きさがあります。
  • 最も使用されると思われる場所に近いところにコントロールを配置するレイアウトを選択します。できる限り狭い範囲にタスクの対話操作を収めます。コモン タスクとドラッグでは特に、手の移動距離が長くならないようにします。
  • 推奨される間隔を使用します。推奨される間隔はペンに適しています。
  • 対話型コントロールの間隔は、隣のコントロールと接触しているか、5 ピクセル (3 DLU) 以上空いているかのどちらかにする必要があります。そうすることで、ユーザーがターゲットの外側をタップしても混乱しません。
  • コマンド リンク、チェック ボックス、ラジオ ボタンなどのコントロールのグループ内およびグループ間では、推奨される上下の間隔よりも広く間隔を空けます。そうすることで、差異化しやすくなります。

対話操作

  • 手書きを受け入れるように設計されているプログラムの場合、既定のインク機能を有効にします。既定のインク機能を使用すると、タップやコマンド指定などの特別な操作の必要がなく、書き始めることによってインク入力が可能になり、最も自然なペン エクスペリエンスが実現されます。手書きを受け入れるように設計されていないプログラムの場合は、テキスト ボックス内でペンを入力したときに選択部分として処理します。
  • プログラムにテキスト編集を必要とするタスクがある場合は、ユーザーがコンテンツ UI を拡大できるようにします。ペン使用時は自動的に 150% に拡大されるようにします。
  • ジェスチャーは記憶されるため、プログラム全体で一貫して意味を割り当てます。確定した意味を持つジェスチャーに別の意味を割り当てないでください。適切なプログラム特有のジェスチャーを使用します。

利き手

  • コンテキスト ウィンドウの場合は、必ず起動元オブジェクトの近くに表示します。表示するウィンドウで起動元のオブジェクトが隠れることがないように、適切な位置に配置します。
    • マウスを使用して表示する場合、可能であれば、コンテキスト ウィンドウを下方向および右方向にオフセットして表示します。

      オブジェクトの右側に配置されたコンテキスト ウィンドウの図

      コンテキスト ウィンドウは、起動元オブジェクトの近くに表示します。

    • ペンを使用して表示する場合、可能であれば、ユーザーの手で隠れることがないようにコンテキスト ウィンドウを配置します。右利きのユーザーであれば左側に、左利きのユーザーであれば右側に表示します。

      オブジェクトの左側に配置されたコンテキスト ウィンドウの図

      ペンを使用する場合は、コンテキスト ウィンドウがユーザーの手で隠れることがないように配置します。

  • 開発者向け情報: マウス イベントとペン イベントは、GetMessageExtraInfo API を使用して判別できます。また、ユーザーの利き手は、SystemParametersInfo API と SPI_GETMENUDROPALIGNMENT を使用して判断できます。

寛容性

  • [元に戻す] コマンドを用意します。すべてのコマンドに元に戻す機能を用意するのが理想的ですが、プログラムにはコマンドの効果を元に戻すことができないものが含まれていることがあります。
  • ホバーの適切なフィードバックを提供します。ペンをクリック可能なターゲットに合わせたときに、わかるように表示します。このようなフィードバックは意図しない操作を防ぐ有用な方法の 1 つです。
  • 実用的な場合は必ず、適切なペン ダウン フィードバックを提供しますが、移動またはペン アップが発生するまでは操作が反映されないようにします。こうすると、ユーザーは事前に間違いを修正できます。
  • 実用的な場合は必ず、ユーザーが簡単に間違いを修正できるようにします。ペン アップ時に操作が反映される場合は、ペン ダウンの間にスライドによって間違いを修正できるようにします。

ドキュメント

ペン入力に言及するときは、以下のことに留意します。

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