少し前からGoogleの検索結果に「スマホ対応」という文字が表示されていましたが、
最近ではいよいよ「モバイル対応の有無が検索結果に影響を与えるようになる」という話題が見られるようになってきました。
これだけスマートフォンが普及してくると、それも当たり前の流れなのかもしれません。

 

モバイルフレンドリーテスト

そんななかで、Google社は「モバイルフレンドリーテスト」というサービスを提供しています。

モバイルフレンドリーテスト：画面

サイトのURLを入力すると、そのサイトがスマートフォン対応になっているかどうかを判断してくれるというもの。
今は大体以下のようなポイントを見てくれるようです。

  • 画面からコンテンツがはみ出していないか
  • 文字が小さすぎないか
  • リンクが近接していないか

モバイル_フレンドリー_テスト：結果画面

「モバイルフレンドリーではない」と判断されると、その理由と、対応方法の参考情報（英語のサイトだったりしますが）を示してくれます。

逆に、これで「モバイルフレンドリーである」と判断されると、検索結果に「スマホ対応」と表示される可能性があるということでしょう。

 

「スマホ対応」になるための対策

「モバイルフレンドリーではない」と判断された場合、私がおこなったいくつかの対応としては、下記のようなものがあります。

  • viewportを調整する（コンテンツが画面に収まるように）
  • フォントサイズを調整する（文字が小さいと言われないサイズに。em等で指定しておくと良いと思います。）
  • グローバルナビなどのpaddingを調整する（リンクの間隔をあける。リンクの面積が大きいほうがいいので、marginではなくpaddingです。）

大体viewportとフォントサイズを調整すると、「モバイルフレンドリーである」という判断になりました。レスポンシブデザイン等ではなくても、見やすい大きさで画面に収まれば良いようです。

これで完璧なスマートフォン対応になるかというと、もちろんそうではないのですが、
（自動チェックなので漏れも色々あります）一つのチェック方法としては使えます。

ただし、おそらくチェック内容もこれから変更されていくと思いますので、定期的にチェックしてみたほうがいいかもしれません。
あ、ウェブマスターツールにサイトを登録されている場合は、ウェブマスターツールでもモバイル対応のチェックができます。

ウェブマスターツール：画面

 

今後の対応で思うこと

このような流れの中で今後はモバイル対応が必須になってくると思いますが、一言でモバイル対応といっても、ここ最近でデバイスの多様化が進んでいますし、一つ一つの機器に対してきちんと見えるようにというのは正直なところ難しいと思っています。

今まではサイト全体のデザインを含めて色々な提案をする事が多かったのですが、一般的でないレイアウトを行った時に、PC、タブレット、スマートフォン、それぞれの見せ方を作るのはコストも掛かりますし、また将来新しいデバイスが出た時の対応なども考えなくてはなりません。
コーポレートサイトなど比較的寿命の長いサイトを作るときには、そういったことも含めた”メンテナンスのしやすさ”も考えていく必要があります。また、お客様にも定期的なメンテナンスのコストがかかることを伝える必要がありますね。

ただ、あまりメンテナンスの事ばかり考えてありきたりなサイトになるというのも困りものです。
個人的には作る以上はどこかに楽しさや遊びがあったらいいなあと思っているので、そのあたりは気をつけていきたいですね。

参考記事

対応の時にこちらの記事を参考にさせていただきました。ありがとうございました！