posted on 2018.12.2
seoやwebマーケティングの情報メディアで「モバイルフレンドリー」という言葉が多く取り上げられるようになりました。seoの専門家やwebマーケーターだけでなく、フロントサイドエンジニア、デザイナーなど制作側も理解することが必須の「モバイルフレンドリー」。その意味や対応方法、seoへの影響などを簡単にまとめてみました。
モバイルフレンドリーとは
モバイルフレンドリーとはスマートフォンなどのモバイル端末で表示されるwebサイトが、それを閲覧、使用しているユーザーにとって不便のないように最適化さているかを表す概念です。
スマートフォンなどの携帯端末からのインターネットへのアクセスの増加を見込んで、2010年にgoogleによってモバイル体験の向上を優先的に行っていくことが宣言されたのが始まりのようです。
モバイルフレンドリーの条件
最初の宣言から4年たった2014年にモバイルフレンドリーは公式にアナウンスされました。それと同時にwebページがモバイルでの閲覧に最適化しているかを判断する条件もいくつか提示されました。その条件は以下になります。
- 携帯端末では一般的でないソフトウェア（Flash など）を使用していないこと
- ズームしなくても判読できるテキストを使用していること
- ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
- 目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること
あなたのサイトがモバイルフレンドリーの条件に適合しているのかを確認する第一歩として、googleはモバイルフレンドリーテストツールを無料で提供しています。ブラウザ上で、誰でも簡単に確認できるので一度確認してみましょう。
モバイルフレンドリーのseoへの影響
googoleは2014年以降、モバイルフレンドリーであることが検索ランキングに影響を与えるアルゴリズムを何度か更新してきました。そのことがアナウンスされたgoogle ウェブマスター向け公式ブログの記事を古いものからいくつか追ってみることでモバイルフレンドリーがseoへ与える影響も少し見えてくるので、古い記事から順に部分的に引用してみることにします。
このモバイル フレンドリーの条件をランキング要素として使用することも実験中です。引用：「検索ユーザーがモバイル フレンドリー ページを見つけやすくするために」2014年11月19日記事
Google では、4 月 21 日より、ウェブサイトがモバイル フレンドリーかどうかをランキング要素として使用し始めます。この変更は世界中の全言語のモバイル検索に影響を与え、Google の検索結果に大きな変化をもたらします。この変更によって、検索ユーザーは、クエリへの関連性が高く使用端末にも適した高品質な検索結果を見つけやすくなります。引用：「検索結果をもっとモバイル フレンドリーに」2015年2月27日記事
今年の 2 月に発表したように、本日より、Google は全世界でモバイル フレンドリー アップデートを開始します。これにより、モバイル版の検索結果では、モバイル フレンドリーなページの掲載順位が引き上げられ、検索ユーザーは、小さなスクリーン上でも読みやすい、高品質で関連性の高い検索結果をより簡単に見つけることができるようになります。引用：「モバイル フレンドリー アップデートを開始します」2015年4月21日記事
Google では昨年より、サイトがモバイル フレンドリーかどうかをモバイル検索でのランキング要素の一つとして使用し始めました。この 5 月からは、当該ランキング要素の効果を高めるアルゴリズムのアップデートを段階的におこなっていきます。このアップデートにより、モバイルでも見やすいページが検索結果でさらに多く表示されるようになります。引用：「ウェブをさらにモバイル フレンドリーにするための取り組み」2016年3月17日記事
2014年のモバイルフレンドリー導入当初はその検索順位に対する影響は一部実験的なものにとどまっていたものが、2016年にはその影響を高めるアップデートを段階的におこなっていくとなっています。
以上のことから、上記、モバイルフレンドリーの条件に適合しないwebサイトが検索順位を落とす可能性があるかないかを問われれば、限定的にではありますが「ある」ということになるのではないのでしょうか。
モバイルフレンドリーに対応するモバイルサイトの実装方法
googleはモバイルフレンドリーに対応できるモバイルサイトの実装方法は以下の3つとしています。
- レスポンシブデザイン
- 動的な配信
- 別々なurl
googleはレスポンシブデザインを推奨しています。ただし、いづれの方法もレスポンシブデザインの基本が理解できていなければサイトを制作するのは困難です。なぜならばモバイルサイトの制作のベースとなる部分はレスポンシブデザインの中にあるからです。あなたが制作側にいるのであればまずはレスポンシブデザインを学ぶことから始めましょう。
レスポンシブデザインでモバイルサイトを用意する
レスポンシブデザインとは閲覧するユーザーの画面サイズに合わせてwebサイトの表示を切り替えるデザイン手法で、おもにひとつのHTMLを画面サイズに合わせてcssでそのデザインを切り替えます。ひとつのウェブサイトの構築でpcサイトとモバイルサイトを兼務します。
ひとつのコンテンツの更新ですむ為、メディアやブログなど更新頻度の高いサイトに向いています。Googleも、PCサイトとスマホサイトを別々にクロールしなくて済んだり、PCサイトとスマホサイトのコンテンツ重複をチェックをしなくて済むため、モバイルフレンドリー対策として推奨しています。
モバイルフレンドリーに動的配信で対応する
おもにサーバーに分岐の条件を設定ファイルで設定します。pc用のhtmlファイルと携帯端末用のhtmlファイルを用意し、ひとつのurlでwebサイトを閲覧するユーザーの使用する媒体に応じてhtmlファイルを切り分けます。
サーバーに設定の変更を設定ファイルで設定するので、使用するサーバーによっては変更を許可されないケースもあります。pcとモバイルそれぞれのhtmlを通過するのでデザイン的な自由度は高くなります。通常、二つ以上のコンテンツの更新が必要ですが、php、rubyなどの動的なプログラムでサイトを構築するか、wordpress、joomlaなどのcmsを利用すれば、ひとつのコンテンツの更新のみですべてのコンテンツを管理することも可能になります。
別々なurlをpc、モバイルで切り替える
二つ以上のurl、すなわち二つ以上のwebサイトを用意することになります。それぞれのサイトに媒体別もしくは画面サイズ別にjavascriptなどを使用してリダイレクトさせます。
pcサイトとモバイルサイトで同じコンテンツは常に1対1の関係を維持するように設定する必要があり、設定のいかんで重複コンテンツとみなされるなど検索順位を下げる可能性があります。デザイン、コンテンツ更新に関しては、動的な配信とほぼ同様です。
モバイルフレンドリーまとめ
総務省が発表した2017年の通信利用動向調査によると、個人がインターネットを利用する機器はスマートフォンが54.2%と、初めてパソコン（48.7%）を上回った〈日本経済新聞より〉そうです。またgoogleはサイトを評価する新しいアルゴリズム「モバイルファーストインデックス」を発表しました。これによりモバイルサイトの重要性がまた一つアップします。モバイルフレンドリーが宣言されて約10年、モバイルフレンドリーという同一の言葉でもその認識はかなり変化してきました。時代にあった認識でモバイルフレンドリーに臨んでいきたいですね。それではまた。
