ご登録はこちらをクリック

chromeを使ってサイトのスマホ表示画面を確認する方法。

スマホとタブレットの画像

最近はスマホユーザーが急増しているため、PCで作成するサイトがスマホでどのように表示されているかの確認が必須となっています。

とはいえ、しょっちゅう実機のスマホを使ってサイト表示を確認するのは大変なことです。

そこでおすすめしたいのが、今回お伝えするブラウザのchromeを使ったPC上でスマホ表示画面を確認する方法です。

chromeを使えば、サイトやブログのスマホ表示を簡単に確認することができますよ。

chromeでサイトのスマホ表示画面を確認する方法と手順

chromeのアイコン

①chromeのデベロッパーツールを開く

まずはスマホ表示を確認したいサイトページをPCで開きます。

それから、画面右上の「・・・」をクリックし、

「その他のツール」にカーソルを合わせ、「デベロッパーツール」をクリックします。

chromeデベロッパーツールの使い方の解説画像

その他のデベロッパーツールの起動方法

Windowsの場合、以下の方法でもデベロッパーツールを起動させることができます。

  • 「F12」キーを押す
  • 「CTRL」「SHIFT」「I」の3つのキーを同時に押す

MACの場合、以下の方法でもデベロッパーツールを起動させることができます。

  • 「COMMAND」と「R」の2つのキーを同時に押す

すると、以下のようなデベロッパーツール画面が表示されます。

chromeデベロッパーツールの使い方の解説画像2

最新の状態を表示させるために、ここで念のためにF5キー(MACは「COMMANC」 + 「R」)を押して更新しておきましょう。

②画面をスマホ表示に切り替える

デベロッパーツール画面を開いたら、上部にある「デバイス」アイコンをクリックします。

chromeデベロッパーツールの使い方の解説画像3

すると、開いているサイトの画面がPC表示からスマホ表示に切り替わります。

chromeデベロッパーツールの使い方の解説画像4

↓ ↓ ↓

chromeデベロッパーツールの使い方の解説画像5

③確認したいスマホデバイスを選ぶ

画面がスマホ表示に切り替わったら、確認したいスマホのデバイスを選択します。

スマホ表示画面の上部にあるアイコンのうち、1番左側にあるをアイコンをクリックします。

すると、以下の画像のようにたくさんのスマホデバイスが出てくるので、その中からチェックしたいものを選びます。(iPadやiPadProのようなタブレットもデバイスに用意されていますよ。)

chromeデベロッパーツールの使い方の解説画像6

選んだデバイスをクリックすれば自動で画面の表示が変わります。

 

もし、確認したいスマホデバイスがなかった場合、以下の「Edit・・・」をクリックしてみましょう。

chromeデベロッパーツールの使い方の解説画像7

右側にデバイス一覧が表示されるので、その中から選びたいものの左側のボックスをチェックし、右上の×を押してデバイス一覧画面を閉じます。

今回は例として、「Galaxy Note 3」を選択してみました。

chromeデベロッパーツールの使い方の解説画像8

すると、選んだデバイスが上部のリストに加えられるので、クリックして確認すると同時に表示させてみましょう。

chromeデベロッパーツールの使い方の解説画像9

④スマホ表示画面をスクロールさせて確認する

デバイスが選択できたら、本格的にサイトページをチェックしていきます。

chromeデベロッパーツールの使い方の解説画像10

パソコンのポインターを表示されたスマホ画面上に置くと、ポインターが「●」になり、この状態でマウスなどで上下にスクロールさせることができますよ。

⑤デベロッパーツールを終了させる

スマホ表示画面の確認が終わったら、デベロッパーツールを終了させます。

終了するには、デベロッパーツール画面の右上の×アイコンをクリックします。

chromeデベロッパーツールの使い方の解説画像11

その他のデベロッパーツールの終了方法

Windowsの場合、以下の方法でもデベロッパーツールを終了させることができます。

  • 「F12」キーを押す
  • 「CTRL」「SHIFT」「I」の3つのキーを同時に押す

MACの場合、以下の方法でもデベロッパーツールを終了させることができます。

  • 「COMMAND」と「R」の2つのキーを同時に押す

その他の知っておくと役立つ機能

表示サイズ倍率を変える

スマホ表示に切り替えると、PCで表示される画面が全体的に小さくなります。

小さくなった画面が見にくいという方は、上部の倍率を変更できるアイコンをクリックし、見やすい表示倍率に変更しましょう。

chromeデベロッパーツールの使い方の解説画像12

倍率は「50%」「75%」「100%」「125%」「150%」から選ぶことができますよ。

横向き画面の表示を確認する

上部アイコンのうち、1番右側のアイコンをクリックすると、スマホの横向き画面表示に切り替えることができます。

chromeデベロッパーツールの使い方の解説画像13

特に、タブレットのiPadだと横向き画面でサイトを見られることが多いので、タブレットでのアクセスが多いサイトは横向きもチェックしておくのがいいでしょう。

スマホ表示画面で特にチェックしておきたいポイント

最後に、補足としてスマホ表示を確認したときにぜひチェックしておきたいポイントについても紹介しておきます。

  • 文字の大きさは適切か?
  • 画像の大きさは適切か?
  • 行間・改行は適切か?
  • クリックしてほしいリンクのサイズは適切か?(指でタップしやすいか?)
  • テーブルの表は途中で切れていないか?

筆者の場合、スマホ表示をチェックしていて、スマホだとテーブルの表が途中で切れていて一部しか表示されていなかったことに気づいた経験があります。

せっかくスマホ表示を確認したのに、ただなんとなく見て終わったではもったいないので、チェックすべきポイントも参考にしてみてください。

まとめ

chromeのデベロッパーツールを使えば、PCでも簡単にサイトのスマホ表示を確認することができます。

サイトのスマホ表示の最適化は、SEOにも大きな影響をあたえることなので軽く見ることはできません。

ぜひchromeのデベロッパーを活用し、スマホでも見やすいサイトにしていきましょう!


ブログランキングに参加しています!
クリックして応援してもらえると記事更新の励みになるのでよろしくお願いします。

↓ ↓ ↓

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください