モバイルフレンドリーとは？Google検索エンジンの評価はスマホとPCで違うよ

レスポンシブサイトは最早時代のマストなんじゃないかと思っている苦労詐欺だ。
みんなはSEO対策を行った自身のサイトがスマホとPCで検索順位に差が出ていることに気がついてる？

これは、Google検索エンジンの評価システムがスマホとPCで違うものになっているからなんだよ。
スマホにはスマホ用の評価基準があって、それができていないと検索時の順位があまりよくないよ。

今やスマホでブログやサイトを見るのは当たり前の時代になってきているから、スマホ表示への対策ってのはみんな意識したほうがいいよ。
今回はスマホSEO対策として重要なモバイルフレンドリーについて教えるよ。

ちなみにタブレットの場合はスマホでの評価と同じものになるみたい。

?

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

Googleは2015年にスマホでの評価基準に関連したモバイルフレンドリーについて発表したよ。
これによって、スマホ表示に対応したサイトならスマホでの評価が上がりやすくなることがわかったよ。

つまりスマホでの対応ができていないと、PCでの順位に影響は出ないけど、スマホでの順位には影響が出るってこと。
PCとは独立した形でスマホ用の検索エンジンが動いてるってことだね。

ふ～ん…TOPだけスマホ対応とかにしておけば問題ねぇかな？

わ、わかったよ、ちゃんと全ページモバイル対応にするよ。

最初からそうしなさいよ。

PCとスマホで検索エンジンの評価は独立しているから、順位は異なる結果になるよ。
TOPだけスマホ対応みたいな横着なことをすると天罰が下るから、全ページスマホ対応になるよう変更しよう。

モバイルフレンドリーの評価基準

モバイルフレンドリーにはいくつかの評価基準が存在しているんだ。
これらは大きく以下の2つに分けることが可能だよ。

• ユーザー体験の向上
• ページごとの読み込み速度の向上

ここから更に細かく分けられていくわけなんだね。
2つのうち特に重要になってくるのが「ユーザー体験の向上」になるよ。

ユーザー体験の向上ってのは、少し違うけどユーザビリティの向上に近いものだと思っていい。
ユーザビリティで求められるのはサイトの使い勝手だけど、ユーザー体験の向上はそれに＋で「サイトの見やすさ」が求められるよ。

なるほど、スマホに対応させるんだから、スマホ上で使いやすいかどうかが大事ってことか。

スマホでの使い勝手とともにそういったことも重要になってくるわね。

「細かく分けられる」って言ってたけどそんなに細かいの？

それほど細かいわけでもないけど、しっかりポイントは抑えておかないといけないわよ。

モバイルフレンドリーによる評価基準は大きく2つに分けられる。
特に重要になるのは「ユーザー体験の向上」の方だよ。
ここから更に評価基準が設定されているよ。

ユーザー体験の向上

ユーザー体験の向上の項目としては以下4つがあるよ。

• フォントのサイズを見やすいものにする
• viewportタグを設置して、モバイル用にページの大きさが合うようにする
• タップやクリックがしやすいようにリンク同士の間隔を空ける
• コンテンツの間隔を開けて、画像やテキストを画面サイズに収める

そんなに難しいことは無いから、上から順番にやっていってスマホ表示用サイトを作っていけばいいかな。
フォントサイズやリンク同士・コンテンツ同士の間隔、画像＆テキストを画面サイズに収めるとかは全てcssで制御できるね。

少し難しいのはviewportタグの設置で、やり方をきちんと調べた方がいい。
ただ設置するだけじゃなくて、表示もきちんとされているかどうか、PC・スマホ両方の表示を確認した方がいいよ。

これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ - てっく煮ブログ

実際にやってみるとわかるけど、意外と思っていた感じに表示されていなかったりするものよ。

た、たしかに、この前も目次自動生成でかなり苦労したしな…。

クロウだけにね……

ユーザー体験の向上は内容そのものは基本的に難しくはないよ。
viewportの設置だけはちゃんとできているのか逐一確認した方がいい。
じゃないと、僕みたいに自動生成の目次設置にするだけなのにものすごい苦労したりするから。

ページごとの読み込み速度の向上

続いてはページごとの読み込み速度向上について。

• ブラウザ内のキャッシュを利用
• スクロールすることでコンテンツの表示を制御してるJavaScript/CSSの排除
• リソースを圧縮して送信されるバイト数の削減
• 画像ごとに適切なフォーマット・圧縮を選択しデータサイズの削減
• cssコードを縮小させてデータサイズの削減
• HTMLコードを縮小させてデータサイズの削減

急に専門的な感じになってきたけど、そんなに心配しなくても大丈夫。
モバイルフレンドリーになっているかの認識はさっきの「ユーザー体験の向上」ができていれば、それだけで評価されるから。

更にモバイルフレンドリーサイトとして向上させたいのなら、このページ読み込み速度向上を目指すのがいいと思う。
ただ、やっぱり「内容が専門的すぎて、素人にはちょっと…」ってなる人も多いかな。

こうゆうページ読み込み速度向上を自動でやってくれる「AMP」って呼ばれる仕組みが最近でてきた。
WordPressなんかだとこれを素人でもできるようにプラグインで対応してたりするよ。

使っているサービスによってやり方が違うから「サービス名 AMP」とかで調べるとやり方が出てくると思うよ。

AMP導入でPVが下がった!?そんな事ないGoogleアナリティクスにカウントされてないだけ！ | ブログマーケッターJUNICHI

はてなブログのAMP対応について - NO TITLE

ただし、色々と注意点があるよ。

• 吹き出しや画像の表示・装飾なんかが簡略化される
• Googleアナリティクスでアクセスがカウントされなくなる
• Googleアドセンス広告が表示されなくなることがある

AMPはここ最近出てきた仕組みで、未だに発展途上なんじゃないかと思ってる。
だから、見た目だとかが気になる人は、今無理やり導入する必要はないんじゃないかと。

そのうち、見た目を簡略化させずにAMP化させられるようなのとか出てくる可能性があるわ。

だから、それまでは、ユーザー体験の向上だけやっておいて、そういったものが出るまで待つのも手よ。

現段階ではユーザー体験の向上のみを導入しておくのがいいってことだな。

ページ読み込み速度向上は専門的な内容になってくる
これらを簡単に導入できるような仕組み「AMP」が存在していて、各サービスでの導入方法も存在している
まだ未完成で色々と不備があるから、現在はユーザー体験の向上のみの導入でOK

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

ここまでモバイルフレンドリーについて説明してきたけど、既にスマホ表示自体はできている人も少なくはないはず。
自身でGoogleアナリティクスを導入し、スマホからのアクセスのほうが多いと気がついたら、自然と整備しはじめるよねｗ

とりあえずcssとか弄ってスマホ表示を整えたまではよかったけど、実際にモバイルフレンドリーとして認識されているのか不安だったりするよね。
実はGoogle側からサイトがモバイルフレンドリーになっているかどうかを確認するためのツールが提供されているよ。

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

モバイルフレンドリーテストってやつなんだけど、Googleデベロッパーツールってサイト内に設置されているよ。
使い方は簡単で、GoodKeywordなんかと同じようにアドレスを入力して、「テスト実行」ボタンを押すだけ。

↑画像みたいに、問題がなければこうやって表示がでるよ。
これ以外にも以下のような調べ方が存在しているよ。

• GoogleSearchConsole内「モバイルユーザビリティレポート」で確認する
• PageSpeedInsightsで確認する
• モバイルフレンドリー一括実行ツールで確認する

PageSpeedInsightshはAMP対応できているかがチェックするサイトだけど、モバイルフレンドリーになっているかどうかもわかるよ。
モバイルフレンドリー一括実行ツールはサイト全体がモバイルフレンドリーか確認できるからこっちもオススメ。

あれ？一括実行ツール使えないんだけど…？

それ、PC内にエクセル入ってないと使えないわよ。

モバイルフレンドリーはGoogleから提供されているツールでテストが可能。
公式のツール以外にもモバイルフレンドリーになっているかどうか確認することは可能。
いずれも無料のツールなのでスマホSEO対策するなら活用していこう。

モバイルフレンドリーが気になるならレスポンシブサイトがオススメ

自身のサイトをモバイルフレンドリーにするためには必ずしもスマホ用サイトが必要ってわけではないよ。
現在ではサイトを表示させている画面のサイズによって表示を自動的に変更させることができるレスポンシブデザインってのが存在しているよ。

ちなみにこのサイトははてなブログの「Brooklyn」ってテーマを使っているんだけど、これもレスポンシブデザインになっているよ。
ウィンドウのサイズを小さくしていくと表示が変わっていくのが分かるはず。

ただ、それをされると、サイド部分の追尾型目次が記事と重なって表示されちゃうからやらないでね。
WordPressやはてなブログだとかのサービスならテーマにレスポンシブ対応の物があるから探してみるといいよ。

コメントでレスポンシブ対応の追従目次があると教えてもらい、早速反映させました。
導入は簡単なので、やってみてね。

レスポンシブに対応したサイドバー固定Ver.2（はてなブログ向け） - NO TITLE

今のデザインテーマを変更せずにレスポンシブ対応にする方法も存在しているよ。
それが↓の記事で紹介されているBootstrapってやつなんだけど、HTML＋cssに適応させてレスポンシブにすることができるんだ。

デザイン知識がなくてもOK！Bootstrapの使い方【入門者向け】 | TechAcademyマガジン

ただ、この場合何か起こった時にHTML・cssの知識がないと修正が大変になると思う。
そうゆう知識がないのならテーマ変更等で対応させるほうが無難だと思うよ。

少し前まではレスポンシブなんてそこまで使われていなかったけど、スマホの復旧やモバイルフレンドリーの影響で多くのサイトが使うようになったね。

よ、世の中便利だなー(；・∀・)

発言が原始人化してるわよ。

ほっとけ( TДT)

サイトを全体的にモバイルフレンドリーに対応させる方法としてレスポンシブ化とBootstrapの2種類がある。
レスポンシブはテーマ変更させるだけでお手軽にできる。
今のデザインをレスポンシブさせたいならBootstrapだけど、何か合った時にはHTML・cssの知識が必要になるよ。

まとめ

それじゃあ、今回のモバイルフレンドリーについてまとめていくよ。

• モバイルフレンドリーにすることでスマホでの順位に影響が出る
• PCとスマホで検索エンジンの評価は独立している
• サイト内全ページモバイルフレンドリーにする必要がある
• モバイルフレンドリー対応にはユーザー体験の向上・ページごとの読み込み速度向上の2つに分けられる
• モバイル対応だと認識させるだけならユーザー体験の向上だけでOK
• ページごとの読み込み速度向上はAMPと呼ばれている
• AMPはWPなんかだと対応のプラグインがある
• モバイル対応かどうかは確認できるサイトがある
• 自サイトでモバイルフレンドリーが気になるならレスポンシブにしよう

ネット市場はスマホの参入で今やかなり膨れ上がっている状態だね。
僕のサイトもスマホからアクセスしてくる人が多いから、レスポンシブのテーマにしたのは良かったと思ってるよ。

順位までは気にする必要はないかもしれないけど、スマホ表示にはこだわっておくほうがいいかも。
そのほうが離脱率もさげることができるからね。