モバイルフレンドリーなサイトを目指そう

mobile

以前からGoogleがモバイルフレンドリーなサイトを優先的に評価するという方針をしめしています。そして、ここへきてモバイルファーストインデックス(モバイルフレンドリーを基準に検索順位を決定する基準)が本格的に導入されたようです。

Googleのサイト評価は検索結果(順位)にそのまま反映されます。だから、サイトやブログを運営しているひとは、自分のサイトをモバイルフレンドリーにしておくことが、これからは必須ということです。

といういわけで今回は、モバイルフレンドリーの定義や、わたしが実際におこなっているモバイルフレンドリー対応などを紹介したいと思います。

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

モバイルフレンドリーとは、モバイルユーザー(スマホユーザー)に優しいという意味。つまり、スマホでサイトを違和感なく快適に閲覧できるということですね。

いまやネット検索はパソコンよりもスマホやタブレット端末を使うひとのほうが多い時代。だから、Googleもそうした背景を踏まえて、モバイルフレンドリーに対応しているサイトを優先的に評価しますよ、といっているわけなんですね。

あなたのサイトはモバイルフレンドリーですか?

あなたのサイト(ブログ)はモバイルフレンドリーですか?

モバイルフレンドリー対応を考えるまえに、まずは自分のサイトがモバイルフレンドリーかどうかをチェックしておきましょう。Googleが開設している下記のページに自分のサイトのURLを入力すると、モバイルフレンドリーかどうかを簡単にチェックできます。

https://search.google.com/test/mobile-friendly?hl=ja

「URLテスト」というボタンをクリックして分析が終わるまで少々まってから

「このページはモバイルフレンドリーです(このページは、モバイル デバイスでの使い勝手に優れています)」

というメッセージがでれば、あなたのサイトのモバイルフレンドリー対応は合格です。

いっぽうモバイルフレンドリーでない場合は

「このページはモバイル フレンドリーではありません(このページは、モバイルデバイスでは使いにくい可能性があります)」

と表示されます。

そして、その下に

「次の問題を修正してください~クリック可能な要素同士が近すぎます」

といった具体的な改善点が指摘されるので注意してみてください。 もしモバイルフレンドリーの問題を指摘するメッセージがでた場合は、対策が必要ということなので、問題点の改善をおすすめします。

モバイルフレンドリーに対応しよう

もしあなたがワードプレでサイトを運営しているのなら、モバイルフレンドリーに対応することはむずかしくありません。わたしがおこなっているモバイルフレンドリー対策は…

  1. レスポンシブ対応のテンプレートを使用する
  2. 複数の端末で自分のサイトの見え方をチェックする
  3. サーチコンソールのメッセージに適切に対応する

たったこれだけです。

レスポンシブ対応のテンプレートを使用する

ワードプレスで構築しているサイトは、レスポンシブデザインのテンプレート(テーマ)を使うだけでモバイルフレンドーなサイトになります。

レスポンシブデザインというのは、モバイル端末でもサイトを閲覧しやすいように、ディスプレイのサイズにあわせて適切な画面表示に切り替えてくれる機能のことです。

レスポンシブデザインに対応しているテンプレートは、画面が小さいスマホで閲覧しても違和感がないように設計されています。だから、モバイルフレンドリー対応はテンプレートが重要なんです。

ちなみに、有名なテンプレート(有料・無料)は、ほぼまちがいなくレスポンシブ対応になっていると思います。注意しなくてはいけないのは、レスポンシブデザインに対応していない古いワードプレスのテンプレートを使っている場合などです。

モバイルフレンドリーに問題がある場合は、ぜひレスポンシブデザインの導入を検討してみてください。

複数の端末で自分のサイトの見え方をチェックする

レスポンシブデザインのテンプレートを使っていても、自分のサイトが端末ごとにどう見えるかをチェックすることは必要になります。

とりわけ画面が小さなスマホでは、文字が小さくみえる、段落の行数が多くて(余白がすくなくて)読みにくい、コンバージョンボタンの表示が意図せず二行になるという問題が起きやすいので注意しなくてはいけません。

わたしは、現在使えるいちばんちいさなスマホで自分のサイトをチェックすることで、上記のような問題がないかを確認しています。タブレットをもっている人は、そちらでも自分のサイトの表示を確認しておくといいですね。

パソコン上でスマホ表示を確認したい場合は、下記のような無料ツールを利用することも可能です。

http://www.responsinator.com/

サーチコンソールのメッセージに適切に対応する

サイトにサーチコンソールを導入していると、「モバイルユーザビリティ」に関するメッセージが届く場合があります。モバイルユーザビリティというのはモバイル端末の使い勝手という意味ですので、モバイルフレンドリーと似た意味の用語です。

サーチコンソールには、つぎのようなメッセージが届くことがあります。

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

「クリック可能な要素同士が近すぎます」

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

もし、こんなメッセージがサーチコンソールに表示されたら、Googleでサクッと改善方法を検索して対応するようにしましょう。

おわりに

今回は、Googleがモバイルファーストインデックスを本格的にスタートすることを受けて、モバイルフレンドリーの定義やわたしがおこなっているモバイルフレンドリー対応について紹介してみました。

サイトをつくって運営する側のひとは、パソコンで作業をするので、モバイルフレンドリーを忘れがちです。

しかしこれからの時代、webデザインはパソコンではなくスマホを基準に考えなくてはいけません。個人でメディアを運営しているひとも、モバイル対応は必須なので、ぜひ対応していきましょう。