はじめに
Webサイトの作成や管理の場面で、MFIという単語を目にする機会は多いです。
スマートフォンからの検索やアクセスが増えた昨今、MFIを意識したサイトづくりは重要なポイントとなっています。
しかし、当たり前のように使われている単語ほど、実はなんとなくの意味しかわからないという場合もあるでしょう。
この記事では、そんなMFIについて、言葉の意味や確認の方法など基本の情報を解説します。
今後Webサイトの管理や運営に携わるという方は、ぜひ読んで参考にしてください。
MFI（モバイルファーストインデックス）とは？
MFIは、Mobile First Indx（モバイルファーストインデックス）の略称です。
Webサイトを検索エンジンでの検索結果に反映させるために、エンジンのデータベース（インデックス）内に収集・格納させることをインデキシングと言います。
そのインデキシングの対象を、PC向けのサイトからスマートフォンなどモバイル端末向けのサイトに変更することをMFIと呼ぶのです。
これを行うことにより、検索エンジンでなんらかの単語を検索した時に表示されるWebサイトが、モバイル端末から閲覧することを考慮したデザインのものになります。
Webページはインデキシングされなければ検索結果には反映されません。
MFIは、モバイル端末で検索を行った際に視認性の高いサイトを表示することで、ユーザーの満足度を高めるために重要な行為であると言えるでしょう。
現在、Googleなどの検索エンジン側がWebサイトの表示順位を決める際にもMFIは大きな評価基準となっています。
MFIに移行した理由は？
もともと、検索エンジンにおける検索結果の表示順位はPC向けサイトへの評価で決められており、モバイル端末向けのサイトは考慮されていませんでした。
しかし、2015年には全世界でスマートフォンなどのモバイル端末からの検索回数がPCからの検索回数を上回り、モバイル端末ユーザーの増加が目に見えるようになりました。
PC向けのWebサイトは、モバイル端末で表示した際文字が小さく表示されすぎることやレイアウトが崩れるといった問題が発生して見にくくなってしまいます。
検索結果上位に表示されるサイトの多くがPC向けのものでは、モバイルユーザーにとっては非常に使いづらい状態です。
そんな状態を改善し、モバイル端末からのユーザビリティを向上させるためにMFIへの移行が始まりました。
MFIの確認方法
MFIの要素は主に4つあります。
それは、「適切なフォントサイズか」「ビューポートの設定」「タップ要素の配置」「適切なコンテンツサイズか」です。
MFIが適用されているかは、これらの4点で判断されます。
フォントサイズが小さすぎる場合、モバイル端末の画面では見づらくなりがちです。
そのため、適切なフォントサイズを選択する必要があるでしょう。
また、PCとモバイル端末とではWebサイトを表示するビューポートの大きさが異なります。
さらに、モバイル端末は機種によってもビューポートの大きさが変わるため、それぞれ見やすい状態で表示できるよう工夫しなければなりません。
その中で、リンクや拡大画像などタップ要素が近く配置されすぎていると、ユーザーがタップした時にうまく反応しない場合もあります。
ストレスなく操作ができるよう、タップ要素は適切な配置が必要です。
そのほか、動画や画像などのコンテンツサイズがビューポートより大きい場合などはうまく表示できないこともあります。
それらのコンテンツがビューポートに合わせたサイズで表示できるかも重要です。
これらの要素が適用されているかは、こちらのサイトで確認できます。
→https://search.google.com/test/mobile-friendly?hl=ja
MFIに対応させる方法
WebサイトにMFIを適用し、モバイル端末での閲覧をスムーズにさせることをモバイルフレンドリー化と呼びます。
モバイルフレンドリーとはアルゴリズムの一種で、スマートフォンからの検索回数が増加してからGoogleが実装した検索結果の順位を決める仕組みです。
Webサイトをモバイルフレンドリー化せず放っておくと、検索エンジンでの検索結果における表示順位が下位に下がります。
通常、ユーザーは検索結果の下のほうまではわざわざ確認しません。
つまり、モバイルフレンドリー化を怠るとユーザーにサイトを見てもらいにくくなるのです。
WebサイトをMFIに対応させる方法は複数あります。
どんな方法があるか見ていきましょう。
レスポンシブWebデザイン
WebサイトをMFIに対応させる方法として、Googleが推奨しているのがレスポンシブWebデザインです。
モバイル端末の機種によって異なる画面サイズに合わせてサイトのUIを変化させる手法になります。
この変化はPCにも対応しているため、アップロードファイルやURLはPCとモバイル端末とで同一のものが使用可能です。
したがって、機種による垣根を超えてコンテンツやリンクの共有が簡単にでき、Webサイトの拡散が期待できるようになります。
また、余分なリダイレクトが発生しないため、読み込みや表示が速くユーザーのストレスが少ない状態で閲覧してもらうことができるというのも利点です。
WordPressなどを活用すれば、普通にサイトを作成するよりも簡単にモバイルフレンドリー化したサイトを作ることができます。
URLを分ける
PCとモバイル端末とでそれぞれ見やすいデザインを確保するために、WebサイトのURLを分けてしまう方法もあります。
Webサイトの内容そのものは両者でまったく同じになりますが、UIを変えるために個別の編集やファイルのアップロードが必要です。
こういった手法でモバイルフレンドリー化したサイトはセパレートタイプと呼ばれます。
URLを分ける場合は、検索エンジンがどの媒体で表示するべきURLであるかを識別できるようにしておかなければなりません。
そのための作業をアノテーションと呼び、このURLがどの媒体用に作られているかといったメタデータを注釈として付与します。
これを怠ると、UIの違う同じ内容のサイトが検索結果に2つ同時に表示されるなどして混乱を招くため、正しい処理が必要です。
ユーザーエージェント機能を使う
Webサイトを閲覧するためにアクセスした際、サイト側に開示される自分の情報をユーザーエージェントと呼びます。
この中に含まれているのは、閲覧に利用している端末の機種やブラウザの種類、OSに関する情報などです。
このような情報を取得する機能を利用して、デバイスの画面サイズに最適なUIを表示するのがダイナミックサービングになります。
WebサイトのURLはPCと共通ですが、デバイスに合わせて専用ファイルを動的に呼び出す手法です。
レスポンシブWebデザインと異なり、PCとモバイル端末とでHTMLを分ける手法になります。
また、スマートフォンなどのモバイル端末から閲覧する場合も、ユーザーは状況に合わせてPC表示に切り替えることが可能です。
まとめ
スマートフォンなどのモバイル端末から見るWebサイトのUIを最適化するMFIは、今やWebサイトの作成に欠かせない概念となりました。
サイトをMFIに対応させ、モバイルユーザーのストレスを軽減する処理を行うことで、検索エンジン側からのサイトに対する評価が改善され検索結果に反映されやすくなります。
そうなれば、ユーザーにサイトを見てもらいやすくなるでしょう。
MFIの基本を押さえて、さまざまなデバイスから見やすいサイトづくりに活用しましょう。
