簡単!PCでスマホサイトを見る方法|主要ブラウザ別

Pocket

トップ画像スマホサイトを見ることが出来るのはスマホだけではない。
ブラウザの機能やアドオンを使うことで、PCからでも見ることが可能だ。

そこで今回は、主要ブラウザ(IE、Chrome、Firefox、Safari)からスマホサイトを見る方法をお伝えする。
ぜひ参考にして欲しい。

<目次>
Internet Explorerの場合
Google Chromeの場合
Firefoxの場合
Operaの場合
Safariの場合

Internet Explorerの場合

標準で実装されている開発者ツールにあるユーザーエージェントの切り替え設定を使うことでスマホサイトを見ることが出来る。
ただし、この設定はIEのバージョンが9以降でないと実装されていない為、IE9がインストールできないWindows XPでは利用できない。

IE8以前を使っている場合は以下の方法でPCからスマホサイトを見ることが出来る。
・IEを最新のバージョンにアップグレードする
・他のブラウザで見る

今から記述するユーザーエージェントの切り替え設定は、「Internet Explorer 11」と「Internet Explorer 10/9」で少し手順が異なるため、2つに分けてお伝えする。

Internet Explorer 11

1.ツールボタン→[F12 開発者ツール] をクリックする または [F12]キー を押す

IEの場合1

2.開発者ツールが表示

IEの場合2

3.左アイコンの一番下 [エミュレーション] をクリックする

IEの場合3

4.ユーザーエージェント文字列のプルダウンから [カスタム] をクリックする

IEの場合4

5.カスタム文字列にユーザーエージェントを入力し [Enter]キー を押すとWebページが再読み込みされる

ユーザーエージェント一覧

IEの場合5IEの場合

PC表示に戻したい場合は [ユーザーエージェント文字列] 内の [規定] をクリックする

IEの場合

以上で完了。

Internet Explorer 10/9

1.ツールボタン→ [F12 開発者ツール] をクリックする または [F12]キー を押す

IEの場合6

2.開発者ツールが表示

IEの場合7

3.ツール→ユーザーエージェント文字列の変更から [カスタム...] をクリックする

IEの場合8

4.フレンドリ名: と ユーザーエージェント文字列: を入力し、[追加] をクリックする

IEの場合9

5.[設定] をクリックすると、入力したユーザーエージェントが追加されている
尚、PC表示に戻したい場合は [ユーザーエージェント文字列の変更] 内の [規定] をクリックする

IEの場合10

以上で完了。

Google Chromeの場合

標準機能であるデベロッパーツールで見ることが出来る。
※以下はWindowsで行ったものをキャプチャーしているが、Macでも同様の手順で見ることが可能。

1.右上の設定アイコン→ [ツール] → [デベロッパーツール] をクリック

Google Chromeの場合1

2.右上にある「>三」のようなアイコンをクリックし、 [Emulation]タブを選択する

Google Chromeの場合2Google Chromeの場合3

3.[Device] → [Model:] にて様々な機種が選択でき、クリックすると画面幅がリサイズされる

Google Chromeの場合4Google Chromeの場合5

4.このままだとディスプレイのサイズが変わっただけなので、再読み込みボタン(F5)を押してリロードすることで、スマホ用の表示に切り替わる

Google Chromeの場合6

PC表示に戻したい場合は [Emulation] 内の [Reset] をクリックする

chromeの場合

以上で完了。

Firefoxの場合

Firefoxでは標準機能でスマホ表示できない為、アドオンを使用する。
シミュレータ系のアドオンは複数あるが、ここでは「User Agent Switcher」をご紹介する。

1.下記のページにアクセスし、「User Agent Switcher」をインストールしてFirefoxを再起動する

「User Agent Switcher」アドオン追加ページ

Firefoxの場合1

2.User Agent Switcherが追加される

なお、デフォルトでインストールされているユーザーエージェントは数が少なく古いので、追加する必要がある

Firefoxの場合2

3.User Agent Switcher用のxmlファイルをダウンロードし、 [Edit User Agent] の [import] からデータをインポートする

今回は下記のサイトからxmlファイルをダウンロードさせて頂いた。(インポート手順も記載されている)
我流天性がらくた屋

4.追加したら、利用したいユーザーエージェントをし、ページを再読み込みすればスマホ用の表示に切り替わる

Firefoxの場合3

PC表示に戻したい場合は [Default User Agent] を選択する

Firefoxの場合

以上で完了。

Operaの場合

Operaでは標準機能でスマホ表示できない為、アドオンを使用する。
シミュレータ系のアドオンは複数あるが、ここでは「User Agent Switcher」をご紹介する。

1.下記のページにアクセスし、「User Agent Switcher」をインストールする

「User Agent Switcher」アドオン追加ページ

Operaの場合1

2.インストールが完了すると右上にアイコンが表示される

Operaの場合2

3.ユーザーエージェントを選択すると自動的にリロードされ、スマホ用の表示になる

Operaの場合3

PC表示に戻したい場合は [Default] を選択する

Operaの場合

Safariの場合

標準機能である開発メニューを利用して見ることが出来る。
※以下はWindowsで行ったものをキャプチャーしているが、Macでも同様の手順で見ることが可能。

1.右上の歯車のアイコンから「設定」をクリックする

Safariの場合1

2.「詳細」タブから「メニューバーに”開発”メニューを表示」にチェックを入れる

Safariの場合2

3.「メニュー」→「開発」→「ユーザエージェント」→「Safari iOS ○.○.○ — iPhone」をクリックすると、自動的にリロードされ、スマホ用の表示になる
尚、PC表示に戻したい場合は [デフォルト(自動選択)] を選択する

Safariの場合3

以上で完了。

Pocket

無料ebook:ミナクル式スマホサイト改善
スマホECの売上を2割アップする!
スマホサイト改善ちょっとしたコツ
76連発レポート!

業界によっては6割以上がスマホからのアクセスになりましたが、「実際にどうサイトを改善したらいいかわからない」という声をたくさん頂きます。

本PDFは、弊社のお客様に改善提案する中で生まれたノウハウを体系化した全100ページ以上にわたる資料です。

  • 自社のサイトは大丈夫だろうか
  • スマホサイト改善と言っても実際どうしたらいいか分からない
  • スマホでの売上をアップしたい

などとお考えの方はぜひご覧ください。

ebook無料でダウンロードする

【弊社実績一例】



ヤマハ発動機株式会社様/積水化学工業株式会社様/株式会社パルコ様/株式会社エポスカード様/アディダス ジャパン株式会社様/株式会社フジゼロックス様/シュウウエムラ様/ダノンジャパン株式会社様/株式会社マイナビ様/第一三共ヘルスケア株式会社様/株式会社サイバーエージェント様/株式会社船井総合研究所様

コメントをどうぞ

*