モバイルフレンドリーとは?UXとページ読み込み速度の改善

モバイルフレンドリーとモバイルファーストインデックス

モバイル(スマホ)対策ができてないとやばい!

インターネットは、PCからモバイルの時代に移りました。それとともに、WEBサイトもモバイルが主流になっています。WEBサイトの主流がモバイルだということは、検索もモバイルからが当たり前になったということです。

2014年に行った調査では、当時すでにスマホから検索をする人の割合が72%もありました。今はもっと増えているでしょう。

インターネット検索をする際に意識すること_Q1グラフ
選択肢 回答者数 比率(%)
パソコン 163 16.28%
スマートフォン 720 71.93%
どちらも同じくらい 107 10.69%
検索はしない 11 1.10%

そんな時流の中、Googleが改めて「モバイルフレンドリー」の重要性を強調したり、「モバイルファーストインデックス」に移行するというWEBの評価軸の転換を行っています。

ところで、モバイルフレンドリーとモバイルファーストインデックスは言葉が似ていますが、これらの意味を理解しているでしょうか。

今回は、モバイルの時代にわたしたちWEBマスターが覚えておくべきモバイルフレンドリーの影響と対策についてお話したいと思います。

モバイルフレンドリーとモバイルファーストインデックスの違い

まずは大まかに、モバイルフレンドリーとモバイルファーストインデックスの意味の違いを押さえておきましょう。

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

モバイルフレンドリー(Mobile Friendly)とは、スマホなどのモバイル端末でWEBサイトを見たときに、ユーザーが快適に閲覧できるようにモバイル端末に最適化された状態のことを言います。

Googleは、WEBページ単位でモバイルフレンドリーかどうかを判断して、ランキングアルゴリズムの評価対象にしています。

モバイルフレンドリーのランキングアルゴリズムは、これまでに何度かアップデートされていますが、初めて適用されたのは2015年4月21日です。

Google ウェブマスター向け公式ブログ: モバイル フレンドリー アップデートを開始します

モバイルファーストインデックスとは

モバイルファーストインデックス(MFI|Mobile First Index)とは、Google検索エンジンのインデックス対象をパソコンのWEBページから、モバイルのWEBページに変更するというものです。

これまでGoogleのクローラーは、主にパソコン用のWEBページを解析し、その結果をランキングアルゴリズムに反映させてきました。

ところが、モバイルが主流になったことで、今後はパソコンではなくモバイルに最適化されたWEBページを解析し、その結果をランキングアルゴリズムに反映させていきます。

Google ウェブマスター向け公式ブログ: モバイル ファースト インデックスを開始します

WEBページがモバイルフレンドリーかを知る方法

あなたの作ったWEBページがモバイルフレンドリーに合致しているかどうかを知る方法は2つあります。

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

1つは、サーチコンソールの独立したツール「モバイルフレンドリーテスト」ツールを使うことです。使い方は簡単です。以下のリンクにアクセスしてください。

モバイル フレンドリー テスト – Google Search Console

フォームにモバイルフレンドリーを調べたいWEBページのURLを入力して、URLをテストをクリックします。

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

するとこのように結果が表示されます。対応さえ間違えなければ、ほとんどが「このページはモバイルフレンドリーです」と表示されるはずです。と、ここでページ上部に「ページの読み込みに関する問題」という気になる文が。

モバイルフレンドリーテスト-結果

詳細を表示をクリックすると、このように「ページが部分的に読み込まれました」と出ますが、多くはツール系のjavascriptなどに問題が生じているものです。ほとんどは放置しても大丈夫だと思います(詳しくなければ対応できない)。

モバイルフレンドリーテストツール-ページが部分的に読み込まれました

サーチコンソールのモバイルユーザビリティ

もう1つは、サーチコンソールの「モバイルユーザビリティ」です。普段サーチコンソールを使っている人は、「モバイルフレンドリーテスト」を使う必要はありません。

こちらは、Googleがインデックスしたページを自動でモバイルフレンドリーに対応しているか確認してくれるものです。そのため、チェックだけしておきましょう。

まずサーチコンソールのメニューにあるモバイルユーザビリティをクリックします。

サーチコンソール-モバイルユーザビリティ01

モバイルフレンドリーにエラーがあればすぐにわかるように表示されます。

サーチコンソール-モバイルユーザビリティ02

エラーがあれば、そのページを確認できますし、有効なページもどのように取得されているかを確認できます。

サーチコンソール-モバイルユーザビリティ02

詳しくは、サーチコンソールの「URL検査ツール」の項目を確認してください。

もしまだWEBサイトをモバイルフレンドリーに対応していない人は、「ユーザーエクスペリエンスの改善」と「ページ読み込み速度の改善」が必要です。

モバイルフレンドリー対策1.ユーザーエクスペリエンスの改善

ユーザーエクスペリエンスの改善とは、端的に言うとモバイルサイトとしてスマホでの見栄えを良くして、ユーザーの使い勝手を上げることです。主に以下の4点について注意が必要です。噛み砕いて説明します。

ユーザーエクスペリエンスの改善点

  • 携帯端末では一般的でないソフトウェア(Flash など)を使用していないこと
  • ズームしなくても判読できるテキストを使用していること
  • ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
  • 目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること

Google ウェブマスター向け公式ブログ: 検索ユーザーがモバイル フレンドリー ページを見つけやすくするために

モバイルに適したコンテンツのみにする

「携帯端末では一般的でないソフトウェア(Flashなど)を使用していないこと」とは、スマホなどで再生されない・再生できないFlashなどのコンテンツやスマホ上で動作しないソフトウェアを使わないということです。

フォントなどを適切なサイズにする

「ズームしなくても判読できるテキストを使用していること」とは、フォントサイズがPCからそのままスマホの画面に縮尺されることで、フォントが小さくて読めなくならないよう調整の必要があるということです。

表示領域などを適切なサイズにする

「ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること」とは、画面のサイズによってページの幅などを調整して、無駄に横スクロールしないように調整するということです。

適切なリンク領域を確保してタップしやすくする

「目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること」とは、上記フォントと関係しますが、クリックしやすいサイズのリンクになるように、フォントサイズや行の高さを調整することです。

ビューポートとメディアクエリ

なお、モバイルフレンドリーなページ設定を実装するためには、headerに「meta viewportタグ」を設定して、デバイスのサイズを取得し、PCとスマホなどの違いによるサイズやページのスケーリングを制御する必要があります。

また、CSSに、メディアクエリ(Media Queries)を記載します。メディアクエリとは、画面の切り替え制御機能のことで、表示領域のサイズによって幅や高さなどを設定値に変更してくれます。

つまり、これを記載することで、パソコン、タブレット、スマホというサイズが違う画面でもきれいに見えるレスポンシブなWEBサイトを作ることができるわけです。

このあたりの情報は、以下のGoogleデベロッパーサイトに記載されていますが、WordpressなどのCMSを場合は基本的にはスマホ対応のテーマを使えば、自動で表示領域の切り替えが行われます。

レスポンシブ ウェブデザインの基本  |  Web  |  Google Developers

モバイルフレンドリー対策2.ページ読み込み速度の改善

モバイルフレンドリー対策には、ページ読み込み速度の改善が必須です。Googleは2018年7月9日に、スピードアップデート(Speed Update)というランキングアルゴリズムを実装しています。

Google ウェブマスター向け公式ブログ: ページの読み込み速度をモバイル検索のランキング要素に使用します

Googleでは、ユーザーエクスペリエンスを高めるために、「Google BigQuery」「Lighthouse」「PageSpeed Insights」というデベロッパーツールを用意しています。

この中でページ読み込み速度の改善に役立つのは「PageSpeed Insights(ページスピードインサイト)」です。以下のページにアクセスし、調査をしたいURLをフォームに入力して分析をクリックすれば、点数や改善点などが表示されます。

PageSpeed Insights

PageSpeed-Insights-wakarukoto

あ……やばい。これあかんやつや。

分析結果は、「フィールドデータ」「Origin Summary」「ラボデータ」「改善できる項目」「診断」「合格した検査」に分けてレポーティングされます。このような低評価が出た場合は、改善点がたくさんあります。

ページスピードインサイトによる改善点などの詳細はまた別途お話しますが、以下大まかな改善点をまとめます。

ページスピードインサイトによる改善点
・画像を最適化する
・スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
・JavaScriptを縮小する
・CSSを縮小する
・HTMLを縮小する
・リンク先ページのリダイレクトを使用しない
・表示可能コンテンツの優先順位を決定する
・圧縮を有効にする
・ブラウザのキャッシュを活用する
・サーバの応答時間を短縮する

画像やファイルの最適化

画像のサイズは小さいほど速度が改善します。圧縮性能が高いフォーマットを選び、劣化を抑えて画像サイズを抑えられるようにしましょう。

また、テキストファイルも同様に圧縮をしたり、テキスト数を変えることでサイズを軽減することができます。使っていないファイルを削除することも有効です。

レンダリングを妨げるリソースの除外

WEBページにはさまざまな外部ファイルがありますが、読み込み順番によっては最初の読み込みを邪魔するものもあります。そのため、外部ファイルの読み込み順番を変えたり、敢えてインラインで書いて速度向上を図ります。

サーバーの応答時間

使用しているサーバーの性能によって、応答速度が大きく変わる場合があります。

効率的なブラウザキャッシュの利用

HTTPヘッダー内でキャッシュの有効期間を長くすると、再訪問したユーザーはページの読み込み速度が向上します。

モバイルフレンドリー対策に時間をかけすぎない

モバイルフレンドリー対策は、非常に重要です。

現在このサイトのモバイル比率はおよそ73%、タブレットが5%、PCが22%ほどなので、少なくとも10のうち8の力でモバイルフレンドリーに取り組まなければいけないということです。

ただし、ユーザーエクスペリエンスの改善とページ読み込み速度の改善には終わりがありません。

とくにページ読み込み速度は、こだわり始めると時間と手間の際限がないほどですが、それほど順位には影響を与えるものではありません。

このサイトのように点数が悪いのは問題ですが、80-90点を超えているサイト(WEBページ)はそれ以上の改善に時間を使う必要はありません。

モバイルフレンドリーにある程度対応したら、またコンテンツ作りに力を入れて、WEBサイトを常に新鮮な状態で運営していけるように気をつけましょう。