ずいぶん前からですが、多くのインターネット利用がスマートフォンから行われるようになりました。これは日本国内だけでなく世界的に共通している現象です。
例えば日本では、総務省が2020年に調査したデータによると、個人の利用率ではスマートフォンが68.3%、パソコンが50.4%とスマートフォンがかなり上回っている結果が出ています。
https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r03/pdf/index.html
WEBサイト管理者、運営者の皆さまもアクセス解析をご覧になられている場合はそのスマートフォン利用者の多さに気づかれていると思います。WEBサイトはスマートフォン等モバイル端末からの閲覧を主として制作していかねばならない状況になってきています。
「モバイルで見やすいWEBサイトってどういうものだろう？」
「モバイルでの利用のしやすさが検索エンジンでの評価にも直結すると聞いたけどどこまで対応が必要なのだろう？」
端末といっても様々あり、スマートフォンもiPhone以外のメーカーがたくさんありますし、タブレットはもっと液晶の大きさが異なるものが多数あります。「モバイル対応」と一言でいうほど簡単ではなく、制作時に細かな対応をすればするほど工数が増え制作コストがかさみます。
そもそも、一般的なWEBサイトがどこまで”見やすさ””利用しやすさ”に対応すればいいのかわからないといった声も多く耳にします。
そこで今回はGoogleが公式に提供している、モバイル端末からの使いやすさ、利用のしやすさをテストするツールの使い方を解説いたします。
https://search.google.com/test/mobile-friendly
Search Console のモバイル フレンドリー テストツールでは、サイト上のページがモバイル フレンドリーかどうかをすぐにテストできます。
利用の仕方は簡単で、URLを入力するとすぐにチェック結果が出ます。
しかし、その結果をどう見て、どのようにWEBサイトに反映させてよいかが大切です。Googleにもエラー一覧ページで解説されていますが、この記事ではわかりやすく書いておきたいと思います。
■モバイルフレンドリーとは
さて、モバイルフレンドリーという言葉が使われ始めたのは2015年ごろで、その年の9月にGoogleがアルゴリズムを変化させ、モバイル端末から利用しやすいWEBサイトの評価を高める施策を実行しました。日本だけでなく、全世界でアルゴリズムの変動がありました。
詳しくは以下のウェブマスター向けブログに書かれています。
チェックツールを利用する前に、ぜひご一読ください。
https://webmaster-ja.googleblog.com/2015/02/finding-more-mobile-friendly-search.html
モバイルで閲覧できないWEBサイトに対して改善しなければならない、というほどの強いメッセージではないものの、「モバイルでもっと使いやすいWEBサイトを目指そう」との指針が出されたことになります。
それ以降、WEBサイト制作時には「モバイルでも見やすいこと」が前提となってきました。
レスポンシブ対応なども増えました。
Googleのチェックツールを使ってテストすればモバイルフレンドリーかどうかわかるので、まずはテストしてWEBサイトを客観的に調べてみましょう。
すぐに直せそうなところがあればこまめに修正・改善していくと後々の負担が軽減されます。
１．モバイルフレンドリーテストツールの使い方
まずツールの使い方についてです。
①以下のWEBサイトへアクセス
https://search.google.com/test/mobile-friendly
②欄内にチェックしたいURLを入力→URLをテスト
③テスト結果が表示されます
URL入力から1分もかからず結果が表示されます。
こちらを元に、改善点を探していきます。
修正するべき箇所は「次の○件の問題を修正してください」とエラー表示されます。
エラーの修正方法もこのページからリンクされたページで指示されていますが、少し分かりづらいので、このページ内で出るエラーの主なものについてその内容と解決策を以下に解説します。
また、修正が指摘されたからといって急ぐ必要はありません。
これによって検索エンジン結果から表示されないなどのペナルティを受けるわけではありませんので、WEB制作の担当者と「どこまでをいつまでに直すか」協議をされてみてください。
※以下のエラーはGoogle Search Consoleの管理画面に表示されることもあります。解決策は同様ですので、以下の内容をご参考ください。
２．テスト結果①「クリック可能な要素同士が近すぎます」
タップする操作が付いているリンク、ボタンなどがそれぞれ（距離が）近すぎることから、端末によっては「押しづらい」「誤操作につながる」おそれがあるとの指摘です。
■具体的な指摘点
使いやすいタップ要素のためには、以下の複数の点に注意する必要があります。
・十分にスペースをあける
・ボタンなどのサイズを大きくする
・他の要素と重ならない
■改善するには
デザインとCSSで以下の調整をします。
・タッチできるボタン等のサイズを48×48ピクセル以上にする
・リンクにはpadding設定して余白をつくる
３．テスト結果②「テキストが小さすぎて読めません」
モバイル端末でWEBサイト上の文字を読むには文字サイズが小さく、最適になっていないということです。画面上で拡大しないと読みづらいというのは、ひと手間かかるので大変ですね。
■具体的な指摘点
・viewport（表示幅）に合わせた文字サイズを設定する
■改善するには
・コーディング時にフォントサイズの基準を設定し、幅が可変する場合もサイズが調整されるようにする（具体的な調整方法についてはこちらをご参照ください）
４．テスト結果③「ビューポートが設定されていません」
Googleでは、各HTMLページで meta viewport タグを使用することを推奨しています。ヘッダー内にviewportタグを記載することによって、ユーザー様の画面サイズなどの情報がブラウザ側で入手できるようになり、パソコン版とスマートフォン版のどちらを表示させるかなどの判断ができる＝適切な表示ができるからです。
■具体的な指摘点
・HTMLのヘッダー内にmeta viewport タグを設置する
■改善するには
・以下のコードを
<meta name="viewport" content="width=device-width, initial-scale=1">
５．テスト結果④「ビューポートが「端末の幅」に収まるよう設定されていません」
CSSで表示幅の設定が固定されているなどの原因により、アクセスしたユーザー様の端末に合わせて表示調整ができないというエラーです。
■具体的な指摘点
・モバイル端末に合わせて表示幅を変動させたいが、させられない
■改善するには
・viewportタグを設定する
・端末に合わせて表示幅が揺れてもいいようレスポンシブ対応のデザインにする
・CSSの表示幅の固定を削除する
・width=device-widthを設定する
viewportに関しては、設置するタグは↑1つ上の項目で示させていただいたタグと同じです。
このエラーが表示されるのは、あえてデザインの都合で表示幅を設定していたから、といった理由もあると思います。ただGoogleがこのエラーを出しているということは原則としてレスポンシブのWEBページを制作することが求められています。
Googleが絶対的ではありませんし、コンテンツが表示されていないわけではありませんから、急いで修正する必要はありません。工数が多く、修正にコストがかかりそうであれば今後リニューアルのときに「レスポンシブで」とWEBデザイナーさんに依頼してみてください。
６．テスト結果⑤「コンテンツの幅が画面の幅を超えています」
ときどき、表や図、動画が大きくてスマートフォンの画面で横スクロールしないと全容が見えない、といったページに出会いませんか？そういった部分についての指摘がされているということです。
■具体的な指摘点
・モバイル端末の画面幅より大きいサイズのコンテンツがある
■改善するには
・モバイル端末でWEBページを表示させ、収まりきっていない図や表、写真がないか確認する
商品紹介ページなど一部のページのみで収まっていなかったときはそのページの表示だけを修正すればよいのですが、同じようなコンテンツを再度追加したページをつくる可能性があれば、都度都度修正を入れなければならなくなります。
画像（image）、表（table）、iframeなどどの要素がはみだしているのか確認しましたら、WEBサイト全体で表示幅調整ができるようCSSの修正も行います。
例えば、表（table）であれば width:100%; の設定を追加することでモバイル端末でもはみださずに収めることができます。
※収まっても見やすいかどうかは別の論点
表示幅が収まることによってエラーは出なくなるはずですが、これまで大きかった画像や表を小さくして収まるように調整した場合、その表示全体は縮小していることになります。それによってユーザー様が見やすいかどうか？はまた別の話ですので、その画像のままでよいのか、表の組み方は他にないか、コンテンツの視点でもチェックが必要です。
７．テスト結果⑥「互換性のないプラグインを使用しています」
モバイル端末のブラウザではサポートされていない＝動かない、見られないプラグインが使われているという指摘です。
■具体的な指摘点
・flashなどモバイルブラウザで非推奨の技術を使ってWEBサイトがつくられている
■改善するには
・flashの代わりとなるhtml5など、モバイルブラウザが対応している技術で動的な表現を行う
かなり前からflashは減ってきている現状ですので、それに代わる策もたくさん出てきています。特にレスポンシブデザインの場合、動きを見せる場合はモバイルのブラウザではPCのブラウザと同じ表示ができないかもしれないという前提で確認しながらの制作をオススメします。
まとめ
モバイルフレンドリーテストが行えるGoogleの公式ツールと、そのエラー表示6つについてその指摘内容と改善策をまとめてみました。レスポンシブ表示に関わるエラーが多かったことから、Googleのこだわりが理解できましたね。
ただ繰り返しになりますが、このエラーが出ていることで検索結果から削除されるようなペナルティは受けません。エラーによって順位が下げられていることは考えられますが、修正したから必ず上がるという保証があるわけでもありません。
制作から年月が経ったWEBサイトであればリニューアル時期を早めるなどで対応するのもよいと思いますし、CSSだけの修正で終わらないもの（デザインを触る必要がある）は「どこまで直すか」をデザイナーさん、制作会社さんと相談しながら焦らず考えるようになさってください。