モバイルフレンドリーとは？SEOへの影響とチェック方法を解説！

モバイルフレンドリーは、スマートフォンなどのモバイル端末でもWebサイトを見やすくする仕組みを意味します。現在のWebサイトで対応が求められる要素の一つで、SEOにも影響があると見なされています。

そのため、Web担当者がモバイルフレンドリーに関して理解を深めて対応することは、非常に大切です。今回はモバイルフレンドリーの意味、SEOへの影響やチェック方法などを解説します。

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

「モバイルフレンドリー」は、2015年4月21日にGoogleが新たに実装したアルゴリズムです。このアップデート以降、モバイルフレンドリーに対応できていないWebサイトの多くの検索順位が下がりました。以後のコアアルゴリズムアップデートでも、モバイルフレンドリーに関する調整が続けられています。

ここでは、モバイルフレンドリーの具体的な特徴や必要性、レスポンシブデザインとの違いについて詳しく解説します。

モバイルフレンドリーの特徴

モバイルフレンドリーは、2015年4月のアップデートで導入された新しい評価基準であり、モバイル端末に適していないページの検索順位を引き下げるという大幅なアルゴリズムの仕様変更です。Googleはモバイル端末からの検索ユーザーが増加していることに着目し、その利便性を向上させる方向へとシフトさせました。

さらにモバイルファーストインデックスの導入に伴い、モバイルフレンドリーなページであるかどうかがSEOの観点からも重要なポイントになりました。

モバイルフレンドリーの基本的な特徴は以下のとおりです。

• Googleが公式にランキング要素として明言している
• 評価はページ単位で行われる
• スマートフォンでの検索順位のみ適用する
• 世界中すべての言語における検索順位へ影響する

これらの特徴を理解し、モバイルユーザーが使いやすいWebサイトの設計・運営を目指す必要があります。

モバイルフレンドリーの必要性

近年、スマートフォンやタブレットPCの急速な普及により、モバイルユーザーの数が爆発的に増加しています。

株式会社グローバルインフォメーションの行った「スマートフォンの世界市場- 2023-2030年」によれば、世界のスマートフォンユーザー数は55億人を超え、その普及率は70％を超えるとされています。さらに、ドイツのSISTRIX社が2021年に実施した調査によると、日本国内のモバイル検索が占める割合は75.1%にも上っています。

つまり、今後もモバイルユーザーが増加する可能性が高いことから、モバイルフレンドリーへの対応は必須です。

モバイルユーザーの利便性が考慮されていないサイトはUX（ユーザーエクスペリエンス）に問題が発生しやすく、検索順位のマイナス評価は避けられないでしょう。

モバイルフレンドリーとレスポンシブデザインの違い

「レスポンシブデザイン」とは、スマートフォンやタブレットなどの各画面サイズで適切に表示されるように、Webサイトの表示を切り替えるデザイン手法のことです。具体的には、アクセスしてきた端末の画面サイズや解像度に合わせて、Webサイトのデザインやレイアウトを調整するタグを記述します。

対して、モバイルフレンドリーはレスポンシブデザインよりも意味が広い言葉です。
モバイルユーザー向けのサイトデザインの手法や考え方も包括的に含まれています。そのため、レスポンシブデザインは、モバイルフレンドリーに対応する方法の一つと理解するとよいでしょう。

モバイルユーザーの利便性やユーザビリティーを高めるには、いくつかの方法やポイントについては、「モバイルフレンドリーデザインにするためのポイント」の項で詳しく解説します。

モバイルフレンドリーがSEOに与える影響

「モバイルフレンドリーアップデート」の導入によって、対応が不十分なサイトはモバイル検索での順位を落とす可能性が示唆されてきました。実際に、多くの未対応ページが検索上位から姿を消しています。

また、Googleは2018年にモバイルファーストインデックス（Mobile First Index／MFI）への移行を発表しました。これによって、PCサイトではなくスマートフォンサイトを評価の主軸にしてインデックスするようになったため、モバイルフレンドリーでないWebサイトはSEOで不利だといえるでしょう。

モバイルフレンドリーの基準を満たせずGoogleにインデックスされない場合、評価対象のコンテンツ数を増やしにくくなります。さらにモバイルユーザーの離脱率も高ければ、よりSEOに悪影響が出るでしょう。そうなると、検索結果で上位に表示される可能性が著しく低下してしまいます。

ページがモバイルフレンドリーであるかをチェックする方法

モバイルフレンドリーへの対応は、検索結果の上位表示につなげるためにも必須です。
対応施策の前後で、対象ページがモバイルフレンドリーであるかをチェックしましょう。事前にページの問題点を調べて適切な施策を打ち、その後に結果に反映されているか確認する、といった手順が効率的です。

ページがモバイルフレンドリーであるかをチェックするには、次の2つの方法があります。

• Googleサーチコンソールで確認する
• Lighthouseで確認する

また、モバイルフレンドリーを確認するツールとして、Googleは「モバイルフレンドリーテスト」を提供していましたが、2023年12月で提供を終了しています。

Googleサーチコンソールで確認する

Googleサーチコンソール内の「モバイルユーザビリティレポート」でチェックする方法もあります。ただし、この方法はページ単位ではなく、サイト全体のテストとなることに留意しましょう。個別のページを確認したいときには、その他の方法を利用します。

＜使用手順＞

1. Googleサーチコンソールにアクセスする
2. サイドメニューの「ページエクスペリエンス」を展開する
3. 「ウェブに関する主な指標」の「モバイル」を選択する
   
4. レポート結果の表示を待つ

レポートに「モバイルユーザーのエラーは見つかりませんでした」と表示されれば、モバイルフレンドリー対応ができています。

Lighthouseで確認する

「Lighthouse」を利用して、モバイルフレンドリーかどうかを確認可能です。2023年12月にモバイルフレンドリーテストツールとモバイルユーザビリティレポ―トの提供が終了したため、その後のチェックツールはLighthouseのみとなります。

Lighthouseの使用方法はいくつかありますが、ここではCrome拡張機能でLighthouseを使用する方法と、Chrome DevToolsで実行する方法を紹介します。

Googleは、Chrome拡張機能よりChrome DevToolsの使用を推奨しています。その理由を、DevToolsではローカルサイトと認証済みページのテストが可能ですが、Chrome拡張機能ではテストができないためとしています。

Chrome拡張機能でLighthouseを使用する方法

まずChromeウェブストアにアクセスし、デベロッパーツールのLighthouseを追加しましょう。
＜インストール後の使用手順＞

1. 調べたいページをChromeで開く
2. ブラウザ右上の拡張機能をクリックする
   
   
   
3. リストからLighthouseアイコンを選択する
4. 「Generate report」のボタンをクリックする
   
   
5. レポート結果の表示を待つ

ページのパフォーマンスに関して、複数の項目でレポートが表示されますが、その中の「SEO」の「MOBILE FRIENDLY」の項でチェックできます。

Chrome DevToolsでLighthouseを実行する方法

Chrome DevToolsには、Lighthouseの専用パネルが存在します。

＜使用手順＞

1. Chromeで調査対象のページを開く
2. 「右クリック＞検証」や「F12キー」などでDevToolsを開く
   
3. DevToolsの上部のタブから「Lighthouse」を選択する
   
   
4. 「ページ読み込みを分析」をクリック
5. 少し待つと、ページ上にレポートが表示される

モバイルフレンドリーなデザインにするためのポイント

モバイルフレンドリーの確認ツールで対応が不十分であると判定されたら、レポートに沿って改善しなければなりません。

ここでは、モバイルフレンドリーなデザインにするための以下の具体的な対処法を解説します。

• レスポンシブ対応にする
• ダイナミックサービングを使用する
• モバイル端末用のURLを用意する
• インタースティシャル広告の表示方法に注意する
• フォントサイズを最適化する
• モバイル端末で実際にページを表示してチェックする

レスポンシブ対応にする

レスポンシブデザインは、メタタグかCSSで設定しましょう。

メタタグで「ビューポートタグ」を追加する

対象ページのHTMLファイルをテキストエディタなどで開き、ヘッダー部分に以下のメタタグを記述します。

CSSで「メディアクエリ」を指定する

CSSファイルに「@media」のコードを記述します。モバイルファーストでは、指定した画面サイズ以上になるとスタイルが上書きされるように設定しましょう。

また、WordPressでサイトを構築している場合は、レスポンシブ対応のテンプレートを使用することで対応できます。URLとHTMLのどちらも変更する必要がなく、実質的な作業負担はありません。

ダイナミックサービングを使用する

「ダイナミックサービング」とは、PHPなどのサーバーサイド言語を使用し、アクセス端末に応じてコンテンツを出し分ける方法です。端末に最適化されたページを提供することで、表示速度の改善が見込めます。

ただし、1つのURLに2つ以上のHTMLを用意しなければならないため、その分だけ導入や管理、修正の手間が増える点がネックです。

モバイル端末用のURLを用意する

PC用とは別にモバイル用のURLを用意することから「セパレートURL」と呼ばれます。
「モバイルページはこちら」などと書かれたリンクを設置して、モバイルユーザーに移動を促す手法です。

原始的なやり方ですが、アノテーションによって情報（メタデータ）を注釈として付与する必要があります。これは重複コンテンツと見なされて、SEO上のマイナス評価を受ける可能性があるためです。

具体的には、alternate属性とcanonical属性を使い、PC用とモバイル用のURLがどのような関係性なのかを検索エンジンに伝える役割があります。

インタースティシャル広告の表示方法に注意する

「インタースティシャル広告」とはオーバーレイ広告の一種で、ページ遷移のタイミングで画面に重なるように表示されます。インタースティシャル広告の表示の方法に問題があると、モバイルフレンドリーの評価が下がるため注意が必要です。

たとえば、広告をデバイスの画面いっぱいに表示させ、閉じなければコンテンツにアクセスできない場合には不適切だと見なされるでしょう。

インタースティシャル広告は表示次第でページエクスペリエンスが著しく低下するため、運用に苦労する可能性もあります。調整が難しい場合は、バナー広告などに変更することも検討しましょう。

フォントサイズを最適化する

スマートフォンに合ったフォントサイズは16px〜18pxが目安です。行間も1.2em(エム)程度あれば可読性が高まります。使用フォントの選定も含めて、ユーザーにストレスを感じさせない調整が重要です。

モバイル端末で実際にページを表示してチェックする

モバイル端末の表示確認として、AndroidとiOSの両方で実際にWebサイトを表示し、デザインに不備がないかチェックすることを推奨します。GoogleやSafariなど異なるブラウザでチェックすれば万全です。

しかし、そこまで徹底するのが難しい場合は、問題になりやすい以下のポイントを確認しましょう。

• 端末によってデザイン・レイアウトが崩れていないか
• タップ要素が近すぎて誤操作が発生しないか
• タップ要素が大きすぎないか、または小さすぎないか
• 横スクロールなど片手での閲覧を妨げる要素がないか

まとめ：モバイルユーザーの利便性を考慮したサイト設計が重要！

モバイルフレンドリーであることはSEOの観点から非常に重要です。それ以上に、UI・UXの面から、ユーザーに「見づらい」「使いづらい」と感じさせてしまった場合、コンバージョンにも悪影響があると想定されます。

また、企業のイメージダウンにもつながりかねないため、早急な改善が必要です。アクセスの大半がモバイルユーザーであることを十分に理解して、自社サイトの利便性が向上するような設計・運用を目指しましょう。

SEデザインでは、LP制作やオウンドメディアの構築、UI・UXコンサルティングなどを承っております。専用用語や技術的な知識は難しく感じられるかもしれませんが、SEデザインが丁寧に対応させていただきます。サイトの構築や改善をお考えであれば、ぜひお気軽にお問い合わせください。