PCであなたのスマホサイトがどう見えるかをチェックする【Googleクローム】

2015年にスマホからの検索がPCの検索数を上回った今、Webサイトを制作するのであれば、スマホユーザーを意識したサイト制作が必須です

Google公式サイトでは２０１９年７月１日以降にGoogleが発見した新しいドメインのサイトに対しては一律最初からモバイルファーストインデックスを適用すると発表、適用されるとPCページからモバイルページへ評価基準が変更され、スマホページを基準とした検索順位が決められる。検索結果での上位表示はサイトへ訪問するユーザー数に大きく影響しますので、とても重要な要素といえます。

これからの時代に対応するべく、モバイルファーストなサイト運営を心がけよう

デスクトップ版Google Chrome（以下、Chromeと略）の「デベロッパーツール（開発者ツール）」を利用すると、PCで簡単にスマートフォンサイトの確認ができます。

その設定と操作方法を簡単に見てみよう

エミュレーション  【 emulation 】  エミュレート / emulate
エミュレーションとは、ある装置やソフトウェア、システムの挙動を別のソフトウェアなどによって模倣し、代替として動作させること。代替となるソフトウェアなどのことを「エミュレータ」（emulator）という。『IT用語辞典e-Wordsより引用』

❶スマホのWebブラウザをエミュレート【デベロッパーツール】

Chromeでスマートフォンによる表示を確認するには、最初に対象のWebページを表示してから、➊右上のメニューボタンをクリックして➋［その他のツール］－➌［デベロッパー ツール］をクリックします。

⇩おススメ⇩
［Ctrl］＋［Shift］＋［I］キーまたは［F12］キーを押しても同じです（macOSでは［Option］＋［Command］＋［I］キー）。

表示モードをスマートフォンに変えるには次の画面にあるアイコンをクリック。
デベロッパーツールにフォーカスを置いた状態で［Ctrl］＋［Shift］＋［M］キーを押します（macOSでは［Command］＋［Shift］＋［M］キー）。

これでブラウザペインはスマートフォン表示モードに切り替わりましたが、デザインなど表示はPC用のままです。ここで再読み込みボタンをクリックするか［F5］キーを押して、ページを再読み込みしましょう（macOSでは［Command］＋［R］キー）。

❷エミュレートするスマホの種類を指定

Responnsiveをクリックすると、スマホ機種一覧が出てくるので見たい機種を選んでください

【Edit】を選ぶとブラックベリー、Kindle、Nokia…など他のスマホを追加したり、カスタムしたり出来ます

➌設定を変える

➊で【横】×【縦】の解像度を数値で指定できます

➋の％で解像度を変えずにスマホの画面表示を拡大・縮小出来ます
➌をクリックすればスマホの画面を縦持ち視点、横持ち視点に向きを変える事が出来ます

スマホのフレーム（枠）を表示するには

スマホ表示の際、まず先ほどの設定Responnsiveからスマホの種類を選択し、ブラウザペイン内の右上に表示されているメニューボタン（縦の点３つ）をクリックし、表示されたメニューで【Show device frame】をクリックすると

⇩iPhone６/７の画面⇩

❹詳細設定をカスタマイズする

   ➎エミュレーションの注意点

これでPCでChromeのデベロッパーツール使用してスマホサイトのチェックの仕方は完了です。

だが、スマートフォンのエミュレートが完全に出来るとは断言できません。iPhone（iOS）版あるいはAndroid OS版Chromeでの表示と比較すると、表示内容が食い違うこともあります。
Webサイトのデザインなどを変更した際は、この機能を使って正しく表示できるか確認すると手軽で便利ですが、最後は自分のスマホなどでちゃんと表示できるかの確認をするようにしましょう

あなたのサイトをスマホから見やすいサイトにして、検索上位になる事を祈っております

遊びのない人生も　お金のない人生も　くだらない　

稼いで遊び　遊びをお金に　あなたの才能を力に

仮想会社ニークルスク・代表