【モバイルフレンドリーとは？】対応すべき理由と対応方法を解説

モバイルフレンドリーとは？

まずは、モバイルフレンドリーの概要から解説します。モバイルフレンドリーとは、スマートフォンなどのモバイルに最適化し、モバイルユーザーが快適にWebサイトやコンテンツを閲覧できるようにする対策のことです。

スマートフォンが普及する以前では、パソコンでWebサイトを閲覧するユーザーが多く、スマートフォンのデザインの最適化にあまり注力する必要がありませんでした。しかし、スマートフォンが現代のように普及したことにより、Googleは2015年4月に全世界でモバイルフレンドリーアップデートを実装しました。これにより、よりモバイルでのデザインが重要視されるようになったのです。

モバイルフレンドリーに対応するべき理由

ここまで、モバイルフレンドリーの概要を解説しました。ここからは、モバイルフレンドリーに対応するべき下記3つの理由をご説明します。

• スマートフォンでのランキングに影響がある
• モバイルユーザー（スマートフォン）が増加している
• 視認性の向上

それぞれ順番に見ていきましょう。

スマートフォンでのランキングに影響がある

まず、上述したモバイルフレンドリーアップデートが実装されたことにより、スマートフォン（モバイル）でのランキングに影響が出ることが理由の1つ目です。モバイルフレンドリーなページの検索順位が引き上げられ、Webサイト全体ではなく、あくまで個別のページ単位で評価される仕組みになっています。モバイルフレンドリーの具体的な指標としては、再生できないコンテンツが含まれていない、タップの感覚が適切、横方向へのスクロールが発生しないなどが挙げられます。

モバイルフレンドリーアップデートが実装されたことにより、スマートフォンでのランキングに影響が出る以上、モバイルフレンドリーへの対応は必須だと言えるでしょう。

モバイルユーザー（スマートフォン）が増加している

2018年には、総務省からスマートフォンユーザーがパソコンを利用しているユーザーの総数を上回ったとの発表がありました。つまり、Webサイトやコンテンツを閲覧するユーザーは、モバイル端末で閲覧するケースが多いことが分かります。 今後も増え続けていくことを踏まえると、早急にモバイルフレンドリーに対応する必要があります。

視認性の向上

モバイル端末は、パソコンでの閲覧と比較してディスプレイが小さくなっています。そのため、スマートフォンでパソコン用のレイアウトのデザインが表示されると、必然的に文字が小さくなったり、画面幅が不適切だったりします。つまり、非常に読みづらいデザインとなり、離脱率が悪化する大きな原因となることが特徴です。

ただし、モバイル端末でも表示を最適化することで視認性が向上するため、ユーザー満足度が高まることに繋がり、検索順位にも良い影響をもたらします。

モバイルフレンドリーのテスト方法

ここまで、モバイルフレンドリーに対応するべき理由を解説しました。ここからは、モバイルフレンドリーの3つのテスト方法をご紹介します。

• モバイルフレンドリーテスト
• PageSpeed Insights
• Google Search Console

それぞれ順番にご説明します。

モバイルフレンドリーテスト

Googleは、無料でモバイルフレンドリーのテストができるツールを提供しています。モバイルフレンドリーテストツールと呼ばれており、URLを入力するだけでテスト可能です。

なお、テスト項目は4つあり、それが下記のとおりです。

• フォントサイズが小さすぎないか
• ビューポートが設定されているか
• タップ要素同士が近すぎないか
• コンテンツサイズがビューポートに対応しているかどうか

仮に不合格の場合「リンク同士が近すぎる」「フォントが小さすぎる」といった具体的な問題点も表示してくれるため、まずはモバイルフレンドリーテストにて確認することを推奨します。

PageSpeed Insights

PageSpeed Insightsはページスピードを計測するツールではありますが、モバイルフレンドリーテストを行うことも可能です。100点満点でユーザーエクスペリエンスを指標としてテストすることができ、100点であればモバイルフレンドリーの問題はありません。

Google Search Console

Google Search Consoleでも、モバイルフレンドリーテストを確認可能です。モバイルユーザビリティレポートの項目を開くと、「テキストが小さすぎて読みません」「ビューポートが設定されていません」といった問題点が表示されます。これらの問題点が表示されない場合は、モバイルフレンドリーテストに合格している認識で問題ありません。

モバイルフレンドリーでなかった場合の対処法

先程ご説明したモバイルフレンドリーテストで、万が一合格していなかったとしても、焦る必要はありません。モバイルフレンドリーはページ単位で測定されるため、次以降でご紹介するモバイルフレンドリーの対応方法を実装することで、まず間違いなくテストに合格することができます。

したがって、まずはモバイルフレンドリーでないページを洗い出し、対策が必要なページに優先順位を付けることが大切です。

モバイルフレンドリーの対応方法

本記事でも解説しているように、モバイルフレンドリーへの対応は非常に重要です。ここからは、モバイルフレンドリーの3つの対応方法をご紹介します。

• ダイナミックサービング
• セパレート
• レスポンシブ

それぞれ順番に見ていきましょう。

ダイナミックサービング

ダイナミックサービングは、ユーザーエージェント機能を利用し、モバイルフレンドリーに対応する方法です。画面サイズやデバイスを認識し、スマートフォン専用の動的ファイルを読みます。しかし、パソコンとスマートフォンでURLが変わることはなく、同様のURLでユーザーはアクセスできます。

セパレート

セパレートは、パソコンとスマートフォンで別々のURLを用意し、モバイルフレンドリーに対応する方法です。ただし、Googleが別々のURLであることを認識する必要があり、annotationの設定をしなければならない点には注意が必要です。

レスポンシブ

レスポンシブは、1つのファイルにパソコンとスマートフォン双方の記述をし、UI構成を変化せてモバイルフレンドリーに対応する方法です。レスポンシブは「レスポンシブWebデザイン」とも呼ばれ、URLも同一のものでアクセスできます。なお、UI構成は画面サイズによって変化させることが特徴です。

Googleはレスポンシブを推奨している

上述したレスポンシブは、Googleが推奨しているモバイルフレンドリーの対応方法になります。ここでは、なぜGoogleがレスポンシブを推奨しているのかをご説明します。

• ページスピードの高速化
• リダイレクトミスの軽減
• annotationがされていないとクロールに時間がかかる
• 運用コストを軽減できる

それぞれ順番に見ていきましょう。

ページスピードの高速化

セパレートなどパソコンとスマートフォンで異なるURLを使用して表示させる場合、ユーザーの端末に応じてリダイレクトさせる必要があります。そのため、リダイレクトの分だけページスピードが遅くなります。加えて、パソコンとスマートフォンで異なるHTMLでコンテンツを構成している場合、さらに遅くなるページスピードが遅くなる恐れがあります。

しかし、レスポンシブは同一のファイルとURLで表示させられるため、ページスピードが遅くなることはありません。Googleもランキングの決定要因としてページスピードは重要視しているため、SEO的にもメリットのある対応方法だと言えるでしょう。

リダイレクトミスの軽減

仮にパソコンのユーザーがスマートフォンのURLにアクセスした場合、パソコン用にリダイレクトさせる必要があります。万が一リダイレクトの設定を誤ってしまうと、コンバージョン等の機会損失が生まれかねません。

ただし、レスポンシブであればリダイレクトをさせる必要がないため、これらのミスが起こることを完全に防げます。

annotation（アノテーション）がされていないとクロールに時間がかかる

同じコンテンツであっても、複数のデバイス用のパターンが用意されていると、Googleのロボットがそれぞれに対してクロールする必要があります。その結果、インデックスまでのスピードが遅くなったり、インデックスすらされなかったりする恐れがあります。

運用コストを軽減できる

パソコンとスマートフォンで別々のURLが存在すると、それぞれを更新する必要があり非常に手間がかかります。しかし、レスポンシブであればデザインが異なってもURLが同一であるため、運用コストを軽減できるメリットがあります。

まとめ

本記事では、モバイルフレンドリーに対応するべき理由や、対応方法などを解説しました。スマートフォンでのランキングに影響があり、SEOで良い評価を得るためにも、モバイルフレンドリーへの対応は非常に重要です。Googleはレスポンシブを推奨しているため、まずは現状のWebサイトがレスポンシブ対応になっているかを確認することから始めてみてはいかがでしょうか。