WEBデザイン

PCでスマホ表示を確認する方法

WEBデザイン

スマートフォンの復旧によりサイトへのアクセス元がジャンルによっては、PCよりもスマホの割合の方が多いサイトも増えてきました。

サイト作成時に、スマートフォンで表示をチェックするは面倒ですよね。

PCからでもスマホでの表示を確認する方法がいくつかあるので、紹介したいと思います。

WEBサイトを利用してチェックする

WEBサイトでスマホ表示を確認する事ができ、最も簡単で手軽な方法でおすすめです。

タイプの違う2つのサイトで確認する事ができます。

『Responsive Design Testing』で表示する

Responsive Design Testing

スマホ表示を確認したいサイトのURLを入力し、『Enter』を押せばスマホ画面が表示されます。

一度にiPhoneやiPadなど複数のデバイスでの表示を確認したい時に便利。

『Responsive Web Design Test Tool』で表示する

Responsive Web Design Test Tool

iPhone以外にもGALAXYなどの画面表示を切り替えて表示する事ができる。

縦、横の切り替えがワンタッチで切り替えできるので、Responsive Design Testingよりもこちらの方が使い勝手はいいかも。

ブラウザのツールを使って確認する

ブラウザのツールを使って確認する事もできます。

Google ChromeとSafariを使った2つの確認方法があります。

Google Chromeののデベロッパーツールを使って確認する

Google Chromeののデベロッパーツールを使用して確認する事もできます。

1、Google Chromeのメニュバーになる『表示』>『開発/管理』>『デベロッパーツール』をクリック。

2、画面右下の歯車のマークをクリックします。

3、『Overrides』を選択し、『User Agent』と『Device metrics』にチェックを入れて、『User Agent』で表示させたいデバイスを選択します。

詳しい設定方法は、『てっく煮ブログ』さんの記事を参考にしてください。

Google Chrome で超手軽にスマホ向けデザインを確認する方法

Google Chromeを使っている人は、直ぐに使えるので、便利だと思います。

使い勝手は、『Responsive Design Testing』や『Responsive Web Design Test Tool』の方が個人的には使いやすいです。

Safariの開発機能を使って確認する

Safariの開発機能を使ってスマホの画面表示を確認する事ができます。

詳しい設定方法、使い方は、下記記事を参考にしてください。

スマートフォンの表示をPC(パソコン)で見る方法:Safariブラウザ

普段Safariを使っていない人には、面倒に感じる方法かもしれません。

PCでのスマホ表示は結局どれが使いやすいのか?

個人的には、最初に紹介したWEBサイトを使っての表示確認が最も手軽で使いやすいかなと思います。

他にも、Google Chromeの拡張機能やフリーソフト『Mobilize』や『iBBDemo3』を使ってスマホ表示を確認する事もできますが、いずれもWEBサイトで確認するのと比べるとダウンロードが必要な割にはといった感じです。

一通り使ってみましたが上記のやり方は、レスポンシブ・ウェブデザインに対応したサイトやスマホ対応のサイトであれば、確認はできますが、viewport の設定が無視されていて表示幅を狭めて擬似スマホ表示しているだけなので、スマホ対応していないサイトを見ても幅が切れた状態でしか表示されません。

スマホ対応していないサイトのスマホからの見え方をチェックするには、実際にスマートフォンから確認するしかないようです。

コメント