この記事のポイント
この記事でおさえておきたいポイントは以下です。
-
モバイルフレンドリーとは
-
モバイルフレンドリーは、Webサイトをスマートフォン向けに最適化することで、スマートフォンユーザーの増加により重要な施策となっています。
-
モバイルフレンドリーの確認方法
-
Googleが推奨している「モバイルフレンドリーテスト」では、URLを入力すると、該当サイトが適切なページであるかどうか診断してくれます。その他、「Googleサーチコンソール」のモバイルユーザビリティや、「PageSpeed Insights」「Mobile Website Speed Testing Tool」などでも確認ができます。
-
モバイルフレンドリー化の方法
-
セパレートURL、ダイナミックサービング、レスポンシブWebデザインなどの対応で、スマホ対応ページを構築することが重要です。ページスピードの改善も効果的です。
SEO施策を実施していく中で、スマートフォンユーザーを意識した、モバイルフレンドリーなサイトの作成に注目が集まっています。Googleではモバイルフレンドリーに対応していないサイトに対して、検索順位を投げる処置をするほどです。
そのような、新たな評価基準とされ始めているモバイルフレンドリーについて、対応方法やテストツールの使い方、エラー時の対処方法などについて解説します。この記事を読めば、モバイルフレンドリーとは何なのかよく分からないという方でも、基本をおさえて、適切な判断や対処ができるようになるでしょう。
＜無料＞資料ダウンロード
【成果に直結】Webサイトコンサルティング
Webのプロが成果の出るWebサイトへ改善いたします
目次
モバイルフレンドリーはスマホで見やすいWebサイト
モバイルフレンドリーは、モバイルサイトのユーザーから見た、使いやすさを表すものです。簡単に言えば、Webサイトをスマートフォン向けに最適化することで、ユーザーの利用のしやすさを生み出します。Webサイトを見るユーザーはPCだけでなく、スマートフォンで閲覧することも一般的になり、より注目される言葉だといえるでしょう。
またGoogleはユーザーの利便性を高めるSEOの手段として、モバイルフリーアップデートを行いました。世界的に見てもスマートフォンユーザーは増加傾向にあるため、企業がモバイルフレンドリーを取り入れるのも納得です。
さまざまな媒体でサイトを閲覧することが当たり前な時代だからこそ、モバイルフレンドリーという言葉は、今後も使い続けられていくことでしょう。
Googleが定めるモバイルフレンドリーの基準
Googleが定めている基準には、
- モバイル端末でサポートされないアプリが使われていないか
- 行間はフォントサイズの1.5から2倍程度になっているか
- フォントサイズは16から18pxであるかどうか
- 48px四方領域間は、38px以上の タップ領域となっているか
- 画面サイズに応じて最適なサイズになる、レスポンシブデザインかどうか
- 画面幅内でコンテンツが収まっているか
などが含まれます。最低限これらを満たしているサイトでなければ、モバイルフレンドリーとして認められません。モバイルフレンドリーな環境は、ユーザーがサイトを利用する際のストレスを軽減することにもなるため、進んで取り組むことをおすすめします。
レスポンシブデザインとは？今さら聞けない特徴やメリット・デメリットを解説
PCやスマホ、タブレットそれぞれのデバイスに最適なデザインでWebサイトを表示するレスポンシブデザインが今や当たり前になりました。レスポンシブデザインとは何か、何に注意して設計すべきかを基本的なところから解説します。
モバイルフレンドリーの重要性
モバイルフレンドリーが現代においてなぜ大切だと言われているのか、その重要性を4つの項目にわけて解説します。重要性を理解した上で、有効的に活用していきましょう。
スマートフォンユーザーが増加しているため
モバイルフレンドリーが重要視される理由にはやはり、スマートフォンユーザーが増加していることにあります。現在では個人のインターネット利用に関して、スマートフォンが PCを上回っているデータも、総務省の「令和2年 通信利用動向調査」で公表されました。
また世帯別のスマートフォン保有の割合も、PC70.1%、固定電話68.1%の2つを押さえて、86.8%と、情報通信機として一般的なものになったといえるでしょう。
このように普及率が違った結果、スマートフォンユーザーに適したWebサイトを制作することが、様々な会社や企業に求められ始めています。加えてモバイル対策を行うことで、新規顧客の獲得ができる機会になることから、ひとつのSEO施策として様々な会社が積極的に取り組んでいるのが現状です。
ユーザーの利便性が向上するため
多くのユーザーに対応できるようになることだけが、重要視される理由になっているわけではありません。ディスプレイの小さいスマートフォンでも、ページを表示できるようにすることで、ユーザーの利便性を向上させることも可能です。
そのため、スマートフォンを使っているユーザーの満足度を実現させつつ、アクセス数の増加、問い合わせや購入につなげられることがあげられます。使い勝手の悪いサイトよりも、しっかりと表示されてスムーズに情報を閲覧できるサイトの方がいいでしょう。
つまり、いかにスマートフォンユーザーにストレスを与えずに、コンバージョンへとつなげられるかが、ビジネスに影響を与える一因となっています。
検索順位などWebサイト全体の評価に影響するため
Googleでは、モバイルフレンドリーの対策がなされていないモバイルサイトに関して、検索順位を下げるアルゴリズムが採用されています。そのため、モバイルからのアクセスに適していないページと判断されてしまえば、Webサイト全体の評価を下げることになりかねません。
タブレットやPCからの検索結果には影響しないとされていますが、普及率の一番高いスマートフォンから評価が下がるのは大きな問題になりえます。だからこそ検索順位を維持しつつ、Googleに適切だと評価されることで、多くのユーザーに利用してもらえるようなサイトになるでしょう。
サイトの順位が落ちて注目度を失ってしまう事態を引き起こす前に、モバイルサイトの対策や改善を実施することをおすすめします。
Googleで上位表示させるには？SEOの仕組み、検索順位を上げる方法を解説
PV数や滞在時間の増加につながるため
ユーザーにとって使いやすいサイトであるかどうかは、PV数や滞在時間の増減に直結します。ユーザーにとって使いやすく利便性の高いサイトであれば、PV数を増やしたり、滞在時間を伸ばしたりできるでしょう。
サイト内の情報が見にくかったり、操作性が悪かったりすると、ユーザーは離れていってしまいます。そのためユーザーの滞在時間や、PV数が減少してしまうなどの悪循環を生み出し続けることになりかねません。
使い勝手や見やすさなどの第一印象が悪いと、今後の評価にも響いてくるため、訪れたユーザーに満足してもらえるようなサイト設計を目指しましょう。
ページビュー数(PV)とは？目安、セッション数との違いを解説
モバイルフレンドリーの4つの確認方法
どのような状態になれば、モバイルフレンドリーとして評価されるのか分かっていなければ、対策の取りようがありません。そこで、評価度を確認できる4つの方法を紹介します。うまく活用して、ストレスフリーなWebページの制作を行いましょう。
モバイルフレンドリーテストで確認する
モバイルフレンドリーテストは、Googleが推奨しているツールのことで、URLを入力すると、該当サイトが適切なページであるかどうか診断してくれます。また評価してくれるだけでなく、どのような部分を改善すべきか指摘してもらえることから、ユーザーに寄り添ったサイトづくりに役立つでしょう。
モバイルフレンドリーテストで提示されるユーザビリティエラーの項目には、
- スマートフォンに対応していない、Flashが使われていることを知らせる「Flashが使用されています」
- 誤タップが生じるような、要素間の距離が近すぎることを知らせる「クリック可能な要素同士が近すぎます」
- 画面に表示されるテキストが、小さすぎることを知らせる「テキストが小さすぎて読めません」
などがあります。それらを利用することで、サイト内にある改善点を見つけ出すことが可能です。
Googleサーチコンソールで確認する
運営しているWebサイトを、Googleサーチコンソールに登録しておけば、モバイルフレンドリーについて調べることも可能です。
サーチコンソールの「モバイルユーザビリティ」を使用すれば、対応外のページが表示されます。さらに不適切な理由をチェックできるので、改善点の把握にも困りません。何も問題がなければ「エラーはありません」 と表示されるようになるので、全てのページでエラーが表示されないように修正していきましょう。
他にも、アクセス解析や検索キーワードの情報を調べる機能もついているので、Webサイト全体の状況が把握できるのも大きな特徴です。
Googleサーチコンソールとは？使い方と登録方法や設定を解説
Webサイトの集客状況を分析する際にGoogleアナリティクスと同じくらい役立つのがGoogleサーチコンソールです。サーチコンソールへの登録方法やGoogleアナリティクスとの連携方法について、わかりやすく解説します。
PageSpeed Insightsで確認する
PageSpeed Insightsは、ページ速度のパフォーマンスを測るツールとして活用されますが、モバイルフレンドリーの確認も行えます。確認方法は調べたいサイトのURLを貼り付けることでチェックが行えます。
無料で表示スピードの改善点や、パフォーマンス向上方法などが表示されるので、それを参考に改善を行っていきましょう。サイトが表示されるスピードも、ユーザー離れを防ぐことにつながります。
ページスピードインサイト(Google PageSpeed Insights)の使い方！見方や改善方法を解説
Mobile Website Speed Testing Toolで確認する
Mobile Website Speed Testing Toolは、Googleが開発したモバイルスピードやPCスピード、モバイルフレンドリーチェックが行えるツールです。簡単な作りとなっていますが、修正が必要な項目も表示されるので、簡易的なチェックが行えます。
それぞれが100点までの点数で評価されるので、どこに問題が集中しているのか一目でわかるでしょう。 項目ごとの採点内容の詳細や、修正点までのチェックもできるため、オール100点を目指してください。100点のサイトとして評価されれば、モバイルフレンドリーとしての基本的な条件はクリアしているといえるでしょう。
関連記事：スマートフォンデザインの作成方法。UX/UIのポイントを現役Webデザイナーが解説
モバイルフレンドリーにならない！エラー時の対処法
4つのツールを使った方法を紹介しましたが、Googleサーチコンソールを使ってエラーが表示された時の対処法についてまとめます。エラー内容に合わせた対処をしていくことで、モバイルフレンドリーに対応したサイトにしていくことが可能です。
「互換性のないプラグインを使用しています」の場合
確認を行ったサイトに、モバイルブラウザでサポートされていないプラグインが含まれている際に、「互換性のないプラグインを使用しています」と表示されます。そうなってしまうと正しく情報が表示されないことで、ユーザーから不十分なコンテンツとして判断されてしまいかねません。
たとえば、Flashはサポート外で表示されないこともあるため、JavaScriptといった互換性のあるものを使用しましょう。
「ビューポートが設定されていません」の場合
ビューポートとはデバイスの画面サイズにページを合わせる、表示領域を整える機能です。 この機能が設定されていないとエラーが表示されるので、viewportタグの指定を忘れないようにしましょう。ビューポートがしっかりと設定されていれば、デバイスごとに適切な画面表示ができるようになります。
「ビューポートが「端末の幅」に収まるよう設定されていません」の場合
ビューポートの横幅設定が、ピクセル指定で固定されてしまっていると、エラー表示されます。このエラーをなくすためには、スケーリングが行える設定に変更しなければなりません。端末の幅に合わせたビューポートにできればエラーは表示されないので、ビューポートの設定を間違えないようにしておきましょう。
「コンテンツの幅が画面の幅を超えています」の場合
「コンテンツの幅が画面の幅を超えています」と表示される場合は、スマートフォンの画面に適したコンテンツの幅になっていません。モバイルフレンドリーでは、左右にスライドが必要なサイトは認められないので、コンテンツの幅を調整するようにしましょう。
スマートフォンで自社のサイトを開いてみて、画像がはみ出ていたり、スクロールバーが表示されたりしないかチェックしてみましょう。
「テキストが小さすぎて読めません」の場合
ユーザーが拡大を行わないと読めないほどの、テキストが含まれている場合に表示されるエラーです。Googleでは、12PX以下のテキストがエラーと判断されるので、推奨されている16pxを基準値として、テキストのサイズを調整しましょう。大きすぎると画面の幅を超えることもあるので、大きさのバランスも考えて設定することが大切です。
「クリックできる要素同士が近すぎます」の場合
スマートフォンはタップできる要素が互いに近すぎると、誤タップを誘発してしまいます。そのため、要素間の距離を8PX以上空けなければエラー表示されることから、注意が必要です。細かい動きができるPCと同じように考えていると、うまくいかなくなるため、モバイルサイト向けの距離感やサイズ感を覚えることから始めましょう。
クローラーが正しくページを読め込めなかった場合
クローラーが正しくページを読み込まない時は、読み込み中にタイムアウトが発生してしまったり、CSSがブロックされたりしていることも考えられます。
モバイルフレンドリーテストを使って、同様のエラーが検出されなければ、サーチコンソールから「修正を検証」をリクエストすれば、読み込まれるようになるでしょう。またGoogleは混合コンテンツを段階的にブロックするとしているので、URL設定の見直しも行ってください。
モバイルフレンドリー化にするための4つの対応方法
現在運営しているまたは、開設しようとしているサイトを、モバイルフレンドリー化するための基本的な4つの対応方法を紹介します。Googleに正しく評価してもらうためにも、適切な設定をしていきましょう。
スマホ対応ページを構築する
モバイルフレンドリー化するために最も重要なことが、スマホ対応ページを構築することです。様々な設定をするにも、適切なモバイルサイトになっていなければ意味がありません。そこでスマホ対応ページを構築するために必要な、3つの方法をそれぞれ解説します。
セパレートURL
セパレートURLとは、PC用とモバイル用でURLを用意して、2つに分けてサイトを運営していく方法です。セパレートを認識するように設定しておかないと、同じ内容にも関わらず、Googleに別のページとして扱われることになってしまいます。
そのような事態にならないように、HMLにアノテーションタグを設定しなければなりません。アノテーションタグの設定は、PCサイトのHTMLにはモバイルサイトのURLを、モバイルサイトのHTMLにPCサイトのURLを記載するだけです。
このように適切なタグの設定をしておくことで、セパレートであることを認識してもらえると同時に、使用端末に合わせたページが表示されます。
ダイナミックサービング
ダイナミックサービングは、ブラウザのユーザーエージェントを使用して、端末に合ったページファイルを開くようにする方式です。つまりスマートフォンでブラウザを立ち上げれば、モバイルサイトに自動的につながるようになります。
しかしCookieを発信しない接続を行っているユーザーの場合、ダイナミックサービングだけでは、適切なページが表示されない点にご注意ください。また2つのサイトを作成する必要があるこの方法は、最近ではあまり使われておらず、レスポンシブWebデザインにしている会社が増加傾向にあります。
レスポンシブWebデザインに対応させる
レスポンシブWebデザインとは、Googleが推奨している方法で、ユーザーが使っている端末に合わせて装飾やレイアウトが切り替わる手法です。この方法は、PCとスマートフォンで別々のページを作る必要がありません。そのためサイトの更新や、メンテナンスも1回で済ませることが可能です。
しかし、レスポンシブWebデザインにするためには、コストと時間がかかってしまいます。さらに画像のデザインやファイルのサイズに制限がかかってしまうので、対応には気をつけてください。最近ではWordPressのテーマが、レスポンシブ設定されていることも多いため、運営しているサイトが対応しているかどうか確認してみましょう。
必ず対応させなければならないというわけではありませんが、効率的なサイト運営を目指すのであれば、レスポンシブWebデザインがおすすめです。
レスポンシブデザインとは？今さら聞けない特徴やメリット・デメリットを解説
PCやスマホ、タブレットそれぞれのデバイスに最適なデザインでWebサイトを表示するレスポンシブデザインが今や当たり前になりました。レスポンシブデザインとは何か、何に注意して設計すべきかを基本的なところから解説します。
ページスピードを改善する
モバイルフレンドリー化をするにあたって、ページスピードも重要な役割を持っています。モバイルページが表示されるスピードが遅ければ、アクセスしてきたユーザーがストレスに感じて、別のサイトへ流れてしまいかねません。
そういったユーザー離れを防ぐ方法として、ページスピードの改善が最適です。 ページスピードの確認は、確認方法でも紹介したMobile Website Speed Testing Toolといったツールが役立ちます。Mobile Website Speed Testing Toolでは、モバイルページの表示速度が適切であるか調べられるので、まずはスピードチェックを行いましょう。
また診断結果で改善点についても調べられるため、指示通りの対策を行うことで、ページにかかる負荷を軽減させられます。たとえば、リンクや画像が多すぎてスピードが遅くなっているのであれば、数を減らしたり圧縮したりするなどの対策です。
ページスピードインサイト(Google PageSpeed Insights)の使い方！見方や改善方法を解説
テキストサイズや長さを調整する
テキストサイズや長さが適切なものに調整がなされていない場合、スマートフォンの画面にテキストが収まりきらなくなってしまいます。そのような状態のページは、モバイルフレンドリーとしては不十分です。
そのためサイト内でテキストを使用する場合は、何度も言うようですが、Googleが推奨する16pxを標準サイズとして調整を行っていきましょう。長さについては、スマートフォンで見た時に、スクロールが必要にならないようにしてください。ユーザーが見やすく、使いやすいサイトであることが優先事項です。
クリエイティブを修正する
スマートフォンの画面で見やすさを追求するモバイルフレンドリーでは、クリエイティブの大きさやズレを修正することも必要不可欠です。使用しているPCがWindowsであれば、「ctrl」+「shift」+「I」で、スマートフォンのサイズ感でサイトの見え方がチェックできます。
実際にスマートフォンで開いてみることでも確認できるので、見えにくいデザインになっていないか、ズレが生じていないか確認してみましょう。クリエイティブの中でも、埋め込み表示されるCTAには特に注意が必要です。Googleにおいても、クリエイティブの重要性について言及されているので、確認と修正は怠らないようにしましょう。
モバイルフレンドリーのまとめ
モバイルフレンドリーは、普及率が高まり続けているスマートフォンからのアクセスに対応するためにも、対策を取る必要のある施策のひとつです。Googleにおいても、対応していないモバイルサイトの評価順位を下げるほどの、重要なコンテンツとして評価し始めています。
このような時代の流れに置いて行かれないためにも、モバイルフレンドリーを意識した Webサイトの構築を目指していきましょう。モバイルフレンドリーについて何か分からないことがありましたら、サイト構築をサポートしているニュートラルワークスにご相談ください。
