スマホ対応しないとGoogleモバイル検索で順位が落ちるということで急いで対応。│株式会社イー・エージェンシー

スマホ対応していますか？

スマホ対応が、Googleモバイル検索のランキング要因になると発表されました。

4月21日までにスマホ対応しないとGoogleアルゴリズム変更で順位が落ちるということで急いでスマホ対応。

サイトがモバイルフレンドリーかどうか（モバイル対応・スマホ対応しているかどうか）をランキング要素として使用することをGoogleは発表しました。この発表を、聞いて焦っている人が多いように思います。

多数のサイトを管理している弊社でも、モバイル対応・スマホ対応していないサイト、ページがあることを、Googleのウェブマスターツールのアラートから知ることが出来ました。昨月になりますが、そのアラートをもらったため、対応できていないサイトについてすぐにモバイル対応・スマホ対応することにしました。

ウェブマスターツールのモバイルユーザビリティ上の問題の解説とスマホ最適化の流れをブログにしてみました。

※スマホ対応に関するGoogleのアルゴリズムの変化についてと疑問についてはこちらをしっかり読むことをオススメします。

イー・エージェンシーのshutto（シュット）なら「スマホ対応」もばっちり | スマホ対応ツール『shutt0』[PR]

[6/6更新]ブログをモバイル対応した後の変化 −− モバイルからの検索トラフィックが僕のブログは半減しました | 海外SEO情報ブログ

Googleからスマホ対応していないサイトについて警告メッセージが来た。

2015年1月29日に、Googleのウェブマスターツールズから「さぶみっと！メール（http://www.submit.ne.jp/mail/）」サービスのサイトに、問題があると警告メッセージが来ました。

内容は、以下のとおりです。

モバイルユーザビリティ上の問題が検出されました。

image1_R

通知があったサイトは、僕らにとってとっても大事なサイトでした。そこで至急対応するように、担当スタッフにお願いすることにしました。

モバイルユーザビリティ上の問題について

Googleウェブマスターツールから「モバイルユーザーが該当サイトを十分に表示して楽しむことが出来ません」とアラートが来ていました。モバイルフレンドリーとみなされていないため、スマートフォンユーザーには対応していないということです。

image2_R

問題となる箇所は、この3つでした。

1.タップ要素同士が近すぎます

2.ビューポートが設定されていません

3.フォントサイズが小です

この3つが対応していない為アラートが来ていました。
※サイトによっては、他にもアラートが出るようです。

image3_R

Googleウェブマスターツールのモバイルユーザビリティをチェック

1.タップ要素同士が近すぎます

image4_R1

image5_R

2.ビューポートが設定されていません

image6_R

3.フォントサイズが小です

image8_R

image9_R

急いでスマホ対応を行うことに

まず、エラー内容の確認をしました。その次にエラーの出ていないページも確認もしました。確認した結果レスポンシブで対応しているコーポレートにはエラーはなくて、またスマホ変換ツールを使っているサイトでもエラーが出ていないことがわかりました。

※ちなみに、スマホ変換ツールは、弊社のサービス「shutto」のこと。

今回問題が見つかったさぶみっと！メール配信のサイトは、すぐにレスポンシブ対応することが難しいので（静的に作られている昔ながらのhtml）、スマホ変換ツール「shutto」を使ってスマホ対応することにしました。

モバイルサイトフレンドリーテストから出ていたエラー内容

・タップ要素同士が近すぎます
－リンクやボタン同士が十分に離れている状態にしないといけない

スマホユーザーが押しやすい様にボタンやリンクの間隔がある程度必要です。

・ビューポートが設定されていません
－HTML内にビューポートを入れてスマホで適切なサイズで画面が出てくるようにしないといけない

ビューポートの説明については、こちらの記事がとても参考になるので参考にしてみてください。モバイルデバイス毎に最適なサイズで表示されているかという点です。

これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ – てっく煮ブログ

・フォントサイズが小です
－すべてのフォントサイズがモバイルユーザビリティの標準に準拠する（要はスマホで見やすいフォントサイズ）

フォントサイズが小さすぎて読みにくく、読むためにはモバイルユーザーがピンチ操作をして拡大する必要がある場合です。

以上踏まえると、画面として、見やすいか、使いやすいか、という視点でエラーが出ていることがわかりました。PCサイトのままだとスマートフォンでは画面が縮小されてしまうのが問題ということのようです。HTMLの構造上のエラーは、ビューポートの設定ぐらいでしょうか。

これらを踏まえ、さぶみっと！メールのサイトでエラーの出ていた14ページについて「shutto」で設定しました。
2月6日に着手して、週末をはさみ2月10日に設定から社内チェックまで完了。設定時間は、だいたい1日かからない程度でした。

トップページは、このようにスマホ用に変換しました。

image10_R

変換後↓

トップ_R

下層のページは、このようにスマホ用に変換しました。

image12_R

変換後↓

詳細_R

フォームは、このようにスマホ用に変換しました。

image14_R

変換後↓

フォーム_R

そしてウェブマスターツールのモバイルフレンドリーテストに合格

2月12日に本番サイトにshuttoを使いスマホ変換がされるように設定が完了しました。

2月17日まではクロールがなかったようで、エラー数はそのままでしたが、それ以降すこしずつエラーが減っていってきました。

現在、手元のiPhone「メール配信」と検索すると、さぶみっと！メールにちゃんと「スマホ対応」のラベルがついていました。

検索結果_R

まとめ

スマホ変換をしていないサイトの場合、スマートフォンで検索した時に検索結果順位が下がる可能性が出てきました。モバイルからの検索は、増える一方なので、スマホ対応をしておかないとせっかく作ったサイトが検索結果に表示されなくなる。。なんてことも出てきそうです。

Googleのアルゴリズムが変わる前にぜひ対策を。

今回スマホ変換に使ったのは、弊社のサービス「shutto」です。

もちろん、他の方法でもスマホ対応は可能ですが、クリック領域の確保など細かい基準を満たすのも簡単な「shutto」をこの機会にぜひご検討してみてください。

shutto（シュット）| PCサイトのスマホ変換・スマホ対応サービス
http://shutto.com/

※ただし、今後さらなるGoogleのアルゴリズムの変更があった場合に、スマホ「非対応」となってしまう可能性があることをご理解ください。

スマホ対応しないとGoogleモバイル検索で順位が落ちるということで急いで対応。

スマホ対応が、Googleモバイル検索のランキング要因になると発表されました。

Googleからスマホ対応していないサイトについて警告メッセージが来た。

モバイルユーザビリティ上の問題について

問題となる箇所は、この3つでした。

1.タップ要素同士が近すぎます

2.ビューポートが設定されていません

3.フォントサイズが小です

Googleウェブマスターツールのモバイルユーザビリティをチェック

1.タップ要素同士が近すぎます

2.ビューポートが設定されていません

3.フォントサイズが小です

急いでスマホ対応を行うことに

モバイルサイトフレンドリーテストから出ていたエラー内容

トップページは、このようにスマホ用に変換しました。

下層のページは、このようにスマホ用に変換しました。

フォームは、このようにスマホ用に変換しました。

そしてウェブマスターツールのモバイルフレンドリーテストに合格

まとめ

PICK UP