スマホでの表示を確認したい

いつもサイト職人をご利用いただきましてありがとうございます。

サイト職人での更新作業をパソコンで行っていると、更新した内容の表示の確認もパソコンでとなりますが、スマートフォン（スマホ）での表示も一緒に確認したいものです。もちろん実物のスマートフォンで確認いただくのが一番ですが、ちょっとした確認であればパソコン上で行えると便利です。今回はその方法をご案内したいと思います。

表示の切り替わる区切りは？

現在多くのホームページでは「レスポンシブデザイン」が採用されています。これはパソコンやスマートフォンなどの、端末のサイズに合わせて表示を変更する方法です。あらかじめ指定された数値よりも「大きい時はAの表示で、小さいときはBの表示で」という具合に切り替わります。
ここでいう端末のサイズとは、表示画面の横幅に当たります。例えば「画面幅の大きいパソコンでは画像を2つ左右の横並びに、画面幅の狭いスマートフォンでは縦並びにする」というような画面表示の切替です。

横幅を縮めてみる

ブラウザの画面の左右の端でカーソルを動かして、画面の横幅を縮めると表示が切り替わります。最小値まで縮めると、スマートフォンでの表示に近い見え方で確認することができます。

しかし手動で縮めると横幅500px程度が限界のようです。一般的なスマートフォンのディスプレイサイズは400前後が多いようですので、若干大きい画面サイズのイメージになります。

「検証」してみる

WindowsPCでChromeをご使用の場合は、確認したいページを開いて、右上の3点メニューから その他のツール > デベロッパーツール を選択して開きます。
開発者用の特別なもののような名称ですが、誰でも使える機能です。
ショートカットで Ctrl + Shift + Iキー でも開きますし、画面上で右クリックし「検証」を選択しても開きます。

「DevTools」画面の左上にパソコンとスマホを表すアイコンがありますので、これをクリック。アイコンが青くなり、確認したいページが画面の中心に縦長に表示されます。

もしも、スマホ対応しているページがパソコン表示がそのまま縮小されたように表示されていたら、更新ボタンを押してみてください。

またEdgeでも、右上の3点メニューから「その他のツール」の中に「開発者ツール」という名称で同様の機能があります。Firefoxでは、右上のハンバーガーメニューから「その他のツール」→「レスポンシブデザインモード」です。

いかがでしたでしょうか。

今回はサイト職人の機能ではなく、パソコンのブラウザのお話となりましたが、編集作業の中で便利にお使いいただけるものだと思います。Googleでは検索結果の決定に、パソコン向けサイトよりスマートフォン向けサイトを優先的に評価していますので、ホームページ更新の際にはスマートフォンでの表示も忘れずにご確認ください。

サイト職人を使っている中で疑問に思っていること、取り扱って欲しい題材などありましたら、ぜひサポートまでお知らせください。ご意見、ご感想もお待ちしております。

｜よくあるご質問TOPにもどる｜