レスポンシブデザイン簡単導入法03 – モバイルフレンドリー テスト編

レスポンシブデザインを導入する際に、モバイルフレンドリーのテストで確認されるかと思いますが、エラーの項目とそれぞれの合格ラインを確認したものをまとめたいと思います。
ぜひ、スマホ対応の参考にしてみてください。
https://www.google.com/webmasters/tools/mobile-friendly/?hl=ja

今回はモバイルフレンドリーをテストするために、このような仮のページを用意しました。（横幅：pc用960px/スマホ用100%）

そして、モバイルフレンドリーに合格するためにはこちらのエラー項目をクリアする必要があります。

• テキストが小さすぎて読めません
• モバイル用 viewport が設定されていません
• リンク同士が近すぎます
• コンテンツの幅が画面の幅を超えています

これらを色々な設定でテストしてみたいと思います。

フォントサイズの合格ライン

モバイルフレンドリーのテストページで確認してみたところ、11pxでエラーが消えました。フォントサイズを10px以下にしている箇所は注意です。

ただ、モバイルフレンドリーはスマホで閲覧した時の見やすさに重点を置いているので、小さくても12pxほどにしておいた方が良いでしょう。
※このテストページでは10pxでエラーが出ましたが、これを参考に、ご自分のサイトでもテストしてみてください。

ビューポート設置なし

この場合、当然モバイルフレンドリーとは言えないので、「モバイル用 viewport が設定されていません」のエラーが出ます。

pc用cssが読み込まれているため、横幅によっては、「コンテンツの幅が画面の幅を超えています」のエラーも表示されました。

モバイルフレンドリーは画面サイズで表示することが重要のようです。
ちなみにこの状態から、cssで横サイズを340pxにしても、正しくビューポートが設定されていないため、縮小表示されてしまいます。

リンク同士を近づけてみる

今回のテストページでは、色々試しましたが「リンク同士が近すぎます」というエラーは出ませんでした。

なんと、cssをこの設定にしてみてもこのページでは、エラーが出ませんでした。

li a {line-height:0;}

画像リンクも試してみましたが、全てのテキストリンクをほぼ重ねてもエラーが出なかったので、まだこの項目はモバイルフレンドリーとしての優先順位が低いのかもしれません。このエラーに関しては、また何かわかり次第、追記したいと思います。

コンテンツの幅を変えてみる

こちらは先ほど試したものと同じく、「コンテンツの幅が画面の幅を超えています」とエラーが出ました。cssで横幅の大枠は100%に設定しましょう。※クラス名は任意で。

.container{width:100%;}

モバイルフレンドリーについてまとめ

以上がモバイルフレンドリーに合格するポイントとなりますが、スマホ対応にして検索エンジンにインデックスし直してもらう、ということは一旦、順位が落ちる可能性が十分考えられます。
日頃から被リンクによる外部対策も考慮して素早いインデックス・評価でスマホでも上位表示を目指しましょう。

また、レスポンシブデザインの作り方については下記の記事をご参考ください。
→レスポンシブデザインの作り方すべて

モバイルフレンドリーに合格してスマホ対応したとしても順位が上がるわけではなく、日頃からのSEO対策で基礎をつくることが大切です。
SEO Packでは、わかりやすい3ヶ月/6ヶ月契約をご用意。あなたのサイトの上位表示のお手伝いを致します！