ホームページ集客

ホームページの「スマホ表示」をパソコンのChromeで確認する方法

ホームページの「スマホ表示」をパソコンのChromeで確認する方法 ホームページ集客

ホームページは様々な端末で読まれています。
パソコン、スマホ、タブレット。

パソコン、スマホ、タブレットの画像

それぞれ画面の大きさが違うので、ホームページも各端末で表示のされ方が異なります

ホームページを編集した後は、各端末できちんとうまく表示できるか。
結果の確認を行う必要があります。

しかし、スマホはともかく、タブレットを持っていない人もいるでしょう。
では、どうやって持っていない端末のサイズでも確認するか?

そこで本記事ではホームページの「スマホ表示」をパソコンのChromeで確認する方法を紹介します。
「スマホ表示」と言いましたが、この方法で、タブレットなど他の様々なサイズの端末も確認できます。

野田
野田

この方法を使えば、いちいちスマホやタブレットを開かなくても大丈夫。
各端末のレイアウトをサッと確認できるので便利ですよ。

使用するソフト

確認するには「Chrome」(クローム)というソフトを使います。

Chromeのロゴ画像

クロームはインターネットを閲覧するためのソフトで、世界中で多くの人が利用しています。
Google社のソフトですので安全性、信頼性もバツグンです。

もしも、Chromeがパソコンにまだ入っていないという方は、下記のリンクから入手してください。
もちろん無料です。

クロームをダウンロードする

これ以降は、Chromeをパソコン内にインストールして、利用できる状態にした後という前提で進めていきます。

Chromeでスマホ表示を確認する手順

それでは、Chromeを使ってホームページのスマホ表示を確認する手順です。

1.Chromeを起動して、スマホ表示を確認したいホームページを表示します。
※下図は例として、Yahoo!JAPANを表示しています。

Yahoo!JAPANの画像

2.パソコンのキーボードのうち、上部にある[F12]キーを押します。

3.すると、下図のような画面になります。
※環境によっては、赤枠内の領域は、別の位置(画面の右端や別ウィンドウ)に表示される可能性もあります。

Chromeのデベロッパーツールを表示した画面

4.この赤枠内にある下図のボタンをクリックします。
(スマホとタブレットが重なっている絵柄のボタンです)

デベロッパーツールのスマホ表示に切り替えるボタン

5.Chrome内の画面領域がスマホサイズに変わります。
ただし、下図の場合、領域内の表示はパソコン表示のままになっています。
この場合は、ページの表示を更新するために、今度はキーボードの[F5]キーを押します。

6.これでスマホ表示に変わりました。

スマホ表示に切り替わった画像

もちろん、この表示のまま、画面内をクリックして他のページに移動も可能です。

野田
野田

タブレットなど、他の端末へのサイズ変更は、この後で紹介します。

他の端末のサイズに切り替えるには

他の端末のサイズに切り替えるには、赤矢印の箇所で行えます。

クリックするとメニュー内に、主要な機種の名前が表示されます。
見たい機種名をクリックすると、画面領域のサイズが変わります。

野田
野田

メニュー内の一番上にある「Responsive」は機種名ではありません。
それについては、次に説明します。

Responsiveとは?

「Responsive」(レスポンシブ)は画面の横幅をドラッグして自由に変更できます。

具体的には「Responsive」(下図の緑枠)を選択します。
すると、画面領域の右端部分(下図の赤枠)を左右にドラッグして、画面の幅を自由に変更できるようになります。

レスポンシブ表示で左右をドラッグできる状態の画像

Chromeを元の画面領域に戻すには

Chromeを元の画面領域に戻すには、再度、下図のボタンをクリックしてください。

まとめ

本記事ではホームページの「スマホ表示」をパソコンのChromeで確認する方法を紹介しました。

ホームページを編集した後は、ぜひ今回の方法を使って、スマホやタブレットで表示結果を確認してみてください。
大幅に時間や手間を省けるはずです。

野田
野田

今回使ったChromeの[F12]キーで表示する画面は、ホームページ制作でよく使われます。興味のある方は「Chromeの検証」(別名:デベロッパーツール)でネットをキーワード検索してみて下さい。

タイトルとURLをコピーしました