PCよりスマホからのサイトアクセスが上回るようになった昨今、ブログ運営においてモバイルフレンドリーは欠かせない指標になっています。

その一方で、ブログ制作の主流は以前と変わらずPCのままです。PC画面での作業が基本になることが多いので、初心者はモバイルフレンドリーの重要性をつい見過ごしがちです。

そこで、この記事では初心者がブログ運営を始める際に押さえておきたいモバイルフレンドリーの概要やSEO効果、対応策について解説します。

スマホからのアクセスが主流となった現在、その操作性の指標であるモバイルフレンドリーへはブログ運営の成功に欠かせません。まだ詳しくない方は、ぜひ記事をご覧になって理解を深めていってください。

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

モバイルフレンドリーとは、Webサイトがモバイル（スマホやタブレットなど）から快適に閲覧できるよう設計されている状態を指します。

モバイルフレンドリーは2015年4月21日にGoogleが行ったアップデートから実装されたアルゴリズムです。以降、モバイル上のGoogle検索では、モバイルフレンドリーと判定されたWebサイトが上位に表示されやすくなりました。これにより、Google検索ではUX（ユーザーエクスペリエンス）が向上し、モバイルユーザーにとってより使いやすい検索結果が提供されるようになりました。

モバイルフレンドリーが重要視されるようになった背景

モバイルフレンドリーが重要視されるようになった背景には、PCとスマホのインターネット利用率が逆転したことがあげられます。

この逆転現象は2016年から2017年の間に起こっています。
総務省が発表した2017年の通信利用動向調査によると、日本では個人がインターネットを利用する機器はスマートフォンが54.2%と、初めてパソコン（48.7%）を上回りました。

これ以降は、スマホがPCのインターネット利用率を上回る状態が続いています。2024年現在の総務省ホームページにも「2022年のインターネット利用率（個人）は84.9％となっており、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている」との記載が見られます。

インターネットの主役がPCからスマホに移っているのはデータからも明白です。ブログ運営の収益化において、スマホ閲覧を前提にしたサイト設計は不可欠となっています。

参照
https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r05/html/nd24b120.html#:~:text=

モバイルフレンドリーとSEOの関係

ブログ運営においてモバイルフレンドリーが無視できない指標であることが分かりました。

では、モバイルフレンドリーは具体的にどのような形でSEOに影響をもたらすのでしょうか？　ここでは、SEO対策に取り入れる前に知っておきたい基本知識を4つ紹介します。

UX改善によるサイト評価の向上

1つ目は、モバイルフレンドリーによるSEO効果です。

モバイルフレンドリーはUXにも分類されます。UXとはユーザーが商品やサービスを通じて得られる体験のことです。

モバイルフレンドリーを取り入れることで、Webサイトはモバイルからのページの読み込み速度やナビゲーションの使いやすさなどが向上し、UXが改善されます。UXが改善されると、ユーザーの滞在時間の増加、ページ離脱率の減少などにつながります。これらの指標を検索エンジンが評価することで、サイトの検索順位が上昇するのです。

UX改善による検索エンジンの評価向上が、モバイルフレンドリーの主要なSEO効果です。

影響はモバイルでの検索結果に限定される

2つ目は、モバイルフレンドリーが影響をもたらす範囲です。

モバイルフレンドリーによる検索結果の影響はモバイル限定です。PC・タブレットの検索結果には影響しません。対策するに越したことはありませんが、スマホからの流入がどれほどかによっても、優先度の度合いは変わってくるでしょう。

モバイルフレンドリーが検索結果にもたらす影響はモバイル限定なので、PC・タブレットとは別枠の対策です。

ページ単位で判定を受ける

3つ目は、モバイルフレンドリーの判定を受ける対象です。

モバイルフレンドリーはページ単位で判定を受けます。そのため、サイトページすべてに改修を施すのが理想です。

その一方で、大きなサイトになるほど、全ページの改修はコスト的に難しくなります。コストを最小限に抑えて効率的に効果を出したいのであれば、優先度が高いページから順次改修していくやり方がいいでしょう。優先度が高いページとしては、トップページやランディングページ、主要コンテンツのページなどがあげられます。

モバイルフレンドリーの判定を受ける対象はページ単位なので、改修にかかる手間と成果のバランスを考慮することも大事です。

数値ではなく二択式で判定される

4つ目は、モバイルフレンドリーがどのように判定されるかです。

モバイルフレンドリーは基本的に「モバイルフレンドリーであるか否か」の二択式で判定されています。数値のように細かく判定されないので「0か1か」しかありません。そのため、対策はツールなどで小まめに判定をチェックしながら行うことになります。

また、一度「ある」と判定を受けた後も、定期的な判定チェックは欠かせません。モバイルフレンドリーの有無は自サイトの更新や改修、技術の変化、競合サイトの動向などによって覆ることがあります。

「ある」「ない」二択式でしか判定されないので、モバイルフレンドリーの改善は「ある」と判定されるまで行い、それを維持していく必要があります。

モバイルフレンドリーなWebサイトを作る方法

モバイルフレンドリーがSEOにどのような形で反映されるかが分かりました。では、モバイルフレンドリーなWebサイトを作るには具体的にどのようなことをすればいいのでしょうか？ ここでは、その代表的な方法についていくつか取り上げます。

レスポンシブデザインの採用

レスポンシブデザインとは、閲覧するユーザーのデバイスに応じて画面サイズを合わせて、Webサイトのデザインを最適化することです。サイトがモバイルフレンドリーであるかどうかの基本であり、UX向上にもつながります。

レスポンシブデザインを実現するには、CSSのメディアクエリを使用して特定の画面サイズや条件に応じたスタイルを適用し、相対的な単位（％やem）を使用して柔軟なレイアウトを構築することになります。

CSSと聞くと難しく感じてしまう方も多いかもしれませんが、初心者でもプロが作成したコードを貼り付けて、その数値を調整することで、ある程度のレベルのレスポンスデザインを実装することが可能です。ネットを活用して、レスポンシブデザインの制作に活かしましょう。

読み込み速度の改善

読み込み速度の改善はユーザー共通のニーズです。画像や動画などのコンテンツをモバイルに最適化し、ページの読み込み速度を上げます。

具体的には画像の圧縮やサイズ最適化を行い読み込む容量自体を減らしたり、キャッシュを活用してユーザーの再訪問時にデータの再ダウンロードを避けたりするなどの手法があります。

ページの読み込み速度を改善する方法は多岐にわたり、その難易度もさまざまです。簡単なものから始めて、段階的にサイトのパフォーマンスを向上させていきましょう。

タップ可能なエレメントの最適化

エレメントとはWebページの構成要素です。モバイルフレンドリーなエレメントは、ユーザーがスマホ画面のような小さなスクリーン上でも快適に操作できる状態を目指します。タップ可能なエレメントの最適化はCSSを使って行うことになります。

設計の基本的なポイントは次の通りです。

• 指でのタップを考慮しボタンやリンクを十分なサイズ（最低48×48ピクセル）を確保する
• 誤タップの防止に、タップ可能なエレメント間に適切なスペース（8〜10ピクセル以上）を設ける
• エレメントを色分けで視認性を向上させ、エレメントごとのコンテンツを明確に区分する
• デザインを統一し、一貫性を持たせることで、ユーザーが直感的に操作できるようにする

タップ可能なエレメントの最適化に関連したCSSも、Web上にプロが作ったコードを貼りけて利用することが可能です。初心者でもコードの用途が分かる程度の基礎知識があれば使えます。自サイトとの適合性を確認しながら、うまく活用しましょう。

コンテンツのシンプル化

スマホ画面は狭く、限られたスペースしかありません。そのため、コンテンツをシンプルかつ分かりやすくすることがUXの向上につながります。

コンテンツのシンプル化では、不要な要素の削除やテキストの整理を行い、重要な情報を際立たせるのが基本になります。
たとえば、不要な要素の排除では、複雑なナビゲーションや閲覧の妨げになる広告などを改善、もしくは排除します。テキストの最適化では、文章的な読み易さの確保やフォトン・行間の調整を行います。

コンテンツのシンプル化には理解と熟練が必要ですが、初心者でも段階的に取り組めます。これらの手順を通じて、読者が情報を素早く理解できるデザインになるよう心がけましょう。

AMP（Accelerated Mobile Pages）の導入

AMP（Accelerated Mobile Pages）はモバイル向けに読み込み速度を高速化できるようにWebページを構築する技術です。GoogleはAMPページを好意的に評価するため、導入すると検索結果にも反映され、SEO効果が見込めます。

AMPを導入する手順としては、AMP HTMLを理解した上で、その仕様通りにページを構築し、AMPコンポーネントを使用してページを最適化します。最適化後は、ページを検証してからGoogleに登録します。これにより、モバイルからの読み込み速度と検索結果の順位の向上が期待できます。

AMPページには特有の仕様やルールがあるので、構築にはWeb開発の基礎知識やHTML、CSS、JavaScriptの理解が必要です。初心者にはやや敷居が高いかもしれませんが、AMPは高速な読み込みやUX向上を実現するための有用なツールになります。

ジャンルによるモバイルフレンドリーの優先度

モバイルフレンドリーなサイトを構築する方法は多岐にわたり、さまざまな要素が関与するとわかりました。

複雑な要素が絡むだけに、初めてモバイルフレンドリーに取り組む方は苦戦するかもしれません。また、Googleの検索エンジンは基本的に「検索ワードとの関連性の高いコンテンツ」を上位に表示します。コンテンツの改善とモバイルフレンドリーのどちらを優先すべきか迷うこともあるでしょう。

そこで、最後にジャンルによるモバイルフレンドリーの優先度について触れておきます。最終的には良質なコンテンツとの両立を目指しますが、優先度を把握しておけば、作業を円滑に進める助けになるはずです。

モバイルフレンドリーの優先度が高いジャンル

モバイルフレンドリーが優先されるジャンルには次のような特徴があります。

1．高い更新頻度と即時性が求められる
ニュースや速報など即時性が求められる情報を読者は迅速に取得したいと考えます。また、このような情報を扱うサイトは、どこでも持ち運べるスマホなどのデバイスからアクセスされることが多いです。

2．日常生活に密接に関係している
天気や料理レシピ、交通情報など日常に密接に関係している情報サイトは、ユーザーが外出先や移動中に頻繁に利用します。スマホからでも迅速かつ効率的に情報を提供できるサイトデザインが求められます。

3．ビジュアルが重視されている
ファッション系の情報を扱うサイトは画像が多いため、回線が処理しなくてはならない情報量が多く、対策なしでは読み込み速度が遅くなりがちです。一方で、常にトレンドが変化するためユーザーはスマホで情報をチェックします。ビジュアルと読み込み速度が両立できるデザインが求められます。

このような特徴が当てはまるジャンルの具体例は次の通りです。

• ニュースブログ
• ファッションブログ
• 料理ブログ
• 旅行ブログ

これらのジャンルには積極的にモバイルフレンドリーによる改修を行いましょう。

モバイルフレンドリーの優先度が低いジャンル

逆に、モバイルフレンドリーの優先度が低いジャンルには次のような特徴があります。

1．専門的なコンテンツが多い
専門的なコンテンツは、深い理解や詳細な情報の提供を目指しており、そのためには多くのテキストや図表が必要になります。これらの情報を表示するのに、スマホのような狭い画面は適していません。

2．グラフや図表を頻繁に使う
特定のジャンルでは、グラフや図表が頻繁に使用されます。しかし、これらの要素はモバイルデバイスの小さな画面では適切に表示されない場合があります。そのため、このような要素を含むジャンルは、一般的にPC画面で表示されます。

3．テキストが長文になる
専門的なコンテンツや学術論文は端的な説明が難しく、テキストが長文になることがほとんどです。長いテキストをスマホ画面で読み続けるのは困難であるため、このようなジャンルはPC画面での閲覧が好まれます。

特徴が当てはまるジャンルの具体例は次の通りです。

• 学術論文や研究に関連したブログ
• 技術やプログラミングに関連したブログ
• ビジネスブログ
• 金融分析ブログ

このような特徴を持つジャンルは、モバイルフレンドリーな改修が難しいジャンルともいえます。難易度も考慮して適切に改修を施しましょう。

まとめ

モバイルフレンドリーにはUX向上などのSEO効果がある一方、対象や範囲、判定に特徴があります。特徴を把握しておかないと、見込んだ成果が得られなかったり、モバイルフレンドリーを達成できなかったりするリスクがあるので注意しましょう。

Google検索が優先して上位に表示するには、基本的に検索ワードと関連性の高い良質なコンテンツです。しかし、スマホからのインターネット利用率が7割を超える現在、モバイルフレンドリーも良質なコンテンツの条件に含まれていると見るべきです。

良質なコンテンツとモバイルフレンドリーを両立させ、検索順位を向上させましょう