「タップ ターゲットのサイズが適切に設定されていません」と言われるとき

最終更新日: 公開日: 2022年10月

PageSpeed Insights の仕様がまた変わっていたので,新しいPageSpeed Insights 対策
新たに「ユーザー補助」「おすすめの方法」「SEO」の項目が現れた.

その中の SEO の中に「タップ ターゲットのサイズが適切に設定されていません 56% でタップ ターゲットが適切なサイズに設定されています」などのように警告が表示されるようになった.

タップ ターゲットのサイズが適切に設定されていません

下の説明文には
「ページをスマホ対応にして、ピンチ操作や拡大操作なしでコンテンツを読めるようにします。」
とある.
「詳細」のリンクをたどると
「48 px × 48 px よりも小さいか間隔が 8 px 未満であるターゲットは、この監査に失敗します。」
と書いてある.
なので,スマホの時はリンクの間隔を 8px 以上に開ける必要がある.

タップ ターゲットのサイズを適切なものにするには

タップターゲットのサイズが適切でないのページに対策方法が書いてある.

具体的には

  • タップ(クリック)できるターゲットのサイズを大きくするために padding を大きくする方法
  • ターゲットの間隔を広げるために margin を大きくする方法

である.
ただし,8px 以上開けていてもどうも警告が消えないケースがある.
「少なくとも」と書いてあるので絶対ではないらしい.
少しずつ大きくしていって警告が出ないサイズまで大きくする.

このサイトの場合は上部にある「パンくずリスト」と下にある「タグクラウド」で警告を受けた.
まあ,確かに小さいと言えば小さいので素直に修正すると警告は消えた.

PageSpeed Insights 対策

PageSpeed Insights 対策の一覧.他の対策は以下を見てください.
 

Contact

ご質問等ありましたら,お手数ですが弊社の個人情報保護方針をお読み頂いた上でフォームからお願い致します.

 
   
contact
Pagetop