ペン

Note

この設計ガイドは Windows 7 用に作成されており、新しいバージョンの Windows では更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には 現在の設計ガイダンスは反映されていません。

すべての Microsoft Windows アプリケーションをペンで有効にする必要があります。 そして、そうすることは、あなたが考えているよりも簡単です。

ペン入力とは、Windows がペンを使用してコンピューターと直接対話する方法を指します。 ペンは、指し指しやジェスチャ、単純なテキスト入力、デジタル インクでの自由形式の考えのキャプチャにも使用できます。

入力に使用されるペンは、インクでの正確なポイント、書き込み、または描画をサポートする、細かく滑らかな先端を備えています。 ペンには、オプションのペン ボタン (右クリックの実行に使用) と消しゴム (インクの消去に使用) を含めることもできます。 ほとんどのペンはホバーをサポートしています。

一般的なペンの図

一般的なペン。

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

onenote ページでの手書きのスクリーン ショット

インク入力の例。

ほとんどの Windows プログラムは、マウスの代わりにペンを使用でき、最も重要なタスクや操作に対してペンがスムーズに動作し、プログラムがジェスチャに応答するという点で、既にペンフレンドリです。 プログラムは、手書きのテキスト入力を支援すると、手書きフレンドリーになります。 ペン ストロークをテキストまたは同等のマウスの動きに変換する必要なく、インクを直接処理できる場合、プログラムはインク対応になります。 これにより、ユーザーは自由に流れる高品質のデジタル インクでコメントを作成、描画、追加できます。 インクは、より高い解像度と高いサンプルレートを必要とし、圧力と傾きで微妙なニュアンスを追加できるため、インクの収集はマウスイベントを収集するのとは異なります。 手書きのわかりやすいインク対応プログラムの作成については、「ペンを使用したインクとテキスト入力の統合」を参照してください。

ペンを配置する場合、先端がそれ自体を表すので、カーソルの必要性は少なくなります。 ただし、支援を対象とするために、Windows は現在のペンの場所を示す小さなペン カーソルを提供します。 置き換えるマウス ポインターとは異なり、ペンがディスプレイの近くにある場合を除き、ペン カーソルは必要ないため、数秒の非アクティブ状態の後に消え、情報の妨げにならないビューが可能になります。

ほとんどのペンに優しいプログラムでは、ジェスチャがサポートされています。 ジェスチャは、マウスの動き、書き込み、または描画としてではなく、コンピューターがコマンドとして解釈する画面上のペンの迅速な動きです。 実行する最も簡単で簡単なジェスチャの 1 つは、フリックです。 フリックは、ナビゲーションまたは編集コマンドを実行する単純なジェスチャです。 ナビゲーション フリックには、上にドラッグ、下にドラッグ、戻る、前に移動する、一方、編集フリックにはコピー、貼り付け、元に戻す、削除が含まれます。

ビジー ポインターを除くすべてのポインターには、ポインターの正確な画面位置を定義する 1 ピクセルのホット スポットがあります。 ホット スポットは、相互作用の影響を受けるオブジェクトを決定します。 オブジェクトはホット ゾーンを定義します。これは、ホット スポットがオブジェクトの上にあると見なされる領域です。 通常、ホット ゾーンはオブジェクトの境界線と一致しますが、操作を容易にするために大きくなる場合があります。

ペンは指よりも正確にポイントできるため、ユーザー インターフェイスがタッチに適している場合は、ペンにも適しています。 そのため、この記事では、タッチ用に既に設計されているプログラムにペンサポートを追加することに主に焦点を当てています。

メモ:マウスアクセシビリティタッチに関連するガイドラインは、別の記事で示されています。

設計概念

入力にペンを使用すると、次の特性があります。

  • 自然で直感的。 誰もがペンをポイントしてタップする方法を知っています。 オブジェクトの相互作用は、ユーザーが現実世界のオブジェクトと一貫した方法で対話する方法に対応するように設計されています。
  • 表現。 ペンのストロークは、マウスで行うよりも簡単に、書き込み、描画、スケッチ、描画、注釈付けが簡単になります。
  • より個人的。 手書きのメモや署名が、入力されたノートや署名よりも個人的であるのと同様に、デジタル手書きのメモや署名を使用する方も個人的です。
  • 侵入が少ない。 ペンを使うと静かになり、特に会議などの社会的な状況では、入力やクリックよりもはるかに気が散らなくなります。
  • 移植可能。 ほとんどのタスクはキーボード、マウス、タッチパッドなしで完了できるため、ペン機能を備えたコンピューターの方がコンパクトになります。 作業面を必要としないため、柔軟性が高くなります。 これにより、コンピューターを使用するための新しい場所とシナリオが可能になります。
  • 直接的で魅力的です。 ペンを使用すると、画面上のオブジェクトと直接やり取りしているように感じますが、マウスまたはタッチパッドを使用するには、常に、比較によって間接的に感じる個別の画面上のポインターの動きで手の動きを調整する必要があります。

すべての Windows プログラムには、適切なペン エクスペリエンスが必要です。 ユーザーは、ペンを使用してプログラムの最も重要なタスクを効率的に実行できる必要があります。 入力や詳細なピクセル操作などの一部のタスクはペンには適していませんが、少なくとも可能である必要があります。

幸いにも、プログラムが既に適切に設計されていて、タッチフレンドリーであれば、優れたペンサポートを提供するのは簡単です。 この目的のために、適切に設計されたプログラム:

  • マウスのサポートが良好です。 対話型コントロールには、明確で目に見えるアフォーダンスがあり、ポインターフィードバックのホバー状態があります。 オブジェクトには、標準的なマウス操作 (単一とダブルクリック、右クリック、ドラッグ、ホバー) の標準的な動作があります。 ポインターの図形は、直接操作の種類を示すように適宜変更されます。
  • 良好なキーボードサポートを持っています。 このプログラムは、特にジェスチャを使用して生成できるナビゲーションおよび編集コマンドに対して、標準的なショートカット キーの割り当てを提供することで、ユーザーを効率的にします。
  • タッチに十分な大きさのコントロールがあります。 コントロールの最小サイズは 23 x 23 ピクセル (13 x 13 ダイアログ ユニット [DLU]) で、最もよく使用されるコントロールは少なくとも 40 x 40 ピクセル (23 x 22 DLU) です。 応答しない動作を回避するには、隣接するターゲットが接触しているか、5 ピクセル (3 D RU) 以上の間隔になるように UI 要素を配置する必要があるターゲット間に小さなギャップがないようにする必要があります。
  • アクセス可能です。 Microsoft Active Accessibility (MSAA) を使用して、支援テクノロジの UI へのプログラムによるアクセスを提供します。 プログラムは、テーマとシステム メトリックの変更に適切に対応します。
  • 120 dpi (1 インチあたりのドット数) で適切に動作 します。これは、ペン対応コンピューターに推奨される既定のディスプレイ解像度です。
  • 一般的なコントロールを使用します。 ほとんどの一般的なコントロールは、優れたペンエクスペリエンスをサポートするように設計されています。 必要に応じて、プログラムは、簡単なターゲット設定と対話型操作をサポートするように設計された、適切に実装されたカスタム コントロールを使用します。
  • 制約付きコントロールを使用します。 簡単にターゲット設定できるように設計されている場合、リストやスライダーなどの制約付きコントロールは、テキストボックスなどの制約のないコントロールよりも優れている可能性があります。テキスト入力の必要性が減るためです。
  • 適切な既定値を提供します。 プログラムは、既定で最も安全なオプション (データまたはシステム アクセスの損失を防ぐために) と最も安全なオプションを選択します。 安全性とセキュリティが要因でない場合、プログラムは最も可能性の高いオプションまたは便利なオプションを選択し、不要な操作を排除します。
  • テキストの自動入力候補を提供します。 テキスト入力をはるかに簡単にするために、最も可能性の高い入力値または最近の入力値の一覧を提供します。

残念ながら、あなたのプログラムがうまく設計されていない場合も、その欠点はペンを使用するユーザーに特に明らかになります。

ペン操作のモデル

ペンの使用経験がない場合は、次の手順を実行して学習することをお勧めします。 ペン対応コンピューターを取得し、マウスとキーボードを脇に置き、通常はペンだけを使用して行うタスクを実行します。 Windows ジャーナルなどのインク対応プログラムと、インク対応ではないプログラムの両方を必ず試してください。 タブレット PC をお持ちの場合は、膝の上、テーブルの上に平らに横たわっている、立っている間の腕など、さまざまな位置に置いて実験します。 縦向きと横向きで使用し、ペンを持って書いたり、指したりするために、左手と右に置いてみてください。

ペンの使用を試してみると、次のことが分かるでしょう。

  • 小さなコントロールは使いにくいです。 コントロールのサイズは、効果的に対話する機能に大きく影響します。 10 x 10 ピクセルのコントロールはペンに対して合理的に機能しますが、より大きなコントロールはさらに使いやすいです。 たとえば、 スピン コントロール (15 x 11 ピクセル) は小さすぎて、ペンで簡単に使用できます。
  • 利き手は要因です。 手の中には、見たい、またはやり取りしたいものが含まれる場合があります。 たとえば、右利きのユーザーのコンテキスト メニューは、クリック ポイントの右側に表示される場合は使いにくいため、左側に表示する方が適しています。 Windows を使用すると、ユーザーはタブレット PC の [設定] コントロール パネル項目で自分の手渡しを示すことができます。
  • タスクの局所性が役立ちます。 3 インチのマウスの動きで 14 インチの画面全体にポインターを移動できますが、ペンを使用するには、14 インチの完全な手を動かす必要があります。 離れているターゲット間を繰り返し移動するのは面倒な場合があるため、可能な限り、タスクの相互作用を安静な手の範囲内に保つ方がはるかに良いです。 コンテキスト メニューは手の動きを必要としないため便利です。
  • テキストの入力と選択は困難です。 長いテキスト入力はペンを使うのが特に難しいため、オートコンプリートと許容される既定のテキスト値を使用すると、タスクが簡単になります。 テキストの選択も非常に困難な場合があるため、正確なカーソル配置を必要としないタスクは簡単です。
  • ディスプレイの端付近の小さなターゲットは、タップするのが非常に困難な場合があります。 一部のディスプレイ ベゼルは突出しており、一部のタッチスクリーン テクノロジではエッジの感度が低く、エッジ付近のコントロールの使用が困難になります。 たとえば、タイトル バーの [最小化]、[最大化/復元]、[閉じる] ボタンは、ウィンドウを最大化するときに使いにくい場合があります。

コントロールの場所

タスクの局所性により、画面間の移動を繰り返す面倒な作業が軽減されます。 手の動きを最小限に抑えるには、使用される可能性が最も高い場所の近くにコントロールを配置します。

正しくない:

ツールから分離されたカラー パレットのスクリーン ショット

Windows XP のこの例では、カラー パレットが使用される可能性がある場所から遠すぎます。

ユーザーの現在の場所がターゲットに最も近く、取得が簡単であることを考慮してください。 したがって、コンテキスト メニューは、Microsoft Office で使用されるミニ ツール バーと同様に、 フィットの法則を最大限に活用します。

メニュー付近のポインターのスクリーン ショット

現在のポインターの位置は、常に最も簡単に取得できます。

ディスプレイ エッジの近くの小さなターゲットはターゲットにすることが難しい場合があるため、ウィンドウの端の近くに小さなコントロールを配置しないようにします。 ウィンドウを最大化するときにコントロールのターゲットを設定しやすくするには、少なくとも 23 x 23 ピクセル (13 x 13 D RU) にするか、ウィンドウの端から離します。

ペン操作

システム ジェスチャ

システム ジェスチャは、Windows によって定義および処理されます。 その結果、すべての Windows プログラムにアクセスできます。 これらのジェスチャには、同等のマウス、キーボード、およびアプリケーション コマンド メッセージがあります。

システム ジェスチャ 合成された同等のメッセージ
ホバー (サポートされている場合)
マウス ホバー
タップ (下および上)
マウスの左クリック
ダブルタップ (下と上に 2 回)
マウスのダブルクリック
長押し (下、一時停止、上)
マウスを右クリック
ドラッグ (下、移動、上)
マウスの左ドラッグ
長押し、ドラッグ (下、一時停止、移動、上)
マウス右ドラッグ
選択 (下、選択可能なオブジェクトの上に移動、上へ)
マウス選択

開発者: 詳細については、「 SystemGesture 列挙」を参照してください。

フリック

フリックは、キーボード ショートカットとほぼ同等の単純なジェスチャです。 ナビゲーション フリックには、上にドラッグ、下にドラッグ、戻る、前に移動するなどがあります。 編集フリックには、コピー、貼り付け、元に戻す、削除があります。 フリックを使用するには、プログラムが関連するキーストローク コマンドにのみ応答する必要があります。

Windows 7 でのフリック ジェスチャとその既定の割り当てを示す図。

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

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

Windows Vista の 8 つのフリック ジェスチャとその既定の割り当て。

ナビゲーション フリックには自然なマッピングがあるため、簡単に学習して覚えておく必要があります。 編集フリックは、より精度が必要な対角線であり、マッピングは自然ではありません (削除するにはごみ箱に向かってフリックし、戻る方向にフリックして元に戻す)、既定では有効になっていません。 すべてのフリックアクションは、ペンと入力デバイスのコントロールパネル項目を使用してカスタマイズできます。

フリック 合成された同等のメッセージ
左にフリック
[転送] コマンド (Windows Vista の場合は [戻る] コマンド)
右にフリック
[戻る] コマンド (Windows Vista の場合は [転送] コマンド)
上にフリック
キーボードを下にスクロールする
下にフリック
キーボードを上にスクロール
左上の対角線をフリック
キーボードの削除
左から斜めにフリック
キーボードの元に戻す
右斜め上向きフリック
キーボード コピー
右斜め下にフリック
キーボード貼り付け

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

アプリケーションでは、他のジェスチャを定義して処理することもできます。 Microsoft ジェスチャ認識エンジンは 、40 を超えるジェスチャを認識できます。 アプリケーション ジェスチャを使用するには、プログラムで認識されるジェスチャを定義し、結果のイベントを処理する必要があります。

応答性と一貫性

応答性は、直接的で魅力的なペン エクスペリエンスを作成するために不可欠です。 ダイレクトに感じるには、ジェスチャをすぐに有効にする必要があり、ジェスチャ全体を通してオブジェクトの接触ポイントがペンの下にスムーズに留まる必要があります。 ラグ、途切れた応答、接触の損失、または不正確な結果は、直接操作と品質の認識を破壊します。

一貫性は、自然で直感的に感じるペン エクスペリエンスを作成するために不可欠です。 ユーザーが標準のジェスチャを学習すると、そのジェスチャが該当するすべてのプログラムで同じ効果を持つことが期待されます。 混乱やフラストレーションを避けるために、標準以外の意味を標準のジェスチャに割り当てないでください。 代わりに、プログラムに固有の操作にカスタム ジェスチャを使用します。

インクとテキストの編集

インクとテキストの編集は、ペンを使用する場合に最も困難な操作の 1 つです。 制約付きコントロール、適切な既定値、オートコンプリートを使用すると、テキストを入力する必要がなくなります。 ただし、プログラムでテキストまたはインクの編集が必要な場合は、 ペンの使用時に入力 UI を既定で最大 150% 自動的にズームすることで、ユーザーの生産性を高めることができます。

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

大きなフォントの Outlook メッセージのスクリーン ショット

この例では、入力 UI は 150% にズームされます。

4 つの操作のみを行う場合...

    1. Windows プログラムに優れたペンエクスペリエンスを提供します。 ユーザーは、ペン (少なくとも多くの入力や詳細なピクセル操作を伴わないタスク) を使用して、プログラムの最も重要なタスクを効率的に実行できる必要があります。
    1. 最も関連性の高いシナリオでは、インクを使用して直接コメントを作成、描画、追加するためのサポートを追加することを検討してください。
    1. 直接的で魅力的なエクスペリエンスを作成するには、ジェスチャをすぐに有効にし、ジェスチャ全体を通してユーザーのペンの下に接触ポイントをスムーズに維持し、ジェスチャ マップの効果をユーザーのモーションに直接適用します。
    1. 自然で直感的なエクスペリエンスを作成するには、適切な標準ジェスチャをサポートし、標準の意味を割り当てます。 プログラムに固有の操作にはカスタム ジェスチャを使用します。

ガイドライン

使用状況を制御する

  • 一般的なコントロールの使用を優先します。 ほとんどの一般的なコントロールは、優れたペンエクスペリエンスをサポートするように設計されています。
  • 制約付きコントロールを優先します。 テキスト ボックスなどの制約のないコントロールではなく、可能な限りリストやスライダーなどの制約付きコントロールを使用して、テキスト入力の必要性を軽減します。
  • 適切な既定値を指定します。 既定では、最も安全なオプション (データまたはシステム アクセスの損失を防ぐために) と最も安全なオプションを選択します。 安全性とセキュリティが要因でない場合は、最も可能性の高いオプションまたは便利なオプションを選択して、不要な操作を排除します。
  • テキストのオートコンプリートを指定します。 テキスト入力をはるかに簡単にするために、最も可能性の高い入力値または最近の入力値の一覧を指定します。
  • 複数選択を使用する重要なタスクの場合、標準の複数選択リストが通常使用されている場合は、代わりにチェックボックス リストを使用するオプションを指定します。
  • システム メトリックを尊重します。 すべてのサイズに対してシステム メトリックを使用すると、サイズがハードワイヤされません。 必要に応じて、ユーザーはニーズに合わせてシステム メトリックまたは dpi を変更できます。 ただし、ユーザーは通常、UI を使用できるようにシステム設定を調整する必要がないため、これを最後の手段として扱います。

標準サイズと大きなサイズ設定を使用したメニューのスクリーン ショット

この例では、メニューの高さのシステム メトリックが変更されました。

サイズ、レイアウト、間隔を制御する

  • 一般的なコントロールの場合は、推奨されるコントロール サイズを使用します。 これらは、スピン コントロール (ペンでは使用できないが冗長である) を除き、適切なペン エクスペリエンスを実現するのに十分な大きさです。
  • コントロールを使用する可能性が最も高い場所の近くに配置するレイアウトを選択します。 可能な限り、タスクの相互作用を小さな領域内に保持します。 特に一般的なタスクやドラッグの場合は、長距離の手の動きを避けてください。
  • 推奨される間隔を使用します。 推奨される間隔はペンフレンドリです。
  • 対話型コントロールは、タッチするか、または少なくとも 5 ピクセル (3 D RU) の間隔を持つ必要があります。 これにより、ユーザーが目的のターゲットの外側をタップするときの混乱を防ぐことができます。
  • コマンド リンク、チェック ボックス、ラジオ ボタン、グループ間など、コントロールのグループ内で推奨される垂直方向の間隔よりも多くを追加することを検討してください。 これにより、区別が容易になります。

相互作用

  • 手書き入力を受け入れるように設計されたプログラムの場合は、既定の手描き入力を有効にします。 既定の手描き入力を使用すると、ユーザーは、タップ、コマンドの指定、特別な操作を行うことなく、書き込みを開始するだけでインクを入力できます。 そうすることで、ペンで最も自然なエクスペリエンスを実現できます。 手書き入力を受け入れるように設計されていないプログラムの場合は、テキスト ボックス内のペン入力を選択として処理します。
  • プログラムにテキストの編集を必要とするタスクがある場合に、ユーザーがコンテンツ UI をズームできるようにします。 ペンを使用する場合は、150% に自動的にズームすることを検討してください。
  • ジェスチャは記憶されるため、プログラム間で一貫性のある意味を割り当てます。 固定セマンティクスを持つジェスチャに異なる意味を与えないでください。 代わりに、適切なプログラム固有のジェスチャを使用します。

利き手

  • ウィンドウがコンテキストの場合は、起動元のオブジェクトの近くに常にウィンドウを表示します。 ソース オブジェクトがウィンドウで覆われないように、邪魔になりません。

    • マウスを使用して表示する場合は、可能な場合はコンテキスト ウィンドウのオフセットを下および右に配置します。

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

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

    • ペンを使用して表示する場合は、可能な場合は、ユーザーの手で覆われないようにコンテキスト ウィンドウを配置します。 右利きのユーザーの場合は、左側に表示します。それ以外の場合は、右側に表示されます。

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

      ペンを使用する場合は、ユーザーの手でカバーされないようにコンテキスト ウィンドウも表示します。

  • 開発者:GetMessageExtraInfo API を使用して、マウス イベントとペン イベントを区別できます。 systemParametersInfo API with SPI_GETMENUDROPALIGNMENTを使用して、ユーザーの利き手を確認できます。

許し

  • 元に戻すコマンドを指定します。 理想的には、すべてのコマンドに対して元に戻す必要がありますが、プログラムには元に戻すことができないコマンドが含まれる場合があります。
  • 適切なホバー フィードバックを提供します。 ペンがクリック可能なターゲットの上にある場合を明確に示します。 このようなフィードバックは、誤った操作を防ぐための優れた方法です。
  • 実用的な場合は常に、ペンダウンに関する適切なフィードバックを提供しますが、移動またはペンアップするまでアクションを実行しないでください。 そうすることで、ユーザーは間違いを犯す前に修正することができます。
  • 実用的な場合は常に、ユーザーが簡単に間違いを修正できるようにします。 ペンアップに対してアクションが有効な場合は、ペンが停止している間にスライドしてユーザーが間違いを修正できるようにします。

ドキュメント

ペン入力を参照する場合:

  • ペン型のスタイラス入力デバイスをペンとして参照します。 最初のメンションで、タブレット ペンを使用します。
  • ペンの側面にあるボタンを、バレル ボタンではなくペン ボタンとして参照します。
  • キーボード、マウス、トラックボール、ペン、または指を入力デバイスとして一般的に参照します。
  • ペンの使用に固有の手順を文書化する場合は、クリックする代わりにタップ (ダブルタップ) を使用します。 タップとは、画面を押し、ホールド時間の前に持ち上げることを意味します。 マウス クリックを生成するために使用される場合と使用されない場合があります。 ペンを含まない操作の場合は、引き続きクリックを使用します。