#241
UI設計パターン
#241ふぁっとふぃんがーもんだい
ファットフィンガー問題
別名・表記:Fat Finger ProblemFat Finger Error
UIXHERO Definition
「指が太くて押し間違えるやつ」。スマホでリンクが密集していると発生しやすいイライラの元。
概要
人間の指には一定の幅があり、マウスのような精密なポインティングはできない。 特に歩行中や片手操作時は精度が落ちるため、この問題が発生しやすい。 AppleやGoogleのガイドライン（タッチターゲットを44pt/48dp以上にする）は、主にこの問題を回避するために設けられている。
UXでの活用
- 十分な余白（マージン）: 要素同士の間隔を広げることで、多少タップ位置がズレても隣の要素に反応しないようにする。
- パディングの活用: 見た目のアイコンやテキストは小さくても、透明なパディングを含めてタップ領域を広げる。
- ズーム対応: 誤操作しそうな箇所では、長押しで拡大鏡を表示する（テキスト選択時など）UIを採用する。
💡 使いどころ
モバイルUIのデザインレビュー時。リンクやボタンが密集していないか、タップ領域が十分かをチェックする際に指摘する用語。
⚠️ 注意点・誤用
ユーザーの指が太いことが悪いわけではなく、UI側の設計ミス（マージン不足、サイズ不足）として捉えるべき問題。
具体例
- ページネーションの数字（1 2 3...）が小さすぎて隣を押してしまう
- 広告の「×」ボタンが小さすぎて、広告本体をクリックしてしまう
出典・参考文献:
- Apple Human Interface Guidelines – Touch Targets
- Google Material Design – Touch Target Size