超簡単!iPhoneやiPadでのサイト表示を、PCから確認する方法!

sumafo
WEBデザイナーさん必見!スマートフォンやタブレットでのサイトのデザインを、パソコンからチェックする手段を紹介。

はじめに、Google Chrome を用意!

Google Chrome をお持ちでない人は、ダウンロードしてインストールしてください。
http://www.google.com/intl/ja/chrome/browser/

それでは、手順を見て行きましょう!

1. まずChromeで、表示を確認したいページを開きます。

Chromeを立ち上げて、表示をチェックしたいページを開いてください。

2. 次に、右クリックしてメニューから「要素の検証」を選択!

メニューの一番下の「要素の検証」をクリック!


https://matome.naver.jp/odai/2138571186357119901/2138572193869004703

すると、以下の画像のように画面が2分され、下半分にページの情報が表示されます。


https://matome.naver.jp/odai/2138571186357119901/2138572193769003603

3. 右下の歯車のアイコンをクリック!

続いて、右下に表示された歯車のアイコンをクリックしてください。


https://matome.naver.jp/odai/2138571186357119901/2138572193769003703

表示が変わるので、
“Settings” → “Overrides” と進みます。


https://matome.naver.jp/odai/2138571186357119901/2138572193769003803

その項目で、”Enable”と”User Agent”をチェックし、
プルダウンメニューから表示を確認したい端末を選択!

更に、その下の “Device metrics”と、”Fit in window” もチェック!


https://matome.naver.jp/odai/2138571186357119901/2138572193869004003

4. ページを更新!

最後に、左上の再読み込みボタンを押して、ページを更新してください。


https://matome.naver.jp/odai/2138571186357119901/2138572193869004203

すると、下の画像のように端末で見た時と同じようにデザインが切り替わり、解像度も自動で調整されます!


https://matome.naver.jp/odai/2138571186357119901/2138572193869004303

対応している端末は、iPhoneやiPad、Android、Galaxy Nexusなど、主なスマートフォンやタブレットは勿論、IEやFirefoxなど他のブラウザもカバーしています。

この機能を利用すれば、すぐにサイトのデザインを確認できるので、便利ですね。

https://matome.naver.jp/odai/2138571186357119901
2013年11月29日