中小企業のためのコンピュータ活用を応援!
mail:メールアドレス

スマホサイトをパソコンで表示する方法まとめ 【2014年版】

最終更新日:2014年11月27日


スマホ用のサイトを作成するときに、デザインを確認するのをいちいち実機でおこなっていたら大変です。

パソコンでスマホサイトを確認する方法はいくつかあります。 ここでは、パソコン上でスマホサイトを確認する方法をいくつかご紹介しますので、自身の目的に合っていて簡単な方法を見つけてください。

ブラウザで確認する方法

まずは王道のブラウザだけでチェックする方法です。
特に新たにインストールなどをする必要はありません。
IEやFireFox,Chromeなどのブラウザを起動してF12キーを押すだけです。

F12キーを押すと、開発者ツールが起動します。開発ツールは各ブラウザによって異なりますので以下で説明します。

1. Chromeの場合

F12を押して出てきた部分- このような携帯電話の形をしたボタンをクリックします。 クリックすると左側に黒い背景の小さな画面が現れ、現在表示されているサイトのスマホページが表示されます。

表示された画面にスマートフォン用のサイトがある場合は、ページを更新すればスマホ用のサイトが表示されます。

また、以下の「device」の部分を変更するといろいろな機種のサイズにあわせて表示してくれます。

2. IE11の場合

F12を押して開発者ツールを起動すると、下部に操作パネルが表示されます。
左側のアイコンリストをスクロールしていくと、PCとスマホのアイコンがあるのでそれをクリックします。

表示された「モード」の中の「ブラウザープロファイル」を「Windows Phone」に変更するとWindowsPhone用の画面が表示されます。

また、「ユーザーエージェント文字列」でカスタムを選び、表示したい端末のユーザーエージェントを入力するとその端末をエミュレートすることができます。

各端末のユーザーエージェント文字列はこちらに掲載されています。

3. Safariの場合

Safariの場合は、F12キーで開発者ツールは起動しません。 以下の手順でユーザーエージェントを変更することでスマホ用のサイトを表示できます。

1. ブラウザの右上にある歯車のようなアイコンをクリックしてメニューを表示
2. メニューから「設定...」を選択
3. 「詳細」を選んで中にある「メニューバーに”開発”メニューを表示」に
チェックを入れ画面を閉じる
4. ブラウザの右上にあるドキュメントのアイコンをクリックしてメニューを表示
5. 開発メニューが出現するので、開発→ユーザーエージェントを選択する
6. ユーザーエージェントを選択すると各ブラウザを選択

デフォルトで選択できはスマホはiPhoneだけですが、「その他...」からユーザーエージェントを入れれば好きな機種に変更できます。

4. FireFoxの場合

FireFoxの場合は、F12で開発者ツール起動後にレスポンシブデザインモードを選択すると スマホやタッチパッドサイズでページを確認できます。

FireFoxでユーザーエージェントを変更する場合は、configファイルを編集するかプラグインを入れる必要があります。

プラグインをインストールする場合

ブラウザでのチェックよりラクに端末を選べるのは、各ブラウザ用のプラグインです。 端末が最初から選べるようになっているので、選択するだけでサイズやユーザーエージェントが設定できるものが多いです。

1. Chromeのプラグイン

Chromeにアドオンできるプラグインの一覧です。

MobileLayouter
実機と同じ画面サイズでWebページのサイズを調整してくれます。
選択できる端末は随時更新されて増えていくようです。
FireMobileSimulator for Google Chrome™
スマホだけでなく、携帯電話の各キャリアのユーザーエージェントやUIDなども偽装することができます。
User-Agent Switcher
右クリックして、選択することですぐにユーザーエージェントが切り替わります。 デフォルトである程度入っていますが、自分で新しくメニューを追加することなども可能です。
User Agent Switcher for Chrome
ユーザーエージェントの偽装ができるプラグインです。
エージェントは自動で追加されるわけではないようです。
2. FireFoxのプラグイン

FireFoxにアドオンできるプラグインの一覧です。

User Agent Switcher
ユーザーエージェントを自分で設定する必要があります。 デフォルトでは、IE6,7,8 サーチエンジンロボット、iPhone3しかありません。
FireMobileSimulator
携帯電話のユーザーエージェントやUIDを偽装できます。
最新端末リストから端末を追加すれば新しく端末を追加できます。
オンラインでレイアウトを確認できるサイト

ブラウザ以外でも、オンラインでスマホサイズでページを確認できるサイトがいくつかあります。 一度に並べて確認できたり、ワンクリックでフレームつきでレイアウトを見れるサイトもあります。

スマホのフレームのような画面に縦、横、サイズ違いなどをワンクリックで表示できます。 表示したいURLは右上のフォームに入力して「View」ボタンで可能です。
http://www.jamus.co.uk
240x320, 320x480, 480x640のサイズを横に並べて表示できます。 見た目をサイズで比べるときに便利です。
http://mattkersley.com
デバイスのサイズを自分で入力して調整できます。 また、各スマホやタブレットのサイズを選択することもできます。
http://responsivetest.net
iPhoneからNexus7、iPad、11インチ~27インチまでさまざまなサイズのデバイスでの表示を確認できます。
http://responsivedesignchecker.com
スマホの画面のフレームに、iphoneやXperiaなどの各機種のサイズで確認できます。 より実機に近いサイズで確認したい場合に便利です。
http://html5-lab.jp
各スマホの実機のエミュレータです。サイトのチェックというよりは、スマホアプリのチェック用でしょう。 無料では、2機種だけ1日1時間使用できるようです。
http://www.scirocco-cloud.com
サイトの真ん中にあるボタンをお気に入りにいれて、確認したいサイトに移動してからさきほどのお気に入りを呼び出すといった少々手間のかかるサイトです。 各スマホのサイズを確認できるのと、タッチパッドを表示できるので入力のしやすさなども確認できます。
http://responsive.victorcoulon.fr