当サイトではさまざまな観点からECサイトのSEO対策について解説してきました。
今回はSEO対策の中でも今後重要になってくると考えられるモバイルファーストに重点を置き、自身のECサイトがモバイルフレンドリーであるかどうか検証する方法を解説します。
SEO対策に必要なこととは？
まずはSEOを強化するためにはどのような施策が必要なのでしょうか？
当サイトのSEOに強いECサイトを構築する4つのポイントという記事では、SEO対策に関する４つのポイントを紹介しています。
１． モバイルファーストでページを作成する
２．適切な内部対策を行う
３．適正なキーワードの選定を行う
４．コンテンツSEOを行う
４つの項目に関して詳しく解説していますが、今回の記事では１番の項目「モバイルファーストでページを作成する」に関してさらに深堀していきたいと思います。
ECサイトがモバイルフレンドリーなのか確認する方法
SEOに強いECサイトを構築する4つのポイントの「モバイルファーストでページを作成する」項目においてモバイルファーストの重要性については理解していただいたと思います。
では実際モバイルファーストで作成したサイトが本当にモバイルフレンドリー（モバイルユーザーの利便性が高い状態）なのか確認する必要があると思います。
そこでここからはモバイルフレンドリーなのか確認する方法とエラーが出た際の対処方法を解説します。
モバイルフレンドリーテスト
このツールはGoogleが無料で提供しているツールでURLを入力するだけで、サイトがモバイルフレンドリーか確認することができます。
実際に当サイトがモバイルフレンドリーかどうか確認してみたところ、以下の結果が出ました。
図１.当サイトのモバイルフレンドリーテスト結果
「このページは、モバイルデバイスでの使い勝手に優れています。」ということで当サイトはモバイルフレンドリーであるということが分かりました。
ぜひ自身のECサイトもこのツールを用いてモバイルフレンドリーか確認してみてください。
モバイルフレンドリーテストのエラー一覧と対処法
https://support.google.com/webmasters/answer/6352293
上記のページにあるとおり、サイトのモバイルフレンドリーに問題があった場合以下のようなエラーが表示されます。
互換性のないプラグインを使用しています
ほとんどのモバイルブラウザでサポートされていないプラグイン（Flash など）がページに含まれている場合に表示されます。そういったプラグインから静止画像などの代替方法を検討する必要があります。
ビューポートが設定されていません
ページにviewportプロパティが定義されてない場合に表示されます。
ビューポートが「端末の幅」に収まるよう設定されていません
ページに固定幅のviewportプロパティが定義されている場合に表示されます。
「ビューポートが設定されていません」と「ビューポートが「端末の幅」に収まるよう設定されていません」のエラーについてはいくつか対処方法がありますが、レスポンシブwebデザインでサイトを構築することで対処できます。
コンテンツの幅が画面の幅を超えています
文字通り、コンテンツの幅（多くの場合動画や画像）が画面の幅を超えている場合に表示されます。スマホ画面ではスクロールの形になっている場合でもエラーが出てしまうので、該当コンテンツにCSSで「width:100%」を適用することをおすすめします。
テキストが小さすぎて読めません
サイトのテキストのフォントサイズが小さすぎるとエラーが表示されます。推奨されている16pxに調整するようにしてください。
フォントサイズの調整に関する記事はこちら
クリックできる要素同士が近すぎます
ボタンやナビゲーションリンクなどのタップ要素同士が近すぎるために、モバイル ユーザーが指を使って目的の要素をタップすることが容易にできない場合に表示されます。
これに関しては余白を設けるなどして、ユーザがタップしやすいよう調整することが望ましいです。
ユーザの目線でサイトを構築する
以上、モバイルフレンドリーなのか確認する方法とエラーが出た際の解決方法を解説してきました。
やはりモバイルフレンドリー＝モバイルユーザーの利便性なので、ユーザー目線でユーザーの使いやすいサイトを構築することが一番の解決方法だと考えられます。
ぜひ今回の記事を通して、モバイルフレンドリーに対する理解を深めていただき、モバイルユーザーが使いやすいサイトを目指してください。
