タップターゲットのサイズが適切でない

公開日 更新日

翻訳先言語: English, Español, Português, 한국어, 中文, Pусский

タップターゲットは、タッチデバイスのユーザーが操作できる Web ページの領域です。ボタン、リンク、およびフォーム要素にはすべてタップターゲットがあります。

多くの検索エンジンは、モバイルフレンドリー度に基づいてページをランク付けします。タップターゲットが十分に大きく、互いに十分に離れていることを確認すれば、ページはよりモバイルフレンドリーでアクセスしやすくなります。

Lighthouse のタップターゲット監査に失敗する原因

Lighthouse は、小さすぎるか互いに近すぎるタップターゲットのあるページにフラグを立てます。

不適切なサイズのタップターゲットを示す Lighthouse 監査

48 px × 48 px よりも小さいか間隔が 8 px 未満であるターゲットは、この監査に失敗します。監査に失敗すると、Lighthouse は結果を 3 列構成のテーブルに表示します。

Tap Target不適切なサイズに指定されたタップターゲット。
Sizeターゲットの境界矩形のサイズ(ピクセル単位)。
Overlapping Target存在する場合に、他のどのタップターゲットに近すぎているか。

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 プロパティを増やしてみてください。

適切なサイズのタップターゲット
padding を使用すると、要素の外観を変更せずにタップターゲットを大きくできる。

ステップ 2: margin などのプロパティを使用して、互いに近すぎるタップターゲット間の間隔を広げます。タップターゲット間には少なくとも 8 px が必要です。

リソース

最終更新日: 記事を改善する

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.