タップ領域を指のサイズに合わせる

タップ領域(ボタン、リンク、フォームのフィールドなど)が適切に調整されていないと、誤って別のリンクを押してしまうなど、モバイルでは使い勝手の悪いものとなってしまいます。

実際に使用している人は、実感していると思いますが、指での操作となるタッチスクリーンでは、PCで使用するマウスカーソルと比較した場合、的確に目的の対象物を押すことが少し難しいのです。単純な話ですが、指よりも小さな範囲に3つのボタンがあったとすると、それをきちんと押すことができるでしょうか。つまり、指の大きさをもとに、行聞や余自に余裕をもたせ、なおかつボタンサイズにも考慮した設計が必要となるのです。

Googleの推奨サイズ

タップ領域の最小サイズ

以下にGoogleの推奨サイズを紹介します。平均的な大人の指の腹は、約10ミリとのことです。また、Android UIのガイドラインを参照すると、Googleはタップ領域の最小の推奨サイズを7ミリと定めています。

最小サイズを下回る場合

なお、使用頻度の低いリンクは推奨より小さくてもよいのですが、2つ条件があります。

• リンク間に5mm(32px)以上のスペースを確保する
• ズームする必要がないようにする

PageSpeed Insightsで修正箇所を確認する

これらのルールが守られていない場合、「PageSpeedInsights」の「ユーザーエクスペリエンス」で、修正箇所を具体的に教えてくれます。