マウス操作

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

mouse

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

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

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

UWP アプリのマウス言語

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

用語 説明

ホバーによる説明の表示

要素にホバーすると、詳しい情報や説明を伝える視覚効果 (ヒントなど) が表示されます。操作はコミットされません。

左クリックによるプライマリ操作

要素の左クリックにより、プライマリ操作 (アプリの起動、コマンドの実行など) が呼び出されます。

スクロールによるビューの変更

スクロール バーを表示し、コンテンツ領域内で上下左右に移動します。 スクロール バーのクリック、またはマウス ホイールの回転により、スクロールできます。 スクロール バーは、コンテンツ領域内の現在のビューの位置を示します (タッチによるパンでも同様の UI が表示されます)。

右クリックによる選択とコマンド

右クリックして、ナビゲーション バー (使用できる場合) と、グローバル コマンドを含むアプリ バーを表示します。 要素を右クリックして選択し、その要素に対応する状況依存のコマンドを備えたアプリ バーを表示します。

選択またはアプリ バーのコマンドが適切な UI 動作ではない場合は、右クリックでショートカット メニューを表示します。 ただし、すべてのコマンド動作にアプリ バーを使うことを強くお勧めします。
 

ズームの UI コマンド

アプリ バーに UI コマンドを表示するか (+、- など)、Ctrl キーを押しながらマウス ホイールを回転させて、ズームのためのピンチ ジェスチャとストレッチ ジェスチャをエミュレートします。

回転の UI コマンド

アプリ バーに UI コマンドを表示するか、Ctrl キーと Shift キーを押しながらマウス ホイールを回転させて、回転のための回転ジェスチャをエミュレートします。 画面全体を回転させるには、デバイスを回転させます。

左クリックとドラッグによる移動

要素を左クリックしてドラッグし、移動します。

左クリックとドラッグによるテキストの選択

選択可能なテキスト内を左クリックしてドラッグし、選択します。 単語を選択するには、ダブルクリックします。

マウス入力イベント

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

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

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

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

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

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

カーソル

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

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

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

  • クリック可能な要素には常に矢印カーソル (arrow cursor) を使います。 リンクなどのインタラクティブな要素には手の形のポインティング カーソル (pointing hand cursor) を使いません。 代わりに、前に説明したホバー効果を使います。
  • 選択可能なテキストにはテキスト カーソル (text cursor) を使います。
  • ドラッグやトリミングなど、移動がメインの操作である場合は、移動カーソル (move cursor) を使います。 スタート画面のタイルなどでのナビゲーションがメインの操作である場合は、要素に対して移動カーソルを使いません。
  • サイズ変更ができるオブジェクトに対しては、横、縦、対角線のサイズ変更カーソル (vertical resize cursorhorizontal resize cursordiagonal resize cursor (lower left, upper right)diagonal resize cursor (upper left, lower right)) を使います。
  • 地図など、固定キャンバス内のコンテンツのパンを行うときは、手でつかむ形のカーソル (grasping hand cursor (open)grasping hand cursor (closed)) を使います。

サンプル