マウス操作

[アーティクル]
06/02/2023

Windows アプリの設計はタッチ入力用に最適化し、既定の基本的なマウスのサポートを利用します。

マウス

マウス入力は、ポイントとクリックの正確さが求められるユーザー操作に最適です。この固有の正確さは、タッチの本来の不正確さに合わせて最適化されている Windows の UI でも当然サポートされています。

マウス入力とタッチ入力が異なるのは、タッチでは UI 要素に対して直接実行される物理的なジェスチャ (スワイプ、スライド、ドラッグ、回転など) を通じて、それらのオブジェクトへの直接の操作をより正確にエミュレートする機能があることです。マウスによる操作では、オブジェクトのサイズ変更や回転を実行するためにハンドルを使用するなど、他の UI アフォーダンスが必要になることが普通です。

このトピックでは、マウス操作の設計時の考慮事項について説明します。

UWP アプリのマウス言語

システム内では一貫して、マウス操作の簡単なセットが使われます。

項目	説明
ホバーによる説明の表示	要素にホバーすると、詳しい情報や説明を伝える視覚効果 (ヒントなど) が表示されます。操作はコミットされません。
左クリックによるプライマリ操作	要素の左クリックにより、プライマリ操作 (アプリの起動、コマンドの実行など) が呼び出されます。
スクロールによるビューの変更	スクロールバーを表示し、コンテンツ領域内で上下左右に移動します。スクロールバーのクリック、またはマウスホイールの回転により、スクロールできます。スクロールバーは、コンテンツ領域内の現在のビューの位置を示します (タッチによるパンでも同様の UI が表示されます)。
右クリックによる選択とコマンド	右クリックして、ナビゲーションバー (使用できる場合) と、グローバルコマンドを含むアプリバーを表示します。要素を右クリックして選択し、その要素に対応する状況依存のコマンドを備えたアプリバーを表示します。注選択またはアプリバーのコマンドが適切な UI 動作ではない場合は、右クリックでショートカットメニューを表示します。ただし、すべてのコマンド動作にアプリバーを使うことを強くお勧めします。
ズームの UI コマンド	アプリバーに UI コマンドを表示するか (+、- など)、Ctrl キーを押しながらマウスホイールを回転させて、ズームのためのピンチジェスチャとストレッチジェスチャをエミュレートします。
回転の UI コマンド	アプリバーに UI コマンドを表示するか、Ctrl キーと Shift キーを押しながらマウスホイールを回転させて、回転のための回転ジェスチャをエミュレートします。画面全体を回転させるには、デバイスを回転させます。
左クリックとドラッグによる移動	要素を左クリックしてドラッグし、移動します。
左クリックとドラッグによるテキストの選択	選択可能なテキスト内を左クリックしてドラッグし、選択します。単語を選択するには、ダブルクリックします。

マウス入力イベント

ほとんどのマウス入力は、すべての UIElement オブジェクトでサポートされている一般的なルーティング入力イベントを介して処理できます。次に例を示します。

ただし、Windows.UI.Input のポインターイベント、ジェスチャイベント、操作イベントを使って、各デバイスの特定の機能 (マウスホイールイベントなど) を利用することができます。

サンプル:BasicInput サンプルを参照してください。

視覚的なフィードバックのガイドライン

移動イベントまたはホバーイベントを通じてマウスが検出されたら、マウス固有の UI を表示して、要素によって公開されている機能を示します。マウスが一定の期間動かされなかった場合や、ユーザーがタッチ操作を始めた場合は、マウス UI を徐々に非表示にします。これにより、UI の簡潔さが保たれます。
ホバーのフィードバックにカーソルを使わないでください。要素によるフィードバックで十分です (以下の「カーソル」をご覧ください)。
静的テキストなど、要素で対話式操作がサポートされていない場合は、視覚的なフィードバックを返さないでください。
マウス操作ではフォーカス用の四角形を使わないでください。これはキーボード操作専用です。
同じ入力対象を表すすべての要素に対して視覚的なフィードバックを同時に表示します。
パン、回転、ズームなど、タッチベースの操作をエミュレートするためのボタンを提供します (+、- など)。

視覚的なフィードバックに関する一般的なガイダンスについては、「視覚的なフィードバックのガイドライン」をご覧ください。

カーソル

マウスポインターとして利用できる標準のカーソルセットが用意されています。これらが要素のプライマリ操作を示すために使われます。

標準のカーソルには、それぞれ対応する既定の画像が関連付けられています。ユーザーまたはアプリは、標準のカーソルに関連付けられている既定の画像をいつでも変更できます。カーソル画像は、PointerCursor 関数を使って指定します。

マウスカーソルをカスタマイズする必要がある場合は、以下のガイドラインに従ってください。

クリック可能な要素には、常に) を使用します。リンクやその他の対話型要素には、ポイン) を使用しないでください。代わりに、前に説明したホバー効果を使います。
選択可能なテキストには) を使用します。
移動が主なアクション (ドラッグやトリミングなど) である場合は、移動の移動) を使用します。スタート画面のタイルなどでのナビゲーションがメインの操作である場合は、要素に対して移動カーソルを使いません。
オブジェクトのサイズ変更が可能な場合は、水平、垂直、斜めのサイズ変更を使用します。
固定キャンバス (マップなど) 内でコンテンツをパンする場合は、手のつかみ、状態) を使用します。