メールで
無料相談
LINEで
無料相談

















TOP TOP

モバイルフレンドリーとは?SEOへの影響と対応コンテンツを作成する9つの方法

SEO
更新日
モバイルフレンドリーとは?SEOへの影響と対応コンテンツを作成する9つの方法
亀田温大

この記事の著者

亀田温大

亀田温大

文章の力で売上を引き上げる

大学在学中からSEO対策を独学し、PPP株式会社(StockSun 現代表 岩野圭佑氏の会社)に参画。

その後、20歳でStockSun株式会社の「SEOトライアル」を立ち上げ、PMとして1年半で年商2億規模まで成長させる。
事業の拡大と共に50名以上のSEOディレクター、ライター、インターンの育成を同時に行い、月間300本以上の記事制作/リライトをディレクション。
常時30件以上のクライアント対応の統括。1年で対応したクライアントは50件以上。

プロのセールスライターを束ね、記事はもちろん、LPのコンテンツ、SNS広告のテキストなど売上にインパクトがあるコピーの制作を主に担当

文章なら誰にも負けません。

「モバイルフレンドリーとはどのようなものなのだろう」

「なぜモバイルフレンドリーに対応すべきなのだろうか」

「SEOにどのような影響があるのだろう」

上記のような疑問を抱えていませんか?モバイルフレンドリー化が大切と言われても、どのような手法かわからないと実施できません。

モバイルフレンドリーは、2015年4月にGoogleが実装したアルゴリズムで、モバイル端末に対応したWebサイトを高く評価するものです。

パソコン用に作成されたWebサイトはモバイル端末で閲覧すると、そのまま縮小して表示されるためユーザーは不便です。

この記事ではモバイルフレンドリーの基礎知識と必要性、SEOへの影響、対応したWebサイトの作成方法を徹底解説していきます。

自社サイトをモバイルフレンドリー化させて目標を達成できるため、最後まで読んでみてください。

また、弊社はSEOに関する無料の相談も行っています。貴社の事業課題や目標を分析した上で、最善案を提案させていただきます。

ご提案内容にご納得いただいたうえで支援を実施しておりますので、SEOに関する課題や悩みを抱えている方はぜひ一度お問い合わせください。

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

2015年4月にGoogleが実装したアルゴリズムです。スマートフォンから検索するユーザーの増加にともない、評価基準が更新されました。

パソコン用に作成したWebサイトは、モバイル端末ではそのまま縮小して表示されるため、ズームなどの手間が生じます。

そのためスマートフォンでも快適に閲覧できるサイトを、Googleは高く評価しています。

モバイル端末に対応すると、ユーザーにストレスを感じさせません。

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

モバイルフレンドリーが必要な理由を以下の3つ解説します。

  • スマートフォン利用者が多い
  • PV数や滞在時間の増加につながる
  • 多くのユーザーの利便性が向上する

1つずつ詳しくみていきましょう。

スマートフォン利用者が多い

スマートフォンの利用者は、平成30年から順調に増えています。

以下2つのグラフをご覧ください。

出典元:令和4年通信利用動向調査の結果丨総務省

上図のように世帯の保有割合は9割を超え、個人でも77.3%の人が所持しています。

さらに以下のグラフも御覧ください。

出典元:令和4年通信利用動向調査の結果丨総務省

上図のように個人のインターネット利用機器は、スマートフォンがパソコンを上回っており、20〜59歳の各年齢層で約9割が利用しています。

これらからユーザーに情報を届け、自社の目的を達成するにはモバイルフレンドリーに対応する必要があると読み取れます。

PV数や滞在時間の増加につながる

モバイル端末に対応すると、PV数や滞在時間の増加を期待できます。PV数は、自社コンテンツの閲覧数です。

Googleの評価が高まるため、自社コンテンツが検索上位に表示され、多くのユーザーが閲覧する可能性も高まります。

反対に対応していないと読みづらいため、離脱率が高まります。PV数や滞在時間の増加を狙う際は、モバイルフレンドリーに対応したサイト作りが欠かせません。

多くのユーザーの利便性が向上する

モバイル端末に対応すると、ユーザーの利便性が高まります。画面が狭いスマートフォンからでも、余計な操作なく快適に閲覧可能です。

パソコン版のWebページは、スマートフォンではそのまま縮小して表示されるため、文字やタップ要素が小さいなどの不便が生じます。

読みづらいと感じるとユーザーはすぐに離脱するため、情報が伝わらず満足させられません。

ユーザーの利便性を向上すると、離脱を防ぎ滞在時間を伸ばせるため、自社の目的を達成しやすくなります。

モバイルフレンドリーがもたらすSEOへの影響

SEOとは「検索エンジン最適化」を指し、自社コンテンツが検索上位表示するように行う施策です。

モバイルフレンドリーはSEOに直接的な影響はありません

しかし、間接的な効果は期待できます。対応したWebサイトは、ページエクスペリエンスが優れているとGoogleが判断します。

以前は Core Web Vitals、モバイル対応であること、HTTPS を利用していること、煩わしいインタースティシャルがないことがページ エクスペリエンス シグナルとしてリストアップされていました。これらのシグナルは引き続き検索ランキングで使用されていますか?

これらのシグナルのすべてがランキングに直接使用されるとは限りませんが、検索ランキングの順位が高いページはページ エクスペリエンスに関するこれらの要素も優れているため、注目に値すると考えています。

引用元:ヘルプフル コンテンツの作成におけるページ エクスペリエンスの影響丨Google 検索セントラル ブログ

ページエクスペリエンスは、Googleが定めているユーザーが快適に閲覧できるかを評価する指標のセットです。

要素は主に4つあります。

  • ページ読み込みは速いか
  • モバイル端末からでも快適に閲覧できるか
  • 通信の暗号化はされているか
  • コンテンツの閲覧を妨げる要素はないか

上記のようにユーザーに便利なコンテンツは、ページエクスペリエンスが優れているとGoogleが判断するため、モバイルフレンドリーも重要な評価要素になりえます。

モバイルファーストインデックス(MFI)

モバイルファーストインデックスは、Googleが検索結果とインデックス登録の評価基準をモバイル版のサイトに切り替えたことを指します。

モバイル ファースト インデックスは、インデックス登録とランキングの決定にモバイル版のコンテンツを使用することで、Google のユーザー(主にモバイル ユーザー)が探している情報を見つけやすくするための仕様です。

引用元:モバイル ファースト インデックスの展開丨Google 検索セントラル ブログ

インデックス登録とは、Googleがインターネット上のコンテンツを検索エンジン用のデータベースに格納することです。自社サイトが検索結果に表示されるには、インデックス登録される必要があります。

以前までは、パソコン版のコンテンツからユーザーとの関連性を評価していました。

しかし、モバイルファーストインデックスが正式に発表された2018年3月からは、モバイル版のコンテンツを評価基準に優先的に使用しています。

なお、モバイル版のコンテンツがなくても、インデックス登録は可能です。

モバイル版コンテンツは必須ではありませんが、Googleは推奨しており、SEO対策するうえでも有効な手段です。

自社サイトがモバイルフレンドリーかチェックする2つの方法

以前はモバイルフレンドリーテストツールをGoogleが無料で提供していました。

しかし2023年の12月にサービス終了したため、今後は以下の2つの方法で確認しましょう。

  • Lighthouse丨Google Chrome拡張機能
  • PageSpeed Insights丨Google公式ページパフォーマンス解析ツール

1つずつ詳しく紹介します。

Lighthouse丨Google Chrome拡張機能

「Lighthouse(ライトハウス)」は、Googleの拡張機能のため、無料で使用できます。

Lighthouseを使用する手順は以下のとおりです。

  1. GoogleChromeを立ち上げる
  2. Googleアカウントでログインする
  3. Chromeウェブストアで「Lighthouse」と検索する
  1. 「Lighthouse」を選択する
  1. 「Chromeに追加」をクリックする
  1. 「拡張機能を追加」をクリックする
  1. チェックする自社コンテンツを開く
  2. 「拡張機能のマーク」をクリックする
  1. 「Lighthouse」をクリックする
  1. 「Generate reportボタン」をクリックする
  1. 待機画面が表示される
  1. 30秒ほどで分析が完了する

分析結果を下にスクロールすると「SEO」の評価項目が表示されるため、そのなかの「MOBILE FRIENDLY」の問題点を確認しましょう。

表示されない場合は、モバイルフレンドリーに対応していると判断できます。

PageSpeed Insights丨Google公式ページパフォーマンス解析ツール

PageSpeed Insights(ページスピードインサイト)は、Googleが提供する公式のパフォーマンス解析ツールです。Webページの表示速度を解析します。

表示速度はモバイルフレンドリーに直接的な影響はありませんが、ユーザーの利便性に大きく関係するため確認しておきましょう。

使用する手順は以下のとおりです。

  1. 入力欄に自社サイト・コンテンツのURLを入力する
  1. 分析をクリックする
  1. 携帯電話を選択する
  1. パフォーマンスを確認する
  1. 分析結果の詳細を確認する

パフォーマンス点数は、100点に近いほど優良で、数字を囲う円の赤や黄色の数値が大きいほど改善が必要です。

モバイルフレンドリーなコンテンツを作成する9つの方法

モバイルフレンドリーなコンテンツの作成方法を、大きく分けて3つ解説します。

  • ページの対策方法
  • テキストの対策方法
  • タップ要素の対策方法

1つずつ詳しくみていきましょう。

ページの対策方法

ページの対策方法は、以下の5つあります。

  • レスポンシブデザイン
  • ページの読み込み速度
  • 情報を格納できるメニュー
  • 縦スクロールのみで閲覧できるコンテンツ

1つずつ詳しくみていきましょう。

レスポンシブデザイン

モバイルフレンドリーなサイト作りには、レスポンシブデザインを採用しましょう。

ユーザーの使用端末に応じて、自社サイトを最適に表示する設計です。1つのコンテンツでさまざまな端末に対応できるため、制作にかかる時間やコストを軽減できます。

また、レスポンシブデザインはGoogleも推奨している対策方法です。

Google では、1 つのページをモバイル端末とデスクトップの両方に対応させるよう、次のガイドラインを満たす方法の検討を始めました。

  1. ページは、どの画面解像度でも読みやすく表示される
  2. どの端末でも表示できるようにコンテンツをひとかたまりごとにマークアップする
  3. ウィンドウサイズにかかわらず、水平方向のスクロール バーは表示しないようにする

引用元:レスポンシブ・ウェブデザイン – メディアクエリのパワーを使いこなす丨Google 検索セントラル ブログ

ページの読み込み速度

モバイルフレンドリーでは、ページの読み込み速度も快適にしましょう。ユーザーはさまざまな環境で、Webサイトを閲覧します。

以下のような方が閲覧する場合もあるでしょう。

  • 低速ネットワーク環境下
  • 通信制限がかかっているなど

ページのデータ量が多いと上記のような環境下で閲覧する場合、さらに読み込み時間がかかります。ページの読み込み速度が遅いと、ユーザーはストレスを感じ離脱します。

そのためさまざまな状況を想定し、できるだけページの読み込み速度を早くしておくのが賢明です。

情報を格納できるメニュー

情報を格納できるメニューを検討しましょう。モバイル端末はパソコンより画面が小さいため、メニューもできるだけコンパクトにすると、コンテンツの閲覧を邪魔しません。

コンパクトに収納できる「ハンバーガーメニュー」や「アコーディオンメニュー」を活用しましょう。それぞれの概要を以下の表にまとめました。

ハンバーガーメニュー3本線のアイコン「≡」で表示されるメニューアイコンがハンバーガーに似ているのが名前の由来
アコーディオンメニュークリックやタップすると開閉する開閉する動きがアコーディオンの蛇腹部分に似ているのが名前の由来

上記のようなメニューを取り入れると、ページ内がスッキリして見やすくなります。コンテンツの閲覧を邪魔しないため、ユーザーの読了率の向上も期待できます。

縦スクロールのみで閲覧できるコンテンツ

余計な操作なく縦スクロールだけで全体を閲覧できるよう、コンテンツの幅を調節しましょう。スマートフォンは一般的に片手で使うため、横スクロールはしづらくユーザーが不便に感じます。

離脱されたり滞在時間が伸びなかったりするリスクがあるため、ユーザーが不便に感じる要素はできるだけ排除しましょう。

インタースティシャル広告

インタースティシャル広告は、設置しないようにしましょう。インタースティシャル広告は、コンテンツの上に大きく被る広告です。

そのためコンテンツの閲覧をさまたげ、離脱される可能性を高めます。

Googleからもモバイルフレンドリーではないと認識されるため、設置しないようにしましょう。

テキストの対策方法

テキストの対策方法は以下の3つです。

  • フォントサイズ
  • 行間
  • テキストの長さ

1つずつ詳しくみていきましょう。

フォントサイズ

フォントサイズは最小でも12pxが目安です。小さすぎる文字は、画面が小さいモバイル端末では読みづらいです。

そのため、適切なフォントサイズに設定しましょう。

12px未満のフォントは「Lighthouse」でも以下のように言及されています。

12 ピクセル未満のフォントサイズはモバイル デバイスでは読みにくいことが多く、見やすいサイズでテキストを表示するためには拡大が必要になることがあります。

引用元:書類で判読可能なフォントサイズが使用されていません丨Chrome for Developers

行間

行間は文字サイズの1.5〜2倍が目安です。

テキストが密集していると読みづらいため、適切な行間を設けましょう。

テキストの長さ

モバイルフレンドリーなサイトを作るには、テキストの長さもポイントです。ユーザーは長いテキストに精神的ハードルを感じます。

パソコンでは3行ほどに収まる文章でも、モバイル端末だと画面がほぼテキストで埋め尽くされる場合もあります。

具体的な対策は以下の3つです。

  • 1文の長さは60文字程度
  • テキスト5行以上続く場合は段落や改行で余白を確保
  • 箇条書きや表を使用する

ユーザーの精神的ハードルを下げると、スラスラと最後まで読んでもらえます。

タップ要素の対策方法

コンテンツ内に設置するボタンなどのタップ要素は、十分な大きさと間隔を設けましょう。モバイル端末は指で操作するため、十分なサイズと隙間がないと誤操作につながります。

以下が一般的に推奨されているサイズと要素同士の間隔です。

サイズ最低でも48px四方
間隔8px以上を推奨されている

誤操作はユーザーにストレスを与えるため、離脱につながります。

まとめ

最後に今回の内容をおさらいしましょう。

  • モバイルフレンドリーは、2015年4月にGoogleが実装したアルゴリズム
  • モバイル端末が普及し、パソコンよりモバイル端末から検索するユーザーが増えたのが理由で、評価基準が更新された
  • モバイルフレンドリーとSEOに直接的な影響はないが、対応したWebサイトは、ページエクスペリエンスが優れているとGoogleが判断するため間接的な効果は期待できる
  • モバイルフレンドリーの要素は多数ある

モバイルフレンドリー対策は、モバイル端末からでも閲覧しやすいWebサイトを目指します。パソコンよりスマートフォン保有者の方が多いため、自社サイトはモバイルフレンドリーに対応しておくのが賢明です。

この記事で紹介した対応したサイトの作成方法を参考に、モバイルフレンドリーなサイトを構築し、自社の目標を達成しましょう!

おすすめ記事

お仕事のご依頼・ご相談

各Web領域に精通したコンサルタントに無料でご相談可能です。デジマ支援は「日本一競争が激しいStockSun」にお任せください。

会社資料のダウンロード

まずは社内で検討したい方、情報取集段階の方はご自由にダウンロードください。非常識な営業等はございませんのでご安心ください。