パソコンでスマホサイトを確認する

パソコンでスマートフォン用に作成されたサイトを確認する方法を紹介します。タップやスワイプも再現できます。

パソコンでスマホサイトを確認する

Last update 2015-02-18 09:12

以前、パソコンでスマホサイトを擬似的に表示させるソフトウエアを紹介(パソコンでiPhoneのエミュレーター)しましたが、今回はもっと簡単にそしてもっとそれらしくパソコンでスマホサイトを表示させる方法を紹介します。
もちろん無料。私のようにサイトを作成している人には必須な方法だと思います。
ちなみに私は、iPhone、アンドロイド、タブレットなど10台以上所有しているので、実際にスマホで表示させた時との比較も紹介したいと思います。

Google Chromeでスマホサイトの確認

用意するソフトウエアは、googleが無料で提供しているGoogle Chromeというインターネットを表示するためのソフト(ブラウザといいます)になります。

Google Chromeのダウンロードページへ行き、「Chromeをダウンロード」をクリックします。

利用規約が表示されるので、ひと通り目を通し、「同意してインストール」をクリックします。
なお、「Google Chromeを規定のブラウザとして設定する」をチェックしておくと、以後、インターネットを利用するときは、このChromeが起動するようになります。

インストールが完了すると、デスクトップ上にGoogle Chromeのアイコンが作成されているので、これをダブルクリックして起動します。

スマホで表示したいページを表示します。
このままだとパソコン用のサイトが表示されます。

スマホ用に変更する

スマホでどう見えるか確認したいページを表示させたら、キーボードの「F12(数字の上にあります)」を1回、押します。

すると、このように画面下か右側に何やら難しそうな文字が表示されました。

よく見るとスマホのような小さなアイコンがあるので、ここをクリックします。

すると、このように画面の表示部分が小さくなり、スマホ的な感じになりました。

スマホを選択する

画面の上の方にある「Select model」の部分をクリックすると、スマホの機種を選択できます。
例えばiPhone6でどう見えるか、を確認したいときは、「Apple iPhone6」をクリックします。

黄色い警告が表示されます。(更新してくださいということが書かれている)

URLの右隣にある矢印を1回クリックします。

するとスマホで見た時の画面になりました。

iPhone以外にもGALAXYやiPadなども選択できます。が、日本のメーカーが出しているような世界ではマイナーなスマホは未対応のようです。

以前紹介したiBBDemo3との比較。
ChromeのほうがiPhone6に近いですね。

実際のスマホのブラウザとの比較

こちらはiPhone6のSafariで表示させたところです。

こちらがGoogle ChromeのiPhone6モードで表示させたところ。
微妙に文字の大きさやフォントが違いますが、それでもほぼきちんと再現出来ていますね。

横に並べて比較してみました。

こちらはパソコン版のYahoo!のトップページ。

Google Chromeでスマホ表示させたところ。ちゃんとスマホ用のYahoo!である m.yahoo.co.jpが表示されていました。

スワイプやタップも再現

このGoogle Chromeのスマホモードのユニークな部分が、スワイプやタップも再現されているということです。
マウスカーソルが、このように灰色の丸に変化しています。
で、マウスでクリックしたまま上下に動かすと、それに合わせてページもスクロールされます。
逆にスクロールバーが無効になってしまい、上下にスクロールするにはスワイプか、マウスのホィールを使うしかないようになってしまっています。

その他の機能

解像度はiPhone6の場合、「375 x 667」で表示されるようです。
この解像度は自由に変更できるので、対応していないスマホの機種もここで変更して擬似的に表示させることができます。

その隣にはユーザーエージェントが記入されています。
どうやらここに記載されたユーザーエージェントを送信しているっぽい。
この値は自由に変更できます。

更には通信速度も擬似的に体験できるようです。
例えば制限を受けて遅くなると、250Kbpsに制限されたりしますが、制限された場合、どんな漢字で表示されるか、なんてのも体験できます。

iPhoneとアンドロイドの比較

最後にiPhoneとアンドロイドではどのような違いがあるのでしょうか？

こちらはアンドロイドの標準のブラウザで表示させたところ。

iPhoneのSafari(左側)とアンドロイドの標準ブラウザとの比較。
アンドロイドだと若干文字が太くなるようですね。
アンドロイドの場合、フォントの大きさを変更できる機種もあるので、すべてがこのように表示されるわけではありませんが。

同じカテゴリーの記事

投稿日：2015-02-18 | | |

パソコンでスマホサイトを確認する