Google ChromeでPCサイトのスマホ表示画面を確認する方法 | LIVE YOUR LIFE

 

Google ChromeでPCサイトのスマホ表示画面を確認する方法

 

スマートフォンが広く普及した昨今では、多くのWEBサイトがスマホ対応(レスポンシブデザイン)を取り入れるようになりました。

 

というよりむしろ、レスポンシブデザインを取り入れていないサイトの方が珍しいのかもしれません。

 

そうして閲覧者におけるスマホユーザーの割合が増してきた中、サイトがスマホではどのように表示されるのか?ということは頻繁にチェックしておきたいところ。

そこで実際にスマホ画面で確認するのがベストなわけですが、色々な機種や解像度の媒体がある中でいちいち実機で確認するのは面倒かもしれません。

 

そんな時に役立つのがGoogle Chromeの『デベロッパーツール(開発者ツール)』

 

この機能を使えば、デスクトップのブラウザ上でスマホ表示画面を確認することができます。

 

Google Chromeにデフォルトから実装されている機能のため、拡張機能を追加する必要もなく、操作自体もとても簡単。

解説をもとに機能を活用し、スマホユーザーに優しいWEBサイト制作を進めていきましょう。

 

Google ChromeでPCサイトのスマホ表示画面を確認する方法

 

PCサイトのスマホ表示画面を確認するには、まずGoogle Chromeで対象のページを開きましょう。

 

そして、Google Chrome画面の右上にあるメニューボタンをクリックし、『その他のツール』→『デベロッパーツール』を選択します。

 

次のようにデベロッパーツールが表示されるので、ツールバーにあるタグの中から『Toggle device mode』というスマホアイコンをクリックしましょう。

 

すると、表示させたい画面サイズに沿った媒体名が表示されるので、お好みで確認したい媒体名を選択しましょう。

 

ここで確認できるのは、

  • Galaxy S5
  • Nexus 5X
  • Nexus 6P
  • iPhone 5
  • iPhone 6
  • iPhone 6Plus
  • iPad
  • iPad Pro

上記の8種類の機種に加えて、『Responsive』を選択すればお好みで縦横サイズを設定することもできます。

 

もし正確に確認画面が表示されない場合には、ブラウザを更新してみてください。

 

以上、とても簡単にパソコンのブラウザ上で、サイトのスマホ表示を確認することができました。

 

注意:完全にスマホ表示画面と一致するわけではない

 

ただし、1つ注意してほしいのが『デベロッパーツールで表示されたものが、完全にスマホ表示画面と一致するわけではない』ということ。

 

というのも、あくまでデベロッパーツールは、デスクトップ上で表示されるサイトデザインの幅を他の媒体のものに縮めるツールであるためです。

 

そのために、例えば『スマホのみグローバルメニューが、アコーディオン形式からハンバーガー形式になる』という設定をしている場合でも、デベロッパーツールではアコーディオン形式でしか表示されないということが起こり得ます。

このように、ブログパーツによってPC・スマホでの表示方法を変えている際などには、スマホで見る画面と『全く同じもの』が表示されない可能性があるわけです。

 

ですので、もしデベロッパーツールを使ったデスクトップ上での表示に不安や懸念があった場合には、実際にスマホの画面で確認してみると良いでしょう。

 

今回紹介した方法は、

  • どのように文章が改行されるのか?
  • 記事のデザインは見やすいか?
  • ブログデザインに崩れはないか?

このあたりのデバイスごとの違いを確認する方法として、うまく活用していきましょう。

 

最後に

 

以上、Google Chromeの『デベロッパーツール(開発者ツール)』を活用して、PCサイトのスマホ表示画面を確認する方法を解説しました。

 

レスポンシブデザインはこれからのWEBサイト運営において必須とも言える事項なので、まだサイトに取り入れていない場合には、早急に対応していきましょう。

 

特に今回紹介したGoogle Chromeのデベロッパーツールは、簡単な操作でスマホ表示画面が確認できる便利なツール。

サイトデザインに手を加える際やスマホユーザーから見た記事のイメージを確認したい際には、どんどん活用していきましょう。

 

何よりWEBサイトのユーザビリティを高めるという意味でも、こういった小さな作業や確認を怠らないようにしていくと良いですね。

 


MAIL MAGAZINE

RIKU

最後まで読んでいただきありがとうございます!

僕が運営しているメール講座では、
自ら立ち上げたメディアから3ヶ月で月収10万円の収益を得た方法
会社に依存せずに個人で収入を得て生きれるようになった経緯など、
こちらのオフィシャルメディアではできないお話をしています。

無料で参加することができるので、ぜひ気軽にご参加くださいね:)

 

 

     

公開日:2017/07/26

コメントを残す

サブコンテンツ

TO THE TOP