モバイルフレンドリーとは？影響・対策とテスト方法
こんにちは、SEO分析ツール「アナトミー」開発チームの江頭です。
Googleは、Webサイトをスマホに最適化する「モバイルフレンドリー」を推奨しています。
モバイルフレンドリーは、単にスマホでサイトが閲覧できればクリアできるわけではなく、Googleが具体的な基準を設けています。また、ユーザーの利便性を考えると、Googleの基準よりも高い基準が理想的です。
この記事では、モバイルフレンドリーによるSEOへの影響や対策、テスト方法を紹介します。
モバイルフレンドリーとは？
モバイルフレンドリーは、Webサイトをスマホ対応することにより、Webページがスマホでの閲覧に適していることを指します。
Webサイトをモバイルフレンドリー化すると、スマホユーザーの利便性を向上し、直帰率の低下やコンバージョンの向上などの効果が期待できます。
モバイルフレンドリーがSEOに及ぼす影響
サイトがモバイルフレンドリーかどうかは検索順位に影響するランキング要素です。
モバイルフレンドリーは、2015年4月にGoogleが導入し、2016年にはモバイルフレンドリーがランキングに影響する割合を増加させています。
そこで、Google では昨年（※筆者注：2015年）より、サイトがモバイル フレンドリーかどうかをモバイル検索でのランキング要素の一つとして使用し始めました。この 5 月からは、当該ランキング要素の効果を高めるアルゴリズムのアップデートを段階的におこなっていきます。このアップデートにより、モバイルでも見やすいページが検索結果でさらに多く表示されるようになります。
Google ウェブマスター向け公式ブログ [JA] :ウェブをさらにモバイル フレンドリーにするための取り組み
このように、モバイルフレンドリー対応はSEOに影響するため、Webサイトのモバイルフレンドリー化は今や必須となっています。
モバイルフレンドリーとモバイルファーストインデックスとの違い
「モバイル フレンドリー」とよく似た言葉に「モバイルファースト インデックス」があります。
これは、スマホサイトを Google の検索インデックスとして使用するという意味で、現在ほとんどのサイトは「モバイルファースト インデックス」に切り替わっています。
| 用語 | 意味 |
|---|---|
| モバイルフレンドリー | スマホサイトの使い勝手が良いこと。 ランキングに影響する。 |
| モバイルファースト インデックス | スマホサイトを検索インデックスに使うこと。 ランキングに影響しない 。 |
- 関連記事：モバイルファーストインデックス対応まとめ
モバイルフレンドリーの対策
Google は、モバイルフレンドリーかどうかを判断するWebサイトの基準を4つ公表しています。
・携帯端末では一般的でないソフトウェア（Flash など）を使用していないこと
Google ウェブマスター向け公式ブログ [JA] : 検索ユーザーがモバイル フレンドリー ページを見つけやすくするために
・ズームしなくても判読できるテキストを使用していること
・ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
・目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること
モバイルフレンドリーへの対策としては、これらの4つの基準に適合するよう、Webサイトを対応します。具体的な対策は以下の通りです。
Flash／Javaアプレットを使用しない
Flash や Java アプレット、 Silverlight などの古い技術は、そもそもスマホブラウザで利用できません。
これらの技術を使っている場合、新しい代替技術に置き換えます。
| 用途 | 代替策 |
|---|---|
| 複数画像の表示 | カルーセル |
| アニメーション | SVG |
| グラフ | D3.js |
| 画像編集ツール | Fablic.js |
| フォーム | HTML |
また、wmvなどの動画フォーマットにもスマホは対応していません。
動画はmp4/webm形式とし、video タグで配信します。もしくは、YouTube にアップロードしてサイトに埋め込むという手もあります。
フォントサイズを読める大きさにする
フォントサイズが小さすぎると、スマホでテキストが読めません。ピンチインしなくても文字が読める大きさにします。
本文は 14～16ピクセル、補足的なテキストは12～14ピクセルが理想です。
フォントサイズは、以下の手順で確認できます（Chrome ブラウザの場合）。
- テキスト上を右クリックし、[検証] を選択します
- 右ペインにある [Computed] を選択します
- font-size と書かれた部分がフォントサイズです
縦スクロールだけでページ全体が閲覧できるようにする
横スクロールが必要なスマホサイトは、使い勝手がよくありません。縦スクロールのみですべてのコンテンツが閲覧できるようにレイアウトします。
横スクロールが起きやすいのは、次の2か所です。
- 画像：widthプロパティがスマホの画面幅を超えている場合
- 長い英数字：URLなどスペースを含まない長い文字列
画像幅は、max-width プロパティを 100% にしておけば、ほとんどのケースで解決します。
長い英数字は、word-wrap プロパティを break-word にしておけば、途中で折り返されるようになります。
リンクやボタンを押しやすい大きさにする
ボタンが小さいと、間違えて他のボタンをタップしてしまうなど、ユーザビリティに支障があります。
タップできる要素は、周辺の要素と間隔を空けておいたり、タップ可能な領域を広めにとったりします。
デザイン面でのスマホ最適化
「スマホ最適化」（モバイルSEO）という観点でいうと、上述した4項目ではまだ不十分です。
デザインやUIを工夫することで、SEOだけでなく、離脱低下やコンバージョン向上に貢献できる項目を説明していきます。
使いやすいナビゲーション
他のページへの導線として「スライドメニュー」「パンくずリスト」「戻るボタン」を設けておきます。
縦に長いページでは、「ページ上部に戻る」リンクもナビゲーション上、有効です。
コンパクトなファーストビュー
スマホは画面が小さいので、コンパクトなレイアウトして、ファーストビューに重要な情報が見えるようにします。
以下のチェックポイントを参考にしてください。
- h1タグのテキストがファーストビュー内に存在する
- キーワードやdescriptionの内容がファーストビュー内に存在する
- h2タグや本文の一部がファーストビュー内に存在する
高解像度画像／SVGの利用
スマホのディスプレイは、 高解像度な端末が増えてきているため、ピクセル数より大きなサイズの画像が必要です。
たとえば、iPhone X は横375ピクセル／縦812ピクセルですが、画面解像度（画素数）が 1125 × 2436 となっていて、1ピクセルを9つの画素で描画しています。
ここで、幅375ピクセルの画像を表示させると、iPhone X のディスプレイは画像を3倍に引き伸ばして描画するため、輪郭がはっきりしないぼやけた画像になってしまいます。
このように、幅375ピクセルぴったりの画像ではなく、その2倍もしくは3倍の大きさの画像を使ったり、引き伸ばしても画質が劣化しないSVGを使ったりすることが、スマホユーザーの画面の見やすさに直結します。
タブ・アコーディオン・カルーセルの利用
狭いディスプレイに情報を集約できる「タブ」「アコーディオン」「カルーセル」を活用します。カルーセルはTOPページでよく利用されます。
見出しやボタンをテキスト化
従来のWebサイトでは、画像見出しや画像ボタンが使われてきましたが、最近はスマホに適用しづらいので使われません。テキスト化してCSSでレイアウトする方法が主流です。
見出しやボタンをテキスト化すると、ページの表示速度向上にも寄与します。
フォームの入力支援
フォームをスマホでも入力・選択しやすくします。EFO（入力フォーム最適化）とも呼ばれている施策です。
- チェックボックスやラジオボタンを押しやすい大きさにする
- 電話番号やメールアドレスなどテキスト入力種別を指定する
- テキスト入力が済んだ時点でエラーを指摘する
- 文字種の変換（半角→全角など）を行う
- 参考記事：スマホ入力フォームを最適化する4つの方法
viewportを最適に設定する
viewportとは、簡単に言うとブラウザの表示領域を何ピクセルとして解釈するかの設定のことです。
適切に設定されていないと、サイトが縮小されて表示されてしまったり、逆に拡大されて表示されてしまったりします。自分のサイトのviewportがどのように設定されているか、確認しておきましょう。
インターステイシャル広告を使わない
インターステイシャル広告とは、画面全体を覆い隠し、リンクを踏むか広告を消すかしないと元のコンテンツが表示されない形式の広告です。
ユーザビリティを損ねるインターステイシャル広告は、「使わないことでモバイルフレンドリーに高評価」ではなく、「使うとペナルティの対象だから使ってはいけない」です。ブログ等で表示している自社製品への誘導がインタースティシャル広告にあたらないか、確認しておきましょう。
ページの表示速度を改善
ページ表示速度は、検索ランキングに影響する要素です。
次のような対策で、表示速度を改善できます。
画像をCSSデザインに置き換える
高画質な画像はどうしてもファイルサイズが大きくなります。ボタン等、CSSのデザインで表現可能なものは、画像ではなくHTMLとCSSで表現するようにします。
画像を圧縮する
CSSデザインで代替できない画像は、圧縮することで、ファイルサイズを削減します。
なお、PageSpeed Insightsを使うと、どの画像を改善したらいいか、リストアップしてくれるので便利です。
- 関連記事：SEOに効果的な画像の配置方法・使い方
Webフォントはlinkタグで参照する
Webフォントを使用している場合には、CSS内の@importで読み込むのではなく、linkタグで読み込みことで、読み込み時間が早くなります。
サーバー側でgzip圧縮を使う
Webサーバーのgzip圧縮設定を有効にし、HTML、CSS、JSファイルを圧縮することで表示速度を向上します。
なお、gzip圧縮は画像ファイルには効果が薄いので、画像ファイルは圧縮対象にしない方が賢明です。
ブラウザのキャッシュを活用する
コーポレートサイトなどの静的なページは、キャッシュを有効にすることで取得するファイル数を減らすことができます。
ただし、キャッシュが効果を発揮するのは2度目以降のアクセス時なので、初回は全てのファイルを取得しにいきます。
キャッシュがなくてもある程度の早さは確保しておきましょう。
モバイルフレンドリーのテスト方法
WebサイトがモバイルフレンドリーかどうかをテストするGoogle公式ツールが用意されています。
モバイルユーザビリティレポートを使う
Google は、サイトがスマホ対応しているかどうか、自動チェックしています。Googleサーチコンソールの「モバイル ユーザービリティ」レポートで、Google が検知した問題を確認できます。
スマホ対応での問題があれば、次のように詳細が表示されます。
モバイルユーザビリティレポートで注意したいのは、「クローリングしたファイル」に対してチェックした結果だという点です。本番サーバーに公開されたファイルをチェックしたわけではありません。
モバイルユーザビリティレポートは、Googleサーチコンソールに登録すると利用できます。
モバイルフレンドリーテストツールを使う
特定のURLだけチェックするには、モバイルフレンドリーテストが便利です。
モバイルフレンドリーテストもGoogle公式ツールです。URLを入力するだけで、モバイルフレンドリーかどうかを6項目でチェックします。
「ページにアクセスできません」エラーの原因
モバイルフレンドリーテストで「ページにアクセスできません」というエラーが発生するときは、robots.txtを見直してみてください。robots.txtがクローラーを拒否している可能性があります。
- 関連記事：robots.txtの書き方
モバイルフレンドリーなサイトを作るには？
ポイント① モバイルファーストで制作する
開発工程からスマホ第一で考える「モバイルファースト」で進めます。デザイン、開発、テストのそれぞれの段階で、スマホを使うようにします。
たとえば、デザイン段階では、モックアップの画像ファイルをスマホに転送して確認する。開発段階でも、スマホのユーザビリティが犠牲にならないように実装し、ある程度できたらスマホで開発中サイトを確認する。テスト段階でも、スマホ中心でテストを実施する。
ここまで徹底すれば、モバイルフレンドリーテストを通す必要はないでしょう。
技術的には、レスポンシブデザインや、モバイルサイトのPC変換が利用できます。
- 関連記事：モバイルファーストインデックス対応まとめ
- 関連記事：レスポンシブデザインがSEOに有利な理由
ポイント② スマホ実機で見る
ネットを眺めていると、スマホ実機で動作確認していないと思われるサイトが見受けられます。
PC を使っている限り、スマホのユーザービリティ検証はできません。マウス操作で、「ボタンがタップしやすいかどうか」「フォームが入力しやすいか」が果たして確かめられるでしょうか？
どの段階でも「スマホ実機」で見るようにしましょう。
まとめ
Webサイトをしっかりスマホ最適化すると、検索順位アップの効果だけでなく、 離脱低下やコンバージョン向上にもつながります。スマホ実機を使って、モバイルフレンドリー対応を進めていきましょう。
モバイルフレンドリー対応を行っても順位アップしないときは、さらなる内部施策が必要かもしれません。
当社ではSEOコンサルティングサービスを提供しており、タイトルや見出しの改善といった内部施策から、ページスピード改善まで柔軟に対応してます。SEO対策にお悩みでしたら、ぜひご利用ください！
⇒アナトミー SEOコンサルティング
今回ご紹介したモバイルフレンドリーについては、Google検索セントラルに置かれているSEOに関する公式ドキュメントにも記述があります。「Google公式SEOガイド読解セミナー」では、ドキュメントの一つであるSEOスターターガイドを読み下し、重要なポイントを図解しています。
コンテンツを作成する上で気をつけるポイントなどを解説しているので、これからSEOを始める方にとって最適な内容となっています。SEO初心者の方やWebサイト担当者、サイトオーナーの方にお勧めです。
ぜひご参加してください！
最後に弊社ではサーチコンソールとGA4データを1つにまとめて分析ができる「SEO分析ツール アナトミー」 を提供しております。運用しているサイトのSEOチェックを行うのに必要な機能が揃ったダッシュボードプランは全て無料でずっとご利用いただけます。是非、アナトミーに無料登録してサイトのSEOチェックをしてみてください。
