モバイルフレンドリーとは｜確認方法や対応方法、注意点を解説

モバイルフレンドリーという言葉をご存知ですか？これはWebマーケティングを行う上で、とても重要な要素です。

今回はモバイルフレンドリーの概要と確認方法、対応方法について開設します。

モバイルフレンドリーとは、モバイル端末からWebサイトを快適に閲覧できる状態のこと

モバイルフレンドリーとは、スマートフォンなどのモバイル端末からWebサイトを快適に閲覧できる状態のことを指します。また、2015年4月にGoogleが実装したアルゴリズムを指す場合もあります。検索結果の評価基準の1つであり、モバイルフレンドリーに対応したサイトは未対応のサイトよりも検索上位に表示されやすくなります。他の要素よりも検索表示順に関わりにくいですが、モバイルフレンドリーに対応させるとユーザビリティも向上するため、ユーザーの離脱率が低くなるというメリットもあります。

モバイルフレンドリーへの対応が必要とされている理由

近年、スマートフォンの世界的な普及に伴いモバイル端末のユーザーは増えています。Googleは2015年に、モバイル端末からの検索がPCからの検索を上回ったと発表しました。また、インターネットを利用する機器の割合がパソコンが約60%、スマートフォンが約80%（2020年時点）という調査結果もあります。そういった状況を背景に、SEO面・ユーザビリティ面双方からモバイルユーザーへの対応が急務となったのです。

モバイルフレンドリーかどうかの確認方法

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

モバイルフレンドリーテストツールはGoogleが無料で公開しているツールで、Webページがモバイルフレンドリーかどうかを確認できます。モバイルフレンドリーテストツールで確認できる項目は以下の4つです。

• フォントサイズ
• タップ要素同士の距離
• ビューポート設定
• コンテンツのビューポートへの対応

モバイルフレンドリーテストツールにアクセス後、テストしたいページのURLを入力して「URLをテスト」ボタンをクリックすると、1分ほどでページがモバイル端末でどのように表示されるかのスクリーンショットと、モバイルフレンドリーに対応していない箇所が表示されます。問題がなかった場合は、「このページはモバイルフレンドリーです」と緑色の文字で表示されます。

モバイルフレンドリーテストツール：https://search.google.com/test/mobile-friendly?hl=ja

Google Search Console

WebサイトがGoogle Search Consoleに登録されている場合であれば、モバイルユーザビリティレポートの項目からモバイルフレンドリーサイトかどうかの確認が可能です。モバイルフレンドリーに対応している場合は「モバイルユーザーのエラーは見つかりませんでした」と表示されます。未対応の項目がある場合は、エラー該当ページに加え「テキストが小さすぎて読めません」「ビューポートが設定されていません」などのエラー詳細が表示されるため、それに沿って修正することでモバイルフレンドリーに対応させられます。

モバイルフレンドリーテストツールはページごとですが、Google Search Consoleはサイト全体をチェックしてくれるため、複数ページがある場合はGoogle Search Consoleが便利です。

Google Search Console：https://search.google.com/search-console/about?hl=ja

モバイルフレンドリーへの対応方法

セパレートタイプ

セパレートタイプとは、PCとスマートフォンでサイトのURLを分けるタイプを指します。同じ内容のページが2つ存在することになってしまうため、情報を注釈としてつける「アノテーション」の設定をして、Googleのクローラーが正しく識別できるようにしておく必要があります。

ダイナミックサービングタイプ

ダイナミックサービングタイプとは、PCとスマートフォンで同一のURLを利用しながらも、デバイスや画面サイズに合わせたファイルを呼び出して表示するタイプです。ユーザーのデバイスに合わせてデザインなどは自動で切り替わりますが、モバイル端末で閲覧する場合にはPC閲覧時のコンテンツが省略されてしまう場合があることに注意する必要があります。

レスポンシブWebデザインタイプ

レスポンシブWebデザインタイプとは、閲覧者の端末に合わせてレイアウトが自動で切り替わり表示されるタイプです。端末に合わせてデザインが切り替わる点ではダイナミックサービングタイプと似ていますが、レスポンシブWebデザインタイプはUI構成を変化させるため、URL・ファイル共にPCとモバイル端末で同一になります。そのため、Webサイトを更新する際も端末ごとに情報更新する必要がないというメリットがあります。なお、Googleはモバイルフレンドリーへの対応方法として、レスポンシブWebデザインを推奨しています。

モバイルフレンドリーに対応したサイトにするための注意点

文字サイズに気を配る

PCよりも画面サイズが小さくなるため、文字が小さくなりすぎないようなフォントサイズに設定する必要があります。また、行間が詰まり過ぎていても読みにくいため、行間設定にも気を配りましょう。

モバイルに互換性のないコンテンツを作成しない

Flashなどで作成されたコンテンツやライセンスが必要なメディアはモバイル端末では再生できません。そういったものを利用したコンテンツは作成しないようにしましょう。

ボタン同士の距離を十分に離す

スマートフォンで操作する際は、指で画面を直接操作します。そのため、ボタンやリンクなどが近くにあると誤タップの原因となるおそれがあります。ボタン・リンクなどの配置には十分に気を配りましょう。

ビューポートを設定する

コンテンツの幅が広すぎると、スマートフォンからアクセスした際に、画面を横にスクロールしないと閲覧できなくなってしまう場合があります。こういった状況を防ぐために、ビューポート（表示領域）を設定する必要があります。ビューポートを設定しておくことで、各デバイスのサイズに合わせた状態でコンテンツを表示させられます。

インタースティシャル型広告を使用しない

インタースティシャル型広告とは、画面全体を覆うポップアップ広告のことです。こういった広告は、ユーザー本来の目的であるコンテンツの閲覧を阻害するため、モバイルフレンドリーではないとみなされます。Googleの推奨する方法としては、画面上部もしくは下部にシンプルなバナーを設置する方法があります。

読み込み速度を改善する

固定回線に比べて、モバイルの回線は状況によっては読み込みに時間がかかったり、接続が不安定になる場合があります。画像や動画データは大きくなりすぎないようにしたり、テキスト量が長すぎる場合は分割したりなど、速やかに読み込めるように工夫しましょう。