マニュアル

Google Chrome：スマホページをエミュレーションして確認する

スマートフォン用ページを作成して、ページの確認を行なう際には、
毎回手元のスマートフォンで確認していますか？

Google Chromeにはデベロッパーツールという機能が搭載されています。
このツールの機能を利用するとPCでスマホ用ページをエミュレーションして確認できます。

注意

iPhoneを始めとした端末の多くはスペックの解像度を2倍とすることで最適に表示される機種が多くございます。そのため、最終確認は必ず実際のスマートフォンにて行なっていただけますようお願いいたします。

　■ 参考サイト　※弊社とは関係のない外部サイトとなります
　　　https://fastcoding.jp/blog/all/webdesign/designswidth/
　　　http://mw-s.jp/2017-mobile-monitor/
　　　http://scene-live.com/page.php?page=96

　

手順

1. 　Google ChromeでWebサイトにアクセスします。
   　

2. キーボードの[F12]キーを押します。
   

3. デベロッパーツールが起動するので、左上にある[エミュレーション]アイコンをクリックします。
   　
   デベロッパーツールの表示位置は設定により、ブラウザの横や下に表示されたり、別ウィンドウで表示されます。

   横表示

   

   別ウィンドウ表示

   

4. スマホ用ページへと表示が変わります。
   

   表示が変わらない

   変わらない場合は、ブラウザの[更新ボタン]またはキーボードの[F5]キーを押します。
   Webサイトがスマートフォンに対応していない場合、変わらない場合もあります。
   　　

　

表示端末の変更

Webサイトの上部に端末名が表示されているので、そこをクリックするとメジャーな端末リストが表示されます。エミュレーションしたい端末名をクリックすることにより、その端末の表示をエミュレーションできます。

　

表示端末の外観変更

端末の外観を付与する機能もあります。
[more options]ボタンをクリックし、「Show device frame]をクリックします。

　

注意

デベロッパーツールはGoogle Chromeの機能となります。
詳細やご不明な点につきましては、開発・提供元のGoogle社へお問い合わせください。

	Google Chrome　ダウンロード