Skip to content
学習する 測定する ブログ Case studies 概要
Join and donate to 🇺🇦 DevFest for Ukraine, a charitable tech conference happening June 14–15 supported by Google Developers and Google Cloud.
このページ内
  • Lighthouse のタップターゲット監査に失敗する原因
  • リソース

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

May 2, 2019 — 更新済み Aug 21, 2019
Available in: Español, 한국어, Português, Русский, 中文, English
Appears in: SEO の監査
このページ内
  • Lighthouse のタップターゲット監査に失敗する原因
  • リソース

タップターゲットは、タッチデバイスのユーザーが操作できる 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 が必要です。

リソース #

  • アクセス可能なタップターゲット: すべてのユーザーがアクセスできるタップターゲットを得るための方法に関する詳細。
  • 「タップターゲットのサイズが適切でない」監査のソースコード****
最終更新: Aug 21, 2019 — 記事を改善する
Return to all articles
共有する
サブスクライブする

Contribute

  • バグを報告する
  • ソースを表示する

関連性のあるコンテンツ

  • developer.chrome.com
  • Chrome のアップデート
  • Web Fundamentals
  • ケーススタディ
  • ポッドキャスト
  • ショー

接続する

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • すべての製品
  • 利用規約とプライバシーポリシー
  • コミュニティガイドライン

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.