WEBマーケティングのトータルサポートならディーエムソリューションズ株式会社
0120-934-226受付時間 平日9:00~18:00

モバイルフレンドリーとは?確認方法や取り組む対策をご紹介

このエントリーをはてなブックマークに追加

モバイルユーザーが増えつつありますが、WEBサイトのモバイル対応は完了していますか?
スマートフォンの普及により、60歳以下のユーザーのWEBサイトを閲覧するためのデバイスでスマートフォンがパソコンを上回りました。

ユーザーの検索方法はマップ検索や画像検索などと増えつつありますが、興味を持ったユーザーがより詳しく調べる方法にWEBサイトの閲覧があります。ほとんどのユーザーがスマートフォンからの閲覧ですが、文字が小さかったり、画面サイズに合っておらず、横にスクロールしなければならなかったりするとユーザーは離脱してしまいます。

このようにせっかく興味を持ってくれたユーザーが離れてしまわないように、モバイルフレンドリー化が必要になります。
本記事ではモバイルフレンドリーについてのご紹介とWEBサイトのモバイルフレンドリーの確認方法や対策についてご紹介いたします。

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

モバイルフレンドリーとはスマートフォン(モバイル)ページに対するユーザーの利便性を示すものです。スマートフォンユーザーが快適に閲覧できるように、最適化されたWEBサイトをGoogleはモバイルフレンドリーであると判定します。WEBサイトをモバイルフレンドリーにすることを「モバイルフレンドリー化」とも言います。

似た言葉にモバイルファーストインデックス(MFI)という言葉もありますが、モバイルファーストインデックスは検索結果に表示させるためのインデックス対象をパソコン向けページからスマートフォン向けページへ変更するという意味で使われます。
モバイルファーストインデックス(MFI)については下記の記事でご紹介しておりますのでご参考ください。

モバイルファーストインデックスとは?MFIの内容と対策について

モバイルフレンドリーとGoogleアルゴリズム

WEBサイトがスマートフォン対応しているかどうかは重要なポイントです。Googleは2015年4月と2016年5月にモバイルフレンドリーアップデートを行っており、スマートフォン表示での最適化の有無は重要視されるようになりました。

Googleは2016年に先述したモバイルファーストインデックスを導入することを発表し、2018年3月から一部のWEBサイトで反映されるようになりました。また、2019年7月以降には検索エンジンが認識したWEBサイトをモバイルファーストインデックスとするようになり、2020年9月には全てのWEBサイトをモバイルファーストインデックスへ移行する予定と事前アナウンスをしております。

モバイルフレンドリーはユーザビリティ観点から重要

パソコンに比べ、スマートフォンはディスプレイの大きさが小さいという特徴があります。パソコン表示に最適化されていてもスマートフォン表示に最適化されていないページだと、スマートフォンの小さいディスプレイに合わせるように、全体的に縮小された表示になってしまいます。

縮小されただけのページは文字が小さくなったり、読み込みが遅かったりなど、ユーザーにとって見づらいレイアウト、閲覧するだけでストレスがかかってしまうWEBサイトとなり、結果ユーザーが離脱したり、コンバージョンに繋がる可能性も下がったりすることが考えられます。また、今後全てのWEBサイトでモバイルファーストインデックスが適用されたときに、検索順位への悪い影響も考えられます。

ユーザビリティの観点のみならず、検索エンジンのランキング要因にも関わってくることから、モバイルフレンドリー化は急務と言えます。モバイルフレンドリーは、スマートフォンユーザーが使いやすいWEBサイト設計になっていることが重要です。ポイントは以下になります。

  • Flashなどの携帯端末では一般的ではないソフトウェアを使用していないこと
  • ズーム(拡大)しなくても判別できるようなテキストを使用していること
  • 横スクロールやズーム(拡大)が必要にならないように画面サイズとコンテンツサイズが一致していること
  • 誤ってタップしないようにそれぞれのリンクが十分に離れて配置されていること

以上のポイントを押さえるようにしましょう。次の項目では自分のWEBサイトがこれらのポイントに不備が無いかの確認方法についてご紹介していきます。

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

こちらでご紹介させていただくツールを活用して、モバイルフレンドリー対策を進めていきましょう。どのツールも無料かつ簡単操作ですのでご安心ください。

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

Googleが無料で提供しているツールのひとつです。URLを入力して「URLをテスト」ボタンをクリックするだけで簡単にテストをすることができます。

モバイルフレンドリーテスト
参照元:モバイルフレンドリーテスト

Google Search Console

Search Consoleのモバイルユーザビリティレポートから確認することも可能です。

GoogleSearchConsole

参照元:Google Search Console

Google PageSpeed Insights

Googleが無料で提供しているページ表示速度チェックツールで操作は簡単です。URLを入力して分析するだけでページを読み込み、PC表示・モバイル表示の表示速度のスコアと改善点を洗い出してくれます。

Pagespeedinsight

参照元:PageSpeed Insights

モバイルフレンドリーの対応・対策

スマホ対応のページ構築

モバイルフレンドリーに対応するためにはスマホ対応のページ構築が必須です。スマホ対応のページ構築で昨今、代表的なのはレスポンシブウェブデザインです。レスポンシブウェブデザインとは、1つのHTMLファイルでパソコンやスマートフォン、タブレットといったそれぞれのデバイスサイズに合わせて、ページのレイアウトを調整することができるデザインです。

レスポンシブウェブデザインのメリットやデメリットなどを下記記事にてご紹介しておりますのでご参考ください。

レスポンシブウェブデザイン?セパレートURL?SEOにおけるスマートフォンサイトの重要性

他にも1つのURLで 、PCとSPで異なる2つのHTMLファイルをユーザーの端末によって出し分けるダイナミックサービングの構築手法やPCとSPで異なるURLを出し分ける構築方法があります。

次の項目から、そのほかのモバイルフレンドリーに対する改善についてご紹介していきます。

ユーザーエクスペリエンス(UX)の改善

モバイルフレンドリーにするためには、スマホ対応のページを作るだけではなくモバイルフレンドリーの基準を満たしている必要があります。モバイルフレンドリーテストツールで不合格となっている項目を確認し、ユーザーエクスペリエンス(UX)の改善を図りましょう。

  • テキストサイズの調整(判別が可能なフォントサイズを使用する)
  • スマートフォン用viewportの設定
  • リンク同士の距離を調整(誤タップが生じないように調整する)
  • コンテンツの幅を調整(コンテンツのサイズを表示画面に合わせる)

詳しくはSearch Consoleヘルプのモバイルフレンドリーテストツールのページも参考になります。
参考元:https://support.google.com/webmasters/answer/6352293

Search Consoleのモバイルユーザビリティでは改善が必要なページと項目が表示されますので、各項目の内容と対策を後述いたします。

ページ表示速度の改善

Google PageSpeed Insightsを活用して、修正が必要な項目を洗い出してページ速度の改善を行っていき、モバイルフレンドリーに対応させることも改善策のひとつです。

  • CSS・JavaScriptの最適化
  • 不要なCSS・JavaScriptの読み込みを減らす
  • レンダリングをブロックするCSS・JavaScriptの排除
  • 画像の最適化
  • サーバー応答時間
  • キャッシュの活用
  • AMPの活用

これらの対策・改善方法について詳しくは下記記事にてご紹介しておりますのでご参考ください。

ページ表示速度が遅いとSEOに影響があるのか?改善方法とは?

Search Consoleのモバイルユーザビリティ

Search Consoleのモバイルユーザビリティレポートは、モバイルフレンドリーテストツールと同じようなユーザビリティエラーを検出し、問題があれば警告としてエラーの表示がされます。エラーが表示されるということは、スマートフォンユーザー体験を低下させている要因が存在するということですので、早めに対応するようにしましょう。放置していると検索順位の下落に繋がる可能性もありますので注意が必要です。

モバイルユーザビリティ確認方法

モバイルユーザビリティレポートの確認方法についてご紹介いたします。
確認方法は簡単です。Search Consoleにログインし、サイドメニューの「拡張」に表示されている「モバイルユーザビリティ」を選択することで、モバイルユーザビリティレポートの確認が可能です。

GoogleSearchConsoleモバイル設定画面

エラー項目が表示されていない場合は、スマートフォンユーザー体験の低下する要因・問題が無いということになります。その場合、現時点では問題ありませんが、定期的にモバイルユーザビリティレポートをチェックして、エラー表示が出た際に適宜対策を行いましょう。

GoogleSearchConsoleモバイル設定画面

エラー項目を選択すると、上図のように各エラーの対象となるページが一覧で表示されます。詳しく調べたいときや本当に問題があるのかといったことを確認したい場合は、URLを選択し、「ライブページをテスト」をクリックすることで、モバイルフレンドリーテストツールに遷移して確認することができます。

エラーの内容と対策

モバイルユーザビリティレポートやモバイルフレンドリーテストツールで表示されるエラーの内容には以下のようなものがあります。

  • ビューポートが設定されていません
  • 互換性のないプラグインを使用しています
  • ビューポートが「端末の幅」に収まるよう設定されていません
  • コンテンツの幅が画面の幅を超えています
  • テキストが小さすぎて読めません
  • クリックできる要素同士が近すぎます

それぞれのエラーの内容と対策を解説していきます。

ビューポートが設定されていません

ページにビューポート(viewport)が設定されていないときに表示されるエラーになります。
パソコンとスマートフォンなどでデバイスの表示域は異なるため、画面の表示域に合わせてページのサイズを調整する必要があります。それぞれのデバイスの表示域に合わせるためにheadタグ内にビューポート(viewport)の指定を行いましょう。

互換性のないプラグインを使用しています

以前は使用されていた「Flash」ですが、現代のスマートフォンやタブレットといったデバイスではほとんどサポートされておらず、ユーザーによっては空白になっています。画像やJavaScriptを使用したFlash以外の方法を採用しましょう。

ビューポートが「端末の幅」に収まるよう設定されていません

ページに固定幅のビューポート(viewport)を指定している場合に表示されるエラーになります。固定幅のビューポートを指定していることから異なる画面サイズに合わせるといった調整ができません。レスポンシブウェブデザインを導入することで解消されます。

コンテンツの幅が画面の幅を超えています

ページ内のテキストや画像といったコンテンツを閲覧する際に上下ではなく、左右のスクロールが必要となっている場合に表示されるエラーとなります。コンテンツに対して、CSSで横幅の指定に絶対値が指定されている場合に表示されることがあります。CSSで相対的な幅と位置の値を使用し、画像サイズに応じた適切な表示がされるようにすることで解消されます。

テキストが小さすぎて読めません

テキストのフォントサイズが小さすぎて文字が読めなく(読みづらく)、ユーザーが拡大操作を行わないと読めないといったときに表示されるエラーとなります。ページのビューポートを指定後にフォントサイズを適切に指定することで解消されます。

クリックできる要素同士が近すぎます

ページ内のボタンやテキストリンクなど、クリック要素同士が近くなりすぎているとエラーとして表示されます。
対策としては、ボタンやテキストリンクなどのクリック要素のサイズやスペースをスマートフォンユーザーが使いやすいように調整することで解消されます。

おわりに

モバイルフレンドリー化は重要な項目であるということをご紹介してまいりました。ご自身のWEBサイト構造によってはページごとにモバイルフレンドリーであるかの確認も必要です。
ユーザーと検索エンジンの両方に対しての改善策となるモバイルフレンドリー化を進めていくために、今回ご紹介したツールなどを活用して最適化に取り組むようにしましょう。

 

このエントリーをはてなブックマークに追加
The following two tabs change content below.
白神裕也

白神裕也

ディーエムソリューションズ株式会社 大阪デジタルマーケティング事業のSEOコンサルタント。 SEO対策をはじめ、ローカルSEO(MEO)やコンテンツマーケティング、エントリーフォーム最適化(EFO)など幅広く取り組む。
SNSでフォロー

Contact

Webマーケティングに関わる施策全般をワンストップでご提供します。
お気軽にご相談ください。

Webマーケティング最新情報をお届け
東京営業所
東京都新宿区西新宿1丁目6-1 新宿エルタワー3階
電話番号 03-6374-1393 FAX番号 0422-57-2761
大阪営業所
大阪府大阪市北区堂島1丁目5-30 堂島プラザビル10F
電話番号 06-7176-3367 FAX番号 06-7176-3368
Copyright © 2020 DM SOLUTIONS Co.,Ltd. All rights reserved.