ホーム > ホームページお役だち情報 > PCでサイトをスマホ画面表示する方法

PCでサイトをスマホ画面表示する方法

まずはウィンドウ幅を狭めてみよう

最近の主流としてウィンドウ幅に応じてレイアウトが変化されるものがあります。

ウィンドウ幅に応じて変化するデザインを専門用語で「レスポンシブデザイン」と呼びます。

まずはウィンドウの幅を狭めてみてください。

横スクロールが発生しないように調節されているサイトであればレスポンシブ対応しています。


なお、正確にスマホの幅にする方法や実機(スマホ)との違いは、後述するブラウザ別の方法をご参照ください。


こちらの記事でスマホ対応について掲載しています。



パソコンのブラウザを、スマートフォンであると認識させよう

ウィンドウ幅を狭めてもスマートフォン表示されないときの方法です。

一昔前の対応方法は、端末がパソコンかスマートフォンか判断し、スマートフォンであれば表示を切り替えたり、スマートフォン専用サイトへ移動させていました。


一時的にブラウザの設定を変えスマートフォンであることにして、パソコンからスマホ専用サイトを確認することができます。

専門用語で「ユーザーエージェントを変更する」ということになります。


ブラウザごとに設定方法が異なりますので、ご自身のブラウザにあったものをご利用ください。



提供元サイトの利用規約等をご確認のうえご利用ください。

※詳細につきましては提供元様へご確認ください。



Chromeブラウザ(オススメ!)

Chromeブラウザがオススメです。実際のスマートフォン表示に非常に近く表現でき、スワイプもできます。

さらにChromeの場合は拡張機能をインストールする必要がないうえに、ユーザーエージェントの変更と画面サイズの変更が同時に行われるため、操作の手間が減ります。


スマートフォンサイトを見る方法

  1. F12を押して「Developer Tools」を開きます。
    WS000000.JPG
  2. 画面右上の WS000001.JPGをクリックします。すると下に枠が表示されます。
  3. 「Emulation」をクリックします。
    ここでWS000002.JPGが表示されていたらクリックします。
    WS000012.JPG

  4. 「Device」の「Model」から任意の機種を選択します。Modelによって画面の幅や高さが変わります。
    WS000015.JPG

  5. F5キーを押して画面を更新します。
  6. スマホ版が表示されました。
    WS000016.JPG

実機(スマートフォン)との比較

実際のスマートフォン表示に非常に近く表現でき、スワイプもできます。

実機とパソコンのChromeブラウザを比べると以下の点が異なります。

  • フォント(文字)の見やすさ(実機の方が滑らかです)
  • 画像の解像度(きれいに見えるか、ぼやけて見えるか)

最終的には実機のスマホで必ず確認しましょう。


パソコン版に戻す方法

  1. Resetを押すか「Developer Tools」を閉じます。
  2. F5キーを押して画面を更新します。


別タブ表示の扱い

別タブで開いた新しいページはスマートフォン表示になりません。新しいタブが開かれたらその都度設定する必要があります。




Internet Explorer 11

都度ユーザーエージェントやサイズを入力する必要があります。

スマホ版を見る方法

  1. F12キーを押して開発者ツールを開きます。
  2. 「エミュレーション」をクリックします。
    WS000057.JPG
  3. 「ユーザーエージェント」を「カスタム」にします。
    WS000058.JPG
  4. 「カスタム文字列」に以下のユーザーエージェントを入力します。
    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
    WS000059.JPG
  5. スマートフォン版サイトが表示されます。(F5を押さなくても変わります。)
    画面の幅をスマートフォンの幅くらいまで縮めます。


正確にスマホのサイズ幅にする方法

さきほどの「開発者ツール」「エミュレーション」右側、「ディスプレイ」を変更します。

以下のように設定します。

WS000060.JPG

スマホ版版が表示されました。
WS000061.JPG


実機(スマホ)との比較

一部実際の表示と異なったり、画面が見づらい場合があります。


パソコン版に戻す方法

開発者ツールを閉じるとパソコン版に戻ります。


別タブの扱い

別タブはスマホ表示になりません。新しいタブが開かれたらその都度設定する必要があります。




まとめ

まずはウィンドウ幅を狭めましょう。


スマホ表示されないときはユーザーエージェントを変更しましょう。ブラウザはChromeがおすすめです。実際の表示に非常に近い画面を確認できます。Chromeが使えなければForefoxを使いましょう。IE11は実機と同じように表示されない場合があります。


ユーザーエージェントを変更しても変わらない場合はスマホ対応をしていないでしょう。


いずれにしてもパソコンでスマホ表示するのはあくまで「一時的に」です。最終的には実機のスマホで確認しましょう。


こちらの記事でスマホ対応について掲載しています。


上部へ