モバイルフレンドリー（MFI）とは、その名の通りモバイル環境でも支障なくWebサイトを閲覧できるかどうかを示す言葉です。Webサイト制作にあたりブラウザでの閲覧を前提としていたのはすでに過去の話で、ユーザの半数以上がスマートフォンやタブレットでサイトを閲覧している現在、モバイル対応は必要不可欠です。ユーザの利便性だけではなく、Google検索での順位も下がることになりかねない、事実上対応が必須の仕様について見ていきます。

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

モバイルフレンドリー（MFI、Mobile First Indexの略）とは、スマートフォンやタブレットなど、PC以外のデバイスでもスムーズに閲覧できるWebサイトのことです。スマートフォンはPCよりも画面サイズが小さく、表示できるコンテンツも制限されてしまうため、PCサイトのままではユーザが快適に閲覧できない可能性があります。こうしたケースによるユーザの利便性を損なわないため、Googleは2015年に検索アルゴリズムをアップデート。結果として、モバイルフレンドリー対応をしていないWebページは検索順位が下がることになりました。Googleはさまざまな面での検索満足度の向上を目指しており、このアップデートも検索上位に表示されるページがデバイスを選ばず快適に閲覧できることでユーザに寄与しようとしているのです。

モバイルフレンドリーが登場した背景とメリット

では、Googleをはじめとした検索エンジンは、なぜモバイルフレンドリーを重視するようになったのでしょうか。最大の要因はスマートフォンの急激な普及です。2018年の時点ですでにインターネットの閲覧はPCよりもスマートフォンからの方が多いことがわかっており、従来とは違ってWebページの閲覧はすでにスマートフォンから行うことが大前提なのです。スマートフォンの小さな画面からは通常のWebページの文字は小さくて読みづらいという問題もあるでしょう。また、Flash動画のようにブラウザ上での再生が制限されるコンテンツもあります。そうした不便さを解消するよう、Googleがウェブマスター向けに公式に方針を示しているため、現在ではモバイルフレンドリー対応はWebサイト製作の基本事項になっているといえるでしょう。もちろん、モバイルフレンドリーなWebサイトはより多くのPVを獲得することが可能です。しかし、時の経過とともに対応サイトが増えていることから、SEO上のメリットというよりは対応しないことによってデメリットがある、といった方が良さそうです。

モバイルフレンドリーなサイトのポイント

では、どのようなWebページがモバイルフレンドリーと呼ばれるのでしょうか。以下のようなポイントがあります。

• 文字が小さすぎない

すでに述べたようにPCからの閲覧を前提としたページは、スマートフォンから見ると文字が小さすぎることがあります。もっともわかりやすいモバイルフレンドリーのポイントなので必ずおさえておきましょう。

• モバイル用viewportの設定

viewport（ビューポート）とは、Webページをどのように見せるかという設定のことです。ここでモバイル向けの設定をしていないとPC用のページが縮小されて表示されるため、ユーザがズームしないとよく見えないという状態になってしまいます。metaタグで指定することができ、具体的な記述例としては以下のようになります。

metaタグに対して、 name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″を指定します

width=device-widthで横幅をデバイス幅に指定し、初期の表示倍率をinitial-scale=1と1にすることでユーザがズームをせずに閲覧することを表します。また、maximum-scale=1は最大の表示倍率のことでこれはminimum-scaleとして最小倍率を指定することもできます。なお、viewportの設定にはどのような端末での表示を想定しているかで変わってくるため、他のサイトのHTMLをコピーして使ってしまうと自ページには適さない表示になることがあり、注意しましょう。

• タップやスクロールといったモバイル端末の特性に最適化されている

忘れがちなポイントでもありますが、PCでの閲覧と違い、スマートフォンではリンクのクリックがマウスではなく指でタップする操作となります。PCサイトではそれほど気にする必要もなかったのですが、各コンテンツで十分な幅が確保できていないと誤ったリンクをクリックする可能性も高まり、ユーザにとっては不便です。同様に、左右への横スクロールがあるとスマートフォンでの閲覧には不向きです。縦のスクロールのみでページを閲覧できるようデザインを最適化しましょう。

• Flashの不使用

スマートフォンでは対応するブラウザがなく、Flashの再生ができません。特にインタラクティブなコンテンツを埋め込みたいときには十分注意します。FlashはPC用サイトでもサポートされなくなってきており、HTML5への移行がなされています。

• Web上でチェックができるテストツールもある

さまざまなポイントを挙げましたが、自ページがモバイルフレンドリーか検証するのは意外に手間がかかるものです。現在はWeb上でチェックできるツールもあるので、活用すると良いでしょう。

具体的な対応方法は？

モバイルフレンドリーに対応するためには、いくつかの方法があります。

セパレートURL

要するにモバイル用とPC用でURLを分ける方法です。互換性のあるデザインを意識しなくても良いという利点はあるものの、ユーザの利便性、特にURL共有のしづらさを考えるとあまりおすすめでききません。なお、双方のページが関連していることを示すため、アノテーションを与えてクローラーに正しく認識させる必要があります。PC用ページにはlink rel=”alternate”、モバイル用ページにはlink rel=”canonical”のタグを記述します。

ダイナミックサービング

ダイナミックサービングであればPC・モバイルともにURLは1つになります。これはWebサーバがユーザが使用している端末を検知して最適なページを配信（サービング）するというもの。URLが統一できることやデザインをカスタムしやすいこと、読み込みが速いことがメリットです。ただし、セパレートURLと同様、同じコンテンツでも2つのセットが必要となり、管理・更新が煩雑であるという点はデメリットといえます。

レスポンシブWebデザイン

レスポンシブWebデザインはダイナミックサービングで課題となる管理の煩雑さを解消したものといえるでしょう。こちらはユーザがアクセスする端末の画面によってデザインを変更するものなので作成・更新するセットは1つで済みます。このため、当然URLも1つです。こうしたメリットに加えて読み込みも速いため、3つの手法の中ではレスポンシブWebデザインがもっともおすすめといえるでしょう。Googlebotがクロールしやすいこともあり、Googleもこちらを推奨しています。

モバイルフレンドリーはより多くのユーザの利便性に寄与するもの

モバイルフレンドリーへの対応は現在では事実上必須のものとなっています。本文中でも紹介したようにWeb上でチェックできるページもあり、公開前に確認しておきたいところです。ただ、実際には代表的なエラー「ページが部分的に読み込まれました」や「コンテンツの幅が画面の幅を超えています」といったワードで検索してみると、原因は読み込みコンテンツにエラーがある場合やwidthでの表示幅の設定を誤るといった単純なエラーだけではないこともわかります。不明場合はGoogleの公式フォーラムで質問したりと、外部の知見を借りることも必要かもしれません。