スマートフォンが普及した現代において、Web担当者としてモバイルフレンドリーは重視しなければいけません。
でもモバイルフレンドリーって聞いたことないし、わからないです。
Web用語だから、意味を知らない方も多いかもね!
そこで今回、モバイルフレンドリーの意味や対応が必要な理由とあわせて、確認方法や具体例をご紹介します。
この記事のレベル
重要度 | (4) |
---|---|
初心者度 | (3.5) |
難易度 | (2) |
この記事で学べること
- モバイルフレンドリー対応が必要な理由
- モバイルフレンドリーの確認方法
- WebサイトとWebページでのモバイルフレンドリーの具体例
モバイルフレンドリーとは?
モバイルフレンドリーとは
Google では、4 月 21 日より、ウェブサイトがモバイル フレンドリーかどうかをランキング要素として使用し始めます。この変更は世界中の全言語のモバイル検索に影響を与え、Google の検索結果に大きな変化をもたらします。この変更によって、検索ユーザーは、クエリへの関連性が高く使用端末にも適した高品質な検索結果を見つけやすくなります。
引用:Google 検索セントラル ブログ: 検索結果をもっとモバイル フレンドリーに
モバイルフレンドリーとは、Googleの検索アルゴリズムで、モバイル端末に対応しているWebサイトの、検索順位を引き上げる仕組みです。
「モバイルフレンドリーアップデート」は、2015年から全世界で適用されています。
具体的には、小さな画面でも文字が見やすかったり、画像がスマホの画面サイズにあっていたりなど、ユーザーが閲覧しやすい状態を指しています。このような状態であれば、画面の拡大やスクロールなどの手間を減らせるため、ユーザーの利便性が向上します。
反対に、ユーザーの利便性が低下しているWebサイトは、Googleに評価されにくくなるため、文字や画像を最適な大きさにするなど、モバイルフレンドリーの対応が必要です。
モバイルフレンドリーの特徴
モバイルフレンドリーには、3つの大きな特徴があります。
Webページ単位で適用される
モバイルフレンドリーの適用は、Webサイト単位ではなく、Webページ単位です。
モバイルの検索順位だけに適用される
モバイルフレンドリーは、モバイルの検索順位だけに適用されるため、パソコンの検索順位には影響しません。
モバイルフレンドリーかどうかだけで判定される
モバイルフレンドリーの判定は、どこまで対応しているのか、点数をつけるものではありません。モバイルフレンドリーかどうかだけで判定しますので、「モバイルフレンドリーテスト」を行った際に、モバイルフレンドリーと判定されるための対応が必要です。
モバイルフレンドリー対応が必要な理由
モバイルフレンドリー対応が必要な理由は、主に3つあります。
スマホユーザーの増加
モバイルフレンドリー対応が必要な最も大きな理由が、スマホユーザーの増加です。
2020年の端末別のインターネット利用率を見ると、パソコンの48.1%に対してスマホは68.5%となっており、パソコンよりもスマホで閲覧している人が多いことがわかります。
ユーザーファーストを掲げるGoogleでは、主流となっているモバイル端末で、ユーザーがどれだけ快適に閲覧できるかを重視しているため、モバイルフレンドリー対応が必要なのです。
スマホ検索順位への影響
モバイルフレンドリーに対応しているかどうかは、検索順位にも大きな影響を与えますが、影響を与えるのはモバイルフレンドリーアップデートだけではありません。
Googleが2018年1月に施行を発表した「スピードアップデート」も、Webページの表示速度がモバイルの検索順位に影響を与えます。
他にも、2018年3月には、パソコン版サイトの内容をもとに評価していた仕組みから、モバイル版サイトを評価する仕組みである「MFI(モバイルファーストインデックス)」に、正式移行すると発表されました。
そのため、モバイル版サイトがない場合には、パソコン版サイトがインデックスされてしまいますので、結果として検索順位に悪い影響を与える恐れがあります。
ユーザーエクスペリエンスの向上
モバイルフレンドリー対応が必要な理由としては、パソコン版のWebページが、スマホでは閲覧しにくいことが挙げられます。
スマホ画面サイズとWebページの大きさや幅があっていないと、スクロールしなければすべての情報を閲覧できないため、ユーザーに大きなストレスを与えてしまいます。
ユーザーの満足度を上げるためには、モバイルに適したWebページを用意して見やすさを向上させる、モバイルフレンドリー対応が必要です。
モバイルフレンドリー対応の重要性についてよく理解できました!
でも対応できているかどう確認すればいいのでしょうか?
- モバイルフレンドリーテスト
- Googleサーチコンソール
- Page Speed Insights
などのツールで確認できるよ。
モバイルフレンドリーのチェック方法
代表的な3つのモバイルフレンドリーチェックツールを使った、確認方法をご紹介します。
モバイルフレンドリーテスト
STEP 1
「モバイルフレンドリーテスト」にアクセスしましょう。
Googleサーチコンソール
Googleサーチコンソールでも、モバイルフレンドリーかどうかを確認できます。
STEP 1
「Googleサーチコンソール」にアクセスし、Googleアカウントでログインしましょう。
STEP 3
表示されたレポートで、エラーの有無を確認してください。詳細に何も表示されていない場合は、モバイルフレンドリーです。
反対に、詳細に「文字が小さすぎて読めません」など、エラーの内容が表示されている場合は、モバイルフレンドリーではありません。
Page Speed Insights
ユーザーの利便性が向上するかどうかは、モバイルページの表示速度も大きく関係していますので、「Page Speed Insights」でWebサイトの表示速度を確認しましょう。
ページスピードインサイトとは?
ページスピードインサイトは、Webページの表示速度を測定するツールです。ページが表示される速度が遅いと、SEOにも悪い影響が出てしまいます。
確認方法も理解できました!でも対応できていなかった時はどうすればいいのだろう・・・
そうだよね!対応方法も教えるね。
「このページはモバイルフレンドリーではありません」と出たら?
モバイルフレンドリーテストで「モバイルフレンドリーではない」と判定された場合の、対応方法も確認しておきましょう。
レスポンシブWebデザインで対応する方法
レスポンシブWebデザインとは、端末や画面サイズにあわせてレンダリングし、自動でレイアウトやデザインを切り替えて表示する設定です。
レスポンシブWebデザインがおすすめの理由
レスポンシブWebデザインでは、パソコン版サイトもモバイル版サイトも同一URLとなるため、ユーザーがデバイスを気にすることなくシェアできます。
また、デバイスにあわせて最適化したWebページにリダイレクトする必要がありませんので、読み込み時間の短縮が可能です。
モバイルフレンドリーの対応方法には、ユーザーエージェントでWebページをわける「ダイナミックサービング」や、URLでWebページをわける「セパレートタイプ」がありますが、GoogleではレスポンシブWebデザインでの構築を推奨しています。
サイト作成で押さえる4つのポイント
モバイルフレンドリーのWebサイトを作成するうえで、最低限押さえておくべき4つのポイントをご紹介します。
スマホの画面サイズにあわせる
スマホなどのモバイル端末は画面サイズが小さいため、パソコンでは1ページで表示可能なコンテンツが、スマホでは1ページ内に収まらないことがよくあります。
1ページに収まらないと、コンテンツ画面が小さくなって文字が読みにくくなったり、伸びてスクロールしないと読めなくなったりします。
ユーザーが画面を見やすいようにするためには、「viewport(ビューポート)」の設定が必要です。
操作のしやすさ
パソコンと比較して、スマホなどのモバイル端末は画面が非常に小さいため、文字入力やボタンの選択が難しくなり、情報の入力に手間がかかってしまいます。さらに、タッチパネルでの入力はキーワードで打つよりも、精度や速度が低下する傾向があります。
そのため、ボタンやリンクの距離を近くなりすぎないように、スペース確保するなどの対策が必要です。
コンテンツを邪魔するポップアップを使用しない
スマホを使ってWebサイトを閲覧している際に、全画面に表示されるポップアップ広告を、目にしたことがありませんか?
ポップアップで全画面に表示される広告は、「インタースティシャル」とも呼ばれます。
Googleでは、インタースティシャルをユーザーの体験を阻害する仕組みとみなしているため、インタースティシャルがあればマイナス評価する傾向があります。
モバイルフレンドリーを目指すなら、コンテンツの邪魔にならないシンプルなバナーを、画面の上部または下部に設置しましょう。
再生できないコンテンツを使用しない
2020年末でサポートを終了したFlash Playerや、ライセンスを要するメディアなどは、モバイル端末では再生できませんので、使用しないようにしましょう。
ページ作成で押さえる3つのポイント
モバイルフレンドリーのWebページを作成するうえで、最低限押さえておくべき3つのポイントをご紹介します。
文字の大きさを調整する
モバイルフレンドリーにするなら、実際にスマホではどう見えるのか、確認しながらコンテンツを作成することが欠かせません。
スマホとパソコンではWebページの見え方が大きく変わるため、スマホで見やすい文字の大きさや幅に設定したり、1つの文章を長くなりすぎないようにしたりする、工夫が必要です。
ページスピードを改善する
最近では、スマホの通信環境もかなり向上していますが、それでも固定回線と比較すると、読み込みに時間がかかります。
読み込みが遅いと、ユーザーが離脱する可能性も高まりますので、ページスピードの改善が必要です。
具体的には、余計な通信を減らす目的でブラウザのキャッシュを使用したり、画像を最適化したりします。
クリエイティブのズレを修正
スマホ画面で見やすいクリエイティブを用いることで、ユーザーの利便性が向上します。スマホでどのように表示されているかは、パソコンでも確認できます。
Windows版のパソコンでデベロッパーツールを開くには、同時に「ctrl」+「shift」+「I」を押すか、「F12」ボタンを押します。
デベロッパーツールが表示されたら、デバイスの切り替えボタンを押して、見たい端末で表示される画像の大きさなどを確認しましょう。
よくある質問
モバイルフレンドリーのフォントサイズは?
「ユーザーにとって読みやすい大きさ」が前提ではありますが、一つの目安として15~18pxがあげられます。
SEOタイムズでは、15pxでレスポンシブ対応しているよ。
モバイルフレンドリー判定にならない場合は?
モバイルフレンドリー対策をした後に、Googleサーチコンソールで再クロールをリクエストして、数日後に確認してみてください。
PC版の検索結果に影響はある?
モバイルフレンドリーはモバイル版の検索結果のみに影響するので、PC版には影響しません。
まとめ
スマホの普及により、検索の主流はパソコンからモバイル端末に変化しています。
どんなに良質なコンテンツを作成しても、モバイルユーザーの利便性が低ければ、ユーザーはすぐに離脱してしまい、Googleからも評価されません。
ユーザーの流入を獲得し、検索結果の上位表示を獲得するためには、モバイルフレンドリーの対応が必要です。
最適な大きさの文字で読みやすく、ページスピードの改善で画面が表示されるまでの待ち時間を減らしたWebページは、ユーザーに使いやすいと感じてもらえ、Googleからも評価されやすくなりますので、モバイルフレンドリーに対応しましょう。