スマホやタブレットの普及で、モバイル端末からインターネットを閲覧するユーザーの割合はどんどん増えています。そのため、Webサイトがモバイルフレンドリーな設計になっているかどうかは、ユーザビリティや検索結果に影響します。
当記事では、どんなデザインが使いやすいのか。モバイルフレンドリーの基本的な条件をご紹介いたします。
モバイルフレンドリーとは
モバイル端末で確認した際に見やすく、使いやすいかという判断基準がモバイルフレンドリーです。2015年にGoogleが実装したアルゴリズムのひとつで、モバイル端末でデザイン・操作性が検索結果に影響が出ます。
今や検索順位云々に限らず、スマホから閲覧しにくいサイトはあまりいいサイトとは言えません。
スマホで見やすいWebデザインの条件
モバイル端末の小さな画面でコンテンツを表示しても、見やすく操作できるかが基本的な条件です。フォントサイズが小さすぎないか、コンテンツが崩れていないか、タップできそうなのにできないデザインになっていないかどうかなどが確認項目になります。
下記は一例ですが、基本的なチェック項目ですので、ご自身のモバイル環境で確認してみてください。
- フォントサイズは16～18pxあるか
- 行間はフォントのサイズの1.5～2倍程度
- 48px四方、タップ領域間は38px以上のタップ領域を確保
- モバイル端末でサポートされていないアプリなどが含まれていないか（Adobe Flash Playerなど）
- コンテンツの幅が画面幅内に収まっているか
- レスポンシブデザインになっているかどうか（画面サイズに応じて最適な表示になるか）
モバイルフレンドリーテストを受けてみる
上記の基本的な項目をクリアした状態で、テストを受けてみましょう。Googleが提供しているテストを受けることで、簡易的にあなたのサイトがモバイルフレンドリーかどうかを確認できます。
下記リンクからモバイルフレンドリーテストの画面へと遷移できます。
→https://search.google.com/test/mobile-friendly?hl=ja
注意点は、検証の範囲がサイト丸ごとではなく、ページ単位ということです。なので、トップページでモバイルフレンドリーでも、他のページではそうではない可能性があります。
最初にGoogle Search Consoleのモバイルユーザビリティ画面（↓）でエラーが出ているページを確認して、エラーの出ているページをすべてテストすると改善点を見つけやすいと思います。
※なおモバイルフレンドリーテストは、複数回行うと異なる結果が表示されることもあります。ページがクロールされた際にCSSの読み込みが上手くいっていない場合があるためです。
その他、テスト結果画面のスクリーンショット等でデザインが崩れたりする場合もありますが、こちらもCSSの読み込み遅延や、一時的なサーバーのアクセス遅延などが原因として考えられます。
モバイル端末実機で確認していただいて表示が崩れていなければ、問題のない場合が多いです。エラーの有無に限らず、実機での確認を忘れずに行いましょう。
【参考URL】Google公式のSearch Console ヘルプ
→https://support.google.com/webmasters/thread/35677363?hl=ja
→https://support.google.com/webmasters/thread/4028996?hl=ja
まとめ
スマホでインターネットを閲覧することが当たり前の昨今、WEBサイトをモバイルフレンドリーな設計にすることは、必要最低限の対策のひとつです。
- Google Search Consoleでモバイルユーザビリティを確認
- エラーが発生したページをモバイルフレンドリーテストにかける
- テスト結果の改善点に倣い修正
当記事でご紹介した基本的な条件をクリアするだけでも改善できるかもしれません。モバイルフレンドリーテストを行なってみて、エラーの原因を解消するとより確実です。ぜひお試しください。
コメント