次の方法で共有

ペン

注

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

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

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

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

一般的なペンの図

一般的なペン。

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

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

インク入力の例。

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

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

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

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

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

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

設計の概念

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

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

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

幸いにも、プログラムが既に適切に設計されており、タッチに優しい場合は、適切なペンサポートを提供するのは簡単です。 この目的のために、適切に設計されたプログラム:

  • 良いマウスサポートを持っています。 対話型コントロールには、明確で目に見えるアフォーダンスがあり、ポインターフィードバックのホバー状態があります。 オブジェクトには、標準のマウス操作に対する標準的な動作があります (1 回と 2 回の左クリック、右クリック、ドラッグ、ホバー)。 ポインターの図形は、直接操作の種類を示すように適宜変更されます。
  • キーボードのサポートが良好です。 このプログラムは、標準のショートカット キーの割り当てを提供することで、ユーザーを効率的にします。特に、ジェスチャを使用して生成できるナビゲーションおよび編集コマンドの場合です。
  • タッチに十分な大きさのコントロールがあります。 コントロールの最小サイズは 23 x 23 ピクセル (13 x 13 ダイアログ ユニット [DLU]) で、最も一般的に使用されるコントロールは少なくとも 40 x 40 ピクセル (23 x 22 D RU) です。 応答しない動作を回避するには、UI 要素間に小さなギャップがないようにする必要があります。隣接するターゲットが接触しているか、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 Gesture Recognizer は 、40 以上のジェスチャを認識できます。 アプリケーション ジェスチャを使用するには、プログラムが認識するジェスチャを定義し、結果のイベントを処理する必要があります。

応答性と一貫性

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

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

インクとテキストの編集

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

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

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

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

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

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

ガイドライン

使用状況を制御する

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

通常サイズと大きなサイズのメニューのスクリーン ショット

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

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

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

相互作用

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

利き手

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

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

      オブジェクトfigure of contextual window placed right of object figure of contextual window placed right of object の右に配置されたコンテキスト ウィンドウの図

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

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

      オブジェクトfigure of contextual window placed left of object figure of contextual window placed left of object の左側に配置されたコンテキスト ウィンドウの図

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

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

許し

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

ドキュメンテーション

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

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