• サイト構築
  • 連載第回
  • 2017/3/21

モバイルフレンドリーテストとは?簡単チェック法と結果別対処法も

close up of hands with magnifier on smartphone

「最近になって、自社サイトへの自然流入が減ってきている」。こんなお悩みをお持ちのWeb担当者・ディレクター様はいらっしゃいませんか? もしかするとその理由は「モバイルフレンドリー」にあるかもしれません。

今回は、モバイルフレンドリーの簡単なテスト方法を図解。さらにその結果別に、各対処法をお伝えしていきたいと思います。

 

対応必須! モバイルフレンドリーテストとは?

モバイルフレンドリーテストとは、スマホなどのモバイル端末における“Webページの使いやすさ”をテストするツールです。

モバイルフレンドリーテストに合格することは、ユーザビリティーの向上につながるのはもちろん、SEOにも効果があります。これは、Googleが2014年4月に実施したモバイルフレンドリーアップデートに依るものです。

「モバイル検索におけるランキングに、モバイルフレンドリーの結果を反映させる」

と表明したこのアップデートは現在も更新されており、今後より強化されていくと予想されます。

 

あなたのサイトはモバイルフレンドリー?Google提供の簡単テスト法

あなたのサイトがモバイルフレンドリーかを確認するために、早速ですが、テストを提案します。やり方は非常に簡単です。まずは以下のサイトへアクセスしてください。

モバイル フレンドリー テスト – Google Search Console

次に、あなたのサイトのアドレスを「テストするURLを入力」という欄にコピー&ペーストします。その後、下にある「テストを実行」をクリックしてください。

モバイルフレンドリーテスト_トップ画面

https://search.google.com/search-console/mobile-friendly

分析が完了すると、結果が表示されます。なお、画面の右側にはスマホ等のモバイル端末で、どのようにあなたのサイトが表示されているかを確認できます。

モバイルフレンドリーテストに合格の場合

モバイルフレンドリーテストに合格の場合は以下のような画面が表示されます。現状としては、とくに施策は必要ありません。ただし、今後デザインを変更した際や、モバイルフレンドリーに関するポリシーが変更された際などには、再度チェックを行うようにしましょう。モバイルフレンドリーテスト_合格の場合

 

モバイルフレンドリーテストに不合格の場合

モバイルフレンドリーテストに不合格の場合は以下の表示と合わせて、修正すべき問題が表示されます。それぞれの結果の概要と対処法については、次の項目で詳しくお伝えします。モバイルフレンドリーテスト_不合格の場合

 

モバイルフレンドリーテスト結果別対処法

もしもモバイルフレンドリーテストで問題点が検出された場合は、それぞれの項目での対処を検討しましょう。

Flashが使用されています

現在、多くのモバイル用ブラウザはFlashを使ったコンテンツに非対応です。一昔前まで、FlashはWebサイトでのスタンダードな技術でした。しかし、iPhoneがFlash非対応であったことなどを理由に、徐々に姿を消していっています。今では多くのスマホでFlashが動かない、というのが実情です。

解決策

Flashを用いたコンテンツの代替案としてはHTML5が挙げられます。また、単純なアニメーションであればJavaScriptなどの技術を用いてみてください。もしくは、これを機にモバイルフレンドリーに対応したデザインへと一新するのもオススメです。

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

ビューポート(viewport)とは、「表示領域」を表す言葉です。ビューポートを設定するということは、アクセスする端末に合わせてブラウザのページサイズ・スケーリングを調整する、ということです。PCユーザーがアクセスした場合には、大型のディスプレイを想定したデザインを表示し、スマホユーザーがアクセスした場合には、小型のディスプレイを想定したデザインを表示する、といった具合です。

解決策

ドキュメントのhead部分に「meta viewport」を追加します。例としては以下です。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

ただし、事前にレスポンシブデザインが完成していない状態で上記のタグを含めたとしても効果はありません。他の施策と同時に設置するようにしてください。

固定幅のビューポート

ビューポートの幅を、固定のピクセルサイズに設定している場合に表示されます。現状のページを、スマホの画面でもすべて表示できるように考慮されて設定されることが多いですが、モバイルフレンドリーの観点から言うと推奨されません。

解決策

ビューポートを固定幅ではなくレスポンシブで表示できるようデザインを行います。デバイス幅に合わせてたスケーリングが実現できよう設計してください。

コンテンツのサイズがビューポートに対応していません

テキストや画像がビューポートの画面に表示しきれず、縦スクロールが必要となった場合に表示されます。たとえば、CSSで絶対値を使用している、画像が特定の幅に最適化されているようなケースで起こります。

スマホの操作は縦方向のスクロールが基本となるため、横スクロールは不向きというのが、モバイルフレンドリーの考え方です。合格のためには、そのポリシーに合わせるための施策が必要となります。

解決策

CSSの要素を相対的な幅・位置で設定します。たとえば、「width」をピクセルで指定するのではなく、「100%」などの値を使用してください。また、画像についてもスケーリングができるよう設定しなくてはなりません。

フォントサイズが小です

最近では格安SIMの普及で、エントリー~ミドルクラスの格安スマホを利用するユーザーも増えてきています。大型ディスプレイのスマホユーザーであれば、フォントサイズが小さくでも問題ありませんが、解像度が低く、ディスプレイの小さいスマホの場合は視認性が悪いため、モバイル“アン”フレンドリーとなってしまいます。

解決策

フォントサイズを設定し、スケーリングを適切に行えるよう設定を見直します。なお、この際には、あらかじめコンテンツに対しビューポートを指定する必要があります。

タップ要素同士が近すぎます

ボタンやナビゲーションリンク(メニューのこと)の間隔が狭すぎたり、小さすぎたりする場合に表示されます。

マウスを使ってクリックする分には問題ないかもしれませんが、スマホの場合は指を使ってのタップが基本です。そのため、それぞれの要素が近すぎると、誤選択をしてしまう可能性があります。

解決策

重要なボタンやナビゲーションリンクは、高さと幅を48CSSピクセル(7ミリ)以上に設定してください。なお、それ以外のボタン・リンクについてはもっと小さくても構いません。ただし、水平・垂直方向で32CSSピクセル(5ミリ)以上の間隔を空けるようにしましょう。

 

まとめ

今後ますます増えていくと予想されるスマホユーザー。モバイルフレンドリー化を進めることは、サイトのユーザビリティー向上と集客強化に効果的です。

まだまだモバイル対応が完全に普及していない今だからこそ、テスト&対策を行い、競合他社との差をつけましょう。