スマートフォン表示をPCで確認する簡単な方法

スマートフォン表示をPCで確認する簡単な方法

サイトを作成していると、スマホの表示がどうなっているのか、気になりますよね。

だから、スマホでどのように表示されているかチェックするのはとても大切です。わたしが保有しているサイト閲覧者は、PCが30%でスマホが70%ぐらいです。

今回は、PCでスマホ表示を確認する方法を紹介します。

デベロッパーツールを使う

Googleクロームだとデベロッパーツールがあるので、それで表示させます。

PCで表示させると、こんな感じですが、

pc_display

これをスマートフォンで表示しているのを確認したいときに、デベロッパーツールを使うと

mobile_display

こんな感じで、表示が確認できます。

 

Macでデベロッパーツールを起動する場合

Macの場合は、

コマンドオプション+『』を同時に押す

デベロッパーツールが起動します。

そのあと、

コマンド+『』を同時に押して

リロード(ページ再読み込み)をします。

Windowsでデベロッパーツールを起動する場合

F12を押すと

デベロッパーツールが起動します。

そのあと、

F5を押すと

リロード(ページ再読み込み)をします。

もしくは、

コントロールシフト+『』を同時に押す

デベロッパーツールが起動します。

そのあと、

コントロール+『』を同時に押して

リロード(ページ再読み込み)をします。

このような表示ができればOKです。

mobile表示

デベロッパーツールのおすすめ機能

わたしは、デベロッパーツールを以下のように使用しています。

スマホの表示チェック

スマホ表示

PCとスマートフォンって思った以上に表示がイメージと違うので、必ずチェックするようにしています。

特に表(table)とか、ボタンとかの表示は、PCだとなかなか分からないので、実装したら必ずチェックしています。

スマートフォンも、iPhoneだけじゃなく、NexusやGalaxyなどのスマートフォン端末の表示もできますし、iPadなどのタブレット端末の表示もできます。

藤本陽介
Web制作会社に勤務していたら、知っている人は多いですが、個人でWebメディアを運営している人は結構知らない人が多いようです。

すごい便利なので、スマホ表示をチェックしてみてください。

CSS(スタイルシート)のチェック

CSS表示

CSSを調整したい時も、デベロッパーツールを起動させて、どこに、どんなスタイルがあたっているのかをチェックしています。

色(色番号)とか、スペース(marginやpadding)を調整するのに、すぐチェックできます。

赤枠で囲った部分をクリックすると、PC表示とスマホ表示が切り替えできたり、チェックしたい該当の部分を指定できます。

藤本陽介
スタイルシートを調整できる人なら、これをみたら自分のやりたいように、すぐに表示を調整できますね。

特にmarginやpaddingがどのように設定してあるのか、わたしはよくチェックします。

ページ速度のチェック

ネットワーク表示

デベロッパーツールでは、ソースコードの情報だけでなく、ネットワークの情報も確認できます。

上の画面でいうと、右上に「>>」というマークがあるので、それをクリックすると、NetWorkが選択できます。

ネットワーク速度表示

ネットワークタブにしてから、リロード(再読み込み)をします。

リロードの方法は先ほど説明したとおり

Macの場合は、コマンド+R
Windowsの場合は、F12か、コントロール+シフト+R

これで、どのファイルをどのぐらいの時間で読み込んでいるかチェックできます。

藤本陽介
ネットワーク情報は、サイトの表示速度をチェックする際に、ファイル圧縮がうまくいってるかとか、キャッシュをしっかり読み込んでいるかとか、どこに問題があるのか原因を特定したいときに、まずデベロッパーツールでチェックしています。

デベロッパーツールは無料で使える

ツール

いかがでしょうか?デベロッパーツールはとても便利ですよね。

驚くのがこれを無料で使えるということです。

藤本陽介
これ、3万円くらいのツールとして販売されていたとしても、わたしだったら購入します。

これが無料で使えるなんて!使わないともったいないですね!

わたしは、スマホ表示をPCで確認する際は、デベロッパーツールを使って確認していますが、デベロッパーツールはいろいろな使い方があるので、知らなかった方は、ぜひ一度トライしてみてください。

「これ知らなかった!」とか、「こんな使い方もあるよ!」とかコメントなどで教えてもらえると嬉しいです。

スマートフォン表示をPCで確認する簡単な方法

コメントを残す

メールアドレスが公開されることはありません。