はじめに
「自分のホームページ、スマホで見たときちゃんと表示されてるかな…？」
そう気になったことはありませんか？
今や、ホームページへのアクセスの7〜8割がスマホからという業種も珍しくありません。スマホで見づらいホームページは、お客さんが離れてしまうだけでなく、Googleの検索順位にも悪影響を及ぼします。
そんなスマホ対応の状況を簡単にチェックできるのが、Googleが提供している「モバイルフレンドリーテスト」です。
この記事では、モバイルフレンドリーテストの使い方から、結果の見方、そして具体的な改善ポイントまでをわかりやすく解説します。
この記事でわかること
- モバイルフレンドリーとは何か
- テストツールの具体的な使い方
- テスト結果で見るべきポイント
- スマホ対応を改善するための具体的な方法
モバイルフレンドリーとは？
モバイルフレンドリーとは、ホームページがスマートフォンやタブレットで快適に閲覧・操作できる状態のことです。
具体的には以下のような条件を満たしていることを指します。
- テキストが拡大しなくても読めるサイズで表示される
- リンクやボタンが指でタップしやすい大きさ・間隔になっている
- 横スクロールをしなくても画面内にコンテンツが収まっている
- ページの表示速度が十分に速い
Googleは2019年から「モバイルファーストインデックス」を導入しています。これは、検索順位を決めるときにスマホ版のページを基準にするということ。つまり、スマホ対応していないホームページは、検索順位で不利になる可能性が高いんです。
モバイルフレンドリーテストの使い方
Google Search Console で確認する方法
現在、スマホ対応の確認に最もおすすめなのが「Google Search Console（サーチコンソール）」を使う方法です。
以前はGoogleが独立した「モバイルフレンドリーテスト」ページを提供していましたが、現在はSearch Consoleの機能に統合されています。
使い方はとてもシンプルです。
- Google Search Console にアクセスし、Googleアカウントでログインします
- 自分のホームページを登録していない場合は、プロパティを追加します
- 左側メニューの「エクスペリエンス」→「モバイルユーザビリティ」をクリック
- サイト全体のモバイル対応状況がレポートで表示されます
このレポートでは、モバイル対応に問題があるページが一覧で表示されるので、どのページを改善すべきかが一目でわかります。
Lighthouse を使う方法
もう一つ便利なのが、Google Chromeに搭載されている「Lighthouse（ライトハウス）」という機能です。
- Google Chromeで自分のホームページを開く
- 右クリック →「検証」を選択（またはF12キー）
- 上部タブから「Lighthouse」を選択
- 「カテゴリ」で「パフォーマンス」と「SEO」にチェックを入れる
- 「デバイス」で「モバイル」を選択
- 「ページロードを分析」をクリック
数十秒で分析結果が表示され、100点満点のスコアと具体的な改善提案が出てきます。
スマホの実機で確認する
ツールでのチェックも大切ですが、実際にスマホで自分のホームページを開いて確認することも重要です。
チェックポイントはこちらです。
- 文字が小さすぎて読みにくくないか
- ボタンやリンクが押しやすいか
- 画像がはみ出していないか
- ページの読み込みが遅くないか
- メニューが使いやすいか
家族や知人に「ちょっとうちのHP、スマホで見てみて」と頼んでみるのもいい方法ですよ。自分では気づかない問題点を教えてもらえることがあります。
よくある問題点と改善ポイント
モバイルフレンドリーテストやLighthouseで指摘されやすい問題点と、その改善方法を紹介します。
問題1：テキストが小さすぎる
スマホの画面はPCに比べてずっと小さいので、PCと同じ文字サイズだと読みにくくなります。
改善方法：
- 本文のフォントサイズは最低16px（できれば16〜18px）に設定する
- viewportメタタグを正しく設定する（
<meta name="viewport" content="width=device-width, initial-scale=1">） - 行間（line-height）は1.6〜1.8程度に設定して読みやすくする
問題2：タップ要素が近すぎる
リンクやボタンが密集していると、指で正確にタップするのが難しくなります。
改善方法：
- ボタンやリンクの高さは最低48px以上にする
- タップ可能な要素同士の間隔は最低8px以上空ける
- ナビゲーションメニューはハンバーガーメニュー（≡）にして、タップしやすくする
問題3：コンテンツが画面幅より広い
PCサイズで固定幅のレイアウトを使っていると、スマホで横スクロールが発生してしまいます。
改善方法：
- レスポンシブデザイン（画面サイズに合わせてレイアウトが変わる設計）を導入する
- 幅の指定にはpxではなく%やvwなどの相対単位を使う
- 画像には
max-width: 100%を設定して、画面からはみ出さないようにする - テーブル（表）は横スクロール可能なコンテナで囲む
問題4：ページの読み込みが遅い
スマホはWi-Fiではなくモバイル回線で接続していることも多いので、ページの読み込み速度がより重要になります。
改善方法：
- 画像を圧縮する（WebP形式が推奨）
- 不要なプラグインやスクリプトを削除する
- ブラウザキャッシュを活用する
- 画像の遅延読み込み（lazy loading）を設定する
問題5：Flash や古い技術を使っている
Flashはすでにサポートが終了しており、スマホでは表示されません。
改善方法：
- Flashを使ったコンテンツはHTML5に置き換える
- 動画はmp4形式にして、HTML5のvideoタグで埋め込む
レスポンシブデザインが解決の鍵
上記の問題の多くは、「レスポンシブデザイン」を採用することで一気に解決できます。
レスポンシブデザインとは、1つのHTMLで、PC・タブレット・スマホのそれぞれの画面サイズに合わせて、レイアウトが自動的に変わる設計手法のことです。
レスポンシブデザインのメリットはたくさんあります。
- 1つのサイトを管理するだけでOK（PC用・スマホ用と分ける必要がない）
- Googleが推奨している設計手法なのでSEOにも有利
- URLが1つなので、SNSでシェアされたときも正しく表示される
- 更新の手間が1回で済む
最近のホームページ制作では、レスポンシブデザインが標準になっています。もし今のホームページがレスポンシブに対応していない場合は、リニューアルを検討するタイミングかもしれません。
スマホ対応チェックリスト
最後に、自分のホームページのスマホ対応を確認するためのチェックリストをまとめました。
- viewportメタタグが正しく設定されているか
- フォントサイズは16px以上か
- ボタンやリンクはタップしやすいサイズか（48px以上）
- 横スクロールが発生していないか
- 画像が画面からはみ出していないか
- ページの読み込みは3秒以内か
- 電話番号がタップで発信できるようになっているか
- フォームの入力がスマホでもストレスなくできるか
- メニューがスマホでも使いやすいか
- 地図（Googleマップ）が正しく表示されているか
全部チェックが入れば、スマホ対応はバッチリです！
まとめ
モバイルフレンドリーは、今やホームページ運営で最も重要な要素の一つです。
おさらいしておきましょう。
- アクセスの大半がスマホからの時代、スマホ対応は必須
- Google Search ConsoleやLighthouseで無料でチェックできる
- 文字サイズ、タップ要素、画面幅、読み込み速度が主なチェックポイント
- レスポンシブデザインの採用が根本的な解決策
- 実際にスマホで自分のサイトを開いて確認するのも大切
まずは一度、ご自身のホームページをスマホで開いてみてください。「あれ、ちょっと見づらいかも…」と思ったら、それが改善のスタートラインです。
Sane Designでは、モバイルフレンドリーに対応したホームページ制作やリニューアルを承っています。スマホ対応でお悩みの方は、ぜひお気軽にご相談くださいね。
