この記事は 4分で読み終わります
メルマガ登録
2020.12.10

モバイルフレンドリーとは？テストツールを使用したチェックの方法もご紹介！

ガラパゴス携帯（いわゆるガラケー）からスマートフォンへ移行し、一昔前はパソコンでしか閲覧できなかったようなサイトも簡単にスマートフォンで閲覧することが出来るようになりました。
総務省が平成29年に発表した「平成29年通信利用動向調査」によると、インターネットに接続する際に使用する機械はパソコンが48.7％、スマートフォンが54.2％とパソコンを上回り、スマートフォンでインターネット閲覧をするユーザーが増えていることが明白になりました。

スマートフォンでサイトを閲覧することが当たり前になっているこの世の中で、モバイル（スマートフォン）端末でサイトを閲覧しやすい仕様になっているかどうかは重要なポイントとなっています。
質の良いユーザー体験をもたらしたいと考えるGoogleは、2015年に最適化されたモバイルページの評価を上げることを決めました。
検索結果順位を決める要素に“モバイルサイトでもサイト閲覧が問題なく行える”という指標を追加したのです。
それが、今回のテーマでもある「モバイルフレンドリー」です！

（参考：Googleウェブマスター向け公式ブログ／モバイルフレンドリーアップデートを開始します
https://webmaster-ja.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html）

■モバイルフレンドリーの内容は？

Googleはモバイルフレンドリーの要素として下記4つを挙げています。
1：携帯端末では一般的でないソフトウェア（Flash など）を使用していないこと
2：ズームしなくても判読できるテキストを使用していること
3：ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
4：目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること

（引用：Googleウェブマスター向け公式ブログ／検索ユーザーがモバイルフレンドリーページを見つけやすくするために
https://webmaster-ja.googleblog.com/2014/11/helping-users-find-mobile-friendly-pages.html）

モバイルサイトでのユーザー体験を向上させるポイントはサイトによって他にも多数ありますが、最低限Googleが明言している上記4ポイントは抑えておきましょう！

パソコンサイトにもモバイルサイトにも対応しているサイトを実装する方法として下記が挙げられます。

1：レスポンシブウェブデザイン
1つのHTMLを用意し、CSSで表示幅などをコントロールする方法です。

2：ダイナミックサービング
同一URLに対して2種類のHTMLを用意し、アクセスした端末によってパソコンサイトとモバイルサイトを出し分ける方法です。

3：セパレートURL
その名の通り、パソコン用とモバイル用のページ（URL）を分けて構築する方法です。

Googleはレスポンシブウェブデザインを推奨しており、多くのウェブサイトがレスポンシブウェブデザインを採用しています。
URLも同一でHTMLも1つ用意すれば良いため、導入しやすいというメリットがあります。
サイトの運用状況によっても変わってくるので、どの実装方法が最も適しているのか確認して対応していきましょう。