top3

プラウザでスマホ画面を表示をしPCで確認する方法!切り替えが簡単!

Pocket

2350173640_a3eef9c369

いまやサイトへのアクセスはパソコン経由よりもスマホ経由が増えてきています。

そのために、サイト運営者にとってスマホ画面からは自分のサイトがどうみえるのか?を意識することは、とても大切なことです。


そのためには実際にスマホを使ってどのようにみえているのか確認します。


ですが、正直自分のスマホを触って「どんな感じで写っているんだろう??」と確認するのは面倒なんです。

「スマホで見たいサイトを確認するだけだから、そんなことないだろ?」と思う人もいるでしょうが、その「ちょっと」がもともと、面倒くさがりの僕にとっては大きかったりするんです。


そんなときパソコンでスマホ画面でいいなーと思っていたのですが、簡単にできる方法があったんですね。。。


僕と同じ、愛すべき面倒くさがりさんは是非やってみてください。
(もちろん、スマホなんて持ってないよ、という人も)

スマホ画面をPC画面で!


Mobilizerという無料のソフトを使うとスマホ表示ができるようになるのですが、どうやら使いづらいようです・・・

ですので、Google Chromeの拡張機能でもあるsmartphone simulatorをオススメします。

拡張機能なので、画面の右上にアイコンが表示されワンクリックでPCでのスマホ画面表示&非表示ができます


もちろん、 「Chromeなんて使いたくない!」という方はMobilizerでもいいかと思います。


この機会にChromeを使ってみようと考えている方は、まずはダウンロードしちゃいましょう。
                  

それではChromeがインストールされているとう前提で話を進めたいと思います。

まずはsmartphone simulatorのダウンロードページに進み、「無料」をクリックしましょう。

b81c01729b45581d9f51559916872e43
                  

「追加」をクリック

5eebbebb45639f49d4208eb6f9c64e99
                  

すると、PC画面の右上にsmartphone simulatorのアイコンである「S」という文字が表示され、その上に「off」と書かれています。

1ca2a947831b68cc5622cda261e93eae

今のPC画面はスマホ表示になってませんよーという意味です。
                  

で、そのアイコンをクリックすると、「S」が緑色になり、その上に「on」と表示されるようになりました。

123788086f2bc2c4fa47854fec64d644
                  

それではこの状態でyahooの画面をみてみましょう。

06245e2636c0044ca0045f3e14f4b044

                  

83694b77a3ed94d8a788b18f9d976228

いつもの画面ではちょっと変わったのですが、本当にスマホ表示されているのかわかりません。

確かめるために、横幅をグーッと縮めてみましょう
                  

9b871ae00329bfa47f6c89043e8d1938

はい、これならスマホ画面と同じって理解できるようになりましたね。

このように、「on」にした場合は画面の横幅を縮めることで、実際のスマホ画面と同じ表示をさせることができます。



自分でサイトを運営している方は、PC画面でみやすくレイアウトがされていても、いざスマホ画面でみてみたら読みづらくて仕方がない・・・ということもあるでしょう。

そんなときも手軽にワンクリックでスマホ表示ができるこの拡張機能は便利だと思いますよ。

コメントを残す

サブコンテンツ