レスポンシブWebデザインなのに、モバイルフレンドリーでない?!なぜ

レスポンシブWebデザインなのに”スマホ対応でエラー”なぜ?

Web担当者フォーラムの記事で、レスポンシブWebデザインなのに、なぜかモバイルフレンドリーでひかかってしまいます。という記事を発見しました。

Web担当者フォーラム記事:モバイルフレンドリーテストエラーについて(現在では、修正されています)

弊社ではレスポンシブWebデザインを日本で一番早くお伝えしていますが、書籍を出すのが遅れてしまったことなどもあってか、先に出版されている書籍の中で適切な内容でない書籍があることでレスポンシブWebデザインでないサイトをレスポンシブWebデザインと認識し、勉強してしまっているケースがあるようです。

記事の中にもありますが、レスポンシブのはずですが、まだフレンドリーではないようです(笑)日本でレスポンシブWebデザインと思われているサイトが実はレスポンシブWebデザインでなく、モバイルフレンドリーでエラーが出ているというケースが他でもよく目にします。

レスポンシブWebデザインでリニューアルさせたばかりのサイトも、アダプティブWebデザインだったことで、モバイルフレンドリーテストに引っかかり、 瑕疵で作り直しという自体もでてきています。

エラーがでているレスポンシブWebデザインは何なのか?

エラーが出ている内容として「コンテンツ幅が画面の幅を超えている」というものがあります。 前回、このブログの「4月21日以降の順位低下に注意!モバイルフレンドリー対応のチェック方法」でもご紹介しましたが、これらのデザインは、「アダプティブWebデザイン」と呼ばれ、ある特定のデバイスのデザインに合わせてデザインを実装しているもの になります。

つまり、レスポンシブWebデザインの原理原則と正しいコンセプトを理解せずにサイトを構築してしまうと、間違ったものを作成してしまう可能性があります。

アダプティブWebデザインもレスポンシブWebデザインと同じ技術を利用しているので間違いがちなのですが、技術だけを目をやってしまい、一見実装できたように見えても異なっている場合があるので、正しいコンセプトを理解しましょう。

レスポンシブWebデザインだからモバイルフレンドリーに合格するわけでない

モバイルフレンドリーでの実装は横幅の問題だけでなく、モバイルサイトで快適に閲覧できる環境を Googleは求めています。そのため、文章中の文字サイズが小さい、リンクの面積が足らない場合などもエラーとして表示されます。

モバイルユーザビリティ&モバイルフレンドリーテスト

サーチコンソール(Search Console)での「モバイルユーザビリティ」メニューではフレンドリーテストでエラーで表示される項目が表示されます。allWebクリエイター塾のサイトではモバイルフレンドリーテストに合格していますが、サーチコンソールではjsファイルが読み込まれて、エラーとして返されています。

jsファイルをHTMLファイルとして認識されてしまったケース

jsファイルが間違ってHTMLと認識されてしまったのは、Directory Indexのアクセスが許可されていたからです。Directory Indexが見えるのはセキュリティ上も良くなので、見えなくするために.htacessファイルで設定する必要があります。

モバイルユーザビリティ、その他のエラー

モバイルユーザビリティには、フォントサイズが小さいものや、Flashが利用されているケースもエラーとして表示されます。

振り分けをしたパソコン向けのページにも「ビューポートが設定されていません」のエラーがでてしまいます。クリックするとレスポンシブWebデザインでの実装を促されてしまいます。

レスポンシブWebデザインをGoogleは強く推奨していると受け取れるアラート

振り分けが正しくされていない場合などに表示される可能性もありますが、正規URLをして、XMLサイトマップでもアノテーションを付けても振り分けたPC用ページにもこのようなエラーがでているので、やはりレスポンシブWebデザインでの実装を行うのがベストと言えるでしょう。

モバイルユーザビリティにも気を使った、正しいコンセプトのレスポンシブWebデザインの実装方法を身につける必要がありそうですね。