タップターゲットは、タッチデバイスのユーザーが操作できる Web ページの領域です。ボタン、リンク、およびフォーム要素にはすべてタップターゲットがあります。
多くの検索エンジンは、モバイルフレンドリー度に基づいてページをランク付けします。タップターゲットが十分に大きく、互いに十分に離れていることを確認すれば、ページはよりモバイルフレンドリーでアクセスしやすくなります。
Lighthouse のタップターゲット監査に失敗する原因
Lighthouse は、小さすぎるか互いに近すぎるタップターゲットのあるページにフラグを立てます。
![不適切なサイズのタップターゲットを示す Lighthouse 監査](https://wd.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6Dhlxe7vkj7gX3e5rX4B.png?auto=format)
48 px × 48 px よりも小さいか間隔が 8 px 未満であるターゲットは、この監査に失敗します。監査に失敗すると、Lighthouse は結果を 3 列構成のテーブルに表示します。
Each SEO audit is weighted equally in the Lighthouse SEO Score, except for the manual Structured data is valid audit. Learn more in the Lighthouse Scoring Guide.
タップターゲットを修正するには
ステップ 1: タップターゲットのサイズが小さすぎる場合は、大きくします。48 px x 48 px のタップターゲットは絶対に監査に失敗しません。大きく表示されてはいけないアイコンなどの要素の場合は、padding
プロパティを増やしてみてください。
![適切なサイズのタップターゲット](https://wd.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ggUhPDcAaExFfcmm8kaF.jpg?auto=format)
padding
を使用すると、要素の外観を変更せずにタップターゲットを大きくできる。ステップ 2: margin
などのプロパティを使用して、互いに近すぎるタップターゲット間の間隔を広げます。タップターゲット間には少なくとも 8 px が必要です。
リソース
- アクセス可能なタップターゲット: すべてのユーザーがアクセスできるタップターゲットを得るための方法に関する詳細。
- 「タップターゲットのサイズが適切でない」監査のソースコード****
更新日 • 記事を改善する