モバイルフレンドリーとは？対応方法やテストツール・SEOへの影響など徹底解説！

モバイルフレンドリーとは、スマートフォン（スマホ）用に表示を最適化して、モバイル端末でWebサイトを閲覧しやすくすることです。
このモバイルフレンドリーに対応すれば、ページエクスペリエンスが向上して直接的なSEOの良い効果が期待できます。

一方、モバイルフレンドリー対応しなければ、スマホでのWebページの閲覧にストレスが生じます。
具体的には、スマホでWebページを閲覧したときに、文字が小さくて見づらかったり、都度ピンチインやピンチアウト（拡大縮小）してコンテンツを閲覧する手間が増えます。
そうなれば、ユーザーの利便性が低下します。
結果、Googleに評価されづらくなるというわけです。

こうした良くない状況を回避する為に、モバイルフレンドリーにして、ユーザーが使いやすいサイトにしましょう。
自身のサイトがモバイルフレンドリーかは、モバイルフレンドリーテストツールでチェックできます。

この点踏まえて今回は、モバイルフレンドリーの定義や対応方法、SEOへの影響、モバイルフレンドリーテストツールなど中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。

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

モバイルフレンドリーとは、スマートフォン（スマホ）用に表示を最適化して、モバイル端末でWebサイトを閲覧しやすくすることです。

例えば、レスポンシブデザインを採用してサイト構築します。
この場合、PCだけでなくスマホ（モバイル）で閲覧したときもサイトが見やすく使いやすいです。
これが、モバイルフレンドリーというわけです。

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

モバイルフレンドリーにすべき理由は、スマートフォンの利用割合が最も多いからです。

※引用元：統計調査データ：通信利用動向調査：報告書及び統計表一覧(世帯編)

例えば、インターネットを利用する機器の割合として、令和2年時点でパソコンが60.4％、スマートフォンが81.8％です。
とくにスマートフォンは、平成30年が74.5％なので割合が増えてます。

※引用元：統計調査データ：通信利用動向調査：報告書及び統計表一覧(世帯編)

また、インターネットを利用する機器の割合を年齢別で見ると、80代はパソコンに次いでスマートフォンが多いですが、80代を除いた全世代ではスマートフォンが最も多いです。
つまり、パソコンやタブレット型端末、携帯電話（PHSを含む）よりもスマートフォーンの利用割合が最も多いというわけです。

このように、スマートフォーンの利用割合が最も多いので、モバイルフレンドリーにする必要あるというわけです。

モバイルフレンドリーのSEOへの影響

このモバイルフレンドリーのSEOへの影響は、直接的です。

具体的には、2015年4月21日にGoogleからモバイルフレンドリーアップデートを実施して、スマートフォンでの閲覧に適してないページの順位を引き下げました。
この仕組み（モバイルフレンドリー）が現在もGoogle検索アルゴリズムに組み込まれていて、ランキング要素として使用されてます。
つまり、SEOへの影響が直接的というわけです。

ちなみにモバイルフレンドリーは、ページエクスペリエンスという大枠のシグナルの1つです。

モバイルフレンドリーかチェックする方法

モバイルフレンドリーかチェックするには、ツールを活用します。

• モバイルフレンドリーテスト
• サーチコンソール

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

モバイルフレンドリーかチェックするには、モバイルフレンドリーテストツールを使います。

例えば、まずモバイルフレンドリーテストにアクセス後、テストするページURLを入力して「URLをテスト」ボタンをクリックします。また、「コード」タブに切り替えてテストもできます。

「公開URLのテストしています」と表示されるので、その画面の状態で少し待ちます。

テストの結果画面が表示されて、「このページはモバイルフレンドリーです」と表示されます。
もしくは、「このページはモバイル フレンドリーではありません」と表示されます。
つまり、モバイルフレンドリーかチェックできるというわけです。

サーチコンソール

モバイルフレンドリーかチェックするには、サーチコンソールを使います。

例えば、まずサーチコンソールにログイン後、メニューから「モバイルユーザビリティ」をクリックします。すると、モバイルユーザビリティレポートの「エラー」の詳細に「テキストが小さすぎて読めません」「クリック可能な要素同士が近すぎます」「ビューポートが設定されていません」といった内容が表示されます。

表示された内容をクリックすれば、エラーの対象ページ（ページURL）が確認できます。
これらの対象ページ（ページURL）は、モバイルフレンドリーではありません。

一方、エラーが無ければ「エラー」の詳細に何も表示されません。
この場合、サイト内の対象ページはモバイルフレンドリーです。
つまり、モバイルフレンドリーかチェックできるというわけです。

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

モバイルフレンドリーの対応方法を手順を追って紹介します。

1. レスポンシブWebデザインを採用する
2. モバイルフレンドリーテストで合格する

レスポンシブWebデザインを採用する

モバイルフレンドリーに対応するには、レスポンシブウェブデザインを採用します。

例えば、パソコン向けサイトを既に保有してるとします。
このパソコン向けサイトのURLとHTMLコードを使用して、タブレットやスマートフォン（スマホ）といったモバイル用の画面サイズでも合うように表示のみを調整します。
つまり、レスポンシWebブデザインを採用するというわけです。

こうして、レスポンシブWebデザインを採用することが、モバイルフレンドリーの対応方法です。

ちなみに、レスポンシブウェブデザイン以外に、動的な配信（ダイナミックサービング）や別々のURL（セパレートタイプ）での対応方法がありますが、これらは推奨されてません。

モバイルフレンドリーテストで合格する

モバイルフレンドリーに対応するには、モバイルフレンドリーテストで合格します。

例えば、モバイルフレンドリーテストの結果画面の詳細に、「クリック可能な要素同士が近すぎます」「ビューポートが設定されていません」「テキストが小さすぎて読めません」などの問題が表示されたとします。

この場合、マージンを増やすようにCSSを調整してリンク同士の距離を空けます。
また、htmlのheadタグ内にmeta要素のname属性の属性値でviewportを指定して記述したり、文字を大きくするようにCSSを調整してテキスト文章を読みやすくします。
問題を修正すれば、再度モバイルフレンドリーテストしたときのテスト結果に問題が表示されなくなります。
つまり、テスト結果に「このページはモバイルフレンドリーです」と表示されるので、モバイルフレンドリーテストで合格することができるとうわけです。

こうして、モバイルフレンドリーテストで合格することが、モバイルフレンドリーの対応方法です。

ちなみに、「コンテンツの幅が画面の幅を超えています」や「Flashが使用されています」といった問題がテスト結果に表示されることもあります。
これらの場合、モバイルブラウザでサポートされていないプラグイン（Flashなど）がページに含まれないように見直したり、コンテンツの幅が画面幅に収まるように、CSS設計において相対的な幅と位置の値を使用して問題を修正しましょう。

まとめ：モバイルフレンドリーにして、ユーザーが使いやすいサイトにしよう

モバイルフレンドリーにして、ユーザーが使いやすいサイトにしましょう。

一方、モバイルフレンドリーでなければ、ユーザーが使いづらいです。
具体的には、テキストが小さすぎて読めなかったり、アンカーボタンやアンカーテキストがクリックしづらいです。
そうなれば、ページエクスペリエンスが低下して、Googleから評価されづらくなります。
結果、検索順位が上がりづらくなるというわけです。

こうした悪い状況を回避する為に、モバイルフレンドリーにして、ユーザーが使いやすいサイトにしましょう。