こうへいのアフィリエイトエッセンス｜ネットで稼ぐための本質を身につけるブログ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

↓　↓　↓

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

表示サイズ倍率を変える

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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