スマホ対応ラベルはFlash、文字、画面幅、リンク間隔をページ単位で確認する

Googleのモバイル検索結果に、条件を満たしたページを示す「スマホ対応」ラベルが加わりました。確認するのは、Flashなど携帯端末で一般的でないsoftware、拡大しなくても読める文字、横scrollを必要としない画面幅、指で押し分けられるlink間隔です。

site全体を一度に「対応済み」と考えず、検索から入口になるページを一つずつ試します。モバイル フレンドリー テストは一つのURL、Googleウェブマスターツールのモバイル ユーザビリティはsite全体で検出された問題を調べるために使い分けます。

スマホ対応ラベルの四条件を分けて直す

Googleのスマホ対応ラベルに関する発表は、Googlebotが検出する条件を四つに分けています。

四つを「mobile対応」という一語にまとめると、修正担当と確認方法が曖昧になります。表示できない部品、文字、layout、操作対象へ分け、問題のあるページと部品を記録します。

viewportを設定してから固定幅を探す

画面幅の問題では、最初にviewportを確認します。GoogleのPageSpeed Insightsに関する案内は、mobile化の最初の手順としてwidth=device-widthを指定するよう勧めています。

<meta name="viewport" content="width=device-width, initial-scale=1">

この指定を加えただけで、すべての内容が画面へ収まるわけではありません。次に、幅を固定したcontainer、大きすぎる画像、折り返さない文字列、table、form部品を調べます。

img {
  max-width: 100%;
  height: auto;
}

画像へこの指定を使えるかは、元のlayoutと画像の役割を見て判断します。地図、商品表、code、長いURLなどは、単純に縮めると読めなくなる場合があります。内容を組み替えるか、必要な範囲だけ横へ動かせるようにするかを分けます。

文字サイズとlink間隔は実機でも確かめる

文字が読めるか、目的のlinkを押せるかは、数値だけでは決まりません。同じfont sizeでも、書体、行間、背景とのcontrast、画面幅で読みやすさが変わります。linkも、文字の周囲に押せる範囲があるか、隣のlinkと離れているかで操作しやすさが変わります。

代表的なsmartphoneで、次の流れを実際に操作します。

1. 検索から入る想定のURLを開く
2. zoomせず見出しと本文を読む
3. navigationと本文中のlinkを一つずつ押す
4. formへ入力し、送信直前まで進む
5. 画面を横へ動かさないと見えない内容を記録する

モバイル フレンドリー テストの判定と、利用者が操作できることは同じではありません。自動testで条件を確認し、実機では内容を読み、目的の操作を完了できるか確かめます。

一つのURLとsite全体のreportを分ける

モバイル フレンドリー テストでは、指定した一つのページを確認します。修正前後で同じURLを試せるため、代表ページの原因を切り分ける用途に向いています。

Googleウェブマスターツールのモバイル ユーザビリティreportは、site全体で検出された問題を追うために使います。reportには、Flash、viewportの欠落、文字が小さいこと、固定幅のviewport、viewportへ収まらない内容、近すぎるlinkやbuttonなどが表示されます。

reportに問題が出たら、件数だけを減らそうとせず、同じtemplateを使うURLをまとめます。一つのtemplate修正で複数ページを直せる場合と、本文へ埋め込んだ表や画像をページごとに直す場合を分けてください。

ラベルと順位を同じ成果にしない

Googleは、スマホ対応の条件を順位のsignalとして使うことも実験中だと説明しています。したがって、現時点で「ラベルが付けば順位が上がる」とは断定できません。

ラベルの確認、mobileでの利用しやすさ、検索順位、問い合わせや購入は、別の結果です。まず、検索から開いた人が内容を読めず、linkを押せず、横scrollを強いられる問題を直します。順位への期待を先に置くと、testの合格だけを目標にして、実際の閲覧と操作を見落とします。

template修正の責任範囲を残す

WordPressなどのCMSでresponsiveなthemeへ変更しても、本文へ固定幅のtableや画像が残れば、個別ページで問題が出ます。theme、plugin、本文、外部埋め込みのどこが画面幅やlink間隔を決めているかを分けます。

制作会社へ修正を依頼するなら、次の四点を納品記録へ残します。

• 確認した代表URLとtemplate名
• 修正したCSS、theme、plugin、本文の範囲
• 修正前後のtest結果と確認日
• 本文追加時に守る画像幅、table、link配置の規則

themeを納品して終わる作業と、新しいページをmobileで読める状態に保つ運用は別です。更新担当が規則を使えなければ、記事や商品を追加するたびに同じ問題が戻ります。

最初の一手は、mobile検索から入ってほしいページを三つ選び、モバイル フレンドリー テストへ一つずつ入力することです。結果をFlash、文字、画面幅、link間隔へ分け、最も多くのページに共通するtemplateの問題から直してください。