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

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

 

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

 

ホームページはスマホ専用サイト、それともレスポンシブWEBデザイン？

 

 

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

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

 

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

この記事の内容を知ることで、WEBページ修正前の表示確認や、レイアウト崩れの原因特定ができるようになります。

 

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

 

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

 

【STEP1】Google chrome起動

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

↓

【STEP2】対象のWEBサイトへアクセス

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

↓

【STEP3】対象サイトの画面を右クリック

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

↓

【STEP4】検証モードの起動

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

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

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

↓

【STEP5】検証モードの表示確認

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

↓

【STEP6】表示画面の切り替えボタンをクリック

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

↓

【STEP7】大、小、表示画面の確認

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

↓

【STEP8】各端末ごとの確認

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

↓

【STEP9】検証モードの終了

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

 

ホームページをスマートフォン対応にするメリットとは？

 

おわりに

 

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

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

 

また、デベロッパーツール（要素の検証機能）は上手に使いこなすことで様々な用途でも利用できます。主な活用方法は以下の通りです。

 

デベロッパーツール（要素の検証機能）の主な活用方法

・様々な画面サイズのデバイスに合わせてWEBサイトの表示が確認できる。

・WEBサイトのレイアウト崩れの原因を特定することができる。

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

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

 

 

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

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

 

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

 

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

 

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

東京本社：03-5953-7160

お問い合わせはこちら