iBitzEdge

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

Pey

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

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

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

Google Chromeでスマホ表示

  1. メニューからデベロッパーツール

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

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

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

  3. デバイスを選択

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

Mozilla Firefoxでスマホ表示

  1. メニューから開発ツール

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

  2. レスポンシブデザインモード

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

  3. プリセットの選択

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

Microsoft Edgeでスマホ表示

  1. メニューから開発者ツール

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

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

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

     

Internet Explorerでスマホ表示

  1. メニューから開発者ツール

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

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

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

     

Operaでスマホ表示

  1. メニューから開発者用ツール

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

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

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

  3. デバイスを選択

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