スマートフォンで「見づらい」「操作しにくい」と感じるウェブサイト、一度は経験したことがあるのではないでしょうか。文字が小さすぎる、ボタンが押しにくい、横にはみ出して全体が見えない——そういった体験が「モバイルフレンドリーでない状態」です。
この記事では、モバイルフレンドリーとは何か、なぜSEOに関係するのか、そして自社サイトがモバイルフレンドリーかどうかを確認する方法まで、ひと通り解説します。
モバイルフレンドリーとは
モバイルフレンドリーとは、スマートフォンやタブレットなどのモバイル端末で、ウェブサイトが快適に閲覧・操作できる状態のことを指します。
もう少し具体的に言うと、以下のような状態です。
- 画面サイズに合わせてレイアウトが自動で調整される
- 文字が読みやすいサイズで表示される
- ボタンやリンクが指でタップしやすい大きさになっている
- 横スクロールしなくてもページ全体が見える
逆に、PCサイトをそのままスマートフォンで見せているようなサイトは「モバイルフレンドリーでない」と判断されます。
モバイルフレンドリーとレスポンシブデザインの違い
「レスポンシブデザイン」と「モバイルフレンドリー」は混同されがちですが、意味が少し異なります。
レスポンシブデザインは、画面サイズに応じてレイアウトが自動調整される実装方法のことです。モバイルフレンドリーは、「スマートフォンで使いやすいかどうか」という状態・評価基準のことを指します。レスポンシブデザインは、モバイルフレンドリーを実現するための代表的な手段の1つです。
モバイルフレンドリーがSEOに関係する理由
「スマホ対応はわかったけど、SEOとどう関係するの？」という疑問を持つ方も多いと思います。
Googleのアルゴリズム変更（2015年〜）
2015年4月、Googleは「モバイルフレンドリーアップデート」と呼ばれるアルゴリズムの変更を実施しました。これにより、スマートフォンでの検索結果において、モバイル対応しているサイトが優先的に上位表示されるようになりました。
当時は業界内で「モバイルゲドン（Mobilegeddon）」とも呼ばれ、大きな話題になりました。それほど影響が大きいアップデートだったということです。
モバイルファーストインデックス（MFI）の導入
さらに大きな変化が、2018年以降に本格化した「モバイルファーストインデックス」です。
従来のGoogleは、PC版のサイトを基準にページを評価・インデックスしていました。しかしモバイルファーストインデックスでは、スマートフォン版のサイトを基準に評価するように変わりました。
つまり、PC版でどれだけ良いコンテンツがあっても、スマートフォン版が不十分だとSEO評価が下がるということです。2024年時点でほぼすべてのサイトがモバイルファーストインデックスに移行しています。
スマートフォン利用者の増加
総務省の調査によると、インターネット利用端末としてスマートフォンを使っている割合はPCを上回っています。検索エンジン経由の流入の多くがスマートフォンからということも珍しくありません。
ユーザーの使いやすさを最優先に考えるGoogleにとって、スマートフォンでの体験を重視するのは自然な流れです。モバイルフレンドリーへの対応は、SEOのためだけでなく、実際の訪問者体験のためにも必要です。
モバイルフレンドリーかどうか確認する方法
自社サイトが現在モバイルフレンドリーかどうかを調べる方法はいくつかあります。いずれも無料で使えるツールです。
Google Search Consoleで確認する
Google Search Console（サーチコンソール）を使っている場合、「モバイルユーザビリティ」レポートからサイト全体のモバイル対応状況を確認できます。
エラーが検出されている場合、具体的にどのページに何の問題があるかが一覧で表示されます。複数ページをまとめてチェックできるので、サイト全体の状況把握に向いています。
PageSpeed Insightsで確認する
「PageSpeed Insights」はGoogleが提供する無料の診断ツールです。URLを入力すると、表示速度のスコアとあわせて、モバイルでのユーザビリティに関する診断結果が表示されます。
「モバイル」タブを選択して診断すると、スマートフォンでの表示状況がチェックできます。改善が必要な項目は「改善できる事項」として具体的に表示されるので、何を直せばいいかがわかりやすいです。
Google Lighthouseで確認する
Google Chromeに標準搭載されている「Lighthouse」というツールを使う方法もあります。Chromeの開発者ツールからアクセスでき、パフォーマンス・アクセシビリティ・SEOなど複数の観点で診断してくれます。
主に制作側の技術担当者が使うツールですが、スコアの全体感を把握するのに役立ちます。
よくあるモバイルフレンドリーのエラーと対処方法
Googleが検知するモバイルフレンドリーのエラーには、よく見られるパターンがいくつかあります。「何がエラーになっているかわからない」という場合の参考にしてみてください。
ビューポートが設定されていない
「ビューポート」とは、ブラウザがページをどのサイズで表示するかを制御する設定です。これが設定されていないと、PCサイトをそのまま縮小して表示するような見た目になり、文字が極端に小さくなります。
HTMLの<head>内に以下のような記述を追加することで対応できます。
<meta name="viewport" content="width=device-width, initial-scale=1">
WordPressなど主要なCMSを使っているサイトでは、テーマ側でこの設定が含まれていることが多いです。
テキストが小さすぎて読めない
Googleが推奨する文字サイズの目安は16px以上です。それより小さい文字はモバイルユーザーには読みにくく、エラーとして検出される場合があります。
本文の文字サイズを見直して、読みやすいサイズに調整できるとベストです。
クリックできる要素同士が近すぎる
ボタンやリンクが密集していると、タップしたいものと違う場所を押してしまいます。Googleはタップターゲットの最小サイズとして48px×48pxを目安にしています。
メニュー項目や「お問い合わせはこちら」などのボタンが小さすぎる・詰め込みすぎな場合は、間隔を広げるか、ボタンサイズを大きくする対応が必要です。
コンテンツの幅が画面を超えている
横スクロールが発生している状態です。テキストや画像が画面からはみ出していると、ユーザーはページ全体を見るために横スクロールが必要になり、使い勝手が悪くなります。
画像に対してmax-width: 100%のCSSを設定するなど、コンテンツが画面幅に収まるよう調整します。
互換性のないプラグインを使用している
FlashなどのコンテンツはiPhoneをはじめ多くのスマートフォンで動作しません。該当する場合はHTML5やCSSを使った実装に切り替える必要があります。
現在の新規サイトではほとんど見られませんが、古くから運営しているサイトでは残っているケースもあります。
モバイルフレンドリーなサイトを作る3つの方法
モバイルフレンドリーを実現するための主な方法は3つあります。制作時にどの方式を選ぶかは、制作会社と相談しながら決めるのが一般的です。
レスポンシブウェブデザイン（Googleが推奨）
PC・スマートフォン・タブレットなど、どの画面サイズで見てもレイアウトが自動で調整されるデザイン手法です。URLは1つのまま、CSSで画面サイズに応じた見た目を制御します。
Googleが公式に推奨している方法であり、現在新規制作されるサイトの主流です。管理が1サイト分で済むため、運営コストも抑えやすいです。
ダイナミックサービング
1つのURLに対して、アクセスしてきたデバイスを判定し、PC向けとスマートフォン向けで異なるHTMLを返す方法です。URLは同じですが、表示されるコンテンツが変わります。
柔軟なカスタマイズが可能ですが、実装が複雑になりやすく、設定を誤るとGoogleが正しく評価できないケースもあります。
セパレートURL（別URLで管理）
m.example.comやexample.com/sp/のように、スマートフォン用のページを別URLで用意する方法です。
PC向けとスマートフォン向けのコンテンツをまったく別に管理できるメリットがある一方、2つのサイトを並行して管理する手間がかかります。また、設定を誤るとSEO上の評価が分散する可能性があるため、注意が必要です。
モバイルフレンドリー対応時に気をつけること
モバイルフレンドリーへの対応を進めるうえで、特に発注者として知っておきたいポイントを紹介します。
PC版とスマートフォン版でコンテンツの差をつけない
Googleはスマートフォン版を基準に評価します。「PC版にはある情報をスマートフォン版では省いている」という状態だと、SEO評価が下がる可能性があります。
スマートフォンで見たときに情報が少なくなる設計は避けられるとベストです。
表示速度も一緒に改善する
モバイル環境では通信速度がPC環境より遅いこともあります。画像が大きすぎる・不要なスクリプトが多いといった理由でページの読み込みが遅くなっていると、ユーザーが待ちきれず離脱してしまいます。
表示速度はGoogleの評価にも直結するため、モバイルフレンドリー対応とあわせて改善できるとより効果的です。
リニューアル時には必ず確認する
サイトリニューアルのタイミングで、意図せずモバイルフレンドリーのエラーが増えることがあります。デザインを変えたりページ構成を見直したりした後は、Search ConsoleやPageSpeed Insightsで確認する習慣をつけておくと安心です。
まとめ
モバイルフレンドリーとは、スマートフォンでウェブサイトを快適に使える状態のことです。2015年のGoogleアルゴリズム変更以降、SEOに直結する重要な要素となっており、現在はスマートフォン版を基準に評価する「モバイルファーストインデックス」が主流になっています。
自社サイトが対応できているかどうかは、Google Search ConsoleやPageSpeed Insightsで無料で確認できます。エラーが出ている場合は、制作会社に改善を依頼できるとベストです。
Webサイトは「作って終わり」ではなく、ユーザーが実際に快適に使えるかどうかを継続的に確認していくことが大切です。モバイルフレンドリーはその基本のひとつです。
関連用語
- レスポンシブデザイン — モバイルフレンドリーを実現する代表的な実装方法
- SEO — Googleの検索結果で上位表示を目指す対策全般
- 表示速度 — モバイル環境での体験に特に影響するSEO評価指標
- サーチコンソール — Googleが提供するサイト分析・診断ツール
- UX — モバイルフレンドリーが目指すユーザー体験の向上