【簡単】パソコンからスマホ表示をチェックする方法!Google Chrome編

Chrome lapel pinphoto by Stephen Shankland

こんにちは。今回はGoogle Chromeを使ってPC画面からスマートフォン表示を確認する方法をご紹介します。

いつでもどこにいても誰かに捕まってしまうのが煩わしくなってしまい、僕はスマホを持っていません。自宅のPCとiPadで大抵は事足ります(友人には携帯くらい持てと怒られますが・・・)。

ただ、自分のサイトやブログがスマートフォンでどのように表示されているのかチェックするときだけ困っていました。とっても簡単にできますので試してみてください。

スポンサードリンク

PCのGoogle Chromeからスマホ表示をチェックする方法!!

説明ではGoogle Chromeのバージョン 43.0.2357.130 mを使用しています。少し異なる点もあるかもしれませんが、大まかには同じだと思います。

当ブログのトップページを使用して説明していきます。

まず、右上の「設定」ボタンをクリックします。
スマホ表示前・PC画面

次に、「その他のツール」から「デベロッパーツール」をクリックしてください。
スマホ表示前・PC画面2

コードの列がたくさんあります。無視して矢印の「スマホマーク」をクリックします。この時点ではまだスマホ表示ではなく、パソコン表示が縦長になっているだけです。
スマホ表示前・PC画面3

“You might need to reload the page for…”と出るときもあります。「もう一度リロードした方がいいかも。」という意味なので、ブログのタイトル(easy and easy)をクリックしてページを読み込みます。
スマホ表示前・PC画面4

タイトルをクリック。
スマホ表示前・PC画面4

スマホ表示されましたね。
スマホ表示

デベロッパーツールでスマホ表示に設定した後でも、通常通りページ内のリンクからリンク先へと進むことができます。試しに一番上のページに飛んでみます。
スマホ表示2

リンク先もスマホ表示になっていますね。
スマホ表示3

Chromeのスマホ表示で端末を選ぶ方法!

スマホといっても様々な種類の端末もあります。スマホ表示の上部にある「Select model」をクリックするとプルダウンから端末を選ぶことができます。今回は「Apple iPhone6」に変更してみましょう。

端末変更

クリック後。少し大きくなりました。
端末変更(iPhone6)

これで自分の持っていない端末でどのように表示されているかもチェックできます。

Chromeで表示したスマホ表示からパソコン表示への戻し方!

スマホ表示から通常のPC表示に戻すには、右端の「✕」をクリックすると戻ります。
2015-06-26_2103

最後に。

スマートフォンでページにきてくれるユーザの割合は年々高くなっていますので、モバイルフレンドリーをこれまで以上に意識していきたいところです。最後までお付き合いいただきありがとうございました。

合わせてどうぞ。

スポンサードリンク

シェアしとく?

  • このエントリーをはてなブックマークに追加

フォローすると更新状況をチェックできるし、すげぇ喜びますw