Android: 最小のタップ領域サイズは 48dp (UIデザイン, Material Design)

> 2023/08/21: 追記
> Jetpack Compose におけるタップ領域のサイズおよびタッチターゲットについては以下のドキュメントを確認してください。
> https://developer.android.com/jetpack/compose/accessibility

マテリアルデザイン、および Android アプリのデザインには、最適なタップ領域のサイズ (Touch targets) が定義されています。

アプリの実装をするときにはこの最小タップ領域を守って対応しましょう。デザインの段階からこのタップ領域を意識する必要があります。

## 結論

推奨される最小のタップ領域のサイズは 48dp です。

アイコンやボタンの見た目のサイズが 48dp より小さくデザインされることは構いませんが、タップ領域は 48dp となるように実装時に拡張します。

48dp のタップ領域を確保できない場合は最低でも 32dp のサイズを確保します。これよりも小さなタップ領域の UI は実装してはいけません。

## 説明

スマートフォンやタブレットなどのタッチ操作の UI では、タップ領域が小さいボタンはタップが難しくユーザーのストレスとなります。

マテリアルデザインの Accessibility の項目で最小のタップ領域サイズとして 48dp が推奨されています。

見た目のサイズが 48dp より小さくデザインされることは構いませんが、デザインの段階でタップ領域は意識し、近接しているタップ領域と重ならないように UI を配置する必要があります。

24dp などの 48dp を下回るアイコンには padding を設定したり、MaterialButton では inset などを用いて、見た目よりも大きな 48dp のタップ領域を確保します。

他に実装時の工夫としては、タップ領域となる clickable な親の View を用意したり、 [TouchDelegate](https://developer.android.com/reference/kotlin/android/view/TouchDelegate) や、 [View#getHitRect](https://developer.android.com/reference/kotlin/android/view/View#getHitRect(android.graphics.Rect)) も使えそうです。

https://material.io/design/layout/applying-density.html#accessibility

> 48 x 48 dp minimum touch targets should be the default experience in your product

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17931/4c86ac2b-9bff-e5e6-645a-85260c8d8b75.png)

Android Developers の Accessibility の項目でも 48dp についての記載があります。

https://developer.android.com/guide/topics/ui/accessibility/apps#large-controls

> We recommend that each interactive UI element have a focusable area, or touch target size, of at least 48dp ✕ 48dp. Larger is even better.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17931/8e353e60-cfc0-e84f-a129-91736678c6cc.png)

現時点 (2021/8/22) でのマテリアルデザインや Android Developers のドキュメントに 32dp に関する記述はありませんが、Android Developers に 2021/8/12 まで存在していた Tablet app quality の記事 ([Web Archive](http://web.archive.org/web/20210430131411/https://developer.android.com/docs/quality-guidelines/tablet-app-quality)) に以下の記載がありました。 

この記事は 2018/5/5 ~ 2021/8/12 まで公開されており、この記事よりもあとに整備されたマテリアルデザインへ 48dp ルールが引き継がれていると考えられます。

> The recommended touch-target size for onscreen elements is 48dp (32dp minimum)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17931/0e1c738e-021d-e79e-5837-9c0a24db4e1a.png)

また、前述のマテリアルデザインの Accessibility の記事でも 2019/7/8 ~ 2020/4/17 ([Web Archive](http://web.archive.org/web/20191215204125/https://material.io/design/layout/applying-density.html)) までは 48dp を下回る例外についての記載がありました。UI が密集しているような配置では 48dp のタップ領域を確保できない場合がありますが、こちらの例外でも 32dp までの例示となっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17931/add9296b-b8f7-07df-c92e-b599b67b8342.png)

## デザインツールでのタップ領域の扱いについて

24dp のアイコンボタンのようにデザイン上の見た目で境界がはっきりしない UI の扱いについて、デザインツールでの扱いについて確認します。

たとえば、Top app bar に設置される Action item は 24dp アイコンですが、48dp のタップ領域を持ちます。

https://material.io/design/iconography/system-icons.html#system-icon-metrics

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17931/17cf8507-b873-e533-1830-9d556d907707.png)

マテリアルデザインのデザインガイドラインでは、24dp のサイズで隣のアイコンとは 24dp のマージンで配置すると説明されています。

https://material.io/components/app-bars-top#specs

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17931/cbed8576-f416-09bc-5b51-a22efb654af1.png)

また、公式に提供されている Figma リソースを確認しても、48dp のタップ領域の枠はなく、24dp で表現されています。

https://www.figma.com/community/file/778763161265841481

![topbar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17931/2c9416db-f563-1d2f-2c80-31a5d4d8a90e.png)

このことから、デザインの段階ではタップ領域の枠は用意せずに見た目上のデザインで配置をしても構わないと考えられます。デザインガイドラインで示されるマージンなども見た目上での数値となります。

ただし、デザインの段階でもタップ領域を意識する必要があることに変わりはありません。Figma などで補助的にタップ領域の枠を用意しておくなどの工夫をすると、実装担当エンジニアとの共通認識を得やすいですし、より良いデザインができるようになります。

## 実装時のタップ領域の扱いについて

実装時の扱いについても Toolbar の実装を参考として確認します。

24dp のアイコンをメニューに設定して Toolbar を実装すると以下のようなレイアウトとなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17931/2185c335-edd5-3e33-1551-2938cafcf04d.png)

ActionMenuItemView が 48dp で横並びに配置されています。この実装からはデザイン上のアイコンのマージンが 24dp であることは読み取れません。このように、タップ領域の調整のためにレイアウト境界をずらした UI では、デザインで想定している見た目となるように工夫して配置することになります。