パソコンのChrome、Firefox、IE11、Safari、Operaブラウザでスマホ表示の動作確認をする方法

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

先日、Googleが「モバイルフレンドリー」なサイトかどうかを検索順位に反映することを発表しました。


Google では、4 月 21 日より、ウェブサイトがモバイル フレンドリーかどうかをランキング要素として使用し始めます。

Google ウェブマスター向け公式ブログ: 検索結果をもっとモバイル フレンドリーに

このアルゴリズム変更で、モバイル対応していないサイトは、モバイルの検索結果で順位を下げる可能性が高いです。

そうしないためには、モバイル フレンドリー テストでサイトをチェックして、「問題ありません。 このページはモバイル フレンドリーです。」と出るようなサイトにするのが望ましいです。

問題ありません。 このページはモバイル フレンドリーです。

ただ、そのようなサイトを作るには、スマホでどのように表示されるかを確認しながら作る必要があります。

そういった場合には、実機で確認するよりも、ブラウザの表示のエミュレーション(仮想実行)機能を利用して確認するのが作業効率が高いです。

幸い、Chrome、Firefox、IE11、Safari、Operaのような各種ブラウザには仮想的にスマホ表示させるための機能があらかじめついています。

今回は、各種ブラウザのデフォルトの機能で、スマホやタブレット表示をエミュレートする方法を紹介します。

今回は、古い狭い端末の表示確認用にiPhone(3か4)を例にしたエミュレート方法を紹介したいと思います。

目次

スポンサーリンク
レクタングル(大)広告

Google Chromeで動作確認

スマホ表示をエミュレートするなら、Chromeが最も簡単かもしれません。

まずは、Chromeを起動して動作確認をしたいページを表示させます。

ページを表示

ページ表示後、F12キーを押します。もしくは、ページのどこでも良いので右クリックボタンを押して、「要素を検証」を選択します。

要素を検証

すると、以下のような画面が表示されるので、デバイスモードボタン(デバイスモードボタンのアイコン)をクリックします。

デバイスモードボタン

すると、以下のような画面になります。

デバイスモードが起動した状態

あとは、デバイス選択用のドロップダウンメニューから目的のデバイス(今回の場合はiPhone4)を選択します。

デバイスのドロップダウンメニューから目当てのデバイスを選択

デバイスを選択すると、そのデバイスの解像度でエミュレートされます。

ChromeのデバイスでiPhone4を選択

うまく表示されない場合は、リロードをしてみてください。

Firefoxで動作確認

Firefoxでスマホ表示をエミュレートするには、アドオンをインストールる必要があります。

アドオンの設定

今回は、User Agent Switcherというアドオンを利用した方法を紹介したいと思います。

まずは、User Agent SwitcherからアドオンをインストールしてFirefoxを再起動してください。

User Agent Switcher

インストール後、メニューボタン(Firefoxメニューボタン)を押して「カスタマイズ」をクリックします。

メニューボタンを押してカスタマイズを押す

すると以下のような、「User Agent Switcher」のアイコンがあるので、アイコンをドラッグしてツールバーにドロップします。

アドオンをツールバーにセットする

以下のように、アイコンが設置されたらカスタマイズを終了します。

アイコンが設置されたらカスタマイズを終了

次に先程設置したアイコンをクリックして、「ユーザーエージェントの設定(Edit User Agents)」をクリックします。

ユーザーエージェントの設定

以下のようなダイアログが表示されるのでOKボタンを押してください。

ユーザーエージェントの設定をOK

すると、以下のようなメニューが表示されるようになるので「iPhone3」を選択します。

iPhone3が表示される

その他の端末の登録

その他のユーザーエージェントを登録するには、「New→New User Agent」から登録してください。

新しいユーザーエージェントの設定

ユーザーエージェント情報などは、以下などを参考にしてください。

参考 userAgent一覧/ユーザーエージェント一覧

開発ツールから表示

次に、動作確認をしたいページを表示させます。

ページ表示後、F12キーを押します。もしくは、ページのどこでも良いので右クリックボタンを押して、「要素を調査」を選択します。

「要素を調査」を選択

すると以下のような画面が表示されるので、レスポンシブデザインモード(レスポンシブデザインモードボタンのアイコン)ボタンをクリックします。

レスポンシブデザインモードボタンを押す

すると以下のように「レスポンシブデザインモード」で表示されます。

レスポンシブモードの表示

画面の大きさを変更するには、プリセットを変更するか、枠をドラッグ&ドロップで調節してください。

プリセットを変更を

Firefoxは、アドオンの設定が少し面倒くさいです。

IE11で動作確認

IE11は、デフォルトの機能だけでスマホ表示をエミュレートできます。

開発ツールの起動

まずは、IE11を起動して動作確認をしたいページを表示させます。

ページ表示後、F12キーを押します。もしくは、ページのどこでも良いので右クリックボタンを押して、「要素を検証」を選択します。

IE11の「要素の検査」

すると、以下のように開発ツールが表示されるので、「エミュレーション」タブを選択してください。

エミュレーションを選択

ユーザーエージェントの設定

エミュレーションタブ内の、「ユーザーエージェント文字列」を「カスタム」に選択します。

ユーザーエージェント文字列

すると、以下のように「カスタム文字列」入力フォームが表示されます。

カスタム文字列入力フォーム

その入力フォームに、端末のユーザーエージェントを入力してエンターキーを押します。

カスタム文字列にユーザーエージェントを入力

今回は、iPhone4表示をエミュレートするので以下のユーザーエージェントを入力しました。

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0_1 like Mac OS X; ja-jp) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A306 Safari/6531.22.7

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

ディスプレイ設定

あとは、「ディスプレイ」項目から画面の大きさを設定します。

「向き」を「縦」に選択した後、「解像度」のドロップダウンメニューから「カスタム」を選択します。

向きを縦に、解像度をカスタムに

あとは以下のように幅と高さを設定します。

  • 幅:320
  • 高さ:480

幅と高さの競って

すると、以下のようにエミュレート表示されます。IE11でエミュレート表示

設定したユーザーエージェントは、次からはサジェストする形で表示されるので再入力は不要になります。ただ、ディスプレイの大きさを変更するのはちょっと面倒くさいですね。

Safariで動作確認

Safariはまず、「開発ツール」を有効にする必要があります。

当方は、Windowsしか持っていないので、Windows版での説明になります。もしかしたら、iOSのものと違うかも。

開発ツールの有効化

まずは、Safariの「設定ボタン」から「設定」メニューを選択します。

Safariの設定ダイアログを開く

ダイアログが表示されるので「詳細」タブを選択し、「メニューバーに”開発”メニューを表示」にチェックをつけて閉じます。

詳細メニューから「メニューバーに開発メニューを表示」にチェック

その後、設定ボタンから、「メニューバーを表示」を選択してメニューバーを表示させておきます。

メニューバーを表示

ユーザーエージェントの選択

あとは、メインメニューから「開発→ユーザーエージェント→Safari iOS 4.3.3 – iPhone」を選択します。

2015-04-04_13h24_58

画面をリロードして、画面幅を変更するとスマホのように表示されます。

Safariでスマホ表示

画面幅はマウスのドラッグ&ドロップで変更するしかないようです。

Operaで動作確認

オペラは、Chromeと同じコンポーネントを利用しているので、多少操作方法は違いますが基本的な使い方はChromeと同じです。

デベロッパーツールの起動

動作確認したいページを表示して、ページのどこでも良いので右クリックして「要素を検証」をクリックします。(オペラデフォルトでは、F12でデベロッパーツールは表示されない。)

Operaの右クリックメニューから要素を検証をクリック

オペラデフォルトの設定だと、デベロッパーツールは右側に表示されるので、「デバイスモード」ボタンをクリックします。

オペラのデバイスモードボタンをクリック

デバイスのドロップダウンリストから「iPhone4」を選択します。

デバイスのドロップダウンリストからiPhone4を選択

選択後、ブラウザをリロードすると、以下のようにエミュレート表示されます。

オペラのiPhone4をエミュレート表示

多少の違いを除けば、操作はほとんどChromeと同じです。

まとめ

このように、ブラウザの機能を使って、スマホや、タブレットなどの表示をエミュレート(仮想実行)することができます。

個人的には、Chrome(Operaも)のエミュレート機能が群を抜いて使いやすいと思います。

サイトの作成中や、Wordpressテーマの編集中などは、こういったブラウザの機能で動作確認をして、公開時に持っている実機などで動作確認をすると、作業効率は良いです。

ただ、実機すべてでは、動作確認できないので、以下のGenymotionを利用して仮想端末環境を作成し、動作を検証する方法などもあります。

Androidエミュレーター「Genymotion」のインストール方法。パソコンで様々なモバイル端末環境を構築可能。
最近、Genymotionというソフトを知りました。 Genymotionは、オープンソースで開発されている高速な仮想Androidエミュ...

これだと、実機に近い形で動作確認することができます。

Android Chromeとかをインストールする場合は以下の設定をする必要があります。

Androidエミュレーター「Genymotion」でGoogle Playアプリが利用できる環境の作り方
先日、様々な端末のAndroidテスト環境を手軽に作成できる「Genymotion」のインストール方法を紹介しました。 けれど、Geny...