自分のサイトのスマホサイズをPCで確認

スマホサイズで確認 サイト作成

 

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

 

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

 

Google公式サイトでは2019年7月1日以降に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画面 小さいPC画面

 

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

スマホ画面

 

 

 

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

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

機種変更

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

 

➌設定を変える

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

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

 

 

 

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

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

フレーム変更

⇩iPhone6/7の画面⇩
iPhone画面

 

 

 

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


詳細設定

 

Show media queriesスタイルシートのメディアクエリがどのように設定されているか、グラフィカルな表示で確認できるようになります
Show rulersピクセル単位の目盛り(ルーラー)が表示されます
Add device pixel ratioRetinaディスプレイにおける解像度の倍率(デバイスピクセル比)を指定できるようになります
Add device typeデバイスとして携帯機器(Mobile)かPC(Desktop)を選択できるようになります。これによりユーザーエージェント文字列が変わります

 

 

 

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

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

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

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

 

 

 

 

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

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

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

 

 

SNSフォロー