クリックエリアについて

gun

2021年10月22日 19:37

2021.10.22

クリック、タップエリアについてのまとめです。

■ポインタ領域とタッチ領域

・ポインタ領域
マウスやスタイラスペンなどでクリックする領域の基準はどのくらいなのか。Googleが推奨する「MATERIAL DESIGN（マテリアルデザイン」にでは「最小領域 44x 44dp」としています。

・タッチ領域
MATERIAL DESIGN では、「最小領域 48 x 48dp 」としており、ボタンやアイコンが48x48dp以下であったとしてもその周りに領域を確保して48x48dpとするように推奨されています。

◎画像出典・引用：MATERIAL DESIGN
https://material.io/design/usability/accessibility.html#layout-and-typography

なお、タッチ領域については、AppleのiOSアプリのデザイン・開発ガイドライン「Human Interface Guidelines（ヒューマン・インタフェース・ガイドライン）」では「最小領域 44x44pt」と推奨しています。

Provide ample touch targets for interactive elements. Try to maintain a minimum tappable area of 44x44 pt for all controls.
◎出典・引用：Human Interface Guidelines
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

WCAG（ウェブコンテンツアクセシビリティガイドライン）でもポインタ領域は「最小領域 44 x 44pixel」と推奨しています。

The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:
　・Equivalent: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;
　・Inline: The target is in a sentence or block of text;
　・User Agent Control: The size of the target is determined by the user agent and is not modified by the author;
　・Essential: A particular presentation of the target is essential to the information being conveyed.
◎出典・引用：WCAG 2.1
https://www.w3.org/WAI/WCAG21/quickref/#target-size

■モバイルアプリのボタンサイズと間隔

モバイルアプリのボタンサイズと間隔について「UX MILK」の「モバイルアプリに最適なボタンサイズと間隔とは」記事でボタンサイズの調査が紹介されています。

この調査では、42ピクセル未満のボタンがユーザーのタッチ精度が最も低いことがわかりました。また、72ピクセルを超えるボタンも精度が低い結果となりました。
◎出典・引用：UX MILK「モバイルアプリに最適なボタンサイズと間隔とは」
https://uxmilk.jp/81679

MATERIAL DESIGN、Human Interface Guidelines ともタッチ領域の最小値は42pixel以上されており、調査結果に適っています。

--------------------------------------------------------
【注意事項】
掲載内容は、独自に調査したものになります。最新の情報と異なる場合もございますので公式サイトにて必ずご確認ください。