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

 
 

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

  • 3行で要約すると
  • Googleからメール来た。畏怖thenエルサ
  • モバイルビュー時のタップ要素で近すぎる部分があるよ。直そう!
  • 原因はWordPressのタグクラウド部分 ⇒ 対応

Googleからメールが届き

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

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

GoogleWMT-Mobile-UX-chk-2

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

GoogleWMT-Mobile-UX-chk-0

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

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

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

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

Google-MobileFriendlyTest

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

ホッ。そーだよね、ちゃんと作ってるもんねウヒヒ(^w^

とか油断してました orz

そういえばちょっと前にウェブマスターツールに tap elements too close てアラート出てたなぁと認識はしつつも。。忙しさにかまけてToDoリストの端に追いやっ(≒放置し)てましたザマス。。。リマインダーメールを頂けるとは (((^_^;; Google先生、マジ凄いすね。親切ですね。ありがたいですね。でもちょっとオソロシイです。

ちなみにGoogle先生は、モバイルフレンドリーでない有様のことを ”non-mobile-friendly” という語で記しています。「モバイルアンフレンドリー」は「シャープペンシル」同様、外国の方々には通じないと思いますので悪しからず。。

WPのタグクラウドが原因

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

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

こんな感じに修正。

GoogleWMT-chk-TagCloud-BeforeAfter

確かに先生のおっしゃる通り、改善前のは明らかに….夜露死苦無威deathね…. (-_-;;;

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

タグクラウド周りもデフォルトのままにせず、スマホUX考えてCSS設定してやらなアカンのだなぁ、うーむ勉強になりました。。お客さんのトコの作る時は気を付けなければ….ってか、早速アソコのも修正しなくちゃ(汗 ゴゴゴゴメンナサーイ!



SWOT分析--概要(クロスSWOTマトリクス・8マス) 能動的にモテる! ゆるSWOT分析 ~ 魅力をわかりやすく発信 @ ビジネス差別化
わかりやすい案内表示(1) 案内表示・実用的フラットデザイン
既存サイト改善点…CMSが仇になっている例
英語教室のロゴ
Flexboxでレスポンシブ、ゆるいCSSフレームワーク (グリッドシステム風)
apple-アッポー [CSS] 背景画像がPC版Safariのみ表示されなかった例
Firefoxレスポンシブデザインビュー デラ便利!Firefoxのレスポンシブデザインビュー
エックスサーバー+WordPressにPHP7導入 ⇒ 問題なく動いてる&速くなった気が【PEAR追記あり】

Name * (必須)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

í
up