タップ領域

定義

タップ領域とは、ボタンやリンクのようにユーザーが押す要素を、指で正確に タップできるように確保しておく最小サイズのことです。マウスカーソルは 尖った一点ですが、指先は広くて丸みがあるため、画面上でどれだけ小さく 見えても、実際に反応する範囲はゆったり確保しておく必要があります。 広く使われている目安はおよそ44px前後で、これはアイコン自体の大きさではなく、 アイコンを囲むパディングまで含めた反応領域全体を指します。見た目の大きさと、 実際に反応する大きさを分けて考えることが、この概念のもっとも大切なポイントです。

なぜ重要か

小さなタップ領域は、誤タップ、つまり意図しない押し間違いを何度も引き起こします。 押したいボタンの代わりに隣が反応したり、何も反応しなかったりすると、ユーザーは 同じ場所を繰り返し叩くことになり、そのストレスが積み重なると最終的にページを 離れてしまいます。特に移動中や片手で操作するモバイル環境では、指を正確に 狙いにくいので、ゆとりのある大きさがいっそう重要になります。逆に十分な タップ領域は、一度で正しく反応するという安心感を与え、ユーザーが画面を快適に、 そしてすばやく扱えるようにします。手が震えやすい人や小さな対象を狙いにくい人に とっては、これは単なる便利さではなくアクセシビリティの問題でもあります。 つまりゆとりあるタップ領域は、より多くの人がミスなく使える画面をつくる、 目立たないけれど根本的な配慮なのです。

よくある間違い

• アイコンの見た目の大きさだけを見て、反応領域まで小さくしてしまうことです。 16pxほどの小さなアイコンでも、周囲にパディングをたっぷり与えて、実際の 反応領域を44px以上に広げてこそ、指が外れにくくなります。
• ターゲット同士を近づけすぎることです。それぞれのボタンが大きくても、 ぴったりくっついていると境目で隣のボタンが誤って押されやすくなります。 大きさだけでなく、ターゲット間の間隔もあわせて確保しましょう。
• デスクトップ画面だけで確認して、マウスでちゃんと押せるから大丈夫と 済ませてしまうことです。カーソルの精密なクリックと指の丸いタップは 別物なので、必ず実機のスマホで指を使って押してみて、大きさと間隔を 点検してください。

実務のヒント

• アイコンが小さく見えても、パディングを含めたタップ領域は最低44px以上を 目安にしましょう。見た目の大きさはデザインの調和に合わせつつ、実際に 反応する領域は指を基準に別で確保するという原則を決めておけば、誤タップが 大きく減ります。
• 横に並んだ小さなボタンの間には、最低限の間隔を必ず設けましょう。特に削除や 決済のように取り返しのつかない操作のボタンは、ほかのボタンから十分に 離しておき、うっかり押されることを仕組みとして防ぐと安全です。
• アイコンを見た目には大きくしたくないときは、目に見えないパディングで 反応領域だけを広げましょう。小さくすっきりしたアイコンの印象はそのままに、 指が届く範囲はゆったりするので、デザインと使いやすさを同時に守れます。

関連概念