【Android】意外と簡単！スマホのWebサイトをPCで見る方法

Androidなどで表示されるスマホ用のWebサイトを、「PCで見たい」と感じることはありませんか？

たとえばPCを操作しながらAndroid端末を触ってサイト表示するのが億劫な場合も、簡単にPCだけでスマホ用Webサイトを表示、作業を継続できます。

スマホ用Webサイトの表示の仕組みはいくつかあり、パターンによってPCで表示する方法が異なるので注意してみてください。

今回はPCでの作業効率化を図りたい方向けに、PCでスマホ用Webサイトを表示するメリットや方法、注意点などを解説していきます。

スマホ用WebサイトをPCで見るメリット！スマホ限定キャンペーン参加も簡単になる

スマホ用WebサイトをPCで表示できると、次のようなメリットがあります。

スマホ用にのみ最適化されているWebサイトが見やすくなる

インターネットには、スマホ用にのみ最適化されているWebサイトも存在します。

パソコンで表示すると

といったWebサイトが該当します。

こういったWebサイトをPCで単に表示すると疲れるのがネックです。

そこでスマホ用Webサイトのデザインとして最初から表示できるようにすると、画面自体は基本縮小しますが返って内容が見やすくなることがあります。

これまでPCで見にくいWebサイトを見たことがある方は、ぜひこれからご紹介する方法でスマホ用Webサイトを表示させてみてください。

スマホ限定キャンペーンのページを表示できる

PCでたとえば「line懸賞に参加したい」と思っても、ページが表示されないことがあります。

表示されない際は「このキャンペーンはスマホからご参加ください」という表示が出るので、あきらめる方もいらっしゃるでしょう。

しかし場合によっては、PC上からスマホ用Webサイトを表示できるようにするとそのままlineアカウントでログイン、キャンペーンに参加できるようになる可能性があります。

これまでいちいちAndroidスマホを立ち上げてスマホ限定キャンペーンに参加していた方は、PC作業をしながらそのままページを開けるので作業効率が上昇するでしょう。

実際私もPCでスマホ限定キャンペーンへよく参加しています。

いちいちPC作業しながらスマホを確認するよりも明らかに楽です。

Webサイト開発の作業が楽になる

PCからスマホ用Webサイトを立ち上げられるようになると、Webサイト開発が楽になります。

そもそも私がPCでスマホ用Webサイトを見るようになったのは、Webサイト開発で必要になったからです。

関係の仕事をしている方は理解できると思うのですが、Webサイト開発では「スマホ用の見た目でコード内容を確認、エラーがないか表示をチェックする」という作業が発生します。

この際はAndroidスマホといったターゲットユーザーが使う端末から見るのが確実ですが、コードを見ながらすぐ訂正を行うといった作業が難しくなってしまいます。

しかしPCのWebブラウザーでスマホ用Webサイトを表示すると、

といった作業が簡単になるのがポイントです。

基本的な開発テクニックではありますが、たとえば「自分のブログでコードを触って開発がしたい」といったケースにも使えるので表示方法を覚えておきましょう。

スマホ用Webサイトを表示させる方法！レスポンシブ変更とUA書き換えの2つから選ぼう

スマホ用Webサイトを表示させるときは、次の2種類の方法があります。

ここからはGoogleChromeをベースに、スマホ用WebサイトをPCで表示させる方法を解説していきます。

レスポンシブな変更を行う

現在のWebサイトの多くは、レスポンシブデザインでできています。

レスポンシブデザインではデザインを設定するファイルの内容を適宜変更することで、

といった各デバイスの見た目に合ったサイトをリアルタイムで表示できるのがメリットです。

PCとスマホで同じはずのWebサイトの見た目が変わるのは、レスポンシブデザインが適用されているからです。

いつもの検索やWebサイト確認においても、レスポンシブデザインの変更は簡単に実行できます。

こういった手順ですぐスマホ用Webサイトを表示可能です。

ちなみに任意で見た目を変更できるので、タブレットの見た目でも画面を表示できます。

ただしWebサイトによっては見た目の操作がシビアなケースがあるので、細かくドラッグで変更しながら見た目を確認してみましょう。

開発者モードでUAを書き換える

WebブラウザーにはUA（ユーザーエージェント）という情報が書き込まれています。

UAは「ユーザーがどの端末のどのWebブラウザーから閲覧を行っているのか」をWebサイトで把握して、適した情報を表示するために使われています。

このUAを簡単に一時書き換えできるモードがPCブラウザーには存在しています。

完ぺきではありませんが、スマホで見た際にどうなるかより精密にシミュレーションできます。

任意でブラウザーの表示幅を変更するよりも確実にスマホでの見た目を確認できるのがポイントです。

一部のスマホ用Webサイトは、レスポンシブデザインを変更しただけでは表示されません。

そのため上記の方法を使うと、適切に表示されるケースがあるので覚えておいてください。

スマホ用WebサイトをPCで見る際の注意点！アドオンも活用してみよう

スマホ用WebサイトをPCで見る際は、

といった点に注意してみましょう。

今回ご紹介した方法でもWebサイトが表示されない場合は、Androidスマホなどで確認するほうが手っ取り早いです。

またスマホ用にタップする機能なども引き継がれてしまう分、マウス操作だと操作しにくい、あるいは操作不能なところも出てきます。

見た目を変える際はアドオンを使うとより効率よく作業ができます。

たとえば「Window Resizer」といったGoogle Chromeアドオンが使えるのでチェックしておくと良いでしょう。
 

まとめ

今回はPCでの作業効率化を図りたい方向けに、PCでスマホ用Webサイトを表示するメリットや方法、注意点などを解説してきました。

PCでスマホ用Webサイトを表示する際はレスポンシブデザインを変更する、あるいはUAを書き換えて表示を行うといった方法があります。

好きな方法でWebサイトを表示できれば、今後開発を行う際にも役立つでしょう。

ただしスマホのように操作ができないといった点には注意してぜひ利用してみてください。