モバイルフレンドリー（スマホ最適化）とは？SEOへの影響や対応方法を解説

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

モバイルフレンドリーとは、スマートフォンやタブレットなどのモバイルデバイスにおけるWebサイトの表示・操作が最適化されている状態のことです。

PC版のページがそのままスマートフォンの画面に表示されると、文字が小さすぎたり、重くて読み込み速度が遅くなったりして、モバイルユーザーにとってストレスフルなものとなります。このような状態を改善し、モバイルユーザーの利便性が向上した状態がモバイルフレンドリーな状態です。

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

モバイルフレンドリーと混同しがちなものに、モバイルファーストインデックス（MFI）があります。少し紛らわしいですがこの２つは別物です。

モバイルファーストインデックスとは、GoogleがWebページをインデックスする際にモバイル向けコンテンツを主軸に評価するシステムのことを指します。つまり、

• モバイルファーストインデックス→クローリングプロセスに紐づくもの
• モバイルフレンドリー→ユーザーランキングプロセス（その中でも特にユーザーエクスペリエンス）に紐づくもの

ということになります。モバイルフレンドリーについて詳しく知りたい方は、以下の記事もご覧ください。

関連記事：モバイルファーストインデックス（MFI）とは？

モバイルフレンドリー対応によるSEOへの影響

Googleは2015年に、モバイルフレンドリーであるかどうかをSEO評価の一つにする（モバイルフレンドリーアップデート）と公言しました。これは、モバイルフレンドリーなWebサイトの掲載順位が、そうではないサイトよりも引き上げられる可能性があることを意味します。

モバイル端末からインターネットを利用するユーザーが増えている現在、モバイルユーザーにとって読みやすく使いやすいWebサイトが求められているということは、誰でも予想がつくでしょう。

SEOで高い評価を得るなら、モバイルフレンドリーに対応したサイトが重要になるのです。

現在のあなたのサイトはモバイルフレンドリー？

モバイルフレンドリーであるかを評価するための定量的な指標として、PageSpeed Insightsスコアがあります。これらの指標を定期的にモニタリングし、改善点を特定することで、Webサイトのユーザビリティを維持・向上させることが可能です。

PageSpeed Insightsで確認する方法

PageSpeed Insightsはページ速度のパフォーマンスを測定することができるツールです。スコアを確認したいWebサイトやWebページのURLを貼り付け、分析ボタンを押すだけで、無料で測定できます。

Google Chromeの拡張機能「Lighthouse」でも、ワンクリックでPageSpeed Insightsのスコア測定が可能ですので、お好みのものをお使いください。

ここで評価されるのは、以下の6つの指標です。

• LCP（Largest Contentful Paint)：ページの読み込み速度
• INP（Interaction to Next Paint)：インタラクティブな部分が応答するまでの平均時間
• CLS（Cumulative Layout Shift)：視覚的な安定性
• FCP（First Contentful Paint)：最初のコンテンツが表示されるまでの時間
• FID（First Input Delay)：最初の入力から応答までの時間
• TTFB（Time to First Byte)：ユーザーがリクエストを送信してから、最初のデータがブラウザに到着するまでの時間

6のうち、上3つのLCP・INP・CLSは、コアウェブバイタル指標として特にユーザー体験に直結する重要な指標として位置づけられています。コアウェブバイタルとは、ユーザー体験に直結する重要な指標として位置づけられているものです。

関連記事：【WEB担当者必見】PageSpeed Insightsを使ってサイトの表示速度を改善しよう！

Googleサーチコンソールで確認する方法

上記のコアウェブバイタル指標は、Google Search Consoleでも確認ができます。Google Search Consoleにアクセスし、メニューバーにある「エクスペリエンス」>[ウェブに関する主な指標]という項目からチェックしてみてください。

注意：モバイルフレンドリーテストツールは提供終了

以前はモバイルフレンドリーであるか否かをチェックできる公式のテストツールがありましたが、Googleは2023年12月に提供終了しました。

2023 年 12 月時点で、モバイル フレンドリー テストとモバイル ユーザビリティ レポートの提供は終了しています。

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

ただし、Google検索でのランキングを決定する上で、モバイルユーザビリティが重要でないから提供を終了したわけではありません。このテストツール以外にも、現在はPageSpeedInsightをはじめ、モバイル ユーザビリティを評価するツールが多く登場しているため、お役御免になったといえるでしょう。

モバイルフレンドリーに対応させるGoogleおすすめの方法

サイトをモバイルフレンドリーにする方法について、Googleは公式ブログで以下のように述べています。

• レスポンシブ デザイン: ユーザーのデバイスの種類（パソコン、タブレット、モバイル、非視覚系ブラウザなど）に関係なく、同じ URL で同じ HTML コードを配信しつつ、画面サイズに応じてコンテンツの表示方法を変更します。Google では、実装と維持が最も簡単なデザイン パターンとしてレスポンシブ ウェブ デザインをおすすめしています。
• 動的な配信: デバイスに関係なく同じ URL を使用します。この構成方法では、デバイスに応じて異なるバージョンの HTML を配信するために、user-agent スニッフィングと Vary: user-agent HTTP レスポンス ヘッダーを利用します。
• 別個の URL: デバイスに応じて別個の URL で異なる HTML を配信します。動的な配信と同様、デバイスに合ったバージョンのサイトにリダイレクトするために、HTTP の user-agent ヘッダーと Vary ヘッダーを利用します。

引用：モバイルフレンドリーなサイトを作成する｜Google検索セントラル

それぞれ説明します。

レスポンシブデザイン

レスポンシブデザインとは、パソコン・タブレット・スマホなど、Webサイト訪問者が利用しているデバイスの種類に応じて表示させるデザインを変更する手法のことです。

運営するサイトをスマホに対応させる場合や、新規でWebサイトを立ち上げる際に「レスポンシブにしましょう」と提案された経験がある人もいますよね。

レスポンシブデザインがおすすめである理由は、PCとスマートフォンで同じファイルとURLであるというところにあります。 サイトの管理・制作という視点からも、サイト制作者にとっても効率的な対策方法です。

初心者必見！　レスポンシブデザインの作り方って？　コピペできるCSSコードも紹介！

レスポンシブデザインとは、様々なデバイスや画面サイズでサイトを閲覧するユーザーに最適な閲覧体験を提供するための設計手法です。昨今、パソコン、タブレット、スマートフォンなど、様々なデバイス普及しているため、どのデバイスでも…

動的な配信

動的な配信とは、Webサイトのコンテンツ配信方法の一つで、訪問者のデバイスや環境（たとえばデスクトップ、スマートフォン、タブレットなど）に応じて、同じURLでも異なるHTMLやCSSを提供する仕組みです。

Googleなどの検索エンジンでのモバイルフレンドリー対応やUX向上のために使用されています。

別個のURL

別個のURLとは、デバイスに応じて異なるURLを用意し、それぞれに異なるHTMLを配信する方法です。単純に制作費用が2倍かかるのであまりおすすめの方法とはいえないですが、選択肢としてはあります。

この方法では、特定のデバイス（モバイルやパソコンなど）に合ったバージョンのページへリダイレクトを行います。

例えば、以下のようにモバイル版とPC版のページに異なるURLを割り当て、

デバイスによって表示を切り替える方法です。このタイプでは同じ内容のページに対して二つのURLができてしまうので、クローラーに正しく認識させるために、HTTPのuser-agentヘッダーとVaryヘッダーを利用します。

【公式から】避けたい3つのミス

モバイルフレンドリーに対応する際に、避けておきたい3つのミスを解説します。

モバイルユーザーのために構築したことを忘れてしまう

1つ目は、モバイルフレンドリーに対応したWebサイトを構築したことで満足してしまい、サイトを利用するモバイルユーザーの存在を忘れてしまうケースです。

モバイルに対応したアウトラインの構築だけでなく、訪れてくれるユーザーの役に立つコンテンツを作成したりして、ユーザーにとって有益なサイトを目指しましょう。

別のドメインやサブドメインに実装してしまう

2つ目は、PCサイトとは別のドメインやサブドメイン、またサブディレクトリをモバイルサイトに実装してしまうケースです。別のドメインやサブドメインを実装してしまうと、PCサイトとモバイルサイトを別々のURLで管理することになり、2サイト分の手間が発生してしまいます。

管理にかかる手間や労力が増えるほか、技術的な問題が発生する可能性もあるため、レスポンシブデザインを採用したりして、サイト運営の省力化を目指しましょう。

ちなみに、レスポンシブデザインとは、PCやモバイルに合わせて、ページのデザインやレイアウトを最適化させる仕組みのことです。業務効率の改善を期待できることから、Googleが推奨している仕組みの1つになります。

周囲に助けを求めずに孤立してしまう

技術的な問題ではありませんが、モバイルフレンドリーを導入する際に、周囲からヒントを得ずに孤立してしまうケースが3つ目の避けたいミスです。

特に、技術者1人でモバイルフレンドリーを新しく導入しようとすれば、技術者に大きな負担がかかってしまいます。
同僚や上司といった仲間に助けを求めるのはもちろん、同じ分野の他サイトや競合他社を参考に、自社サイトに合った方法がないか探してみるのがおすすめです。

まとめ

Webサイトはますますモバイルフレンドリーであることが求められています。 ユーザーにとってもGoogleの評価にとっても重要なモバイルフレンドリー。 これを機にもう一度サイトを確認してみましょう。