モバイルフレンドリーとは？対応方法やチェック用テストツール、SEOとの関係を解説

モバイルフレンドリーとは、スマホやタブレットなど、モバイル端末において操作性や閲覧性に優れているものを指します。

つまり、Webページに対して「モバイルフレンドリーに（対応）すべきだ」は「モバイル端末でも使いやすく、見やすいページにすべきだ」という意味だと考えましょう。
さらに、モバイルフレンドリーは SEO（検索順位）にも影響を与える要素です。

今回の Nobilistaブログでは、このモバイルフレンドリーの概要や確認ツール、対応方法について解説します。
いずれも上位表示に欠かせない SEO対策の基礎知識なので、ぜひ最後までご覧ください。

モバイルファーストインデックス(MFI)とは？SEOへの影響や対策・確認方法、完全移行した理由をわかりやすく解説

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

モバイルフレンドリーとは、スマホやタブレットなどモバイル端末で使いやすく、見やすいものを指します。
モバイル端末でのユーザビリティに優れているもの、ともいえるでしょう。

なお、WordPressのテーマで見かける「モバイルフレンドリー対応」とは、モバイルフレンドリー化の方法として一般的なレスポンシブデザインに対応しているものを指します。

また SEO業界では、過去にあった Google検索アルゴリズム「モバイルフレンドリーアップデート」を指す場合もあります。
モバイルフレンドリー アップデートとは何か、くわしく見てみましょう。

レスポンシブデザインとは？作り方のコツやSEOとの関係、CSS実装方法、テンプレート・参考サイトを紹介

「モバイルフレンドリー アップデート」とは

モバイルフレンドリーは、モバイルフレンドリーアップデートを指すこともあります。
現在は名称が変わり、モバイルフレンドリーランキングシステムといったほうが正しいでしょう。

モバイルフレンドリーランキングシステムとは、スマホ検索においてモバイルフレンドリーな Webページを高く評価する、検索アルゴリズムだったものです。

これにより、モバイル版の検索結果では、モバイル フレンドリーなページの掲載順位が引き上げられ、検索ユーザーは、小さなスクリーン上でも読みやすい、高品質で関連性の高い検索結果をより簡単に見つけることができるようになります。
こういったページには、タップやズームなどをしなくてもテキストが読みやすい、タップ ターゲットの間隔が適切、再生できないコンテンツが含まれていない、横方向へのスクロールが発生しない、などの特徴があります。

引用：Google – モバイル フレンドリー アップデートを開始します

「モバイルフレンドリーランキングシステム」の変遷

2023年には、Googleコアランキングシステム（コアアルゴリズム）の評価要素のひとつとなっています。
こうなった経緯を見ていきましょう。

まず、モバイルフレンドリーランキングシステムが、別の検索アルゴリズムに統合された時期がありました。
それが「ページエクスペリエンスシステム」です。

ページエクスペリエンスシステムとは、以下の 4つのシグナルを組み合わせた、ユーザビリティに関する検索アルゴリズム。

• モバイルフレンドリーランキングシステム
• ウェブに関する主な指標（Core Web Vitals：コアウェブバイタル）
• セキュアサイトシステム（HTTPS化：常時SSL化）
• 煩わしいインタースティシャル広告

ただしのちに、検索アルゴリズムではなかったことが発覚します。
では何かというと、Google社員いわく評価要素だったことがわかりました。

さらに、ページエクスペリエンスシグナルは、あくまで概念です。
そのため、単独のシグナルは存在しません。

たとえるのなら、Webサイトのユーザビリティにかかわる重要な要素（先述の 4つのシグナル）をまとめて呼ぶために、わかりやすい名前を付けた感じでしょう。

・What does this mean for the “page experience update”?

The page experience update was a concept to describe a set of key page experience aspects for site owners to focus on. In particular, it introduced Core Web Vitals as a new signal that our core ranking systems considered, along with other page experience signals such as HTTPS that they’d already been considering. It was not a separate ranking system, and it did not combine all these signals into one single “page experience” signal.

（弊社意訳：　・ページエクスペリエンスアップデートの意味とは？

ページエクスペリエンス アップデートとは、サイト運営者が注力すべき一連の重要なページエクスペリエンスの側面を表す概念でした。

とくに、すでにコアランキングシステムで使用されていた HTTPSなど、ほかのページエクスペリエンスシグナルと新たなシグナルとしてコアウェブバイタルを導入し、まとめたものです。

これは独立したランキングシステムではなく、これらのシグナル（筆者補足：コアウェブバイタルやHTTPSのこと）を 1つの「ページエクスペリエンス」というシグナルに統合するものではありません。）

引用：Google

結局、ページエクスペリエンスシグナルとは何だったのか。
要するに、Google コアランキングシステムのなかで、ページにおけるユーザビリティにかかわる重要な複数のシグナルをまとめた呼び方です。

Googleアルゴリズムとは？仕組みやランキング要因、アップデートの歴史を解説

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

Webサイトをモバイルフレンドリーにすべき理由は、大きく 2つあります。

1. 検索順位（SEO）に関係するから
2. スマホでの検索ユーザーが多いから

検索順位（SEO）に関係するから

モバイルフレンドリー、つまりスマホ、タブレットなどモバイル端末でのユーザビリティは SEOに影響を与えます。
先ほども触れたとおり、検索順位を決定する Googleのコアランキングシステムは、ページエクスペリエンスが高いものを評価することがわかっています。

Google のコアランキングシステムは、優れたページ エクスペリエンスを提供するコンテンツを高く評価するように設計されています。

引用：ページ エクスペリエンスの Google 検索結果への影響について

そのページエクスペリエンスにかかわる要素のひとつが、モバイルフレンドリーです。
実際、Googleが提示している、ページエクスペリエンスの自己評価項目のなかには、モバイルフレンドリーに関するものがあります。

スマホでの検索ユーザーが多いから

スマホで Webサイトを閲覧するユーザーが多い、というのも理由のひとつです。
Googleがモバイル端末での体験の質を重視し始めたのも、モバイル端末での利用者が増えたからだといわれています。

ウェブサイトをモバイル フレンドリーにすることは、オンラインでの存在感を高めるうえで欠かせません。

現在では、多くの国でスマートフォンのトラフィックがパソコンのトラフィックを上回っているからです。

引用：Google – モバイルフレンドリーテスト

【補足】モバイルフレンドリーでないと（未対応だと）どうなる？

以上のことから、モバイルフレンドリーでないページは、SEOにマイナスとなります。
ただマイナスといっても、微々たるものでしょう。

SEOで重視されているのは、何よりもコンテンツの質です。
たとえモバイルフレンドリーでなくても、良質なコンテンツと Googleから評価されていれば上位表示する可能性はあります。

Google 検索は、ページ エクスペリエンスが平均を下回るコンテンツも含め、常に最も関連性の高いコンテンツが表示されるように設計されています。

ただし多くの場合、検索語句に一致するヘルプフル コンテンツが多数存在するため、優れたページ エクスペリエンスを実現していることは、検索結果でのランキングを上げることにつながります。

引用：Google -ランキングを上げるうえでページ エクスペリエンスはどの程度重要ですか？

逆に、どれだけモバイルフレンドリーに注力しても、コンテンツの質が高くなければ上位表示はできません。
あらためて、自サイトは良質なコンテンツかどうか、定義の確認をおすすめします。

良質なコンテンツとは何か？Googleの定義や作り方のポイントを解説

モバイルフレンドリーか確認するツールと使い方

ここでは、モバイルフレンドリーかどうかを確認できるチェックツールを紹介します。

1. Lighthouse
2. モバイルフレンドリーテストツール
3. Googleサーチコンソールの「モバイルユーザビリティレポート」

いずれも Googleが、無料で提供しているツールです。
ただし「モバイルフレンドリーテストツール」と「モバイルユーザビリティレポート」は、2023年12月1日より使えなくなるためご注意ください。

【補足】チェックツールを使う前に

まずはユーザーになりきって、自分でモバイルフレンドリーかどうか考えてみましょう。

チェックツールでの評価とは、あくまで Googleが考える指標（Googleが思うモバイルフレンドリーの条件）をクリアしているかどうかを見ているに過ぎません。
しかし、モバイルフレンドリーかどうか、その正解はユーザーによっても変わるものです。

たとえば、ユーザーがシニア層の場合。
フォントやボタンをやや大きめにすることで、ユーザビリティ性を高めることができます。

ユーザーが変われば配慮すべきことも、モバイルフレンドリーの定義も変わるものです。
まずは実際に触れて、そのときの感覚を参考にしましょう。
そのあとでも、チェックツールを使うのは遅くありません。

Lighthouse

使い方は、モバイルフレンドリーかどうか調べたい Webページの URLを入力して「分析」を押すだけです。
念のため、タブが「携帯電話」になっているか確認しましょう。

「パフォーマンスの問題を診断する」の「赤い▲の箇所」が改善を検討すべき部分です。
改善方法の詳細も記載されるので、ぜひ参考にしてみてください。

ただし、改善したからといって、かならず検索順位が上がるわけではありません。
Webサイトと Webページのあらゆる要素によって検索順位は決まるため、絶対ではないということを覚えておきましょう。

なお「パフォーマンス」の項目に出てくる「First Contentful Paint」や「Largest Contentful Paint」といった指標の意味は、以下の記事で触れています。

コアウェブバイタル(Core Web Vitals)とは？対策や改善方法、評価を計測するツールを紹介

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

「モバイルフレンドリーテストツール」も Googleが提供する無料ツールです。

モバイルフレンドリーテストツールの使い方は、同じくモバイルフレンドリーかどうか調べたいページの URLを入力し「URLをテスト」をクリックするだけ。
問題がなければ、以下のように「ページはモバイルで利用できます」と表示されます。

一方、Googleの基準に満たない項目が 1つ以上ある場合は「ページはモバイルで利用できません」と表示され、クロールの問題など何らかの理由でチェックツールが利用できない場合は「URLを Googleに登録できません」や「データなし」と表示されます。

「ページはモバイルで利用できません」と表示された場合は、その理由（エラー）を確認しましょう。
エラーの意味と改善方法は以下です。

エラーの項目	意味	改善方法
互換性のないプラグインを使用しています	サポートされていないプラグイン（Flashなど）を利用している。	サポートされていないプラグインを利用せず、別の手段を検討する。
ビューポートが設定されていません	viewportプロパティが定義されていない。	meta viewport タグを使用する＋レスポンシブ化する。
ビューポートが「デバイスの幅」に収まるよう設定されていません	viewportプロパティに固定の幅が設定されている（＝レスポンシブ化していない）。	レスポンシブデザインを導入する。
コンテンツの幅が画面の幅を超えています	テキストや画像が画面の幅を超えている（＝水平スクロールが必要）。	CSSの幅と位置に「相対値」を使用する。
テキストが小さすぎて読めません	ほとんどのテキストが小さい。	フォントサイズが画面サイズごとに適切に拡大縮小されるようにする。
クリックできる要素同士が近すぎます	ボタンやリンクなどタップできる要素同士が近すぎる。	タップ要素のサイズとマージンを最適化する。（※1）

（※1）Googleが推奨しているタップ要素（ボタン）のサイズはこちら。

・タップ ターゲットのサイズ についての明確な標準はありますか？

はい。重要なタップ ターゲットは高さと幅を 7 mm 以上とし、また、小さいタップ ターゲットの間には 5 mm 以上のマージンを設けることを推奨しています。

平均的な大人の指先のサイズは幅約 10 mm なので、これらのサイズを使用することにより、画面のスペースを有効に利用するとともに、操作しやすいインターフェースを提供することができます。

引用：Google 検索セントラル ブログ

Googleサーチコンソールの「モバイル ユーザビリティ レポート」

Googleサーチコンソールの「モバイルユーザビリティ」でも、モバイルフレンドリーかどうかが確認できます。
特定のページでなく、Webサイト全体をチェックしたい場合におすすめの方法です。

「ページがモバイルで利用できない理由」という項目の下に問題点が表示されるので参考にしましょう。
問題のあるページを知りたい場合は、項目をクリックすると詳細ページに移り、そこでページのURLが表示されます。

問題点の内容は「モバイルフレンドリーテストツール」のエラーと同じです。
言い回しが違うだけなので、意味は先ほどの表をご確認ください。

Googleサーチコンソールとは？できることや使い方、登録方法・設定方法を解説

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

Webサイトをモバイルフレンドリーにする方法は、おもに以下の2つです。

1. レスポンシブデザイン
2. モバイル向けページを別に用意する

レスポンシブデザイン

Googleも推奨する、もっとも一般的な方法がこの「レスポンシブデザイン」です。
レスポンシブデザインとは、ユーザーの画面サイズごとに自動で表示サイズを切り替える、Webデザインの手法のひとつ。

有名な WordPressテーマは、大体レスポンシブデザインに対応しています。
ただし、念のため「レスポンシブ対応」「スマホ対応」の表記があるか確認しましょう。

レスポンシブデザインとは？作り方のコツやSEOとの関係、CSS実装方法、テンプレート・参考サイトを紹介

モバイル向けページを別に用意する

PCサイトとは別に、モバイル専用のページを別に作って対応する方法です。
PCページとモバイルページの URLが変わるかどうかで、大きく 2つの方法があります。

ひとつが、デバイスごとに異なる HTMLを表示させる方法（URLは同じ）。
もうひとつが、異なるURL（ページ）を表示させる方法です。

ただし、URLが異なる方法は以下の点に注意しましょう。

• PCとモバイルページの内容は大幅に変えない
• タイトルやディスクリプションは同じものを入れる
• Googleサーチコンソールにモバイルサイトも登録する
• 「canonical設定」と「alternate設定」をおこなう

alternateタグ(Link rel=alternate)の意味とは？記述方法や多言語・スマホサイトなど事例を解説

モバイルフレンドリーなSEOコンテンツ作成のやり方

モバイルフレンドリーなコンテンツ作成のためのコツを紹介しましょう。

1. 文章や文字の圧迫感を抑える
2. ユーザーの閲覧を妨げる要素を置かない
3. ページの表示速度に気を付ける
4. ボタンのサイズ・配置に気を付ける
5. ボタンはタップできるとわかるデザインにする
6. コンテンツを画面サイズに合わせる
7. Flashなど対応していないプラグインは使用しない

文章や文字の圧迫感を抑える

モバイル端末は画面が小さい分、PCよりも改行が増え、文章量が多いと感じやすいです。
PCページよりも文章の圧迫感が強く、ユーザーによっては読むのが億劫になる可能性もあります。

そのため、文章や文字の圧迫感を抑える工夫をしましょう。

• 一文を短く、簡潔にする
• 多めに空白行を入れる
• 適度に画像を入れる
• ユーザーに適したフォントの種類、フォントサイズを選ぶ
• 文章量が多い場合は、アコーディオンやタブ切り替えを検討する

リズムよく、ストレスなくサクサクと読めるコンテンツが理想です。

Webライティングとは？基本的な書き方やコツ・テクニック、役立つ本を紹介

ユーザーの閲覧を妨げる要素を置かない

ユーザーがコンテンツを見る際に、閲覧を妨げるような要素がないか確認しましょう。
たとえば、コンテンツに重なるボタンやメニュー、広告です。

とくに広告は「煩わしいインタースティシャル」といって、コンテンツを覆うものは SEOにもマイナスとなります。

インタースティシャル広告とは？SEOへの影響や「うざい」と言われない実装のポイント

ページの表示速度に気を付ける

ページの表示速度も、モバイルフレンドリーに関係する要素です。
表示速度を改善する方法はいくつかありますが、まずは「画像の最適化」がおすすめ。

たとえば、画像サイズを軽量化したり、ファイル形式を Googleが開発した「.webp」に変更したりといった方法が挙げられます。
いずれも、圧縮ツールや変換ツールで可能です。

おすすめの最適化ツールやほかの改善方法については、以下の記事をご覧ください。

Webサイト表示速度の改善方法とは？読み込みスピードを計測するツールや数値の目安を紹介

ボタンのサイズ・配置に気を付ける

ボタンは、サイズや配置が誤タップしないよう配慮しましょう。
PCとは異なり、モバイル端末は画面が狭くなるため、間違ってボタンをタップしてしまう可能性が高いです。

ボタンはタップできるとわかるデザインにする

モバイル端末は、PCと違いカーソルがありません。
そのため、ボタンと認識し、タップしてもらえるかどうかは、ボタンデザインによって左右されます。

もちろん、カーソルを乗せて変化を出す（ボタンの色が変わるなど）といった手法は使えません。
シャドウやグラデーションを使い、ひと目でタップのできるボタンとわかるデザインを心がけましょう。

コンテンツを画面サイズに合わせる

モバイル端末で、コンテンツが画面からはみ出さないようにしましょう。
横にスクロールしないとコンテンツがすべて閲覧できない Webページは、注意が必要です。

また、拡大・縮小しなければいけない Webページも、モバイルフレンドリーとはいえません。
いずれも、レスポンシブデザインであれば気にする必要はないため、できる限りレスポンシブ化をおすすめします。

なお、デバイスや画面サイズに合わせて、Webサイトの表示を最適化する方法として、viewportというメタタグの記述があります。
viewportを利用することで、Googleが推奨するレスポンシブデザインを作ることができます。

viewportとは？設定方法やHTMLのmeta要素の記述方法を解説

Flashなど対応していないプラグインは使用しない

モバイルブラウザに対応していないプラグインは、使用しないようにしましょう。
代表的なものでいえば、ひと昔前に流行した「Flash」です。

モバイルフレンドリーに関するよくある質問

モバイルファーストインデックス（MFI）とモバイルフレンドリーの違いは？

モバイルファーストインデックス（MFI）とは、モバイル端末向けページのコンテンツを優先的にクロール・インデックスし、検索順位の決定をおこなう仕組みです。
MFI適用前は、モバイル検索でも PCページを基準に、検索順位が決められていました。

Googleにサイトを登録し、検索順位を決定する一連の行為にかかわる MFIとモバイルフレンドリーはまったく異なるものといえます。

モバイルファーストインデックス(MFI)とは？SEOへの影響や対策・確認方法、完全移行した理由をわかりやすく解説

モバイルフレンドリーのために WordPressでおこなうべきことは？

WordPressのテーマは、レスポンシブデザイン対応のものを選びましょう。
またフォントや行間、ボタンのサイズ、配置など、カスタマイズ性が高いとなおよいです。

ただし、モバイルフレンドリーのために、別途プラグインを入れる必要はありません。
プラグインを使うことで、かえってページの表示速度が遅くなるなど、別の問題が発生する恐れがあるからです。