デスクトップブラウザ別サイトのスマホ表示を確認する方法

PeyPey Tips コメントを投稿する

ウェブサイトを運営している人にとっては頻繁に確認していることかもしれないが、現在はスマホに合わせた表示（フォントサイズや幅などの調整）をし、ユーザーにとって閲覧しやすいウェブサイトを作成するために、モバイルからアクセスした時にどのように表示されているかを確認する必要がある。

慣れたユーザーであれば使用しているブラウザから素早くスマホ表示を確認することが出来るが、慣れていないブラウザを使用した場合に戸惑うことがあるかもしれない。
ここでは、主要ブラウザであるGoogle Chrome、Mozilla Firefox、Microsoft Edge、Internet Explorer、Operaの5つのブラウザで、ウェブサイトのスマホ表示を確認する方法を簡単に説明する。

※本記事の内容は執筆時点での情報であり、今後の更新で異なる場合があることに注意していただきたい。

Google Chromeでスマホ表示

  1. Chromeのデベロッパーツールを開く
    メニューからデベロッパーツール

    Google Chromeでスマホ表示を確認したいウェブページを開く。右上の「︙」アイコンのChromeメニューから、その他のツール>デベロッパーツールを選択する。

  2. device toolbarを起動
    デバイスツールバーを起動

    スマホ/タブレットのアイコンのボタンをクリックし、device toolbarを起動する。

  3. Chromeでデバイスを選択
    デバイスを選択

    device toolbar起動後、ウェブサイトが表示されている側の上部に表示されているResponsiveをクリックし、エミュレートしたいデバイスを選択する。スマホのデバイスを選択またはEditから自分で設定した解像度を設定するとウェブサイトのスマホ用表示を確認することが出来る。

Mozilla Firefoxでスマホ表示

  1. Firefoxの開発ツールを開く
    メニューから開発ツール

    Mozilla Firefoxでスマホ表示を確認したいウェブページを開く。右上の「≡」アイコンのメニューから、「開発ツール」を選択する。

  2. firefoxでレスポンシブデザインモードを開く
    レスポンシブデザインモード

    ウェブ開発ツールメニューから、「レスポンシブデザインモード」を選択する。

  3. firefoxでプリセットを選択
    プリセットの選択

    レスポンシブデザインモード起動後、ウェブサイトが表示されている側の上部に表示されている解像度のプルダウンメニューから、プリセットを選択するか、「プリセットを追加」から自分で設定した解像度を設定し、ウェブサイトのスマホ用表示を確認することが出来る。

Microsoft Edgeでスマホ表示

  1. Edgeで開発者ツールを開く
    メニューから開発者ツール

    Microsoft Edgeでスマホ表示を確認したいウェブページを開く。右上の「･･･」アイコンのメニューから「開発者ツール」を選択する。

  2. Edgeでデバイスを選択
    デバイスを選択してエミュレーション

    開発者ツールを起動し、エミュレーションタブを選択する。デバイスをプルダウンメニューからカスタムを選択し、ディスプレイの解像度をプルダウンメニューから選択またはカスタムで自分が設定した解像度に設定すると、ウェブサイトのスマホ用表示を確認することが出来る。

     

Internet Explorerでスマホ表示

  1. IEで開発者ツールを開く
    メニューから開発者ツール

    Internet Explorerでスマホ表示を確認したいウェブページを開く。右上の「」歯車アイコンのメニューから「開発者ツール」を選択する。

  2. IEで解像度を選択
    デバイスを選択してエミュレーション

    開発者ツールを起動し、エミュレーションタブを選択する。ブラウザープロファイルのプルダウンメニューからWindows Phoneを選択し、ディスプレイの解像度をプルダウンメニューから選択またはプルダウン下部のカスタムから自分が設定した解像度に設定すると、ウェブサイトのスマホ用表示を確認することが出来る。

     

Operaでスマホ表示

  1. operaの開発者用ツールを開く
    メニューから開発者用ツール

    Operaでスマホ表示を確認したいウェブページを開く。左上のOperaアイコンのからメニューを開き、開発者>開発者用ツールを選択する。
    「開発者」が表示されていない場合は、その他のツール>開発者用メニューを表示を選択すると開発者メニューが表示される。

  2. operaでdevice toolbarを開く
    デバイスツールバーを起動

    スマホ/タブレットのアイコンのボタンをクリックし、device toolbarを起動する。

  3. operaでデバイスを選択
    デバイスを選択

    device toolbar起動後、ウェブサイトが表示されている側の上部に表示されているResponsiveをクリックし、エミュレートしたいデバイスを選択する。スマホのデバイスを選択またはEditから自分で設定した解像度を設定するとウェブサイトのスマホ用表示を確認することが出来る。