モバイルでのサイトの見やすさをチェックする方法

どうも、ナカムラです。

 

あなたは、モバイルフレンドリーという言葉を
知っていますか。

モバイルフレンドリーは簡単に言えば、
「スマホ最適化されてるのか」ということなんですが

 

影響の範囲や対策について、
正しく理解している人は少ない気がします。

 

そこで今回は、
「モバイルフレンドリーの正しい影響と対策」
という感じで記事をまとめていこう。

 

モバイルフレンドリーの影響を正しく理解

 

まずは、「モバイルフレンドリーの影響」について
正しく理解することから始めよう。

 

ここで、
多くの人が勘違いしがちなのが、

 

「スマホに最適化されていない
 サイトは検索順位が落ちる!」

 

ということだが、
これは少し説明不足なんです。

 

何が説明不足なのかというと、
まず検索順位が落ちるのは、
「スマホから検索した時のみ」
ということである。

 

これはつまり、同じ言葉でもPCから検索した時と、
スマホから検索した時は、そこまで変わらないのですが
「検索順位のアルゴリズムが違う」ということです

 

そして、もう一つ勘違いしがちなのが、
「サイト全体での評価ではなく、
 ページ事に評価されている」
ということだ。

「このドメインはOK!」
という風に判断しているのではなく、

「このドメインのこのページはOK、
 このページもOK、こっちページもOK…」

 

という感じで、
1つ1つ見られています。

 

そのため、同じドメインだとしても、
「ページAはOKだけど、ページBはダメ!」
みたいな事があったりします。

 

では次に、
「モバイルフレンドリーの条件」を確認しよう。

 

モバイルフレンドリーの4つの条件とは?

モバイルフレンドリーの条件は、
実は4つもあるのをご存知だろうか?

その4つとは、

レスポンシブデザインなどで画面サイズがスマホに適していること
Flashなどのスマホに適していないコンテンツを使用しないこと
文字を拡大、横スクロールしなくてもキチンと見れること
リンクとリンクの間隔が空いており誤タップの可能性がないこと

です。

こうやって並べて書くと、複雑そうに感じるかもしれませんが
WordPressを使っている場合、
レスポンシブデザインのテーマを使っていれば、
すべてカバーできているので大丈夫です。

ここから一応、
「モバイルフレンドリーかどうか」を
チェックする2つの方法を紹介します。

 

モバイルフレンドリーをチェックする2つの方法

モバイルフレンドリーをチェックするには、
主に2通りの方法があります。

1つ目は、
「Google Serch Consoleの活用」

2つ目は、
「モバイルフレンドリーテスト」です。

それぞれ見ていこう。

 

Google Serch Consoleの活用

 

「Google Serch Console」は、
既にサイトが公開されて
数日以上経過している場合に使います。

 

方法はSearch Consoleの
「検索トラフィック」から
「モバイル ユーザビリティ」を選択するだけでOK。

 

何か問題がある場合は
「どの部分が問題なのか」
まで教えてくれるので便利だ。

 

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

 

サイトを開設したばかりの時は、
「Google Serch Console」で
データが取れないので、
「モバイルフレンドリーテスト」を活用しよう。

 

URLを入力して、
「分析」を押すだけでOKだ。

 

モバイルフレンドリーテストで
モバイルフレンドリーをチェック

 

モバイルフレンドリー4つの対策

もし、上記のようにチェックした時に、
何か問題があった場合の備えて、
対応策を簡単にしておこう。

 

レスポンシブデザインにする

 

まずは、WordPressなどの場合は、
レスポンシブデザインのテーマを入れれば、
そのまま対応してくれるので大丈夫です。

 

テーマを変えたくない場合は、
「WPTouch MobilePlugin」
などのプラグインを入れる事でも解決可能。

また、
ちょっと高度な解決方法だと、
PC用サイトとスマホ用サイトの
2つを作っておいて、

 

・PCユーザーにはPC用サイトへ
・スマホユーザーにはスマホ用サイトへ

 

のように飛ばすよう
設定するということもできます。

 

ですが、2サイトも管理するとなると
大変なので基本的にはおすすめしません。

 

だが、基本的には
レスポンシブデザインがおすすめだ。

 

FlashをCSSやJavaにする

 

Flashのコンテンツは出来る限り
サイト上に配置しないようにしましょう。

 

Flashはスマホでは見れないので、
その部分をJavaやCSSに出来ないか考えてみよう。

 

 

フォントサイズの最適化

 

Googleはフォントサイズの基準に
「16ピクセルを推奨している」といいます。

 

これは、
「16ピクセルじゃないとダメ」
というわけではなく、
あくまで目安の話です。 

さらに、
「フォントの種類を沢山使いすぎないこと」や、
「行間を狭くしすぎないこと」も重要になってきます。

 

リンクやボタン間隔の最適化

 

あとは、リンクやボタンの
間隔を広げることも有効です。

 

具体的に言えば、
「最低でも5mm以上間隔を空ける」というのが、
Googleが推奨しているルールです。

 

よくタップされるボタンなどは、
「高さと幅を両方7mm以上にしよう」など、
さらに大きく作る事が推奨されています。

 

モバイルフレンドリーは奥が深くて
もっと細かいルールもあるんですが

基本的には、
レスポンシブデザインにすれば、
何ら問題がないです。

 

ただ、知識としては抑えておきましょう。

 

コメントを残す

サブコンテンツ

このページの先頭へ