モバイルフレンドリー対応とは?モバイルファーストインデックス(MFI)は実装間近!?
2017.05.24
モバイルフレンドリーアルゴリズムが実装されてから約2年経過しており、
いまさら「モバイルフレンドリー対応」と思う方もいらっしゃるかと思います。
ですが、2017年中には実装されているといわれている「モバイルファーストインデックス」の
準備も含め、改めてモバイルフレンドリーについて認識を深めてたいと思い、本記事を書きました。
モバイルフレンドリーとは
モバイルフレンドリーとは2015年4月21日にGoogleが発表したアルゴリズムの一つで、
簡単にいうと「スマホでサイト閲覧した時に見やすいページを評価する」アルゴリズムです。
逆に「スマホでサイト閲覧した時に見づらいページの評価を下げる」アルゴリズムでもあります。
実際に見づらいスマホサイトとは?
- 文字が小さすぎる
- ボタン型リンクが小さすぎてクリックしにくい
- ボタン型リンクが近すぎる
- コンテンツサイズがスマホに合っていない
こういった要素を最適化することでモバイルフレンドリーに対応することができます。
モバイルフレンドリーかチェックする方法
モバイルフレンドリー対応かどうかチェックする方法があります。
それはgoogleが無料で公開している「モバイルフレンドリーテスト」です。
合格の場合
不合格の場合
不合格の場合は、問題点を提示してくれるので、
確認した上で修正をしていく必要があります。
モバイルフレンドリー対応できているのかチェック
googleがサイト運用者に対して「Mobile Website Speed Testing Tool」を公開しています。
こちらは「PageSpeed Insights」のスコア表示をより分かりやすく見える化したものです。
フォームからURLをいれて「TEST NOW」をクリックすることで、そのサイトがどのくらいモバイルフレンドリー対応しているか100点満点で評価してくれます。
入力後、下記3項目について評価してくれます。
- MOBILE FRIENDLINESS(モバイルサイトのユーザーエクスペリエンス)
- MOBILE SPEED(モバイルサイトの表示速度)
- DESKTOP SPEED(デスクトップサイトの表示速度)
100点満点評価となり、
- 緑:GOOD(良い)
- 黄色:FAIR(普通)
- 赤色:POOR(劣る)
の色にて評価を分けています。
また、修正が必要な項目は分かるように表記されます。
各項目がGOODになるよう可能な限り修正しましょう。
- Eliminate render-blocking JavaScript and CSS in above-the-fold content:ファーストビュー内のレンダリングをブロックしているJavaScriptとCSSを削除
- Reduce server response time:サーバーの応答時間を削減
- Leverage browser caching:ブラウザのキャッシュを利用する
- Minify CSS:縮小化CSS
- Minify HTML:縮小化HTML
- Minify JavaScript:縮小化するJavaScript
- Avoid landing page redirects:リンク先ページのリダイレクトを使用しない
- Prioritize visible content:表示可能コンテンツの優先順位を決定する
ただ、この数値に固執しすぎて見にくいサイトになっていまっても本末転倒ですので、閲覧ユーザーを意識しつつ修正する必要が大事です。
モバイルフレンドリー対応方法
それでは実際にどのような方法でモバイルフレンドリー対応をしていけば良いでしょうか。
主に3つの方法があります。
レスポンシブデザイン
まず1つ目がレスポンシブデザインによるモバイルフレンドリー対応です。
レスポンシブデザインは、画面のサイズを判断基準としてCSSを切り替えて表示するデザインです。
1つのHTMLで管理するため、テキスト修正や画像差し替えなどの際に1つのHTMLを修正するだけなので、工数を軽減することができます。また、SEOの面においてもGoogleが推奨している構築方法の一つでもあります。
レスポンシブなサイトの作り方については下記の記事で解説しておりますので、詳しく知りたい方は是非ご覧ください。
PC用とスマホ用にサイトを別々に制作
2つ目はPC用とスマホ用にサイトを別々に制作してモバイルフレンドリーに対応する方法です。
その名の通り別々にサイトを制作するので、他の方法と比べコストも2倍かかります。
ただ、自由度は高く、制限が少ないので採用サイトなどのブランディングを重視するサイトに採用されることが多いです。
CMSのテンプレートを使用
WordPressなどのCMSのテンプレートは、モバイルフレンドリー対応している場合が多く、
デザインを重要視していないようならテンプレートを使用してしまうのも1つの方法です。
無料テンプレートも数多くあるので、コストを抑えつつモバイルフレンドリー対応が可能です。
既にWordPressを使用している方でモバイルフレンドリー対応がまだの方は、
プラグインを使用して対応することもできます。
モバイルファーストインデックス(MFI)の実装は2017年中!?
「モバイルファーストインデックス(MFI)」とはGoogle検索での仕様変更で、
モバイル向けページ(モバイル/スマホ向けページ)の評価を基準として検索順位を決定する仕組みのことを言います。
現状では、PC向けのページをGoogleが評価して検索順位が決定されていますが、
モバイルファーストインデックスが導入されますと、PC向けページではなく、モバイル向けページ(モバイル/スマホ向けページ)の評価を基準として検索順位が決定されるようになります。
そのため、モバイルフレンドリーの重要性が高くなっています。
モバイルファーストインデックスの最新情報については下記の記事で解説しておりますので、是非チェックしてみてください。
モバイルファーストインデックス導入で順位が下落する可能性のあるサイト
現状、PC向けページを時間をかけて作成し、Googleからも評価されるように作っているが、
モバイル/スマホ向けページはほとんど手をつけず、情報もPC向けページよりも少ない状態のサイト。
上記のようなサイトの場合、現在はPC向けのページがGoogleから高く評価されているため、
検索結果でも高い順位となっている可能性がありますが、モバイルファーストインデックス導入後はほとんど手付かずのモバイル向けページが評価されるため、
順位が大きく下落する可能性があります。
モバイルファーストインデックスが導入されても順位が変わらない(もしくは上昇する)サイト
レスポンシブデザインを採用し、PC向けページもモバイル/スマホ向けページでも同じ情報を配信しているサイトや、
レスポンシブデザインでなくても、PC向けとモバイル/スマホページの情報が同じである場合、
モバイルファーストインデックスが導入されても、ほぼ順位が変わらないかもしくは競合サイトがモバイル対応をしていない場合、
相対的に順位が上昇することが考えられます。
いずれにしても、数ヶ月後という猶予があるため、
モバイル/スマホページの作成がおろそかになっているという認識がある方は今から少しづつでも
モバイル/スマホページを充実させていっていただければ、来る導入時も恐れることなく迎えることができると思います。
まとめ
モバイルファーストインデックスの実施時期は正式発表されておりませんが、
2017年中には行われるであろうと言われています。
総務省「平成28年版 情報通信白書」の情報通信端末の世帯保有率をみても、
2015年段階でPCが76.8%、スマートフォンが72%とスマートフォンがPCを上回る勢いです。
現在ではPCよりもスマートフォン保有率の方が上回っているのではないでしょうか。
2015年末の情報通信機器の普及状況をみると、「携帯電話・PHS1」及び「パソコン」の世帯普及率は、それぞれ95.8%、76.8%となっている。また、「携帯電話・PHS」の内数である「スマートフォン」は、72.0%(前年比7.8ポイント増)と普及が進み、「パソコン」との差が前年の13.7ポイントから4.8ポイントに縮小している。
総務省|平成28年版 情報通信白書|インターネットの普及状況
こういった背景もありGoogleとしてもモバイルフレンドリーやモバイルファーストインデックス、
AMPなど、モバイルに関連したアップデートに力をいれています。
今後は間違いなくモバイル/スマホ主体になっていくと思われますので、
この機会にサイトをモバイル/スマホ向けに見直していくことをオススメします。
関連