モバイルフレンドリーなWebサイトはSEOで高く評価されやすくなります。しかしどのような条件を満たせば良いのか、またどのようにモバイルフレンドリーなサイトに近づけるのか疑問に思われる方も多いでしょう。そこで本記事では、モバイルフレンドリーの概要や対策方法についてご紹介します。
この記事でわかること
• モバイルフレンドリーにする方法
• モバイルフレンドリーの条件
• モバイルフレンドリーかどうかを確かめるツール
もくじ
モバイルフレンドリーとは？
SEO対策において重要ポイントであるモバイルフレンドリーとは、ユーザーがスマートフォンを利用してサイトを閲覧した場合に、ページレイアウトが見やすく、操作しやすいように最適化されている状態を意味しています。
総務省の最新調査によれば、現在のインターネット利用者は6割以上がスマートフォンを使ってサイトを利用していることから、PCばかりに重点をおく運用は既に適切ではないといえるでしょう。
ちなみにモバイルフレンドリーでないと、画像やテキストがモバイル端末に適したサイズではなくなってしまうことから、ユーザーは不便に感じてしまい、直接的な離脱要因に繋がってしまいます。
モバイルフレンドリーアップデートが発端
スマートフォンユーザーへの利便性が重要視されるようになったのは、Googleが2015年4月にリリースしたモバイルフレンドリーアップデートが発端です。開始から数年が経過した現代においては、スマートフォン対応していないサイトを探す方が難しいでしょう。
そして、アップデートが完了して以降、モバイルフレンドリーでないサイトは検索順位を下げられる対象となってしまうため、SEO対策においては必ず押さえておくべきポイントとなっています。
モバイルファーストインデックス(MFI)との違い
スマートフォン需要の急速な拡大を受けて2018年3月から適用されているモバイルファーストインデックス（通称MFI）は、それまでパソコンサイトのパフォーマンスのみが評価対象であったGoogleの仕組みを、モバイルサイトメインに切り替える抜本的な改革でもあり、マーケティング業界において大きな話題となったことは言うまでもありません。
一方、名称が似ていることからモバイルフレンドリーと混同してしまう初心者も少なくありませんが、両者は以下の通りそもそもの意味が異なりますので、しっかり押さえておきましょう。
- モバイルフレンドリー
スマートフォンユーザーが使いやすく、見やすい「サイトの状態」を指す用語
- MFI
モバイルでのユーザービリティで順位決定を行うという検索アルゴリズムの順位決定の方針
モバイルフレンドリーにする方法
ここからは、サイトをモバイルフレンドリーにする具体的な2つの方法を解説していきます。現代のSEOでは、ページ速度改善やMFIは重要視されているため、しっかりと抑えるようにしましょう。
ユーザーエクスペリエンスの改善
ユーザーエクスペリエンス（通称UX）とは、モノやサービスを利用して得られるユーザー体験を包括的に表現した用語であり、単純な使いやすさはもちろん、求める行動を「楽しく心地よく」進められることを目標とした概念です。
そして、サイトをモバイルフレンドリーにするには、以下の項目を改善してUXを向上させる必要があるため、適切に対策していきましょう。
- テキストサイズの最適化
スマートフォンでも読みやすいようテキストサイズを16～18pxに調整して下さい。
行間はフォントサイズの約1.5～2倍が好ましいと言われています。
- モバイル用view portの設定
スマートフォン等のモバイル端末に適したサイズのWebページを表示できるように、viewportを設定しておきましょう。
手順としてはhtmlファイルのheadタグに「view port」を設定するだけです。
- リンク同士の間隔を空ける
スマートフォンの操作は画面に表示された情報を直接タップすることから、リンク同士が近すぎると誤った操作に繋がります。そのため、同一ページ内のリンクはある程度間隔が保てるよう、タップ領域間は38px以上に調整して下さい。
- コンテンツサイズの調整
コンテンツサイズも重要なポイントであるため、画像やテキストを画面に収めながら調整しましょう。
少々項目が多い印象ですが、それぞれはさほど難しい作業ではないため、1つずつ確実に対策してみて下さい。
ページ速度の改善
ページ速度の改善もモバイルフレンドリーには重要であり、MFIにも組み込まれている指標となっています。当然SEO対策では外せないポイントであるため、以下を実施して対策していきましょう。
- ブラウザキャッシュを利用
ページ読込速度の延滞を防ぐために、静的リソースのHTTPヘッダーで有効期日と最大経過時間を設定して下さい。
- スクロールしないで表示されるコンテンツのレンダリングを阻害しているコードを排除
レンダリングがブロックされる要因となるJavaScript/CSSの読込を遅らせる、あるいは非同期に読込むのがおすすめです。または、リソースの重要な部分をHTMLに直接インラインさせるのも良いでしょう。
- 圧縮の有効化
インターネット上で送信されるバイト数を軽減するために、リソースの圧縮を行いましょう。
- 画像の最適化
画像にマッチするフォーマットを選択、あるいは圧縮してデータサイズを軽減して下さい。
- CSSの縮小
ダウンロード、及び解析速度を向上させるために、CSSコードを縮小してデータサイズを削減しましょう。
- HTMLの縮小
データサイズを軽減するために、HTMLコード、JavaScriptやCSSを縮小して下さい。
以上のUX改善とページ速度の改善を行えば、サイトをモバイルフレンドリーにすることができるでしょう。
モバイルフレンドリーを確かめる方法
条件を満たしているか確認した後は、サイトが本当にモバイルフレンドリーになっているかどうかをチェックしてみましょう。ここでは2つのツールを解説するため、是非参考にして下さい。
モバイルフレンドリーテスト
Googleから提供されているモバイルフレンドリーテストは、テストを行いたいページURLを入力すれば1分程度で以下の結果が表示されます。
- スマートフォンで表示されているスクリーンショット
デフォルメされた状態ではなく、実際にユーザーが閲覧している画面が確認できます。
- 非対応箇所の一覧
モバイルフレンドリーに対応できていない箇所を一覧で確認できるため、UX、ページ速度改善と並行して活用して下さい。
また、モバイルフレンドリーテストは無料サービスとなっているメリットもあるため、積極的に利用していきましょう。
モバイルユーザビリティレポート
モバイルユーザビリティレポートも同じくGoogleが提供しているツールであり、サーチコンソールに搭載されているサービスです。
モバイルユーザビリティレポートの確認方法
Googleサーチコンソールを開き、左サイドメニュー[エクスペリエンス]>[モバイルユーザビリティ]から確認できます。
エラー項目一覧
条件を満たしていない場合は、以下のエラー項目が表示されるため、モバイルフレンドリーテストとあわせて活用していきましょう。
- ビューポートが設定されていません
端末の画面サイズに表示を最適化するプロパティが定義されていない場合のエラー項目です。
- ビューポートが端末の幅に収まるよう設定されていません
端末の幅に合わせてスケーリングされないサイトに表示されるエラー項目であり、横幅をピクセル指定で固定していることが要因となっています。
- 互換性のないプラグインを使用しています
モバイルサイトに対応していないアプリ等を含んでいる場合に表示されます。
- コンテンツの幅が画面の幅を超えています
スマートフォンで閲覧した際に、左右にスクロールしなければならないページに該当するエラー項目です。
- テキストが小さすぎて読めません
テキストが16pxに満たない場合にエラーとして表示されます。
- クリックできる要素同士が近すぎます
リンクやボタン等の間隔が狭すぎて誤操作が発生する可能性が高い場合に表示されるエラー項目です。
- その他
cssがブロック、あるいは読み込みのタイムアウトが原因で検索エンジンのクローラーがページを読み込めない場合に表示されます。
モバイルフレンドリーテストとモバイルユーザビリティレポートはいずれも無料ツールとなっており、両方を活用することでモバイルフレンドリーになっているかどうかが判断できるでしょう。
まとめ
本記事では、モバイルフレンドリーの概要や方法について解説しましたが、いかがでしたでしょうか。モバイルフレンドリーなWebサイトを心がけることでSEO効果が見込めるようになります。
SEO対策に関して、こちらにまとめていますので、是非ご覧ください。
