公開日:2022年04月28日
最終更新日:2022年05月09日
今では「モバイルフレンドリー」という言葉は、Webサイトの担当者であれば知っていて当たり前くらいの一般的なものになりましたが、まだよく知らないという方、どのくらい必要性が高いのかわからないという方は、その概要や必要性を改めて学んでみましょう。 今回は、どのような経緯でモバイルフレンドリーの必要性が高まってきたのか、 そして自身のサイトがモバイルフレンドリーなのかどうかの確認方法やモバイルフレンドリーにする方法についてもご紹介します。
目次
モバイルフレンドリーとは「Webサイトがモバイル端末で使いやすい」ことを指します。2015年4月からモバイルフレンドリーが導入され、Googleは「Webサイトがモバイルフレンドリーかどうか」をランキング要因として使用し始めました。 モバイルフレンドリーでないWebサイトはモバイル端末で閲覧する際、コンテンツを読むためにピンチやズームをする必要があり不便と感じられます。結果、サイトから離脱するユーザーが増えてしまいます。そうならないように、モバイルフレンドリーなサイトにして、モバイル端末でもコンテンツを読みやすくするのが良いです。 また、モバイルフレンドリーはページエクスペリエンスの要素の1つでもあり、ユーザーが快適に利用できるサイトの要素として考えられています。 ページエクスペリエンスとは?
では、具体的にモバイルフレンドリーなWebサイトとは、どんな要素を含んでいるWebサイトを指すのでしょうか。 モバイルフレンドリーなWebサイトの要素は以下が挙げられます。
これらの要素を自社サイトが満たしているかどうかは、後述するモバイルフレンドリーテストやSearch Consoleを使用することで確認できます。
では次になぜ、モバイルフレンドリーという概念が生まれたか、又モバイルフレンドリーの重要性が高まっているという経緯について説明します。
モバイル端末からウェブへのアクセスが増加しているというのが背景にあります。 2010年代初めごろモバイル端末(ここではスマートフォンを指します)のユーザーが増加するのに伴い、Webサイトはモバイル環境で見られる機会が増えてきました。しかし、当時はモバイル端末に適したページを作らず、PC用ページしか用意していないケースが多かったです。 そして、モバイル端末でPC用ページを表示させた場合、「文字が小さすぎる」「ボタンが押しづらい、間違って押してしまう」「横スクロールが見にくい」など、さまざまな不便さを感じるユーザーがいました。その結果、Webサイトからの離脱につながり、コンバージョンにつながる可能性が低く可能性もありました。
スマートフォンの普及により、2015年ごろからWebサイトを閲覧する端末は、PCよりもモバイル(スマートフォン)の方が多くなっています。そのためモバイルでの検索、Webサイト閲覧の利便性が重要になりました。 現在も、総務省の発表した「令和2年度の通信利用動向調査」によれば、スマートフォンを保有している世帯の割合は約9割です。インターネットの端末別利用状況においても、スマートフォンが68.3%、PCが50.4%となっており、スマートフォンの占める割合は年々増加傾向にあります。 引用:公表資料「令和2年度の通信利用動向調査」(令和3年6月18日訂正)
モバイル端末でPC用ページを表示させた場合、「文字が小さすぎる」「ボタンが押しづらい、間違って押してしまう」「横スクロールが見にくい」などの不満を解消するため、Googleは2015年2月に「モバイルフレンドリーアップデート」を発表しました。これは、モバイルフレンドリーなページの掲載順位を引き上げるアルゴリズムで2015年4月から導入すると明言していました。このときから「モバイルフレンドリー」という概念が生まれました。
発表通り2015年4月からモバイルフレンドリーアップデートが開始し、Googleは「Webサイトがモバイルフレンドリーかどうか」をランキング要因として使用し始めました。その結果、モバイルフレンドリー対応であるページの検索結果の順位が引き上げられ、SEOの観点から見てもモバイルフレンドリー対応のWebサイトを制作する必要があると言えます。 検索結果をもっとモバイル フレンドリーに
以前はGoogleはPC版ページをインデックスし、ランキングに使用していました。しかし2018年3月からモバイルファーストインデックスの導入が開始されました。モバイルファーストインデックスとはGoogle の検索結果の提供に使用するインデックスにモバイル用サイトを優先的に登録し、PC用サイトよりもモバイル用サイトメインで評価することです。その影響で、モバイルフレンドリー対応がされているWebサイトが増え、2018年12月の段階で50%以上のサイトがモバイルファーストインデックスに移行されたとGoogleよりアナウンスがありました。
2020年5月5日にGoogle Chrome チームでサイトの所有者が Web 上のユーザーエクスペリエンスを測定するのに役⽴つCore Web Vitalsの導入を発表しました。このころから「ページエクスペリエンス」という概念が生まれ、「モバイルフレンドリー」は「ページエクスペリエンス」の要素の1つと考えられるようになりました。
2021年3月にクロールされているほとんどのサイトに対してモバイルファーストインデックスを有効にしています。 ほとんどというのも、まだ移行できてないページが一部あり、Googleも完全移行の最終的な期限について言及していないです。
ここまでで、モバイルフレンドリーについて、モバイルフレンドリーの歴史について理解して頂けたかと思います。次にモバイルフレンドリーかどうかの確認方法について説明します。 モバイルフレンドリーかどうかの確認方法は2つあり、「Google Search Console」 又は「モバイルフレンドリーテスト」を使用します。 どちらもどのページがモバイルフレンドリーになっているか、又はモバイルフレンドリー対応するにあたって改善するべきポイントがあるか確認することができます。 使い分けとしては、サイト全体を確認したい場合は「Google Search Console」を使い、個別ページの詳細を知りたい場合は「モバイルフレンドリーテスト」を使うのが良いでしょう。
「Google Search Console」の「モバイルユーザビリティ」でモバイルフレンドリーかどうかを確認することができます。 モバイルユーザビリティについてはこちら https://growthseed.jp/experts/seo/mobileusability/ 「エラー」 と 「有効」の2つの状況を確認することができます。 エラー: このページはモバイル対応ではありません 有効: このページはモバイル対応です
「エラー」 と 「有効」にそれぞれ該当するURLの数が表示されています。 もし、「エラー」があれば詳細の方に、モバイルフレンドリーの妨げになっているエラー項目を確認することができます。 また詳細の中の項目をクリックすれば、問題のあるページのURLが確認できます。 問題のあるページのURLをクリックすると、モバイルフレンドリーテストが開き、問題のあるページの問題の詳細を確認することができます。 エラーの項目に関しては後ほど解説します。
各ページのモバイルフレンドリーの確認は「モバイルフレンドリーテスト」を使用します。「モバイルフレンドリーテスト」はGoogle Search Consoleの詳細の項目からも入れます。使い方は簡単で、調べたいページのURLを入力し、「URLをテスト」をクリックするだけで調べることができます。 もし、エラーがある場合はテスト結果に表示されます。エラーの項目に関しては次章で解説します。
モバイルフレンドリーの対応方法はGoogle Search Consoleのモバイルユーザビリティやモバイルフレンドリーテストのエラー項目を改善していくことで対応することができます。 エラー項目には以下の項目があります。
上記のエラー項目を1つずつ解説していきます。
モバイルユーザビリティ上でのエラー項目の1つ目は「互換性のないプラグインを使用しています」です。 モバイルブラウザでサポートされていないプラグイン(Flash など)をWebページ内で使っている場合に表示されるエラーです。
互換性のないプラグインではなく、できる限り広くサポートされているHTML5などを使い、Webページを構築すると、「互換性のないプラグインを使用しています」というエラーが解消されます。
モバイルユーザビリティ上でのエラー項目の2つ目は「ビューポートが「端末の幅」に収まるよう設定されていません」です。この「ビューポートが設定されていません」というエラーの原因は、そもそもページのビューポートが定義されていないことによる可能性が高いです。 ※ビューポートとは「ブラウザのタブやメニューバーなどを除いた、ページを表示する領域」を指します。
HTMLに下記のようなメタビューポートタグを記載し、ビューポートの設定をします。
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <head/>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head/>
モバイルユーザビリティ上でのエラー項目の3つ目は『ビューポートが「端末の幅」に収まるよう設定されていません』というエラーです。この『ビューポートが「端末の幅」に収まるよう設定されていません』というエラーはビューポートが正しく設定されていない場合に表示されます。固定幅のビューポートが設定されている可能性が高いです。
解決するにはビューポートの横幅に合わせて、Webページの表示の仕方を設定する必要があります。そのためにデバイスの幅とスケーリングに合わせてビューポートを設定すれば、エラーが解消されます。
モバイルユーザビリティ上でのエラー項目の4つ目は「コンテンツの幅が画面の幅を超えています」というエラーです。 この「コンテンツの幅が画面の幅を超えています」というエラーは、コンテンツによって横にスクロールする必要がある場合に表示されます。 ユーザーはPCでもモバイルでも、Webページを垂直方向にスクロールすることに慣れていますが、水平方向へのスクロールには慣れていないケースが多いです。そのため横にスクロールする必要がないWebページが望ましいです。
画像やテキストをビューポートに合わせるように設定する必要があります。 原因となっている画像やテキストのCSS要素に対して相対的な幅と位置の値を使用し、スケーリングできるようにすれば解決します。
モバイルユーザビリティ上でのエラー項目の5つ目は「テキストが小さすぎて読めません」というエラーです。この「テキストが小さすぎて読めません」というエラーは、フォントサイズが小さすぎて文字が読めず、拡大しないと読めない場合に起きるエラーです。
解決方法は読みやすいフォントサイズに調整することで解決できます。ちなみにGoogle推奨の基本フォントサイズは16pxです。
モバイルユーザビリティ上でのエラー項目の6つ目は「クリックできる要素同士が近すぎます」というエラーです。この「クリックできる要素同士が近すぎます」というエラーはボタンやナビゲーションリンクなどのタップ要素同士が近すぎる際に発生するエラーです。ボタンやナビゲーションリンクなどのタップできる要素同士が近すぎるとユーザーが意図せず目的の要素ではなく、隣接する要素をタップしてしまう可能性があります。 そのため、タップできる要素同士が近すぎないように設定する必要があります。
このエラーはタップできる要素を適切なサイズ、距離に調整することで解決できます。
ご自身のサイトをモバイルフレンドリーにするには、「レスポンシブウェブデザイン」「ダイナミックサービング」「セパレートURL」の3つの実装方法があります。 その中で、Googleは「レスポンシブWebデザイン」を推奨しています。 では、3つそれぞれの違いについて説明します。
「レスポンシブウェブデザイン」はデバイスに関わらず共通の1つのHTMLを用意し、CSS メディアクエリを使用して、そのページを表示する画面サイズからデバイスを判断しCSSを選択し、そのデザインを変更します。 メリットはデバイスの画面サイズで柔軟にデザインやレイアウトを調整して表示できることです。デメリットはCSSの制御が複雑になる可能性があることです。しかし、他の方法と比べ、工数が少ないです。URLが1つのためユーザーはURLをシェアしやすく、検索エンジン側もクローラが来やすく、SEO効果が高いです。
ダイナミックサービングとは1つのURLに対して、PC向けHTML、モバイル向けHTMLのように複数のHTMLを用意し、アクセスした端末によってHTMLを出しわける実装方法です。 複数のHTMLを用意するため、手間はかかりますが、デザインのカスタマイズ性は高いです。
デバイスごとに異なるURLとHTMLを用意する実装方法です。 カスタマイズ性はありますが、実装が大変であるのと、リダイレクトなどに注意する必要があります。
ここまでモバイルフレンドリーについて解説しましたが、モバイルフレンドリーは検索結果に大なり小なり影響することは間違いないです。そのため、もしご自身のサイトがモバイルフレンドリー対応していないのであれば早急に対応しましょう。ではモバイルフレンドリーだからと言って、安心できるかといったらそうではありません。今ではモバイルフレンドリーだけでなく、ページの読み込み速度やCore web vitals、その他のランキング決定要因はいくつもあります。以前はモバイルでのWebページの見やければ十分だったかもしれませんが、今後はモバイルでも、PCでもユーザーがより快適にページが閲覧できるようにしていく時代です。是非、モバイルフレンドリーだけでなく、その他の重要な要素についても調べてはいかがでしょうか。
伊藤 康貴
マーケティング部
2018年Web広告会社に入社、比較メディアやSEOのコンサルティング営業に従事。3年間で200社以上の企業様の集客に携わる。 より集客の見識を深めるために2021年フルスピード入社。 オウンドメディア『GrowthSeed』の運営/ライティング、メルマガ運用、広告運用など自社のマーケティング業務を担当している。
サーチコンソールの「モバイルユーザビリティ」の確認方法とエラー解決方法とは?SEOとの関連性も解説
ページエクスペリエンスとは?検索結果ランキング決定の要因となったシグナルの対策について解説
2年目Web担当者のための、Google Search Console使いこなし実践テクニック
あなたのサイトに必要?リッチリザルト(リッチスニペット)とは?サイト別に役立つ活用方法を解説
YouTube広告とは?初心者が知っておくべき基本を完全解説
YouTube広告のターゲティング一覧!目的別の活用方法も解説
なぜNAVERまとめはサービス終了したのか!?SEO視点で調べてみた
ブログ記事リライトの手順や注意点をSEOのプロが解説!
Googleマイビジネス編集方法を徹底解説!登録方法から管理画面の使い方まで
URL「www」ありなしのSEO効果は?統一すべき理由や設定方法を解説
SEOとURLの関係とは? 検索順位への影響などをプロが徹底解説
Google、May 2022 Core Updateを展開!2022年初のコアアップデート
サーチコンソールの権限付与の設定方法┃2022年最新
モバイルフレンドリーとは?条件、確認方法、対応方法を解説
サーチコンソールのインデックス登録のリクエスト方法とインデックスできない時の解決方法
Webマーケティングにお困りの際は お気軽にご相談ください