SEO担当者への無料相談はこちら

モバイルフレンドリーとは?サイトのデザインで見るべき7つのポイントを紹介

現在は、スマートフォンが普及し、モバイルフレンドリーなWebサイトが重要視されるようになりました。

モバイルフレンドリーとは、スマートフォンの画面サイズに表示を最適化させ、閲覧しやすくすること。集客施策であるSEOでは、モバイルフレンドリーでなければ評価を落としかねません。

しかし、モバイルフレンドリーに対応し切れていないサイトもあるでしょう。

そこで本記事では、モバイルフレンドリーについて解説します。ぜひ参考にしてみてください。

Torikoshi-Ryo

記事の監修者

鳥越 凌

x

andmedia(株)代表取締役

成果報酬思考のSEOマーケター

SEOに9年(1万時間以上)捧げたマーケター。アフィリエイトサイト・事業会社での経験を元に本質的なSEO支援を行う。オウンドメディアのSEO集客とCVR改善が得意です。

モバイルフレンドリーとはWebサイトをスマートフォンに最適化させること

モバイルフレンドリーとは、Webサイトをスマートフォンに最適化させること。テキストサイズやレイアウトの崩れ、ページの表示速度など、スマートフォンでの利便性を追求することを指します。

Googleは、2015年4月21日にモバイルフレンドリーのアルゴリズムを実装しました。このアップデートによって、モバイルフレンドリーでないWebサイトは評価を下げてしまうため、欠かせない対策となっています。

上位表示されれば、アクセス数や問い合わせの件数、売上にも直結するため、サイトの制作段階から意識しましょう。

モバイルフレンドリーなWebサイトにする理由

では、なぜモバイルフレンドリーにすべきなのでしょうか。モバイルフレンドリーなWebサイトにする理由を2つ紹介します。

  1. スマートフォンの検索ユーザーが増加している
  2. モバイルフレンドリーはSEOの評価に直接影響する

スマートフォンの検索ユーザーが増加している

最大の理由は、スマートフォンでの検索ユーザーが増加していることです。

NTTドコモ モバイル社会研究所によると、2022年のスマートフォン比率は96.3%という結果となりました。2010年では4%しかなかったため、90%以上アップしたことになります。

参照:スマートフォン比率96.3%に:2010年は約4% ここ10年で急速に普及|NTTドコモ モバイル社会研究所

モバイルに最適化されていないWebサイトは、こうした多くのユーザーが閲覧した時に満足できず、離脱されかねません。Googleは利便性が低いという評価にもつながるでしょう。

そのため、スマートフォンからのアクセスにも配慮したモバイルフレンドリーなWebサイト制作が重要とされています。

モバイルフレンドリーはSEOの評価に直接影響する

また、モバイルフレンドリーなWebサイトかどうかはSEOの評価に直接影響するため、近年重要視されています。2015年4月にGoogleのアップデートがあり、モバイルフレンドリー対応ではないWebサイトの検索順位が下がるような検索反映システムに変更されました。

モバイルフレンドリーなWebサイトではないと、サイト制作や運用に力を入れても、検索結果に上位表示されにくくなります。集客や認知度の拡大を目的とするなら、上位表示されるWebサイト制作をしなければいけません。

SEO対策を進めるうえでも、モバイルフレンドリーなサイト制作はとても重要です。

Webサイトにおけるモバイルフレンドリーのテスト方法3選

それでは、自社のWebサイトがモバイルフレンドリーか確かめるテスト方法を3つ紹介します。

  1. モバイルフレンドリーテストで確認する
  2. Googleサーチコンソールで確認する
  3. PageSpeedInsightsで確認する

モバイルフレンドリーテストで確認する

モバイルフレンドリーテストとは、WebサイトがモバイルフレンドリーかをチェックできるGoogleが提供する無料ツールです。

モバイルフレンドリーテストの使用手順は、以下の3ステップです。

  1. 調べたいサイトのURLをコピー
  2. モバイルフレンドリーテストの検索窓へ張り付け
  3. 「URLをテスト」をクリック

また、モバイルフレンドリーテストで以下の4項目を確認できます。

  1. フォントサイズ
  2. ビューポートの設定
  3. タップ要素同士の距離
  4. コンテンツサイズ

テスト結果には、問題点もあわせて提示してくれるため、内容を確認して改善しましょう。

Googleサーチコンソールで確認する

Googleサーチコンソールは、Google検索におけるWebサイトのパフォーマンスを分析するための無料ツールです。

Google検索での検索順位や表示回数など、Webサイトにおける閲覧情報だけでなく、表示速度が遅いURLやエラーなどの問題点まで指摘してくれます。

モバイルフレンドリーについては、モバイルユーザビリティレポートから確認してください。

Webサイトがモバイルフレンドリーに対応していない場合、問題点が提示されるため、内容に沿って改善しましょう。

PageSpeed Insightsで確認する

PageSpeed Insightsは、Webサイトにおける速度パフォーマンスをチェックできる無料ツールです。

パソコンやスマートフォンでの表示速度に関する評価を100点満点で採点してくれるため、直感で良し悪しを確認できるでしょう。

モバイルフレンドリーなWebサイトは、デザインだけでなく速度パフォーマンスも大きく影響します。もし、評価が悪ければ、ポイントを洗い出して改善しましょう。

モバイルフレンドリーのWebサイト制作でおさえるポイント

では、モバイルフレンドリーのWebサイト制作でおさえておくべき7つのポイントを紹介します。

  1. テキストサイズを大きくする
  2. ページの表示速度を高める
  3. リンクやボタンの距離を離して誤タップを防ぐ
  4. モバイル対応ページを構築する
  5. 縦スクロールで完結させる
  6. モバイル端末用のViewportを設定する
  7. インタースティシャル広告は使用しない

テキストサイズを大きくする

まず、テキストサイズを大きくしましょう。

スマートフォンの画面サイズは、パソコンよりも小さいです。よって、パソコンの画面サイズに合わせたままだと、非常に小さくなります。

スマートフォンに対応していないWebサイトは、文字が極端に小さいので、ズームしないと閲覧できません。

利便性が低くなるため、スマートフォンに合わせて文字サイズは大きくしましょう。

ページの表示速度を高める

ページの表示速度も大切です。速度が遅いとストレスになり、アクセスをしようと思っても離脱されかねません。

一方、シームレスに表示されるサイトは、ストレスなく閲覧できます。

ページの表示速度を高めるなら、下記の8つに取り組んでみてください。

  1. 画像ファイルを圧縮する
  2. 動画のファイルサイズを削減する
  3. 不要な外部ファイルを削除する
  4. サーバーでテキストファイルを圧縮する
  5. 画面スクロールによって画像を読み込む
  6. フォントの読み込み時間を無くす
  7. AMPを採用する
  8. ブラウザキャッシュの有効期限を設定する

表示速度を高めて、サイトの評価を高めていきましょう。

リンクやボタンの距離を離して誤タップを防ぐ

リンクやボタンの距離感も、モバイルフレンドリーなWebサイト制作において大切です。リンクやボタンが近いと、誤タップしたユーザーはストレスを抱えかねません

特に、スマートフォン対応ではないデザインのWebサイトは、文字が小さく表示され、URLやボタンも近くなります。そうすると、誤タップする可能性も高まるでしょう。

リンクやボタンの距離感にも注意してみてください。

モバイル対応ページを構築する

そして、Webサイトのモバイル対応ページを構築しましょう。

具体的には、以下の3種類があります。

  1. ダイナミックサービング
  2. セパレートURL
  3. レスポンシブWebデザイン

ダイナミックサービングとは、1つのURLに2つのHTMLを用意し、アクセスした端末の種類によって、サーバー側で使い分けるシステムのこと。セパレートURLやレスポンシブWebデザインも同様で、端末を選ばず閲覧しやすいデザインにすることを指します。

Web制作は、モバイルに対応させることを前提として、上記いずれかの方法で構築しましょう。

縦スクロールで完結させる

スマートフォンのサイトは、できるだけ縦スクロールで完結させましょう。

スマートフォンは横幅が狭いため、横スクロールが入ると行ったり来たりしなければならず、読みにくくなります。

一方、縦スクロールならユーザーがスムーズにサイトを閲覧できます。

表のコンテンツは改行されやすいため、横スクロール機能をつけるケースも多いでしょう。

ですが、基本は縦スクロールで完結するようにしてください。

モバイル端末用のViewportを設定する

モバイル端末用のViewportを設定しましょう。

Viewportとは、簡単に言うと表示する範囲のこと。モバイル端末からアクセスしたときに表示される範囲を設定しておくと、見やすいWebサイトになります。

未設定では広範囲を表示してしまい、閲覧しづらくなるでしょう。そのため、Viewportでモバイル端末用の表示範囲を設定してください。

インタースティシャル広告は使用しない

また、モバイルフレンドリーなWebサイトを制作するなら、インタースティシャル広告の使用は避けましょう。

インタースティシャル広告とは、サイトを開いたときに、サイトページを隠すように大きく表示される広告のこと。広告を削除しないとサイトを閲覧できず、フラストレーションが溜まる人も少なくありません。

間違ってタップしてしまうと商材ページに遷移するため、サイトを閲覧するために戻るという手間が増えてしまいます。

サイト制作者がどうしても見てほしい広告を表示するときに使用されますが、ユーザーとしては煩わしく感じてしまうでしょう。すぐにサイトを閲覧したいのに、広告が邪魔でブラウザバックしてしまう人もいます。

ユーザーが快適に閲覧できるWebサイトを実現するためにも、インタースティシャル広告は使用しないようにしましょう。

まとめ:モバイルフレンドリーは常にチェックしてサイトの評価を高めよう

現代において、モバイルフレンドリーなWebサイトは、もはやスタンダードです。

モバイルフレンドリーでないサイトでは、アクセス数や問い合わせ件数の増加は、まず期待できないといっても過言ではありません。

自社サイトをスマートフォンに最適化させて、多くのユーザーから満足されるものに仕上げましょう。

SEOメディアのお悩み解決します!

  • HPを作ったはいいが全然集客に繋がらない
  • SEO記事を作成したがリード獲得に繋がらない
  • そもそも何から始めたらいいかわからない

このようなお悩みがあればぜひandmediaへご相談ください。

どんなSEOのお悩みにもプロが丁寧にお答えさせていただきます。

問い合わせ後のしつこい営業は一切しませんので、ぜひお気軽にご連絡下さい。

無料でSEO相談をする

鳥越との無料相談MTGはこちら

#年齢 30歳
#得意領域
  • KW設計
  • コンテンツSEO
  • CVR改善
#累計SEO経験 1万時間以上
経験豊富なメンバーが相談に乗ります
無料相談はこちら
記事1本1万円キャンペーン中
SEO記事制作はこちら