スマホサイトをサクッとPCで確認する裏技

みなさん、普段インターネットには何で接続していますか? パソコン?タブレット? ・・・いやいや、スマートフォンでネットを見る方が多いのではないでしょうか。 かくいう私も、仕事や調べ物はパソコンを使いますが、今日の天気などのちょっとしたことを調べたり、e-mailなどの通信もスマホから行っています。なんてったって手軽ですもんね! そんな中、全年代でのスマートフォンの利用率は年々増加し続け、ついに7割を超えたということです。 スマホに代表されるモバイル機器からのインターネット利用時間は1日当たり平日で1時間以上となったそうで、だいたいの人たちがスマホからネットを見ている訳です。 これはWebページのスマホ対策を重要視せざるを得ません! スマホ用のwebページの制作にあたり、スマホからのページの見え方をチェックすることも増えること必至ですが、制作の現場では特に、PCで制作したものをいちいちスマホから確認するのはなかなか手間がかかって面倒です。 なるべくだったら時短したい!! そんなときのためにPCからでもスマホ表示をチェックするエミュレーター機能をご紹介します!

自分の希望する幅へウィンドウをピタッと狭められるアドオン

まずは「ウィンドウの幅を狭めてみましょう」
レスポンシブ対応のwebサイトであれば、こちらで十分役割を果たします。

そもそもレスポンシブ対応とはどういうことかと言いますと、世の中にはいろんなサイズの画面がありますが(PC、タブレット、スマホなど)、その画面幅に応じてwebページが表示されることです。

つまり、画面幅に応じてデザインが変わってくれるため、ウィンドウの幅を変えるだけで表示が対応してくれるわけです。
ブラウザの幅をスマホサイズにしてしまえば、スマホから閲覧しているような状態になりますね。

Window Resizer

しかし、「スマホのブラウザ幅ってどうやって揃えるわけ?」と考える方もいらっしゃるでしょう。

そんなときはこちら!
Chromeアドオン(追加機能)のWindow Resizerをご紹介します。
この拡張機能を使えば、スマホの幅に限らず、ブラウザの画面サイズをクリックのみで簡単に変更することができます

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
↑こちらから拡張機能を追加できます。

拡張機能の追加は簡単。
上記URLをクリックすると、Chromeウェブストアのページに遷移し、ポップアップ画像で「Window Resizer」の案内が表示されます。

右上の【+CHROMEに追加】ボタンをクリックして

次に出てくるポップアップ画面の【拡張機能を追加】ボタンを押すだけ!

ウィンドウ右上にこのようなアイコンが追加されますので、アイコンをクリックしてください。

何やらたくさんの数字が書いてありますが、ここで
【iphone6】と記載のある375×667のサイズを選択してみましょう。

・・・画面サイズが変わったはずです。
この機能を使えば、iphone6の幅に一瞬で合わせることができ、楽にスマホ用Webサイトの確認ができます。

簡単にユーザーエージェントを変更するアドオン

ウィンドウ幅を狭めても、スマホ表示しないサイトもあります。
ページの作成方法はいろいろありますが、使用目的によってはレスポンシブ対応にしていないサイトもたくさんあるのです。

サイトによってスマホ対応の方法は違うのですが、サーバーがデバイスを判断しスマホと判断した時だけスマホ表示、あるいはスマホ用のサイトに飛ばすという方法の場合、PC表示で幅を変えるだけではスマホ表示を確認することは出来ません。

これからご紹介する方法は一時的にブラウザの設定を変えてPCブラウザをスマホ用ブラウザであることにして、パソコンからスマホサイトを確認することが可能となる方法です。
専門用語で「ユーザーエージェントを変更する」ということになります。

Chromeの場合

確認したいwebサイトを開いた状態で、キーボードの【F12】を押すか、画面上どこでもいいので右クリックをした際に出てくるメニューから「検証」を選択して、「デベロッパーツール(開発者ツール)」を開きます。

上記のマークをクリックします(もしくはCtrl+Shift+M)。


↓ ↓ ↓

Webサイトを表示している画面が細長くなりました!
さらに、画面の上のところにあるバーからいろいろな機種のエミュレーションが選択でき、選択した端末によって横幅、縦幅のサイズが切り替わります。

縦と横を切り替えることもできますので、ぜひ色々試してみてください。

Firefoxの場合

次にFirefoxのエミュレーションをご紹介します。

やはり確認したいwebサイトを開いた状態で、画面上を右クリックし、出てきたメニューの中から【要素を調査】を選択してください。

「開発者ツール」が表示されます。

上記のマークをクリックします(もしくはCtrl+Shift+M)。


↓ ↓ ↓

Webサイトを表示している画面が細長くなりました!

Firefoxの方も、画面の上のところにあるバーからいろいろな機種のエミュレーションが選択でき、選択した端末によって横幅、縦幅のサイズが切り替わります。
こちらも縦と横を切り替えることもできます!



こちらのChromeの拡張機能ではスマホだけに表示されるインフィード広告も確認できます↓

こんにちは。コンサルタントの名川です。この度、弊社事務所が中野坂上から西新宿に移転いたしました。住所は下記です。東京都新宿区西新宿7-3-4 アソルティ西新宿ビル...


Edgeの場合

最後にEdgeからのエミュレーションをご紹介します。

やはり確認したいwebサイトを開いた状態で、ブラウザ右上の…マークをクリックし、出てきたメニューの中から【F12開発者ツール】を選択してください。

開発者ツールが出てくるので、「エミュレーション」のタブを選択してください。

エミュレーション画面が出てきますので、各項目を見たいように設定してください。

「ディスプレイ」の項目を触ると、スマホのような表示になります。

ディスプレイ
向き:縦 解像度:カスタム を選択し、
モードの「ユーザーエージェント文字列」をカスタムと選択、選択したことによって新しく「カスタムユーザーエージェント文字列を入力してください」という項目が出てくるので、下記のURLを参考にして文字列を入力してみましょう。

ユーザーエージェント一覧
http://s-ej.com/glossary/useragent.html

このように、エミュレーションできなくはないのですが、ユーザーエージェントをいちいち調べて入力するなど手間がかかります。どうしてもEdgeでエミュレーションしたいんだ!という方にはお勧めですが、時間したいという視点からいうとあまり得策ではありません。

いかがでしたか。
ブラウザも日々進化していて、少し前まではFirefoxなんかはブラウザごとの識別情報を指定することができず、あくまで画面のサイズだけの指定になっていたらしいので、それを考えるとFirefoxも機能的にはChromeに近づき、全体的にずいぶん操作しやすくなっています。

Edgeは独自の進化なのか、玄人向けなのか、ちょっと設定に時間と手間がかかってしまうので、「楽にスマホ表示のチェックをしたい!」という観点からいくと少々ずれがあります。

ただ、ご自身の使いやすいブラウザで、手慣れた操作で確認していただくのが一番早いかと思いますので、是非とも各機能を試してみてください。

作業途中確認に利用すれば時間短縮に!


各ブラウザからのエミュレーション機能をご紹介しました。
多くは操作も簡単ですし。手軽に使えるので、Webサイトを頻繁に確認する時の強い味方となってくれるはずです。

しかしながら、これらはあくまで各スマホ用ブラウザにエミューレート(=マネ)して表示をしているものです。つまり、実際の見え方そのものではないのです。

従いまして、PCのエミュレーション機能をつかってチェックを完璧にしたとしても、実際のスマホで見た場合には微妙に違ったりする可能性があります。
PCでどんなに丁寧に確認しても、実際の表示がおかしければ、その表示はおかしいのです。

残念ですが、どのエミュレーターも完璧ではありません。
ここまでエミュレーション機能をお勧めしておきながらひっくり返すようなことをお伝えしますが、最終的なチェックはスマホ実機で行うのがベストです。真似したものは本物には勝てません。
エミュレーション機能はあくまで途中経過の確認にとどめておき、最後の最後、最終確認は実機で行うことでより完璧な仕事になるでしょう。

何度も行うであろう途中の確認まで実機で行うのは手間ですし、時間もかかります。エミュレーション機能を賢く使って、より短い時間で高いクオリティのWebサイト制作を心掛けましょう!

Web広告でコンバージョン数を最大化する7つの極意をプレゼント!

「Web広告マーケティング大全」
(無料・PDFでのダウンロード)

2018年9月発行の書籍「コンバージョンを最適化する7つの極意」の元となった、電子書籍「Webマーケティング大全」を無料でダウンロードいただけます。
(PDF・全161ページ)

無料でPDFファイルをダウンロードする
(全161ページ)
Web公告マーケティング大全

関連記事一覧