PC画面からスマホ表示を確認する方法

こんにちは、寺おか です。
ブログやWEBサイト、SNSを
PCから編集するって多いと思います。

でも、文章の改行位置などが
PCでは良くてもスマホだと見辛い…

なんてことも出てきます。

そんなときに便利な
PC画面からスマホ表示を確認する方法
をご紹介します。

シンプルなショートカットキー操作のみ
できてしまう優れもの。

これでいちいちPC上で
 ・画面をスマホサイズに縮めてみる
 ・スマホURLを入力して表示させる
 ・スマホで実際に表示させて確認する
というのをしなくても済みますよ^^



使用するブラウザはGoogleChrom

GoogleChromeの「デバイスモード」
という機能を使います。
初回のみ簡単な設定操作が必要です。

これさえ済めば2回目以降は
ショートカットキー操作のみでOKに!

とっても簡単ですので設定してみましょう。



デバイスモード 初回の設定方法

まず、Google Chromeで確認したいページを開く。


『F12』キーを押して
ディベロッパーツールを表示させる。

※画面下、あるいは左右どちらかに表示されます

ディベロッパーツールの左上の
スマホとタブレットのアイコン
をクリック。


すると、端末の画面表示になりました。
これがデバイスモードです。



画面上部の
「Dimensions: Responsive ▼」から
確認したいデバイスを選ぶ。


『F5』キーを押すと選んだスマホ画面に。


元に戻す場合は『F12』キーを押します。
これでデバイスモードが終了します。



2回目以降の簡単ショートカット

一度設定したら

Google Chromeで確認したい画面を開く
 ▼
『F12』を押す
 ▼
『F5』を押す

だけでスマホ表示の確認ができます。

※レスポンシブサイトの場合は『F12』だけでOK!



実際の操作感覚はスマホで確認しよう

Google Chromeのデバイスモードは
とても便利な機能ですが、
あくまでも目安として参考にしてください。

操作感を厳密にチェックしたい場合は、
実際にスマホで表示させて確認しましょう。


いかがでしたか?
こういうちょっとした知識で
日々の作業がぐっと簡略化されますよね。

お役に立ちましたら幸いです。

ではでは、また!


イラストとデザインで
個人ビジネスの『伝わる発信』を

お手伝いしています

≫ ご提供中のサービス