スマホサイトのユーザビリティが検索順位を上げる!SEOに効果的な改善ポイント7つ

SEO対策実例・コラム
2020.06.25
2020.07.14
スマホサイトのユーザビリティが検索順位を上げる!SEOに効果的な改善ポイント7つ

PCよりモバイルでの閲覧ユーザーが増えるにつれて、重要度が増しているのが「スマホのユーザビリティ」です。そこで本記事では、なぜスマホのユーザビリティがSEO対策にとって重要なのか、Googleの見解を時系列でピックアップし、具体的な改善ポイントについて解説します。

スマホのユーザビリティはSEOに効果的!Googleの見解は?

Googleが繰り返しコメントしている通り、スマホのユーザビリティはSEOにポジティブな効果を与える要素であり、検索ランキングの評価にも用いられています。そこで、Googleの公式サイトやジョンミュラー氏のツイート経由で発信された関連情報を、時系列でまとめてみました。

▼スマホのユーザビリティに関するGoogleの見解

  • 2015年4月:モバイルユーザビリティの向上によって直接的なSEO効果が見込める
  • 2015年5月:ユーザビリティよりも充実したコンテンツ内容の方が重要
  • 2015年5月:PCのユーザビリティ向上で間接的なSEO効果が見込める
  • 2018年7月:ページの読み込み速度を検索ランキング要素として採用する

今後スマホのユーザビリティがより重要となる根拠2つ!

これまでもSEOの評価対象だったスマホのユーザビリティですが、今後はさらに重視する必要があります。その根拠となっているのが、すでにGoogleが発表している今後の方針です。

2020年9月からMFIの対象が全サイトへ拡大

2017年12月から一部のWebサイトを対象にスタートし、徐々に拡大展開してきたモバイルファーストインデックス(MFI)。ついにGoogleは、2020年9月から全てのサイトをMFIの対象にすると決定しました。

したがって、今後はPCから検索した場合も含め、モバイルサイトでの評価結果がランキングに反映される仕組みに変更されるのです。

最適化の確認や導入前の準備については「Google公式発表!2020年9月から全てのサイトがモバイルファーストインデックスの対象に!」で詳しく解説しております。

2021年からUX指標「Core Web Vitals」を導入

さらに、Googleは2021年から検索ランキングの評価要素としてUX指標であるCore Web Vitals(コアウェブバイタル)を採用すると公式に発表しています。コアウェブバイタルはユーザビリティに直結する下記の3指標で構成されており、SEOに与える影響が大きくなる見通しです。

▼コアウェブバイタルの評価基準

  • 表示速度
  • ユーザー操作に対する反応性
  • 意図せぬレイアウトシフトの少なさ

詳細については「2021年に導入予定のCore Web Vitals(コアウェブバイタル)がもたらすGoogle検索結果への影響は?」を参考にして下さい。

スマホのユーザビリティ改善ポイント7つ!PCとの相違点は?

では早速、スマホのユーザビリティを改善する具体的な方法について見ていきましょう。なお、スマホのユーザビリティ向上に欠かせないUI(ユーザーインターフェース)とUX(ユーザーエクスペリエンス)については、下記の記事を参考にして下さい。

「表示速度」を高速化する

表示速度はコンバージョンに直結する要因です。特に、スマホサイトはPCよりも隙間時間に閲覧される機会が多いため、表示速度の遅延がユーザーに与えるストレスは軽視できません。事実、2021年に導入が決定しているコアウェブバイタルの評価基準にも表示速度が含まれており、ページ内の最も大きなコンテンツが2.5秒以内に表示される速度が理想的とされています。

「フォントのサイズと行間」をスマホに最適化する

可能とはいえ、拡大と縮小を繰り返しながらスマホサイトを閲覧するのはとっても面倒。そこで、多くのユーザーから閲覧されている大手30サイトを対象に調査したところ、下記のような結果となりました。

▼大手サイトが採用しているフォントの特徴

  • 本文:サイズ=16px/行間=1.5em
  • 大見出し<h1>:サイズ=24px /行間1.2em
  • 中見出し<h2>:サイズ=20px/行間1.2em

多くのユーザーから支持されているサイトは、記事の読みやすさも意識しているはずです。スマホだからこそ移動中の見やすさを考慮して、人気サイトのフォントサイズをお手本にしてみましょう。

ちなみに、フォントサイズの検証結果とCSSの実装方法については下記の記事で詳しく解説しております。

「ボタン」と「テキスト」の違いが一目で分かるデザインにする

スマホサイトのユーザビリティは、「どのようなタイミングでユーザーが見ているか」を意識しなければなりません。ながら操作をしている、あるいは電車の中で揺られながら見ていても操作性が低下しないよう、タップすべきボタンと本文テキストの違いを明確にしておきましょう。

  • スマホ画面ではPCのような細かい操作ができないため、下記のような工夫も有効です。
  • メインのCTAボタンは44px前後の大き目サイズにする

ボタンの右端に「>」や「→」を追加してビジュアルでアクションを促す

また、下記コンテンツで解説している通り、CTAの形状や色を変更しただけでCV率が格段にアップした実例も報告されています。

「グローバルメニュー」や「ナビ」を工夫する

画面サイズが限られているスマホは、情報の詰め込み過ぎに注意が必要です。多すぎる選択肢は、逆にユーザーを迷わせてしまいます。重要なのは導線のシンプルさ。目的地まで最短距離で辿り着くナビゲーション作りには、下記のような工夫が効果的です。

▼グローバルメニューやナビの工夫

  • グローバルメニューのカテゴリー数を5~6種類に厳選する
  • グローバルメニューの配置は、親指で操作しやすい上部または下部にする
  • 利用頻度の高いメニューは、格納せず単独で表示する
  • 項目が多い場合は、格納型のアコーディオンメニューにする
  • 画面が切り替わってもユーザーが迷わないよう、配置を固定する

グローバルナビゲーションのhtml例やハンバーガーメニューのcssについては、下記の記事を参照して下さい。

「コンテンツの優先順位」をユーザーニーズに合わせる

同じ企業のWebサイトでも、PCと表示スペースが限られているスマホとではトップページに掲載されている項目に下記のような違いがあります。

▼トップページの違い

  • PC:企業のIR情報/代表者のプロフィール/採用情報など
  • スマホ:店舗検索/商品カテゴリー/キャンペーンのインフォメーションなど

スマホからアクセスしているユーザーは、今すぐ利用できる店舗やサービスを探しているケースが多いため、いかに「サクッと答えが提供できるか」が勝負。ユーザーニーズの高い情報だけを厳選して掲載するのも、スマホサイトに求められているユーザビリティの1つです。

「電話発信リンク」などモバイル独自機能を活用する

スマホのユーザビリティを改善したいなら、せっかく備わっているモバイル独自機能を使わない手はありません。特に飲食店や美容室、エステといったサロン系の業種にとっては、コンバージョン数の増加に絶大な効果を発揮します。

▼スマートフォンの独自機能

  • 電話発信用リンク:タップするだけで自動的に使える
  • 位置検索:エリアを選択すると自動的に地図アプリが起動する

今後は、YouTubeをはじめTwitterやInstagramなどの各種SNS、Yahoo!ニュースでも導入済みの「ダークモード」がスマホサイトのUI向上に欠かせない要素となりそうです。

「PCサイトへの切り替えリンク」を設置する

掲載できるコンテンツ量が限定されているスマホサイトには、より詳細な情報がフル画面で閲覧できるPCサイトへの切り替えリンクを設置しておきましょう。世代によってはPCサイトの方が使い慣れている方も多いようです。この一手間で「帰宅してからじっくり見よう!」と思ってもらえるかもしれません。

ただし、予告なしにPCサイトへ切り替わる仕様は避けた方が良いでしょう。アクションによる結果は、あくまでユーザーの想定を裏切らないのが鉄則。アイコンを使用するなど、リンク先がPCサイトだと知らせる配慮が必要です。

スマートフォンサイトのユーザビリティランキング!

スマホサイトのユーザビリティを向上させるには、スペックの高いサイトをお手本にするのも賢い方法です。ここからは、トライベック・ストラテジーと子会社のトライベック・ブランド戦略研究所が共同で実施したランキング結果をご紹介しましょう。

2018年の総合ランキング!

まずは、「スマートフォンユーザビリティランキング2018」の結果を見てみましょう。

順位 企業名 総合得点
1位 NTT docomo 83.31
2位 au 82.46
3位 キリン 82.41
4位 SUUMO 79.97
5位 松井証券 78.05

NTT docomoが第1位に輝いた理由として、下記の2点が挙げられていました。

▼NTT docomoの優位性

  • シンプルなナビゲーション設計によって、スムーズに目的地へ到達できる
  • アプリや地図検索機能の設定が適切で、スマホでの需要が高い店舗検索などが使いやすい

なお、上記のランキングは下記の条件下で実施されています。

▼評価の概要

  • 対象:通信/医療保険/賃貸/ファストフード/ネット証券など10業界50サイト
  • 調査期間:2018年4月上旬~5月上旬
  • 評価項目:アクセス性/サイト全体の明快性/ナビゲーションの使いやすさ/コンテンツの適切性/ヘルプや安全性の5つをメインとする全66項目

2020年の健康食品ECサイト調査!

下記の一覧表は「スマートフォン版ECサイトランキング<健康食品編 2020>」の結果です。

順位 企業名 総合得点
1位 DHC 75.83
2位 ファンケル 66.93
3位 キューサイ 62.68
4位 やずや 57.50
5位 山田養蜂場 56.62

第1位に輝いたのはDHC。サイト全体の明快性、サイト内移動の快適性、商品サービスの効果的な訴求の3点が秀でているだけでなく、ECサイトにとって不可欠な下記の2点を満たしていたと言及しています。

▼DHC の優位性

  • 自社商品の魅力が伝わる
  • ユーザーの需要に対し、スムーズに商品が見つけられる

なお、上記のランキングは下記の条件下で実施されています。

▼評価の概要

  • 対象:健康食品の販売業10社
  • 調査期間:2020年5月中旬~下旬
  • 評価項目:アクセス性/サイト全体の明快性/サイト内移動の快適性/商品サービスの効果的な訴求/スムーズな購入プロセス/ヘルプや安全性の6つをメインとする全101項目

まとめ

今後、今まで以上に重要視されるスマホのユーザビリティ。SEO対策で上位表示を目指すには、必須要素と言って良いでしょう。とはいえ、操作性や導線のシンプルさ、読みやすさなどを改善したからと言って、肝心のコンテンツがお粗末では意味がありません。ユーザビリティに加え、専門性や権威性といったE-A-Tを兼ね備えた良質なコンテンツ作りこそが、SEO対策の核心です。

SEOやWEB制作に関する情報を検索

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)