Webサイトはかつて、パソコンユーザーが情報を得られるよう作成されていました。しかし、現在は常に持ち運びのできるスマートフォンやタブレットなどのモバイル端末を使ってインターネットを閲覧するユーザーが増えています。
パソコン向けWebサイトをモバイル端末で閲覧しようとすると、モバイルフレンドリーな作りに変更していなければ、ユーザーにとって使いにくいです。
このページでは、モバイルフレンドリーとは何か、重要性や対応方法、抑えておくべきポイントをご紹介します。
すでに多くのWebサイトがモバイルフレンドリーになっているものの、自社サイトがまだモバイルフレンドリーになっていないなら、このページをお読みいただき、急ぎ対応する必要があります。
自社サイトにモバイル端末でアクセスしてくれたユーザーにとって見やすく、利用しやすいWebサイト目指しましょう。
モバイル対応で先に確認すること
スマートフォンで本文を読めること、必要な操作を完了できること、Googleがモバイル版の主要コンテンツを取得できることを分けて確認します。旧モバイルフレンドリーテストの合格表示を探すのではなく、実機・URL検査・表示性能の診断を組み合わせるのが現在の確認方法です。
この記事でわかること
モバイルフレンドリーとは
モバイルフレンドリーとは、パソコン画面用に作成されたWebページを、スマートフォンやタブレットなどのモバイル端末でも快適に閲覧できるよう対応することを指します。
パソコン画面で見ることを前提にデザインされたWebページをモバイル端末で閲覧すると、画面の横幅やフォントサイズ、画像サイズが極端に大きいまたは小さいことで見づらいことから、ユーザーが離脱する原因になります。
モバイルフレンドリーなWebサイトに変更すると、モバイル端末からのユーザーでも求める情報を得やすく、分かりやすいデザインになります。
なぜ、多くのWebサイトがモバイルフレンドリーなデザインになっているのでしょうか、次にモバイルフレンドリーが求められる理由について解説します。
モバイルフレンドリーがなぜ必要？その理由について
パソコンサイズ用のWebサイトを作成していたものの、まだモバイルフレンドリーな状態にしていないWebサイトは現在、かなり減少しました。
なぜ、今、Webサイトにモバイルフレンドリーが求められるようになったのか、その3つの理由を以下、ご紹介します。
ユーザーがタブレットやスマートフォンで検索するようになったため
モバイルフレンドリーに対応すべき1つ目の理由は、先にご紹介したように、ユーザーがインターネットの閲覧に使う端末がパソコンからモバイル端末に変わったから。
インターネットが普及して間もないの時代は、インターネットをパソコンでのみ閲覧、利用していました。その後、携帯電話が徐々に普及し、携帯電話用のWebページは作られていたものの、現在のモバイル端末で見られるような画像、動画は掲載されていませんでいた。 加えて、携帯電話の処理機能や通信技術の問題から、ページ内の情報が多いといつまで経っても表示されず、ユーザーがページを開き終える前に離脱することも多い時代でした。
しかし、2007年に入り、スマートフォンの普及に足掛かりとなるアップル社の初代iphoneの販売が始まると、携帯電話からスマートフォンへ切り替えるユーザーが増加。さらに、通信技術も2001年には3G、2012年には4Gへと進化し、今では綺麗な画像や動画をスマートフォンやタブレットでストレスなく閲覧できるようになりました。
こうした時代の流れと共に、インターネットを閲覧する端末がパソコンではなく、スマホやタブレットのようなモバイル端末に変化したことが、モバイルフレンドリーなWebサイトが増えた理由の1つです。
モバイル端末でのユーザーエクスペリエンスを向上させるため
2つ目のモバイルフレンドリーが必要な理由は、モバイル端末でのユーザーエクスペリエンスを向上させるためです。
先にご説明したように、テクノロジーの進歩とともにインターネットを利用する端末や通信規格も進歩しています。それにあわせ、スマホやタブレットで検索するユーザーの体験（ユーザーエクスペリエンス）をより良くするため、モバイルフレンドリーが求められるにようになっています。
というのも、Amazonや楽天などの通販サイト、YouTubeやネットフリックスなどの動画サイト、食べログのようなレストランの紹介・予約サイトなど、一般消費者の消費行動の中に、インターネットが欠かせない存在になっているからです。
企業が運営するWebサイトは、ユーザーにより商品の購入やサービスの体験をしてもらおうとモバイルフレンドリー対応を進め、ユーザーエクスペリエンスの改善を試みています。
モバイルファーストインデックス（MFI）による検索順位への影響が出たため
Googleは、インデックス登録やランキングに主にモバイル版のコンテンツを使います。2019年7月からは新規サイトでモバイルファーストインデックスを標準適用しました。すべてのサイトがその日に一斉に切り替わったわけではありません。
重要なのは、スマートフォン用Googlebotが主要な本文・画像・リンクなどを取得できることです。「PC用ページしかないと必ず上位表示されなくなる」「レスポンシブでなければ登録されない」という意味ではありません。
PC版とモバイル版で重要な内容やrobotsの指示が食い違っていないか、モバイル版で本文が省略されていないかを確認します。Googleの公式推奨事項もご確認ください。
モバイルフレンドリーへの対応する3つの方法
すでに多くのWebサイトではモバイルフレンドリーなデザインに変更済みではあるものの、中にはモバイルフレンドリーにできていないWebサイトもちらほらと見かけることがあります。
今からでも遅くない、自社サイトをモバイルフレンドリーにするための3つの方法をご紹介します。
レスポンシブデザイン
1つ目のモバイルフレンドリーへの対応方法は、レスポンシブデザインの採用です。
レスポンシブデザインとは、ユーザーが使用する端末の画面幅に合わせてページの見せ方を変え、Webサイトをモバイルフレンドリーにさせるものです。 今ご覧いただいているこのサイトのパソコンサイズでの見え方と、スマホサイズでの見え方をそれぞれ見てみましょう。
こちらがパソコン端末でご覧いただく場合に見えるデザインです。 画面上部、ヘッダー部分にはグローバルナビゲーション、そのすぐ下にパンくずリストが設定してあります。画面右側にはメールマガジン登録用のバナー、その下にカテゴライズされたコンテンツメニューが並んでいます。
続いてこちらのスマホサイズの画面をご覧いただくと、グローバルナビゲーションが消え、パソコン画面右側にあったコンテンツメニューも見えていません。これらの情報は、画面左上にある「ハンバーガーメニュー」の中に格納されており、クリックすると見える仕組みになっています。
その他にも、スマホ画面用に文字フォントや画像サイズも調整し、モバイルフレンドリーなデザインにしてます。 レスポンシブデザインを取り入れるには、meta viewportタグの設置とCSSでのデザインが必要です。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
上記のメタタグをヘッダー内に記述し、ページにアクセスするユーザーの端末サイズを読み込みます。 次に、アクセスする端末がどのようなサイズだとページレイアウトが変わるかを指定するCSSを作成する必要があります。
@media screen and (min-width: 最低画面幅の数値px)
こちらはパソコン画面のCSS例です。最低画面幅の数値にはモバイル端末の上限値＋1を記述すると良いです。その数値以上の画面幅の場合、パソコン画面と同じレイアウトで表示します。
@media screen and (max-width: 最高画面幅の数値px)
こちらはモバイル画面のCSS例です。最高画面幅にはスマホ端末の画面幅を入力します。
端末によって画面幅が異なるため、レイアウトが崩れる幅に合わせてブレークポイントを決めます。480pxは一例で、すべてのサイトに適した固定値ではありません（Google検索セントラルのサンプルも480px設定になっています）。
パソコン画面、スマホ画面それぞれのレイアウトを決め、CSSで配置やフォント、幅などを設定します。
自社サイト運営にWordPressを利用している場合、レスポンシブ対応になっているテーマも用意されています。お好みのデザインを選び、レスポンシブ対応になっているかどうか確認し、モバイルフレンドリーなWebサイトを作成しましょう。
ダイナミックサービング
ダイナミックサービングは、同じURLに対して、アクセスする端末などの条件に応じて異なるHTMLをサーバーから返す方法です。1つのHTMLの見せ方をCSSで変えるレスポンシブデザインとは仕組みが異なります。
端末判定やキャッシュ、Vary HTTPヘッダーなどを適切に設計し、スマートフォン用Googlebotにも正しい内容を返す必要があります。採用するだけで表示速度が速くなったり、必ずクロール効率が下がったりするわけではありません。
PC版とモバイル版で主要な本文・見出し・画像・robotsの設定が一致するよう管理します。実装と保守の負担を考慮して選びましょう。
PC用とモバイル端末用の個別管理
3つ目のモバイルフレンドリーなWebサイトへの変更方法は、パソコン、モバイル端末それぞれのページを個別に作成する方法です。
ユーザーの端末画面幅に合わせ、2つのURLでパソコン画面用と、モバイル画面用それぞれのページを作成することでモバイルフレンドリーに対応するというもの。
本来、内容が同じコンテンツを2つのURLで別々に作成、管理するためアノテーション設定を行い、クローラーに同じコンテンツであることを知らせる必要があります（alternateやcanonicalタグを使います）。
しかし、個別管理だと各ページを作成するだけでなく、見せ方を決めるCSSも分けて作成しなければならず、工数が増えます。また、Googleは実装・保守のしやすさからレスポンシブデザインを推奨しています。別URLやダイナミックサービングも対応方式ですが、既存構成と保守体制を踏まえて選びましょう。
モバイルフレンドリーへの対応方法が分かったところで、実際に取り組む際に知っておいた方が良いポイントを次に解説します。
モバイルフレンドリーに対応する際のポイント
モバイルフレンドリーなWebサイトに変更する場合、注意すべきポイントを以下、解説します。
文字サイズに注意する
モバイル端末はパソコン画面に比べ、表示される幅が小さくなります。文字サイズが小さいと、ユーザーにとって読みづらく、優しいコンテンツとは言えません。
モバイルフレンドリーにする場合、ユーザーが文字を判別しやすい大きさにCSSで指定しましょう。 ページ本文のおすすめ文字サイズは14～16ピクセル、補足（引用元の表示など）情報は12～14ピクセルにすると良いです。
Flashは使用しない
Flash Playerは2020年12月31日にサポートが終了し、2021年1月12日からFlashコンテンツの実行がブロックされました。スマートフォンだけの問題ではありません。Adobeの公式案内を確認し、Flashに依存しないコンテンツへ移行しましょう。
もし、コンテンツ内にFlashがある場合、まず本当に必要かどうかを見極め、不要なものであれば削除します。 どうしてもコンテンツ内容に必要な情報であれば、その他のタグなどで代わりのものを挿入し、モバイルフレンドリーなサイト作りを進めましょう。
タップできる要素を近づけすぎない
小さなボタンや隣接したリンクは、スマートフォンで誤操作を起こしやすくなります。ボタンの大きさと間隔を、実機で指を使って確認しましょう。
WCAG 2.2の達成基準2.5.8（レベルAA）は原則24×24 CSSピクセル以上、達成基準2.5.5（レベルAAA）は原則44×44 CSSピクセル以上を定めています。どちらも例外条件があり、「すべての要素の間を44px空ける」という基準ではありません。詳しくは最小サイズの基準と拡張サイズの基準を参照してください。
Search Consoleの旧モバイルユーザビリティレポートは終了しているため、以前のエラー画面で「修正を検証」する手順は現在利用できません。メニュー、フォーム、閉じるボタンなど、実際の操作経路を確認します。
縦スクロールのみで閲覧できるようにする
自社サイトをモバイルフレンドリーにすると、基本的には縦スクロールで情報が流し読みできる状態になるはずです。しかし、画像や表などの要素が横に長く画面幅を超えてしまうと、モバイル画面を横にスライドできてしまうことがあります。
本文を読むために縦方向と横方向のスクロールを繰り返す必要があると、読み進めにくくなります。本文は画面幅に合わせて折り返し、ページ全体に不要な横スクロールが生じないようにしましょう。
ただし、データ表や地図など、理解に縦横の配置が必要なコンテンツは例外です。表を専用のスクロール領域に収めるなど、本文の読みやすさと両立させましょう。詳しくはW3Cのリフローの解説を参照してください。
閲覧を妨げるインタースティシャル広告を避ける
インタースティシャル広告とは、画面が切り替わった際に全画面表示されるポップアップ広告のことです。
検索エンジンで情報を調べ、指定したページへ移動してみると最初、または数秒してから画面上に広告画像が浮かび上がった経験があるのではないでしょうか。 このインタースティシャル広告は、表示されてしまうと広告をクリックするか、画面のどこかにある×マークをクリックして閉じなければ、コンテンツ内容を読み進めることができません。 Google検索セントラルでは、このインタースティシャル広告について、以下のように言及しています。
煩わしいインタースティシャルが表示されるページは、すぐにコンテンツにアクセスできるページに比べユーザー エクスペリエンスが低くなります。画面が小さいモバイル デバイスであればなおさらです。Googleは2017年1月10日以降、モバイル検索エクスペリエンスをさらに高めるため、ユーザーがモバイル検索結果から遷移したとき、すぐにコンテンツにアクセスできないページの掲載順位をこれまでより下げることにしました。
本文へのアクセスを妨げる全画面広告は避けましょう。法令上必要な年齢確認などと販促表示は区別し、必要な確認でも閲覧や操作を妨げない設計にします。
インタースティシャル広告については『インタースティシャル広告とは？意味やペナルティリスク、SEOへの影響を解説』で詳しく解説しています。
モバイルフレンドリーになっているか確認する方法
レスポンシブデザインやダイナミックサービングを採用し、自社サイトをモバイルフレンドリーな状態にできたら、Googleが求める基準をクリアできているかテストしておく必要があります。
以下では、現在利用できる確認方法と、提供終了した旧ツールを区別して紹介します。
Google Search Console
Search Consoleの「モバイル ユーザビリティ」レポートは2023年12月に提供を終了しました。以下の旧画面を使った判定は現在できません。
現在はURL検査でGoogleが取得できるページの状態を確認し、Core Web Vitalsレポートでモバイルの表示性能を確認します。レポートにデータがない場合も、モバイル対応済みと判断せず実機で表示・操作を確認してください。
参考画像（掲載当時の画面・資料。現在の表示や仕様とは異なる場合があります）
PageSpeedInsights
PageSpeed Insightsに対象URLを入力し、モバイルの結果を確認します。実際の利用者のデータと、テスト環境で計測した診断結果は区別して読みます。
LCP・INP・CLSなどの値と改善提案を参考にしますが、スコアだけで文字の読みやすさ、メニュー、入力フォームまで問題ないとは判断できません。速度の診断と実機での操作確認を組み合わせましょう。
参考画像（掲載当時の画面・資料。現在の表示や仕様とは異なる場合があります）
モバイルフレンドリーテスト（提供終了）
GoogleのモバイルフレンドリーテストとAPIは2023年12月に提供を終了しています。下の画像は終了前の画面です。
現在はスマートフォンの実機とブラウザーの開発者ツールを使い、次の順で確認します。
- 本文・画像・表が画面幅に収まり、意図しない横スクロールがないか確認する。
- メニュー、リンク、閉じるボタンを指で操作し、隣の要素を誤って押さないか確認する。
- 問い合わせフォームで入力から確認画面まで進み、入力欄やエラー表示が隠れないか確認する。
- PC版にある重要な本文・リンク・画像がモバイル版でも読めるか確認する。
- 表示性能に問題があればPageSpeed Insightsで原因を調べ、変更後に同じ条件で再確認する。
モバイル版の内容をGoogleが取得できることも重要です。Googleのモバイルファーストインデックスの推奨事項を参照してください。
参考画像（掲載当時の画面・資料。現在の表示や仕様とは異なる場合があります）
まとめ
インターネットに利用する端末の変化、パソコンからスマホやタブレットなどのモバイル端末の利用によって、多くのWebサイトがモバイルフレンドリーなデザイン、レイアウトを採用しています。
もし、まだ自社サイトをモバイルフレンドリーにできていない場合は、このページでご紹介させていただいた情報を活用し、急ぎ作業に着手しましょう。
モバイルフレンドリーになると、ユーザーがスマホやタブレットを使う場合に求める情報を見つけやすく、読みやすいサイトに変わるため、SEO効果も得られ、検索順位が上がる可能性もあります。
モバイルフレンドリーなWebサイトにする方法には、レスポンシブデザイン、ダイナミックサービング、別URLでの配信があります。Googleは、実装・管理しやすいレスポンシブデザインを推奨しています。自社サイトの状況に合わせて選択しましょう。
今後の自社サイト管理がしやすくなるものを選び、ユーザーがいつでもスマホやタブレットで快適に閲覧できる状態に整えておきましょう。
こうしたユーザビリティの改善は、Webサイトを訪れるユーザーの滞在時間を伸ばし、エンゲージメントにつながりやすくなります。近年、SEOでも重視されているユーザビリティについては以下のページでより詳しく解説していますので、ぜひ、ご一読ください。
