意外に説明できない？指とマウスポインターの操作性の違い

kikawa mizuki

UIデザイナー

2023.02.20

アイデアを形にする

#UIデザイン

リンクをコピーしました

この記事は約12分で読めます。

こんにちは！mizuki（@kikapyon）です。

マウスを使用する従来のデスクトップと、タッチスクリーンを備えたタブレットまたはモバイルの両方でアクセスできるサイトでは、両方の入力タイプに対応する必要があります。モバイルとデスクトップでは、画面の大きさ、ツールが異なるためユーザーのゴールが同じでも操作性が異なるためです。

例えば、ホバーやコンテキストメニュー（右クリックメニュー）。マウス操作の場合にはホバー状態があるためツールヒントやロールオーバー効果をデスクトップで適切に分かりやすく使用できます。同様に、コンテキストメニューは、2ボタンコントロールが可能なマウスによって対応できます。これらのデザイン要素は、タッチスクリーンだと不自然です。

また、ターゲットが小さければ小さいほど正確にタップするのが難しくなります。これにより、ユーザーはより多くの認知的努力を必要とし、タップのミスをするとストレスを感じたりします。本来ボタンを押すのは簡単な作業でありますが、ユーザーがボタンをうまくタップできないと自責思考になってしまい、ネガティブな体験につながってしまいます。

それぞれの違いを正しく理解しながら、ユーザーの心地良い体験につながるようなUIを作るためのコツをまとめました。マウスポインターと指の強み、弱みが理解できる内容になっています。ぜひ最後までご覧ください。

指とマウスポインターの比較
- 推奨ターゲットサイズの定義
モバイル
- 画面内の範囲について
- サイズについて
PC
- 画面内の範囲について
- サイズについて
おわりに
参考文献

指とマウスポインターの比較

私たちは基本的にスマホの場合は指、デスクトップの場合はマウスポインターを使用しているのでモバイル版とPC版で操作性の違いがあることは自然なことです。

ユーザーによって個人差があり、触れる面の大きい指の場合と、細かい部分の調節がしやすいマウスの場合では要素の大きさ（クリッカブルの範囲）なども異なってきます。

こちらはそれぞれの特徴を表した図です（これだけの違いがあります）。

	マウス	指
精度	高い	低い
タッチポイント	1	1〜複数
コントロール方法	3つ（左右クリックボタン、スクロールホイール）	1つ
ホーミングタイム	必要	不要
操作	ホバー、マウスダウン、マウスアップ	フィンガーダウン、フィンガーアップ
高速移動	適している	適していない
大画面（30インチ以上での使用）	適している	適していない
可視ポインター/カーソル	ある	ない
タッチポイントが画面を遮る	いいえ（インタラクションデザインが必要）	はい
学びやすさ	学習時間は必要だが簡単	学習時間は実質ゼロ
持ち運び/携帯	適している	適していない
アクセシビリティのサポート	適している	適していない

※表に関する注意事項※

ホーミングタイム
キーボードなどの入力デバイスからマウスなどの別の入力デバイスへの移動に必要な時間です。
高速移動
マウスを速く動かすと、画面上のポインターがさらに速く移動します。逆に、マウスをゆっくり動かすと、ポインターの動きが遅くなり、より精度の高いターゲッティングが可能になります。
学習時間は実質ゼロ
ただし指を使ってタッチスクリーンを操作するには、ユーザーがすでに手や指を十分に器用に使えるようになっていることが前提です（まだ幼い赤ちゃんは数年かかります）。
タッチポイントが画面を遮る
ユーザーが指先ではなく指の腹をタッチに使用すると、マウスポインターよりはるかに広い領域を覆うだけでなく、タッチしようとしているターゲット要素を完全に隠してしまうこともあります。

推奨ターゲットサイズの定義

モバイル及びデスクトップのターゲット（ボタンなどの要素）ついての推奨サイズは、次の場合を除き、少なくとも44×44CSSピクセル推奨というW3Cの定義があります。

同等のものが存在する
そのターゲットと同じリンクまたはコントロールが同じページに44×44CSSピクセル以上のサイズで存在する。
文章内の要素である
そのターゲット要素が文章またはテキストブロック内に存在する場合は、22×22CSSピクセル以上を推奨。
ユーザーの、デバイス・OS・ブラウザなどによるコントロールである
ターゲットのサイズがユーザーエージェントによって制御されていて、かつコンテンツ制作者が変更していない。
必要不可欠である
そのターゲットを特定の方法で提示することが、情報伝達にとって必要不可欠である。

注意したいのが、この基準はあくまで最低限のターゲットサイズの定義ということです。フィッツの原則にもあるように、サイズの大きなボタンを設計するとユーザーはアクションを正しく行いやすくなります。

特に、年齢層の高いユーザーは小さなボタンを簡単にタップできない場合があります。ユーザーが意図せずに間違えてしまう可能性を減らすために、推奨サイズよりも大きなサイズを使用することをおすすめします。

モバイル

画面内の範囲について

こちらの調査によると約半数のユーザーが片手でモバイル端末を持っていることが分かっています。
片手で持つ：49%

片手に反対の手を添える：36%

両手で持つ：15%

まずモバイルの場合は親指の届く範囲を考慮することをおすすめします。図のように画面の中でも、操作しにくい箇所が存在するため、ボタンなどのアクションにつながる要素は操作がしやすい箇所に設計するとよいです。特に、昨今の縦長のデバイスでは、届きにくい部分があるので注意が必要です。

サイズについて

平均的な人の指先の幅は1.6cm〜2.0cmです。親指の接触面積はさらに大きく、平均幅は 2.5cmです。そのためモバイルの場合は、この数値を考慮した上でターゲット要素のデザインをしなければなりません。

特に以下のようなユーザーが使用する場合、特に意識してデザインすることをおすすめします。

タッチスクリーンが主要な操作モードでありモバイルを使用するユーザー
手の震えなどの運動障害のあるユーザー
公共交通機関などの揺れにさらされる環境でモバイルを使用するユーザー
細かい運動が苦手なユーザー
片手でデバイスを使用するユーザー
指が大きいユーザー、または指や指の関節の一部だけで操作しているユーザー
ターゲットを大きくすることで見やすくなることが期待できるロービジョンのユーザー

上記を踏まえ、アプリを使用するさまざまなタイプのユーザーについても考慮することが重要です。

また、アプリのインターフェースを設計するときは、ユーザーがタップしやすいようにタッチターゲット（タッチ可能な領域）を大きくすることをおすすめします。多くの場合、実はUIの視覚的な境界を超えてタッチターゲットが拡張されています。

PC

画面内の範囲について

PCの場合は、モバイルのように、マウスが届かない箇所は基本的にありません。

そこで留意したいのは画面端に設置されたターゲット要素です。画面端に配置されている要素にマウスポインターが到達する際は、通り過ぎてしまう危険がありません（画面の端に当たると自動的に止まるため）。そのため、ユーザーはターゲットが画面の中央にある時に比べて、早く要素に到達できます。

実際にmacにも左右上や中央下にも通り過ぎることの無い要素が採用されています。

ただし、画面端の配置はマウスまたはトラックボール駆動、トラックパッドなどのUIではメリットがありますが、タッチスクリーンでは効果はありません。逆にモバイルなどのタッチスクリーンデバイスの場合は、画面端に配置されたターゲットに到達するのに時間がかかってしまいます。このことからもデザインやデバイスにあわせて最適化をする必要があるのが分かります。

もっとターゲット要素についての最適化について知りたいという方は、こちらも併せてどうぞ。

サイズについて

マウスポインターのサイズから要素サイズの検討をしました。フィッツの法則にもあるように、要素サイズは大きければ大きいほどよいですが、どれだけのサイズを持たせるとある程度快適なUIにできるのでしょうか。ここからは私の見解をお伝えしたいと思います。まずマウスポインターのサイズは約15×15px。この数値以下の要素サイズは「小さすぎる」ということです。