こんにちは。うめです。
スマートフォンが普及し、WEBサイトを見る人の多くがスマホになってきましたね。このうめサーチのブログも70％以上の方がスマホユーザーさんです。
そうなると気になるのが「私のブログ、スマートフォンで読みやすいのかな？という点。
作った投稿をスマホで見るためには、公開しないといけない…でもまだ途中だし、公開したくない。けれど、スマホで読みやすいか確認したい…というジレンマに陥ってしまう事もしばしば。
そんな皆様に、パソコン上でスマートフォンの表示が簡単に見れる方法をご紹介します。
目次
必要なものは「Google Chrome」だけ
必要なものは、Google Chrome（グーグル クローム）というブラウザだけです。
他は何もいらないところが、この方法のメリットです♪
Goolgeさん公式サイトからダウンロードしてください。→Google公式サイト
スマートフォン版を確認する手順
①Google Chrome（グーグル クローム）で対象ページを開く
まず、Google Chrome上で作成中のブログの記事のプレビューを見ます。
②「F12」キーを押す
そのままの状態で、キーボードの「F12」キーを押します。
すると、ブラウザの画面の横に、何やら見かけない部分が登場。
これは、開発者ツールと言って、WEBサイトを作っている人達が少しでも楽に開発等ができるように、Googleさんが作ってくれた機能です。
ものすご～く便利な点がすごくたくさんあるので、ぜひ、調べて使ってみてください！
③スマホマークをクリック
F12キーで表示された部分の上の方に、スマートフォン＆タブレットのアイコンがあります。
それをクリックすると…ギュッと画面が縮まります。これが既にスマートフォン（もしくはタブレット）の表示になっています。
もし、変わらなかったら、「F5キー」もしくは「Ctrlキー+F5キー」を押して、ブラウザの再読み込みをしてみてください。
④見たいスマートフォンの種類を選ぶ
ブラウザ上部のバーにある、下矢印の三角をクリックすると、9種類のデバイスとレスポンシブ（Responsive）が選べるので、好きなデバイスを選んで確認してみてください。
パソコンの表示に戻したい時は、開発者ツールの右上にある「スマートフォン＆タブレット」のアイコンをもう一度クリックすると、パソコン表示に戻ります。
実際の見え方を比較（iPhoneX）
実際の見え方はどうなのでしょうか。
iPhoneXでの見ためと、パソコンで「iPhoneX」のデバイスを選択した場合の見え方を比較してみました。
左がiPhoneXで右がパソコンで「iPhoneX」の表示を選んだ場合です。
サイズ感がほぼ同じでレイアウトのずれなどもありません。かなり優秀な検証ツールだと思います。
iPhone5？ iPhoneX？ Galaxy？Pixel？スマートフォンの種類が選べるのが利点
このツールの利点は、様々なデバイスが簡単に選べることでもあります。
選べるデバイスは、
- Galaxy S5
- Pixel 2
- Pixel 2 XL
- iPhone 5/SE
- iPhone 6/7/8
- iPhone 6/7/8 Plus
- iPhone X
- iPad
- iPad Pro
です。表示できるデバイスの種類は今後追加されたり、古いものが減ったりと、ユーザーの増減に合わせて変わっていくと思います。
その時代に合わせていく感じですね。
いかがでしたでしょうか。開発者ツールなんて聞き慣れない単語を出してしまいましたが、スマホ表示の確認頻度が多い場合などにすごく便利なので、ぜひ使ってみてください。
