「モバイルフレンドリーとはどのようなものなのだろう」
「なぜモバイルフレンドリーに対応すべきなのだろうか」
「SEOにどのような影響があるのだろう」
上記のような疑問を抱えていませんか?モバイルフレンドリー化が大切と言われても、どのような手法かわからないと実施できません。
モバイルフレンドリーは、2015年4月にGoogleが実装したアルゴリズムで、モバイル端末に対応したWebサイトを高く評価するものです。
パソコン用に作成されたWebサイトはモバイル端末で閲覧すると、そのまま縮小して表示されるためユーザーは不便です。
この記事ではモバイルフレンドリーの基礎知識と必要性、SEOへの影響、対応したWebサイトの作成方法を徹底解説していきます。
自社サイトをモバイルフレンドリー化させて目標を達成できるため、最後まで読んでみてください。
また、弊社はSEOに関する無料の相談も行っています。貴社の事業課題や目標を分析した上で、最善案を提案させていただきます。
ご提案内容にご納得いただいたうえで支援を実施しておりますので、SEOに関する課題や悩みを抱えている方はぜひ一度お問い合わせください。
目次
2015年4月にGoogleが実装したアルゴリズムです。スマートフォンから検索するユーザーの増加にともない、評価基準が更新されました。
パソコン用に作成したWebサイトは、モバイル端末ではそのまま縮小して表示されるため、ズームなどの手間が生じます。
そのためスマートフォンでも快適に閲覧できるサイトを、Googleは高く評価しています。
モバイル端末に対応すると、ユーザーにストレスを感じさせません。
モバイルフレンドリーが必要な理由を以下の3つ解説します。
1つずつ詳しくみていきましょう。
スマートフォンの利用者は、平成30年から順調に増えています。
以下2つのグラフをご覧ください。
上図のように世帯の保有割合は9割を超え、個人でも77.3%の人が所持しています。
さらに以下のグラフも御覧ください。
上図のように個人のインターネット利用機器は、スマートフォンがパソコンを上回っており、20〜59歳の各年齢層で約9割が利用しています。
これらからユーザーに情報を届け、自社の目的を達成するにはモバイルフレンドリーに対応する必要があると読み取れます。
モバイル端末に対応すると、PV数や滞在時間の増加を期待できます。PV数は、自社コンテンツの閲覧数です。
Googleの評価が高まるため、自社コンテンツが検索上位に表示され、多くのユーザーが閲覧する可能性も高まります。
反対に対応していないと読みづらいため、離脱率が高まります。PV数や滞在時間の増加を狙う際は、モバイルフレンドリーに対応したサイト作りが欠かせません。
モバイル端末に対応すると、ユーザーの利便性が高まります。画面が狭いスマートフォンからでも、余計な操作なく快適に閲覧可能です。
パソコン版のWebページは、スマートフォンではそのまま縮小して表示されるため、文字やタップ要素が小さいなどの不便が生じます。
読みづらいと感じるとユーザーはすぐに離脱するため、情報が伝わらず満足させられません。
ユーザーの利便性を向上すると、離脱を防ぎ滞在時間を伸ばせるため、自社の目的を達成しやすくなります。
SEOとは「検索エンジン最適化」を指し、自社コンテンツが検索上位表示するように行う施策です。
モバイルフレンドリーはSEOに直接的な影響はありません。
しかし、間接的な効果は期待できます。対応したWebサイトは、ページエクスペリエンスが優れているとGoogleが判断します。
以前は Core Web Vitals、モバイル対応であること、HTTPS を利用していること、煩わしいインタースティシャルがないことがページ エクスペリエンス シグナルとしてリストアップされていました。これらのシグナルは引き続き検索ランキングで使用されていますか?
これらのシグナルのすべてがランキングに直接使用されるとは限りませんが、検索ランキングの順位が高いページはページ エクスペリエンスに関するこれらの要素も優れているため、注目に値すると考えています。
引用元:ヘルプフル コンテンツの作成におけるページ エクスペリエンスの影響丨Google 検索セントラル ブログ
ページエクスペリエンスは、Googleが定めているユーザーが快適に閲覧できるかを評価する指標のセットです。
要素は主に4つあります。
上記のようにユーザーに便利なコンテンツは、ページエクスペリエンスが優れているとGoogleが判断するため、モバイルフレンドリーも重要な評価要素になりえます。
モバイルファーストインデックスは、Googleが検索結果とインデックス登録の評価基準をモバイル版のサイトに切り替えたことを指します。
モバイル ファースト インデックスは、インデックス登録とランキングの決定にモバイル版のコンテンツを使用することで、Google のユーザー(主にモバイル ユーザー)が探している情報を見つけやすくするための仕様です。
引用元:モバイル ファースト インデックスの展開丨Google 検索セントラル ブログ
インデックス登録とは、Googleがインターネット上のコンテンツを検索エンジン用のデータベースに格納することです。自社サイトが検索結果に表示されるには、インデックス登録される必要があります。
以前までは、パソコン版のコンテンツからユーザーとの関連性を評価していました。
しかし、モバイルファーストインデックスが正式に発表された2018年3月からは、モバイル版のコンテンツを評価基準に優先的に使用しています。
なお、モバイル版のコンテンツがなくても、インデックス登録は可能です。
モバイル版コンテンツは必須ではありませんが、Googleは推奨しており、SEO対策するうえでも有効な手段です。
以前はモバイルフレンドリーテストツールをGoogleが無料で提供していました。
しかし2023年の12月にサービス終了したため、今後は以下の2つの方法で確認しましょう。
1つずつ詳しく紹介します。
「Lighthouse(ライトハウス)」は、Googleの拡張機能のため、無料で使用できます。
Lighthouseを使用する手順は以下のとおりです。
分析結果を下にスクロールすると「SEO」の評価項目が表示されるため、そのなかの「MOBILE FRIENDLY」の問題点を確認しましょう。
表示されない場合は、モバイルフレンドリーに対応していると判断できます。
PageSpeed Insights(ページスピードインサイト)は、Googleが提供する公式のパフォーマンス解析ツールです。Webページの表示速度を解析します。
表示速度はモバイルフレンドリーに直接的な影響はありませんが、ユーザーの利便性に大きく関係するため確認しておきましょう。
使用する手順は以下のとおりです。
パフォーマンス点数は、100点に近いほど優良で、数字を囲う円の赤や黄色の数値が大きいほど改善が必要です。
モバイルフレンドリーなコンテンツの作成方法を、大きく分けて3つ解説します。
1つずつ詳しくみていきましょう。
ページの対策方法は、以下の5つあります。
1つずつ詳しくみていきましょう。
モバイルフレンドリーなサイト作りには、レスポンシブデザインを採用しましょう。
ユーザーの使用端末に応じて、自社サイトを最適に表示する設計です。1つのコンテンツでさまざまな端末に対応できるため、制作にかかる時間やコストを軽減できます。
また、レスポンシブデザインはGoogleも推奨している対策方法です。
Google では、1 つのページをモバイル端末とデスクトップの両方に対応させるよう、次のガイドラインを満たす方法の検討を始めました。
引用元:レスポンシブ・ウェブデザイン – メディアクエリのパワーを使いこなす丨Google 検索セントラル ブログ
モバイルフレンドリーでは、ページの読み込み速度も快適にしましょう。ユーザーはさまざまな環境で、Webサイトを閲覧します。
以下のような方が閲覧する場合もあるでしょう。
ページのデータ量が多いと上記のような環境下で閲覧する場合、さらに読み込み時間がかかります。ページの読み込み速度が遅いと、ユーザーはストレスを感じ離脱します。
そのためさまざまな状況を想定し、できるだけページの読み込み速度を早くしておくのが賢明です。
情報を格納できるメニューを検討しましょう。モバイル端末はパソコンより画面が小さいため、メニューもできるだけコンパクトにすると、コンテンツの閲覧を邪魔しません。
コンパクトに収納できる「ハンバーガーメニュー」や「アコーディオンメニュー」を活用しましょう。それぞれの概要を以下の表にまとめました。
ハンバーガーメニュー | 3本線のアイコン「≡」で表示されるメニューアイコンがハンバーガーに似ているのが名前の由来 |
アコーディオンメニュー | クリックやタップすると開閉する開閉する動きがアコーディオンの蛇腹部分に似ているのが名前の由来 |
上記のようなメニューを取り入れると、ページ内がスッキリして見やすくなります。コンテンツの閲覧を邪魔しないため、ユーザーの読了率の向上も期待できます。
余計な操作なく縦スクロールだけで全体を閲覧できるよう、コンテンツの幅を調節しましょう。スマートフォンは一般的に片手で使うため、横スクロールはしづらくユーザーが不便に感じます。
離脱されたり滞在時間が伸びなかったりするリスクがあるため、ユーザーが不便に感じる要素はできるだけ排除しましょう。
インタースティシャル広告は、設置しないようにしましょう。インタースティシャル広告は、コンテンツの上に大きく被る広告です。
そのためコンテンツの閲覧をさまたげ、離脱される可能性を高めます。
Googleからもモバイルフレンドリーではないと認識されるため、設置しないようにしましょう。
テキストの対策方法は以下の3つです。
1つずつ詳しくみていきましょう。
フォントサイズは最小でも12pxが目安です。小さすぎる文字は、画面が小さいモバイル端末では読みづらいです。
そのため、適切なフォントサイズに設定しましょう。
12px未満のフォントは「Lighthouse」でも以下のように言及されています。
12 ピクセル未満のフォントサイズはモバイル デバイスでは読みにくいことが多く、見やすいサイズでテキストを表示するためには拡大が必要になることがあります。
引用元:書類で判読可能なフォントサイズが使用されていません丨Chrome for Developers
行間は文字サイズの1.5〜2倍が目安です。
テキストが密集していると読みづらいため、適切な行間を設けましょう。
モバイルフレンドリーなサイトを作るには、テキストの長さもポイントです。ユーザーは長いテキストに精神的ハードルを感じます。
パソコンでは3行ほどに収まる文章でも、モバイル端末だと画面がほぼテキストで埋め尽くされる場合もあります。
具体的な対策は以下の3つです。
ユーザーの精神的ハードルを下げると、スラスラと最後まで読んでもらえます。
コンテンツ内に設置するボタンなどのタップ要素は、十分な大きさと間隔を設けましょう。モバイル端末は指で操作するため、十分なサイズと隙間がないと誤操作につながります。
以下が一般的に推奨されているサイズと要素同士の間隔です。
サイズ | 最低でも48px四方 |
間隔 | 8px以上を推奨されている |
誤操作はユーザーにストレスを与えるため、離脱につながります。
最後に今回の内容をおさらいしましょう。
モバイルフレンドリー対策は、モバイル端末からでも閲覧しやすいWebサイトを目指します。パソコンよりスマートフォン保有者の方が多いため、自社サイトはモバイルフレンドリーに対応しておくのが賢明です。
この記事で紹介した対応したサイトの作成方法を参考に、モバイルフレンドリーなサイトを構築し、自社の目標を達成しましょう!