タップ領域を指のサイズに合わせる
タップ領域(ボタン、リンク、フォームのフィールドなど)が適切に調整されていないと、誤って別のリンクを押してしまうなど、モバイルでは使い勝手の悪いものとなってしまいます。
実際に使用している人は、実感していると思いますが、指での操作となるタッチスクリーンでは、PCで使用するマウスカーソルと比較した場合、的確に目的の対象物を押すことが少し難しいのです。単純な話ですが、指よりも小さな範囲に3つのボタンがあったとすると、それをきちんと押すことができるでしょうか。つまり、指の大きさをもとに、行聞や余自に余裕をもたせ、なおかつボタンサイズにも考慮した設計が必要となるのです。
Googleの推奨サイズ
タップ領域の最小サイズ
以下にGoogleの推奨サイズを紹介します。平均的な大人の指の腹は、約10ミリとのことです。また、Android UIのガイドラインを参照すると、Googleはタップ領域の最小の推奨サイズを7ミリと定めています。
最小サイズを下回る場合
なお、使用頻度の低いリンクは推奨より小さくてもよいのですが、2つ条件があります。
- リンク間に5mm(32px)以上のスペースを確保する
- ズームする必要がないようにする
PageSpeed Insightsで修正箇所を確認する
これらのルールが守られていない場合、「PageSpeedInsights」の「ユーザーエクスペリエンス」で、修正箇所を具体的に教えてくれます。