WEBサイトやECサイトの制作時に、パソコン画面は作業の途中でも一旦中断して、すぐに表示を確認することができます。

一方、スマートフォンの画面の場合は、アドレスバー部分にURLを直接入力することになるので、表示確認をわずらわしく感じる方も多いのではないでしょうか。

 

また、スマートフォンやタブレット端末は、新型の機種がリリースされるサイクルも早く、複数の機種や解像度が存在するため、すべての環境や実機で確認するのが難しい状況です。

このような悩みを持つ方向けに、パソコン上で操作して簡単に表示を確認する方法があります。

 

WEBブラウザのGoogle chromeが提供している、デベロッパーツール(要素の検証機能)を活用すれば、スマートフォンやタブレット端末の表示をパソコン画面上で確認することができます。

今回は、ホームページ制作会社やSEO会社も活用している、パソコン画面でスマートフォンの表示を確認するサービスについて紹介をさせていただきます。

 

ホームページを確認するキャッシュのクリア方法とは?

 

スマホの表示画面をパソコン上で確認する手順

START

1.まず、はじめにパソコン画面でWEBブラウザのGoogle chromeを立ち上げます。

2.次に、スマートフォン画面のチェック対象になるサイトを検索してそこにアクセスします。

3.サイトの画面上のどこの部分でも構いませんので、マウスの右クリックをします。

4.メニューが表示されますので、一番下の「検証」部分をクリックします。

また、キーボードでWindowsの場合は、「Ctrl + Shift + C」、Macの場合は、「Command + Shift +C」で押した場合も同様の結果になります。

さらに簡単な確認方法としては、キーボードの右上の「F12」ボタンを押しても同様の結果が表示されます。

5.デベロッパーツール(要素の検証機能)が画面の右側にソースコードと一緒に表示されます。

6.表示された右側画面ソースコードの一番左上部分に、大と小の長方形がふたつ重なったアイコンが表示されていますので、そこのアイコン部分をクリックします。

7.クリック後に、スマートフォンで閲覧した場合と同じ画面が2種類で表示されますので、大と小をクリックして、それぞれを切り替えながら確認することができます。

8.左側画面の一番左上部分には、iPhone,iPad,Galax,Blackberry,Pixelなど、様々なスマートフォンの端末をプルダウンで選択して、それぞれの画面表示に切り替えて確認することができます。

9.スマートフォンの表示を確認して、元のパソコン画面の状態に戻る場合には、右側画面のソースコード右上部分に表示されている×をクリックすることで、パソコン画面に戻ることができます。

END

 

おわりに

今回は、ホームページ制作会社やSEO会社も活用している、パソコン画面でスマートフォンの表示を確認するサービスについて紹介をさせていただきましたが、いかがでしたでしょうか。

今まで、アドレスバー部分にURLを直接入力して表示確認していた方も、Google chromeが提供しているデベロッパーツール(要素の検証機能)を活用すれば、パソコン画面上でスマートフォンやタブレット端末の表示を確認することができます。

また、デベロッパーツール(要素の検証機能)は上手に使いこなすことで、他にも別の用途で活用することも可能です。

 

デベロッパーツール(要素の検証機能)の他の活用方法

1.修正作業中のサイトのhtmlとcssコードをテスト用として確認できる。

2.他社のサイトがどのようなコードで書かれているか確認できる。

 

と、ここまでは、非常に便利なデベロッパーツール(要素の検証機能)の紹介でしたが、スマートフォンのiPhone(iOS)版、または、Android(OS)版のGoogle chromで画面を比べてみると、細かい箇所で表示やデザインが違って見える現象も散見されました。

 

ホームページ作成の際は、デベロッパーツール(要素の検証機能)を活用して、画面を確認すると便利ですが、あくまでも実際の環境をテスト用として【すべての表示を完璧に変換できる機能ではない。】ということも知っておく必要があります。

この記事をご覧になった方は、スマートフォンやタブレット端末の表示確認に便利なデベロッパーツール(要素の検証機能)を活用して、今後の取り組みの中でお役立てください。

 

ホームページを目立たせるアイコン画像ファビコンとは?

 

【株式会社セレクト・ワン】

東京本社:03-5953-7160

横浜支店:045-270-3353

長野営業所:026-474-5333

お問い合わせはこちら

 

関連記事

  1. コーポレートサイトに必要なコンテンツとは?

  2. ホームページの表示を主要ブラウザで確認していますか?

  3. ホームページの表示速度の測定・改善方法を知ってる?

  4. ホームページは更新しないとどうなってしまうのか?

  5. ホームページの種類は目的で変わるのか?

  6. ホームページとWEBサイトの意味や違い、言葉の使い方とは?