Google Chromeでスマートフォンの表示をチェックする方法

最近では、googleは、サイトの評価の一つにスマートフォンに対応しているかが重要になっています。

Googleのモバイル ユーザビリティ?

ブログや、サイト運営注の方ならほとんどご存知だと思いますが、Googleでも、モバイルに対応してるいるかがサイト評価の指標になっています。

googleのサイト管理ツールSearch Consoleの中でも、モバイル ユーザビリティと言う項目が出来ています。ここで、モバイル端末に対応してない場合には、エラーが表示されます。

Search Console

モバイル ユーザビリティ
サイトに影響を与えるモバイル ユーザビリティの問題を解決してください。ウェブサイトにモバイル ユーザビリティの問題があると、モバイル検索結果に表示されないことがあります。 詳細
モバイル ユーザビリティのエラーは見つかりませんでした(サイトの類似パターンをすべて確認してください)。

賢威7.0など最近のスマートフォンでは、レスポンシブ対応しているので基本的には、ここでエラーなどが表示されることはありません。

しかし、ご自分でカスタマイズしていくと、エラーが出る場合があったり、表示がきれいに出来てない場合もあります。でも、全てのスマホ端末などを用意してチェックするわけにも行きません。

PCのブラウザー上で仮想のシミュレーション

そこで、PCのブラウザー上で、仮想のシミュレーションが出来る方法があります。

今回は、GoogleChromeデベロッパーツールを使います。

GoogleChromeブラウザーの右上にあるGoogleChromeの設定をクリック。

その他のツール➡デベロッパーツールをクリック

キャプチャGoogleEmulator

android端末やiPhoneなどの切り替えが出来ます。


このデベロッパーツール機能を使いたい場合は、[F12]をクリックもしくは、ショートカットキー[Ctrl]+[Shift]+[i]で簡単に表示出来ます。もとに戻すときは、もう一度[F12]をクリックか[Ctrl]+[Shift]+[i]です。

デベロッパーツールは、サイトの表示を確認するための機能がメインなのではなく、サイト開発における様々な機能が用意されています。色々お試し下さい。