モバイルフレンドリーとは？Googleの考えと対応方法を知り、SEOに活かそう！

皆さんは日々の生活の中で、パソコンとスマートフォンのどちらを使って知りたいことを検索することが多いですか？ちょっとした移動の途中や家でゆっくりしているときになど、スマートフォンから知りたい内容を検索することが多いのではないでしょうか。

最近はスマートフォンでも違和感無くWEBサイトを閲覧したり、操作することが出来るようになりましたが、その理由がこのモバイルフレンドリーにあります。

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

モバイルフレンドリーとは、2015年にgoogleが発表した”WEBサイトをスマートフォンで閲覧した際に、ユーザーがより見やすく使いやすいサイトになっているか”どうかを検索順位決定の基準にするというアルゴリズム変更に伴い、世界中に広まった概念です。

モバイルフレンドリーとSEOの関係性

モバイルフレンドリーにより、スマートフォンなどのモバイルの画面でWEBサイトを見た際に画像や文字が見やすい大きさかどうか、タップ要素などが操作しやすく配置されているかどうかなど、スマートフォンで閲覧されることを基準にSEOを進めていくことが重要になってきています。

モバイルフレンドリー化されていないサイトは、Googleからの評価がマイナスになってしまい検索順位の上位表示をとることは難しくなっています。これからSEOに取り組み、WEBサイトの流入を増やそうと考えてサイト運営していくのであれば、モバイルフレンドリー対策はしっかりと取り組むべき重要なサイト課題の一つとなっています。

モバイルフレンドリーアップデートとは

モバイルフレンドリーがここまで重要視されてきているのは、前述でも少し解説しましたが、2015年4月に実装されたモバイルフレンドリーアップデートに起因します。

モバイルフレンドリーアップデートとは、近年のスマートフォンの普及に伴い、WEBサイトを閲覧するデバイスがパソコンからスマートフォンに移行してきた中、よりスマートフォンユーザーのサイト閲覧の利便性を高めるため、モバイルフレンドリー化されていないWEBサイトやページの検索順位を下げる仕組みに変更されたものでした。

この発表を受け、WEBサイト運営者はどのようにしてスマートフォンで見やすいWEBサイトに改善していくかが求められるようになりました。

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

モバイルフレンドリーアップデートは、あくまでもPCサイトのコンテンツをGoogleが評価する中で、モバイルユーザビリティにも対応することを評価するアルゴリズムですが、スマートフォンユーザーが増える中で、コンテンツ自体の評価もPCサイトではなくスマートフォンサイトを評価するべきだ、という考え方にシフトしていきます。

その考えを検索順位を決定するアルゴリズムに採用したのが、モバイルファーストインデックス（MFI）です。

モバイルファーストインデックスとは、Googleに評価されるWEBサイトの対象が、PC版からスマートフォン版へと優先順位が変わったことを意味します。つまり、今まではGoogleの検索順位はPC版のランキングでしたが、スマートフォン版のWEBページがある場合はそちらが優先され評価の対象となります。

検索エンジンを提供するgoogleも自社の検索エンジンを利用するユーザーにより良い価値を提供するために、利用者が多いスマートフォンで如何に見やすく、分かりやすいものであるかをWEBサイト運営者に求めるようになり、検索アルゴリズムの変更を実施しました。

▼関連記事はこちら
サイトのスマホ対応の重要性・SEOのためにやるべき施策とは？

モバイル（スマートフォン）サイトを実装する方法

モバイル（スマートフォン）サイトを実装する上では大きく3つの方法があります。

それぞれの実装パターンにより、モバイルフレンドリーへの対策方法がことなるため予めそれぞれのモバイルフレンドリーの関係性・必要な要件を理解しておきましょう。

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

モバイルフレンドリーの代表格ともいえるレスポンシブデザインは、多くの企業のWEBサイトで利用されるモバイル（スマートフォン）サイトの実装パターンです。

現状のPCページのHTMLソースを変更することなく､CSSファイルを変更するだけでモバイルフレンドリーに対応したモバイル（スマートフォン）サイトを実装することができます。

メディアクエリと呼ばれるCSSの記述方法を利用して、CSSファイルを編集することで、画面の幅を基準にPCでは横並びのコンテンツをスマートフォンでは縦並びにするなどWEBサイトの構成を変えることができます。

今あるWEBサイトの多くがこのレスポンシブデザインが採用し、実際に実装されています。

ダイナミックサービング

2つ目の実装パターンとして、ダイナミックサービングという実装方法があります。レスポンシブデザインでは対応しきれないような、複雑なサイト構成のWEBサイトをモバイルフレンドリー化させる手段としてよく利用されている手法です。

HTMLとCSS両方の変更が伴なう実装方法ですが、PC用、スマートフォン用とURLを分ける必要がなく1つのURLでPC画面、スマートフォン画面に対応したデザインを実現できます。

HTML上にいくつかの表示パターンを記述し、画面の幅によって表示するコンテンツを変える、使う画像を変える、コンテンツを表示させないなど、ユーザーの検索デバイスによって表示の切り替えをすることでモバイル（スマートフォン）サイトを実装します。

セパレートタイプ

最後の実装パターンとしてセパレートタイプと呼ばれるものがあります。

これはその名の通り、PC用のページとモバイル（スマートフォン）用のページを完全に分けて作る実装方法です。この場合PC用、モバイル（スマートフォン）用の2つのHTMLファイル、CSSファイルを作成する必要があります。完全にページを分けることでダイナミックサービングでコードの記述が複雑になってしまうデメリットを解消することにつながります。

また、実装する際は.htaccessと呼ばれるファイル内にPC画面、モバイル（スマートフォン）画面を自動で判別し、それぞれのページを表示させるための記述を施す必要があります。

セパレートタイプで実装する場合、PC用のページとモバイル用のページでURLが変わるため、PC用のソースに対応するモバイル用ページのURLを明記する必要があります。

記述方法は以下です。

<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”（モバイル用URL）” />

自分のサイトがモバイルフレンドリーか確認する方法

実装が終わったら、しっかりモバイルフレンドリー化されているかを確認する必要があります。ここでは代表的な3つの確認方法をご紹介します。モバイルフレンドリーの確認はこの3つがよく使われているので、しっかり押さえておきましょう。

Google Search Consoleのモバイルユーザビリティで確認

GoogleがWEBサイト運営者に向けて公式でサービス提供をしている「Google Search Console」のモバイルユーザビリティという機能を利用することで、モバイルフレンドリー対応がされているかどうかを確認することができます。

WEBサイトにGoogle Search Consoleを導入しておくことで、インデックスされているページごとにエラーかモバイルフレンドリー対応かを自動的に判定してくれます。

Google Search Console上でのモバイルユーザビリティの確認画面は「インデックス」→「モバイルユーザビリティ」で確認でエラーページの数を確認できます。

画面をスクロールさせると下記画像のようなエラーの詳細が表示されていますので、ここでどのページのどんな部分を修正する必要があるのか確認をしましょう。

修正が完了したら、再度Google Search Consoleのサイトマップで修正した旨をgoogleに伝えるようにしましょう。

Google Developersのモバイルフレンドリーテストで確認

Google Developersのモバイルフレンドリーテストでモバイルフレンドリーかどうかをチェックすることもできます。Google検索で「モバイルフレンドリーテスト」と検索し、ページが表示されたら、確認したいページのURLを入力します。

数秒〜数十秒で指定したページの自動チェックが実施され、モバイルフレンドリーに対応しているかどうかを確認することができます。

「このページはモバイル フレンドリーです」と表示されればしっかりモバイルフレンドリー化されている証拠です。もし何らかのエラーがでた場合、Google Search Console同様に修正すべき点の指示が表示されるので、その指示にしたがって修正していきましょう。

PageSpeed Insightsで確認

モバイルフレンドリーに対応させるにはページの見せ方だけでなく、ページの表示速度の改善も重要になってきます。

前述した2つの確認方法ではページのデザイン、見せ方がモバイルフレンドリー化されているかをチェックするものでしたが、この「PageSpeed Insights」はモバイル（スマートフォン）での表示スピードをチェックできるツールです。

ページスピードを0〜100で点数付けされ、全部で3段階の基準(0~49、50~89、90~100)でページ速度に関する評価を知ることができます。チェックしたページの点数が0~49であった場合、早急にページの速度を改善する対策を打ちましょう。

モバイルフレンドリーを向上させる方法

モバイルフレンドリーを向上させるには、「ページスピードの改善」と「ユーザビリティーの改善」の2つを改善することが重要です。ここからは、モバイルフレンドリーを向上させる具体的な方法を紹介していきます。

ページスピードの改善

画像の容量を軽量化する

ページ内で使われている画像のサイズをページにあったサイズに変更したり、解像度を下げることで画像の要領を軽量化することが出来ます。pngやgifで拡張子を変えてもいいものはjpeg、jpgにしましょう。 ブラウザによっては表示できない拡張子がありますが、次世代フォーマットのWebPは要領を圧縮できて画質もよくオススメです。

画像を使わずに表現する

WEBサイトで使われているボタンやバナーなどをHTML、CSSだけで表現することで余計な画像をサーバー上から消去することができ、その分サイトも軽くなるのでページ速度が改善されます。こちらは見た目でUXを損なわないように注意しながら進めましょう。

サイト内でもう使われていない画像やファイルを削除する

サイトの更新等でもう使っていないファイルが残っている場合は全てサーバー上から削除することでサイト全体が軽くなり、ページスピードが改善されます。

CSSやJavascripファイルを圧縮する

改行が多く、複雑になりがちなCSSファイルやJavascripファイルを圧縮し、サイズを小さくすることで読み込みのスピードが上がり、ページスピードが改善されます。

ブラウザのキャッシュを利用する

キャッシュと呼ばれるアクセスしたサイトのデータをブラウザで一時的に保管し、次に同じページにアクセスした際の表示を速くする仕組みを利用することで、表示速度を早めることができます。

ユーザビリティーの改善

文字の大きさを16px以上、行間は1.2em以上にする

ユーザーがスマートフォンで記事を読むことを考え、スマートフォンでも読みやすい文字の大きさにすることが重要です。文字サイズは16px以上、行間1.2em以上に調整しましょう。

クリックできる要素同士の間を空ける

スマートフォンの場合、クリックではなくタッチでリンクを押すことになるため、クリックできる要素同士が近すぎると誤クリックを招きます。クリック要素はなるべく離して設置しましょう。

コンテンツの幅をスマートフォンの画面幅に合わせる

スマートフォンの横幅以上の幅を持つコンテンツ（画像やテキストなど）を設置してしまうとページの操作性が低下します。スマートフォンで表示させるコンテンツは。必ず横幅を画面サイズに合わせて表示させましょう。

ビューポートタグをヘッダー内に設置する

ページのHTMLソース内の<head>タグ内にビューポートタグを設置することで、自動で画面サイズに合わせた表示がされます。必ずビューポートタグを記載しましょう。

ナビゲーションメニューの表示を工夫する

ナビゲーションメニューをスマートフォンでも見やすく工夫することでユーザビリティの向上につながります。ハンバーガーメニューやプルダウンを使ってデフォルトは非表示にするなど、スマートフォンでの表示を見やすくしましょう。

ユーザビリティの詳細については、以下の記事で説明されています。
ユーザビリティとは？向上させるための方法も解説！

まとめ

この記事ではモバイルフレンドリーに関して、その変遷と具体的な対策方法に関して解説してきました。WEBサイトを運営し、検索の上位表示をさせたいのであればモバイルフレンドリー対応は必要不可欠です。

まだモバイルフレンドリー対応がなされていないのであれば、この記事で紹介した実装方法でモバイル（スマートフォン）対応させたサイトにしていくことでGoogleからの評価を得られるWEBサイトとなるでしょう。

また、モバイルフレンドリー対応はしたけど、いまいち効果がないと感じる場合は、ページの速度やユーザビリティ対策をすることで解決することでしょう。

モバイルユーザビリティやSEOに関する記事はこちら！
サーチコンソール「モバイルユーザビリティのエラー」を解決する方法を紹介
検証！PC＆スマホ 検索結果の違いとSEOについて
今すぐホームページをスマホ対応に！スマホ対応させる具体的な4つの方法！
Google SEOの基本やガイドラインについて解説！流入施策も紹介

執筆者：ヒトノート編集部

株式会社ヒトノテのオウンドメディア、WEBマーケティングの学習帳「ヒトノート -Hito note-」の編集部。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。