どうもこんばんは、佐谷です。
4月21日が過ぎて、モバイルフレンドリーが検索結果に現れ始めて焦っている方もおられるのではないでしょうか。
今回はモバイルフレンドリーの具体的な対応策について紹介します。
モバイルフレンドリーとは、モバイル端末からの検索結果において、そのページが「モバイルフレンドリー」であるかどうかが、検索ランキングを決める際の指標の1つとして用いられるようになるというものです。
「うちはスマホサイトがあるから大丈夫〜」という人もまずは以下のモバイルフレンドリーテストから検証してみることをおすすめします。
影響範囲はページ単位なので、全ページチェックすることをおすすめします。
せっかくスマホサイトを用意していてもモバイルフレンドリーテストでNGが出ていると意味がありません。
大抵の場合は以下のエラーがほとんどだと思います。
①モバイル用viewportの有無
meta viewport タグを使用してビューポートを指定する必要があります。
ビューポートの設定は以下をheadに入れます。
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
このタグは端末に合わせてページのサイズとスケーリングを調整する方法をブラウザに指示します。
サイトにアクセスするユーザーは、大きなデスクトップモニター、タブレットや小型のスマートフォンなど、画面のサイズが異なる端末を使用しています。
このビューポートを設定することで、ユーザーが見ている画面サイズに合わせてサイトのコンテンツを調整してくれます。
②テキストの大きさ
フォントサイズが小さすぎて読みにくく、読むためには拡大する必要があるページに対してこのエラーが表示されます。
まずは前述のビューポートを設定した上で、フォントのサイズを調整しましょう。
Googleが推奨するフォントサイズの基準は以下の通りです。
・基本のフォントサイズは16px以上を使用する
・基本サイズに対して相対的なサイズを使って、フォントの拡大縮小を定義する
・フォントの行間に関しては1.2 em を設定する
・使用されるフォントの数と拡大縮小を制限する
実際に弊社のクライアント様のサイトでは、基本フォント14pxだとNGが出ました。
③リンク同士の近さ（ボタンやリンク）
リンクやボタンが小さかったり、近すぎると誤タップが起きやすくなるため、タップターゲット（ボタン、リンク）の最小サイズは約7ミリ（モバイル ビューポートを適切に設定済みのサイトで、48 CSS ピクセル）以上が必要です。
Googleによると使用頻度の低いリンクやボタンについては推奨サイズの 7 ミリより小さくしても大丈夫とのことです。
ただし、ユーザーが指でタップ ターゲットを押したときに誤って別のタップ ターゲットをタップしないように、水平方向と垂直方向で 5 ミリ（32 CSS ピクセル）以内に他のタップ ターゲットを配置しないようにしましょう。
まとめ
①モバイル用viewport
ヘッダーに以下のタグを挿入。
②テキストの大きさ
・基本のフォントサイズは16px以上を使用する
③リンク同士の近さ
・ボタンの大きさ（高さ）は50px以上
・使用頻度の低いリンクやボタンは50px以下でも構わないが、32px以上の間を空ける
以上がモバイルフレンドリーの対策のポイントになります。
これを守れば出現頻度の高いエラーは対応が可能だと思われます。
前述のとおり、スマホサイトがあってもモバイルフレンドリーでなければ何の意味もありませんので、まずはサイトを確認して、対応していきましょう！
