Chromeを使ってモバイルページが正しく表示されているか確認する方法

2019年3月9日

WRITER

aki

　

この記事を書いている人 - WRITER -

aki

ふわりゆらりという楽しくも厳しいライフスタイルを送っているブロガーです！(笑)人の何十倍も楽しい人生を送るために、絶対やるべきこと。。やったらいいこと。。やっといたほうがいいこと。。などいろいろ書いてます。

Googleのモバイルファーストインデックスが開始されたために、スマートフォンサイトを評価の主軸にしてインデックスされるようになりました。

これからのSEO施策は、スマートフォンをメインに考慮していく必要がありますね！

そこで今回は、Google Chromeを使って簡単にスマートフォンサイトの確認をする方法についての解説です。

Chromeで正しく表示されているかチェックする方法

ここでは、Google Chromeというウェブブラウザを利用します。

まだ、Google Chromeを使っていないという方は、とても便利なので是非導入してみてください。

こちらのGoogle Chrome公式よりダウンロードしましょう。

自分のサイトがスマートフォンでどう見えるかは、実際にスマートフォンで表示してみればよいのですが、タブレットやスマートフォンには様々な機種が存在するため、どう見えるかを全ての実機でテストするのは困難です。

そこで、Google Chromeを利用するとPCで簡単にスマートフォンサイトの確認ができます。

それでは実際に確認してみましょう。

まず、自分のサイトをGoogle Chromeで表示してみましょう。

開いたページ上で「右クリック」をして表示されたウインドウにある「検証」をクリックしましょう。

他の方法

• 右上のメニューボタンをクリックして「その他のツール」→「デベロッパ―ツール」をクリック
• 「Ctrl]+「Shift」+「I」キーまたは「F12」
• macの場合は「Option」+「Command」+「I」キー

表示されたウインドウの「Elements」の左隣のアイコンをクリックしましょう。

これでスマートフォンでのサイト表示に切り替わりました。

これはiPhone6/7/8での表示を選択しています。

ドロップダウンリストからデバイスを切り替えて、疑似的に表示を検証することができます。

この表示はデバイスの枠（フレーム）も一緒に表示させています。

デバイスの枠（フレーム）の表示をするには、上図のようにメニューを開き「Hide device frame」をクリックしましょう。

まとめ

Webサイトのデザインなどの変更をした際には、正しく表示出来ているかを確認するのに、このGoogle Chromeの機能はとても便利ですね！

モバイルユーザーの増加によって、webサイトのモバイル対応は必須の要素になりつつあります。

これからは、モバイルユーザーの視点に立って使いやすさを追求していく事を心がけましょう。