「モバイルフレンドリー」のための具体的な対応

Webサイトのスマホ最適化といえば「モバイルフレンドリー」への対策を行うことが一般的です。正しい方法でモバイルSEO対策を行えば、検索結果の順位が上昇し、Googleからの評価を高めることができます。
モバイルフレンドリーについては、すでにたくさんの情報が公開されており、言葉自体も仕事場で当たり前に使われていますが、今回は具体的な対策を深堀してみます。

モバイルフレンドリーとは

モバイルで閲覧しやすいことを示す言葉で、Googleはフレンドリーかどうかをアルゴリズムでチェックし、ランキングしています。つまり、モバイルフレンドリーであるかは、SEOに影響を与えます。
なので、「うちのサイトはBtoBでどちらかというとPCユーザーが多いからスマホは対策しなくてよいや」というわけにはいかないのです。なぜなら、モバイルフレンドリーなサイトではないと判断されて、ランキングを下げられる可能性があるからです。

つまり、すべてのWebサイトがモバイルフレンドリーを気にしなければいけないということです。

モバイルフレンドリーチェック

まずは、自社サイトがモバイルフレンドリーであるか、チェックしてみましょう。モバイルフレンドリーであるかについては、モバイルフレンドリーテストを使って、URLを入れれば簡単にチェックできます。

モバイルフレンドリーテスト
https://search.google.com/test/mobile-friendly?hl=JA

上記のようなテストツールはたくさんあるので、まずはあなたのWebサイトのURLを確認してみて修正してみてください。もしあなたがWebサイトのリニューアルや立上げ最中なら、今のうちに次の注意すべき点を読んで対策しておきましょう。

モバイルフレンドリーで注意すべき点

具体的に何をどのように注意すべきなのか、確認していきます。

テキストサイズ

テキストサイズは読める大きさでなければいけません。Googleはテキストサイズについて16pxを目安とするよう推奨しています。そのため、本文のフォントサイズについては、16pxで設定しましょう。
実際にスマホ上でどのようなサイズ感で読める確認してみることも忘れずに。

コンテンツの横幅サイズ

モバイルフレンドリーなサイトにするには、スマホの画面幅に合わせたコンテンツ表示を行う必要があります。つまり、縦スクロールで完結するサイトを作成するということです。特に、テーブルや画像について注意しましょう。
テーブル表示が大きく、横スクロールするサイトになってしまった場合は、モバイルフレンドリーとは言えません。そのため、縦スクロールで見やすいテーブルへと変えていきましょう。

また、画像が画面サイズと合っていないというのもモバイルフレンドリーとは言えません。このような問題は、テーブルや画像に最大幅を設定することで解決できます。CSSを開いて、次の記述をしておきましょう。

img, table {
max-width: 100%;
}

これによって、画面サイズに合わせてケーブルや画像が表示されるようになります。

タップスペース

スマホは、パソコンと違って、タップやスライドによって操作を行ってきます。そのため、押し間違いや押しづらいなどが無いように指でタップしやすいスペースを確保する必要があります。
そのため、タップしやすいボタンを表示させておく必要があります。一般的に、Webデザインで推奨されているボタンのサイズは、44px × 44px以上となっています。これよりも小さいと、タップしづらいといった問題が発生するため、サイズには注意しましょう。

Flashを使わない

昔からWebサイトを公開している人のなかには、Flashを使っていらっしゃる方もいるでしょう。実は、Flashはスマホのブラウザには対応していません。古い技術は、モバイルフレンドリーではないと判断されるリスクとなるため、代わりの技術で代用するといった対策を行っていきましょう。

まとめ

モバイルフレンドリーという言葉を聞いたことがあっても、なんとなく「スマホで見やすいかどうか」と認識している人もいるかもしれません。見やすいだけでなく、人が指で触って「タップしやすいかどうか」「スクロールしやすいかどうか」ということも判断の基準になるのです。
モバイルフレンドリーテストでURLを入れるだけで、どの程度モバイルフレンドリーなのかについてチェックできるため、問題点が見つかった場合はすみやかに改善を行っていきましょう。