ECサイト構築クラウド型プラットフォーム

モバイルファーストマーケティングラボ

ECサイトがモバイルフレンドリーなページであるか検証する方法とエラーの解決方法を解説!

ECサイトがモバイルフレンドリーなページであるか検証する方法とエラーの解決方法を解説!

当サイトではさまざまな観点からECサイトのSEO対策について解説してきました。

今回はSEO対策の中でも今後重要になってくると考えられるモバイルファーストに重点を置き、自身のECサイトがモバイルフレンドリーであるかどうか検証する方法を解説します。

SEO対策に必要なこととは?

まずはSEOを強化するためにはどのような施策が必要なのでしょうか?

当サイトのSEOに強いECサイトを構築する4つのポイントという記事では、SEO対策に関する4つのポイントを紹介しています。

1. モバイルファーストでページを作成する
2.適切な内部対策を行う
3.適正なキーワードの選定を行う
4.コンテンツSEOを行う

4つの項目に関して詳しく解説していますが、今回の記事では1番の項目「モバイルファーストでページを作成する」に関してさらに深堀していきたいと思います。

ECサイトがモバイルフレンドリーなのか確認する方法

SEOに強いECサイトを構築する4つのポイントの「モバイルファーストでページを作成する」項目においてモバイルファーストの重要性については理解していただいたと思います。

では実際モバイルファーストで作成したサイトが本当にモバイルフレンドリー(モバイルユーザーの利便性が高い状態)なのか確認する必要があると思います。

そこでここからはモバイルフレンドリーなのか確認する方法とエラーが出た際の対処方法を解説します。

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

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

このツールはGoogleが無料で提供しているツールでURLを入力するだけで、サイトがモバイルフレンドリーか確認することができます。

実際に当サイトがモバイルフレンドリーかどうか確認してみたところ、以下の結果が出ました。

モバイルフレンドリーテスト
図1.当サイトのモバイルフレンドリーテスト結果

「このページは、モバイルデバイスでの使い勝手に優れています。」ということで当サイトはモバイルフレンドリーであるということが分かりました。

ぜひ自身のECサイトもこのツールを用いてモバイルフレンドリーか確認してみてください。

モバイルフレンドリーテストのエラー一覧と対処法

https://support.google.com/webmasters/answer/6352293
上記のページにあるとおり、サイトのモバイルフレンドリーに問題があった場合以下のようなエラーが表示されます。

互換性のないプラグインを使用しています

ほとんどのモバイルブラウザでサポートされていないプラグイン(Flash など)がページに含まれている場合に表示されます。そういったプラグインから静止画像などの代替方法を検討する必要があります。

ビューポートが設定されていません

ページにviewportプロパティが定義されてない場合に表示されます。

ビューポートが「端末の幅」に収まるよう設定されていません

ページに固定幅のviewportプロパティが定義されている場合に表示されます。

「ビューポートが設定されていません」と「ビューポートが「端末の幅」に収まるよう設定されていません」のエラーについてはいくつか対処方法がありますが、レスポンシブwebデザインでサイトを構築することで対処できます。

コンテンツの幅が画面の幅を超えています

文字通り、コンテンツの幅(多くの場合動画や画像)が画面の幅を超えている場合に表示されます。スマホ画面ではスクロールの形になっている場合でもエラーが出てしまうので、該当コンテンツにCSSで「width:100%」を適用することをおすすめします。

テキストが小さすぎて読めません

サイトのテキストのフォントサイズが小さすぎるとエラーが表示されます。推奨されている16pxに調整するようにしてください。

フォントサイズの調整に関する記事はこちら

クリックできる要素同士が近すぎます

ボタンやナビゲーションリンクなどのタップ要素同士が近すぎるために、モバイル ユーザーが指を使って目的の要素をタップすることが容易にできない場合に表示されます。

これに関しては余白を設けるなどして、ユーザがタップしやすいよう調整することが望ましいです。

ユーザの目線でサイトを構築する

以上、モバイルフレンドリーなのか確認する方法とエラーが出た際の解決方法を解説してきました。

やはりモバイルフレンドリー=モバイルユーザーの利便性なので、ユーザー目線でユーザーの使いやすいサイトを構築することが一番の解決方法だと考えられます。

ぜひ今回の記事を通して、モバイルフレンドリーに対する理解を深めていただき、モバイルユーザーが使いやすいサイトを目指してください。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。

レスポンシブWebデザインカテゴリの最新記事