【初心者向け】MFI（モバイルファーストインデックス）を詳しく解説！

Googleが重視するガイドラインのひとつにMFI（モバイルファーストインデックス）があります。検索エンジンの順位決めの要素に、モバイル（スマートフォン）に最適化されたWebページを優先するガイドラインです。MFIは検索エンジンから集客する際はもちろん、ユーザーの利便性や満足度を高めるためにも、ぜひ取り組みたいガイドラインです。

MFIをはじめて学ぶ方、そしてこれからWebサイトを制作する方向けに、MFIの基礎知識を中心にご紹介します。最後までご一読ください。

MFI（モバイルファーストインデックス）とは？

MFIはモバイルファーストインデックス（Mobile First Index）の略語です。Webサイトのレイアウトや表示速度が、スマートフォンやタブレット向けに「最適化」されたサイトを優先的に評価するGoogleのガイドラインです。

2016年にGoogleが導入を発表したのを皮切りに、Web業界全体でMFIへの移行にむけた準備が進められてきました。そして2021年3月からは、強制的にMFIの移行が開始されました。現代のWebサイト制作においては、MFI対応は欠かせないものとなっています。

GoogleがMFIに注力する背景

 なぜGoogleはMFIを強制的に推し進めたのか？その背景に、スマートフォン（モバイル）の急速な普及があります。総務省の2021年統計によると、インターネット個人利用者のうち、68.5%がスマートフォンユーザーという結果。パソコンユーザーを大きく上回っています。若年層がメインターゲットのWebサイトであれば、スマートフォンユーザーはほぼ100%でしょう。

モバイル端末とパソコンではWebサイトの操作方法が異なる

Webサイトを閲覧するとき、スマートフォンとパソコンでは大きく違います。ひとつは画面サイズ。デスクトップの場合、モニターは24〜32インチ、ノートPCは13〜15.6インチが主流です。

スマートフォンの場合、4.7インチ〜6.7インチ。パソコンと比べて半分以下のサイズです。パソコン向けのWebページをスマートフォンで閲覧すると、レイアウトが崩れ文字が読みづらくなります。スマートフォンはパソコンとは異なり、スマートフォンに最適化された文字サイズが求められます。

パソコンとスマートフォンでは、画面の操作方法も異なります。パソコンはマウスが主流ですが、スマートフォンは指でタップし操作します。

スマートフォンで快適に操作するには、タップしやすいボタンサイズやレイアウトが求められます。複数のボタン領域が近すぎると押し間違えやストレスになるため、十分な領域を確保するなど考慮しなくてはいけません。

モバイル端末とパソコンでは通信環境が異なる

「通信速度」においても、スマートフォンとパソコンで大きな違いがあります。パソコンは自宅やオフィスで利用するシーンが多く、光ファイバーなど高速回線を利用するケースが多いです。一方でスマートフォンは外出先で利用するシーンが多くなります。地方や山間部は電波が届きづらいエリアも多く、パソコンよりスピードが劣るケースが増えます。

米国Webアクセス解析ツールを提供する「Kissmetrics」の調査によると、ページの表示に3秒以上待たされると、40%のユーザーが離脱するという報告があります。Webサイトは、読み込みに時間がかかりすぎると、ストレスを感じ離脱につながってしまいます。

※出典：「How Loading Time Affects Your Bottom Line」

Googleは検索エンジンなどの広告収益でビジネスを展開する民間企業ですが、世界中のユーザーが同社のサービスを継続して利用してもらうためには、ストレス無く快適に利用してもらえる環境作りが欠かせません。ユーザーの多くがスマートフォンを利用する現状からみて、GoogleがMFIに注力する理由は想像にむずかしくないでしょう。

WebサイトをMFI対応する方法

スマートフォンは、パソコン向けのWebサイトであっても閲覧可能ですが、快適に閲覧はできずストレスを感じてしまいます。スマートフォン用に最適化されたページを用意する必要があります。方法として次の3つがあります。

• レスポンシブウェブデザイン
• ダイナミックサービング（動的な配信）
• セパレートURL（別URLで表示）

上記3つはGoogleのガイドラインで推奨されている方法です。次の章で各方法について詳しく紹介しますので、自社にとって最適な手法を選びましょう。

レスポンシブウェブデザイン

レスポンシブデザインは、ユーザーの画面サイズに応じて、自動的にレイアウトを変更する設計手法です。URL・HTMLともに「1つ」で構成されます。メリットとデメリットは次のとおりです。

レスポンシブデザインは、デバイスごとのデザイン調整はCSSで行われます。一元管理できるため管理しやすいようにも思えますが、デバイスごとに設計し構築には複雑な手間はかかります。また、どのデバイスにも対応できる半面、レイアウトが中途半端になりやすい傾向があります。

ダイナミックサービング（動的な配信）

ダイナミックサービングとは、1つのURLに対して2つのHTMLを用意し、ユーザーのデバイスに応じてパソコン向け、スマートフォン向けページを出し分ける方法です。ダイナミックサービングのメリット・デメリットは次のとおりです。

ダイナミックサービングの開発は、サーバーサイド言語を使用する必要があり難易度は高めです。

セパレートURL（別個の URL）

セパレートURLは、パソコン、スマートフォンそれぞれに異なるHTMLとURLを用意する方法です。例えば、パソコン向けサイトのURLは「abc.com」のURLで配信し、スマートフォン向けサイトは「abc.copm/sp」や「sp.abc.com」などで配信します。メリット・デメリットは次のとおりです。

パソコン・スマートフォンを別々に制作し管理するのは手間ですが、それぞれのデバイスに最適化しやすく細かな修正も問題無く対応できます。

手法は混在しても問題は無い

上記ご紹介した「レスポンシブウェブデザイン」、「ダイナミックサービング」、「セパレートURL」は、どれか1つだけ選択するのが一般的ですが、混在しても問題ありません。

例えばデバイスごとに細かな修正が必要なページはセパレートURLで制作し、汎用的なページはレスポンシブルにするなど･･･混在が可能です。どの手法が最適ということは無く、自社が運用しやすい方法で選んでOKです。

「モバイルフレンドリー」対応でMFIを実現する

MFIに対応させるためにまず欠かせないのは、サイトを「モバイルフレンドリー化」すること。モバイルフレンドリーとは、スマートフォンユーザーがストレス無く快適に操作するために必要な要件です。具体的な方法は、次のとおりです。

• 互換性のないプラグインを使用しない
• フォントサイズは小さすぎない
• ビューポートを設定する
• タップ要素同士が近すぎない

あなたのWebサイトが、これらの条件を満たしているかは、つぎの「モバイルフレンドリーテスト」でチェックできます。

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

項目をひとつずつ見ていきましょう。

互換性のないプラグインを使用しない

Adobe Flash、Javaアプレット、QuickTimeなど、サポート終了したプラグインが実装されている場合は、コンテンツが正常に表示されなかったり、セキュリティ面に問題があったりと不都合が発生します。さらに操作性が悪く、バッテリー消耗にも影響があるため、互換性がないプラグインは排除しなくてはいけません。HTML5、CSS3、JavaScriptなど最新のモバイルフレンドリーに対応した技術を使いましょう。

フォントサイズは小さすぎない

スマートフォンが操作しやすい仕様は次のとおりです。

Webサイトのデザインによって上記の推奨値が若干異なる場合があります。制作しながらモバイルフレンドリーテストを実施し精度を高めましょう。

ビューポートを設定する

ビューポート（Viewport）とは、Webサイトを表示する領域のことです。モバイル端末は画面が小さいため、適切に表示されるようにビューポートの設定を調整する必要があります。代表的な設置方法は次のとおりです。

「基本の設定」において、width=device-widthはページのビューポートの幅がユーザーのデバイスのスクリーン幅に合わせて設定されます。initial-scale=1は、ページが初めて読み込まれたときのズームレベルが100%として設定されます。この基本的な設定を行うことで、モバイルデバイス上でのページの表示が大幅に改善され、ユーザビリティや読みやすさが向上します。

タップ要素同士が近すぎない

モバイル端末は画面が小さくタップがしづらいため、タップしやすいレイアウトを施します。具体的には次のとおりです。

モバイルデバイスのタップ要素の配置やサイズを最適化することで、操作性が向上します。

MFI対応のために実施しておきたい設定 

上述のモバイルフレンドリーに加えて、次の設定を行いましょう。

• コンテンツを同一にする
• 構造化データのマークアップ
• robots.txtを設定する
• Search Consoleに登録する

詳しく見ていきましょう。

コンテンツを同一にする

スマートフォンは画面サイズが小さい分、一画面で表示できるコンテンツ量に限りがあります。コンテンツ量が多いページにおいては、パソコン版と同じボリュームをそのままスマートフォンに表示させると、読み込みに時間がかかりストレスを感じてしまいます。また、スクロールが増えて操作に手間がかかり利便性が低下します。

しかしながら、同じページなのにSP版サイトかPC版サイトで情報量に違いがあると、ユーザーにとって有用なサイトとは言えなくなります。コンテンツは同一に保ちつつ、SP版サイトの表示方法や読み込み方法を工夫してユーザビリティは落とさないようにしましょう。

構造化データのマークアップ

構造化データは、検索エンジンにページのコンテンツの意味や構造を明確に伝えるためのデータです。MFIにおいてはデスクトップ版とモバイル版のコンテンツが同一であることが推奨されますが、構造化データもサイトの一貫性を保持するために重要な要素です。構造化データの正確なマークアップを行い、情報提供の不一致を防ぎましょう。

構造化データは、ウェブページのコンテンツを検索エンジンに正確に伝えることに役立ちます。さらにECサイトを例にあげると、価格、評価、製品画像などを設定することで、検索エンジン結果にリッチスニペット表示が期待できます。必ず設定しておきましょう。

robots.txtを設定する

robots.txtは、検索エンジンのクローラー（ボット）に対して、どのページをクロールするか、しないかを指示するためのファイルです。主な設定は次のとおりです。

robots.txtを正しく設定することで、クローラーにWebサイトの構造を伝えることができます。

Google Search Consoleに登録する

Google Search Consoleは、ウェブサイトの所有者や運営者がGoogleの検索に関する情報を得るためのツールです。

■Google Search Console

MFI対応の一環として、Google Search Consoleにサイトを登録しましょう。登録することで、以下のメリットを受けられます。

• モバイルフレンドリーに問題のあるページを教えてくれる
• 構造化データのエラーを確認することができる
• サイトマップを提出しクロールの手助けができる

Google Search Consoleを定期的にチェックすることで、自社サイトがMFI対応できているか？修正が必要なページはどれか？を把握できます。MFIの問題点を消去していくことで精度を高めることができます。

MFI対応の応用編

自社のWebサイトに応じて、次の設定も行いましょう。

表示スピードを速くする

ページの表示・読み込み速度は、ユーザー体験に大きく影響します。スピードを速めるための代表的な施策は次のとおりです。

スピードが遅い場合は、必ず対策しましょう。

URLが別の場合の設定

「セパレートURL」や「動的表示」のように、スクトップ版とモバイル版で異なるURLを持つサイトにおいては、ロボットへ正確に伝えるためにアノテーションの設定が必要です。例えば、デスクトップ版のページにモバイル版へのポインタを追加する場合は、次のように記述します。

<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”https://abc.com/sp“>

また、モバイル版のページにデスクトップ版へのポインタを追加する場合は次のように記述します。

<link rel=”canonical” href=”https://www.example.com/page-1″>

アノテーションは、主に<link>タグを使用してHTMLの<head>部分に追加します。アノテーションを適切に設定することで、検索エンジンはページの関連性を理解することができます。

まとめ

今回はモバイルファーストインデックス（MFI）について紹介しました。MFI対応はSEOのランキング要素ですが、最近は競合するWebサイトも対策済みであることが多いため、MFIのみで上位表示はむずかしいのが現状です。それでも未対応だとマイナス評価になってしまうので、対応は必須です。モバイル時代に最適なユーザビリティを実現するためにも、MFIを意識してサイト制作に取り組みましょう。