[UX] モバイルアンフレンドリーな箇所の修正:Googleからの是正勧告

caution三行で要約すると

  1. Googleから警告メール来た
  2. モバイルビュー時のタップ要素で近すぎる部分があるよ。直そう!
  3. 原因はWordPressのタグクラウド部分 ⇒ 対応

Googleからメールが届き

ここが良くないよ! 改善してね!

と、ページURL一覧に加えて採点と的確なご指摘・分析、詳細なチュートリアルページ(Page Speed Insights)への誘導を賜りました。

GoogleWMT-Mobile-UX-chk-2

! Consider Fixing:
Size tap targets appropriately … Mobile Usability > Touch elements too close
リンクとリンクが近すぎて、モバイルではタップ困難ですよ』というものです。

GoogleWMT-Mobile-UX-chk-0

タップ ターゲットのサイズを適切に調整する

タッチスクリーンでは、リンクやボタンが小さかったり、近すぎたりすると、従来のマウス カーソルよりも正確にタップするのが難しくなります。ユーザーが間違えて誤ったターゲットをタップして困惑しないように、タップ ターゲットは十分に大きくし、他のタップ ターゲットに指を重ねずに押せるよう十分に離す必要があります。平均的な大人の指の腹のサイズは幅約 10 ミリで、Android UI のガイドラインで推奨されるタップ ターゲットの最小サイズは約 7 ミリ(モバイル ビューポートを適切に設定済みのサイトでは 48 CSS ピクセル)です。

Google Developers : タップ ターゲットのサイズを適切に調整する

モバイル フレンドリー テスト

Google-MobileFriendlyTest

何ヶ月か前に、Googleが「うん、このサイトはちゃんとモバイル対応してるね。モバイルフレンドリー認定!」と、モバイル対応/非対応を明快に区分する(そして今後はモバイルから検索した際の表示順位に関係してくる)というのがニュースになった時、 公式のテストツール でチェック ⇒ OK判定だったので、安心(油断)していましたが

そういえばちょっと前にウェブマスターツールに tap elements too close てアラート出てたなぁと認識はしつつも。。忙しさにかまけてToDoリストの端に追いやってました。リマインダーメールをいただけるとはありがたいです。

ちなみにGoogle曰く、モバイルフレンドリーでないのことを ”non-mobile-friendly” という語で記しています。「モバイルアンフレンドリー」は「シャープペンシル」同様、アレですね;

WPのタグクラウドが原因

見てみると・・・どーやら問題は、WordPressのタグクラウド部分のようでした。なるほど間隔詰まり過ぎてます。 早速、CSSに手を加えて

CSS
#sidebar div.tagcloud a {
  display:inline-block !important;
  line-height:1.2em !important;
  padding:5px !important;
}

こんな感じに修正。

GoogleWMT-chk-TagCloud-BeforeAfter

確かにご指摘の通り、改善前のは明らかに … よろしくないですね …

これで様子見てみます。issueリストからも消えてくれることを願います(-人-)

タグクラウド周りもデフォルトのままにせず、スマホUX考えてCSS設定してやらなアカンのだなぁ、と勉強になりました。

お役に立ちましたら、シェアしていただけると嬉しいです😀

はてなブックマークに追加Add
クリップボードにコピーCopy URL
Author

林@零細Web屋

名古屋の自営業者(フリーランス12年目)です。中小/個人の事業者さんが抱えるお悩みの解決・目的達成のお役に立てるよう、Webサイト制作&運用支援を行っています。かつて中小企業で情報システム・広報・採用などを担当していた経験を活かし、受け手の目線に立った仕事を心がけています。

» プロフィール詳細 » 問い合わせてみる