モバイルフレンドリーとは？SEO効果や判定の仕方、対応方法を解説
（ 最終更新日：2024年5月14日）
パソコンでウェブ閲覧をするユーザーは徐々に減っており、近年ではスマートフォンやタブレットによるアクセスが増えています。モバイル端末の割合が増えるにつれて、Googleなどの検索エンジンは「モバイルフレンドリー」という考え方を重視するようになりました。
モバイルフレンドリーはSEOに影響する要素であり、すでに多くのウェブサイトが導入を進めています。時代の変化に乗り遅れると、検索順位の低下によって多くのアクセス数を失うかもしれません。
本記事では、モバイルフレンドリーの概要やSEO効果に加えて、対応する方法やコツなどを分かりやすく解説します。
目次
モバイルフレンドリーとは？
モバイルフレンドリーとは、モバイル端末でも閲覧しやすいようにウェブサイトの表示を最適化する考え方です。重要なSEO施策のひとつであり、検索エンジンのGoogleは2015年の時点で、ウェブサイトの評価要素に「モバイルフレンドリー」を加えています。
| ＜Googleによるアナウンス（2015年2月27日）＞ Google では、4 月 21 日より、ウェブサイトがモバイル フレンドリーかどうかをランキング要素として使用し始めます。この変更は世界中の全言語のモバイル検索に影響を与え、Google の検索結果に大きな変化をもたらします。この変更によって、検索ユーザーは、クエリへの関連性が高く使用端末にも適した高品質な検索結果を見つけやすくなります。 （引用：Google検索セントラル「検索結果をもっとモバイル フレンドリーに | Google 検索セントラル ブログ | Google for Developers」） |
モバイルフレンドリーの重要性が増している背景には、モバイル端末の世界的な普及があります。
スマートフォンやタブレットの普及により、近年ではモバイル端末でウェブ閲覧をするユーザーが増えました。しかし、モバイル端末の画面サイズはパソコンより小さいことが多いため、従来のウェブサイト表示では「文字が小さくて読みづらい」「表や図のデザインが崩れる」などの弊害が生じます。
もしこのままの状況が続くと、モバイルユーザーの利便性が下がることで、検索エンジンの利用頻度が減ってしまうかもしれません。そのため、Googleをはじめとする検索エンジンは、モバイルフレンドリーなウェブサイトを評価する方針にシフトしています。
モバイルフレンドリーのSEO効果は大きい？
数あるSEO施策の中で、モバイルフレンドリーの重要性はどれくらい高いのでしょうか。以下では「モバイル端末の割合」と「Googleの見解」の観点から、モバイルフレンドリーのSEO効果について解説します。
7割以上がスマートフォンからウェブ閲覧
モバイル端末を使うユーザーは年々増えていることから、モバイルフレンドリーの重要性はますます高まることが予想されます。総務省が公表している「令和4年通信利用動向調査の結果」によると、個人がインターネットを利用している機器で最も多い端末はスマートフォン（71.2％）です。
（引用：総務省「令和4年通信利用動向調査の結果」）
約半数のユーザーはパソコンを利用していますが、保有世帯の割合（※下図）は2013年頃から伸びていません。一方で、スマートフォンやタブレット型端末の保有割合は増加傾向にあることが分かります。
（引用：総務省「令和4年通信利用動向調査の結果」）
このような現状を考えると、モバイルフレンドリーに対応しないウェブサイトは、ユーザーの滞在時間や回遊率が減少するかもしれません。検索エンジンはこれらの要素を重視しているため、最終的にはウェブサイト（コンテンツ）の検索順位が下がることも考えられます。
Googleもモバイルフレンドリーを評価
Googleのガイダンスによると、モバイルフレンドリーはSEOに直接影響しないことがあります。ただし、検索エンジンはUX（ユーザーの利便性）を評価しているため、モバイル端末に対応するSEO施策は有効といえるでしょう。
| ＜Googleによる見解＞ 以前は Core Web Vitals、モバイル対応であること、HTTPS を利用していること、煩わしいインタースティシャルがないことがページ エクスペリエンス シグナルとしてリストアップされていました。これらのシグナルは引き続き検索ランキングで使用されていますか？ これらのシグナルのすべてがランキングに直接使用されるとは限りませんが、検索ランキングの順位が高いページはページ エクスペリエンスに関するこれらの要素も優れているため、注目に値すると考えています。 引用：Google検索セントラル「ヘルプフル コンテンツの作成におけるページ エクスペリエンスの影響 | Google 検索セントラル ブログ | Google for Developers」 |
上記の通り、「モバイル端末での読みやすさ」が直接的な評価指標にならない場合もありますが、モバイルフレンドリーはUXを高める施策のひとつです。モバイルユーザーの滞在時間やサイト内回遊率がアップすれば、自然と検索エンジンからの評価が高まるので、結果として有効なSEO対策になるかもしれません。
2023年12月には、モバイル端末への対応度を調査できるサービスが提供終了となりましたが、Googleは依然としてモバイルフレンドリーの重要性を説いています。
| ＜Googleによる見解＞ なお、2023 年 12 月 1 日以降、Search Console の「モバイル ユーザビリティ」レポート、モバイル フレンドリー テストツール、Mobile-Friendly Test API については提供を終了する予定です。ただし、Google 検索でのランキングを上げるうえでモバイル ユーザビリティが重要でないから提供を終了するわけではありません。モバイル ユーザビリティは、かつてないほど頻繁にモバイル デバイスを利用しているユーザーにとって重要なことです。そのため、現在でもページ エクスペリエンスに関するガイダンスに記載されています。 引用：Google検索セントラル「ヘルプフル コンテンツの作成におけるページ エクスペリエンスの影響 | Google 検索セントラル ブログ | Google for Developers」 |
なお、モバイルフレンドリーはあくまで施策のひとつであり、UXを高めるには包括的な内部対策が必要です。ウェブサイトの内部対策に興味がある方は、下記のページにチェックリストをまとめているので、本ページと併せて確認してみてください。
モバイルフレンドリーの判定方法
Googleはウェブサイトのモバイルフレンドリーを判定するツールとして、「モバイルフレンドリーテストツール」と「Google Search Console（モバイルユーザビリティレポート）」を無料で提供していました。しかし、2024年現在では提供が終了しているため、別の方法で判定をする必要があります。
どのような方法があるのか、以下ではモバイルフレンドリーを判定できる2つのツールを紹介します。
Lighthouseの使い方
（引用：chromeウェブストア「Lighthouse」）
Lighthouseは、GoogleChromeの拡張機能として提供されているツールです。さまざまな要素からウェブサイトのSEOスコアを判定でき、その評価要素のひとつに「MOBILE FRIENDLY（モバイルフレンドリー）」が含まれています。
| ＜Lighthouseでモバイルフレンドリーを判定する手順＞ 手順1：Googleアカウントにログインする 手順2：Lighthouseのページにアクセスする 手順3：「Chromeに追加」を選択する 手順4：ポップアップの「拡張機能を追加」を選択する 手順5：判定したいウェブサイトを開く 手順6：Lighthouseアイコンから「Generate report」を選択する |
手順6のLighthouseアイコンは、ブラウザの上部に表示されます。もし表示されない場合は、Chromeの拡張機能ボタンを選択し、リストにあるLighthouseのピンマークで表示を固定しましょう。
（引用：chromeウェブストア「Lighthouse」）
分析結果のページを下にスクロールすると、「MOBILE FRIENDLY」の問題点が表示されます。
PageSpeed Insightsの使い方
引用：Google for Developers「PageSpeed Insights」
Googleが提供するPageSpeed Insightsは、ウェブサイトの読み込み時間を判定できるツールです。ウェブサイトのURLを入力すると、携帯電話とデスクトップに分けて読み込み時間が表示され、容量を削減できるメディアやJavaScriptも把握できます。
| ＜PageSpeed Insightsでモバイルフレンドリーを判定する手順＞ 手順1：PageSpeed Insightsのページにアクセスする 手順2：ウェブページのURLを入力する 手順3：「携帯電話」を選択し、分析結果を確認する |
なお、PageSpeed Insightsは読み込み時間を確認するツールなので、文章・図表の見やすさなどは判定できません。モバイルフレンドリーの詳細な分析結果を知りたい場合は、前述のLighthouseを利用しましょう。
モバイルフレンドリーに対応する方法3つ
モバイルフレンドリーなウェブサイトを構築する方法は、以下の3つに分けられます。
- レスポンシブWebデザイン（端末ごとに表示を自動調整）
- ダイナミックサービング（ページごとに複数のHTMLを構築）
- セパレートタイプ（端末ごとにURLを出し分ける）
それぞれどのような仕組みなのか、メリット・デメリットと併せて紹介します。
1.レスポンシブWebデザイン
レスポンシブWebデザインは、プログラミング言語のCSSを活用して、HTMLを自動調整する仕組みです。ユーザーが使用する端末の画面サイズに合わせて、解像度やレイアウトなどを簡単に調整できます。
検索エンジンのGoogleが推奨していることから、レスポンシブWebデザインは多くのウェブサイトで採用されています。
参考：Google for Developers「レスポンシブ・ウェブデザイン – メディアクエリのパワーを使いこなす | Google 検索セントラル ブログ」
レスポンシブWebデザインを採用する場合は、表示端末ごとにURLを変える必要がありません。HTMLの細かい書き換えも不要なので、コンテンツを頻繁に更新するウェブサイトでも採用しやすいでしょう。
ただし、HTMLファイルのソースが長くなり過ぎると、ページの読み込み時間が遅くなることもあります。
2.ダイナミックサービング
ダイナミックサービングは、ひとつのURLの中で複数のHTMLファイルを構築し、端末ごとに呼び出すHTMLを変える仕組みです。レスポンシブWebデザインと同じく、同一コンテンツでURLを切り分ける必要がないため、ページURLの管理は容易になります。
しかし、コンテンツごとに複数のHTMLを構築することを考えると、ウェブサイト全体の管理は複雑になるかもしれません。また、PHPなどの専門的なプログラミング言語が必要になる点も、事前に知っておきたいデメリットでしょう。
簡単にまとめると、同じURLで各コンテンツを管理したい場合、かつレスポンシブWebデザインより読み込み時間を短縮したい運営者に向いている方法です。
3.セパレートタイプ
セパレートタイプは、表示端末ごとにURLを切り分ける施策です。たとえば、スマートフォン用のHTMLと、デスクトップ用のHTMLで構成したページを用意し、アクセスした端末に合わせてHTMLファイルを出し分けます。
セパレートタイプはカスタマイズ性が高く、各端末の画面サイズに合わせやすい特徴があります。細かい修正もしやすいので、デザインやコンセプトを変更する可能性があるウェブサイトに向いているでしょう。
その一方で、各ページの構築に手間がかかる点や、リダイレクトによって読み込み時間が遅くなる点はデメリットでしょう。また、端末ごとにURLが変わるため、異なるデバイス間でのページ共有も難しくなります。
モバイルフレンドリーなウェブサイトにするポイント
どのような端末でも利用しやすいウェブサイトを作るには、コンテンツの見せ方にこだわることが重要です。ここからは、モバイルフレンドリーなウェブサイトにする4つのポイントを紹介します。
フォントサイズと行間を調整する
本記事のように、テキストが大部分を占めるコンテンツについては、フォントサイズと行間を見やすく調整しましょう。
一般的にフォントサイズについては、16px～18pxが適正とされています。特に小さすぎる場合は、検索エンジンからの評価が下がることもあるので、表示したい情報量よりも「読みやすさ」を優先してください。コンテンツによって適したフォントサイズは異なりますが、検索エンジンのGoogleは16pxを推奨しています。
行間については、フォントサイズの50％～100％前後が一般的な適正値です。フォントサイズを決めたら、0.5文字～1.0文字分になるように行間を調整してみてください。
テキストが密集しない工夫をする
読みやすいコンテンツは、テキストが密集しないように工夫されています。たとえば、一文が長すぎるテキストや、改行が少ないテキストは複雑な印象を与えるため、多くのユーザーが途中で離脱してしまいます。
テキストの密集を避けるには、一文の長さを80文字前後に抑えて、2～3文で改行することを意識しましょう。また、見出しや箇条書き、図表などを活用すると、コンテンツの見栄えを整えやすくなります。
読みやすいコンテンツの書き方については、下記のページでも詳しく解説しています。分かりやすく美しい文章を目指している方は、本記事と併せてぜひチェックしてみてください。
画面サイズに合わせた画像を用意する
画面の小さいモバイル端末と、パソコンなどのデスクトップ端末では、同じ画像でも見え方が異なります。特に画像サイズが自動調整される場合は、縮小・拡大によって文字が滲んだり、細部が分かりづらくなったりするかもしれません。
そのため、コンテンツ内に画像を掲載する際には、各端末での見え方を確認することが重要です。サイズの調整が難しい場合は、複数の画像（スマホ用、タブレット用など）を用意することも検討してみてください。
端末によってコンテンツの量を変えない
端末の画面サイズに合わせてコンテンツ量を変えると、SEO面で不利になる可能性があります。検索エンジンのGoogleは、モバイル版のコンテンツをインデックスに登録する割合を増やしているためです。
参考：Google検索セントラル「モバイル ファースト インデックスの展開 | Google 検索セントラル ブログ | Google for Developers」
たとえば、パソコン用として公開していた記事を、セパレートタイプでモバイル対応にするケースを考えてみましょう。モバイル端末用のページで一部のテキストや画像を省略すると、そのページが検索エンジンの評価対象になることで、検索順位を下げられてしまう可能性が考えられます。
テキストの密集などが気になる場合は、アコーディオンメニュー（開閉式のメニュー）を活用するなど、コンテンツ量が減らない対策を考えましょう。
正しい知識でモバイルフレンドリーなサイトを目指そう
モバイル端末の利用率が上がるにつれて、モバイルフレンドリーはますます重視されることが考えられます。検索エンジンから直接的に評価されなくても、ユーザーの滞在時間やサイト内回遊率に関わるため、モバイルフレンドリーは常に意識しておきたいSEO施策でしょう。
ただし、正しい知識をつけた上で手を加えないと、かえって読みづらいコンテンツになってしまうかもしれません。モバイルフレンドリーの施策を進める前には、自身のウェブサイトに合った方法を慎重に判断し、ひとつずつ変化を確認しながら作業を進めてください。
本記事のテクニックや内容が、貴社のビジネスにプラスとなりましたら幸いです。実際のプロセスで不安や懸念などがございましたら、お気軽にご相談くださいませ。
- 文字数はSEOにどう影響する？検索上位を狙うポイントと考え方 - 2024年5月9日
- モバイルフレンドリーとは？SEO効果や判定の仕方、対応方法を解説 - 2024年5月9日
