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

SEOならSEOパック
ご利用実績8911件 (2017/03/24現在)
2016年04月14日 2016年09月08日

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

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

今回はモバイルフレンドリーをテストするために、このような仮のページを用意しました。(横幅:pc用960px/スマホ用100%)
20150331_responsive-web-design-mobile-friendly-test_02

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

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

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

検索1位!のサイト多数!【月額固定】7,980円(税込)の低価格SEO対策

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

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

20150331_responsive-web-design-mobile-friendly-test_04

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

ビューポート設置なし

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

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

20150331_responsive-web-design-mobile-friendly-test_03

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

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

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

20150331_responsive-web-design-mobile-friendly-test_05

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

li a {line-height:0;}

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

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

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

.container{width:100%;}
検索順位に満足していますか?SEO Packなら今すぐSEO対策することができます!

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

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

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

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

SEO内部対策 トップに戻る
SEO内部チェックツール SEO内部チェックツール

検索順位を上げる
SEO対策しませんか?

検索結果のランキングを決める重要な要素のひとつが「リンク」です。

SEO PackならSEOに重要なリンクをはじめ、SEOに関するノウハウやSEO対策をするための管理ツールが揃います。
また、内部対策の状態も確認することができ、改善方法などもご案内します。
  • 検索順位を上げたい
  • リンク対策をしたい
  • ある程度自分でSEO対策を把握したい
  • 対策中の順位推移を確認したい
  • 変動に強いSEO対策をしたい

上記にひとつでも当てはまる方は、SEO Packの導入をおすすめします。
お試しもご用意しておりますので、詳しくはサービスの内容・特長をご覧下さい。

SEOツールseodoor(せおどあ)に無料版が登場しました