パソコン画面をスマホ（モバイル）表示する確認作業で、一番簡単で表示精度の高い方法を2つご紹介していきます。
こんにちは。WordPressテーマ研究家SHINです。
ブログやウェブサイトでページをスマホ（モバイル）表示で確認することは非常に大切ですよね。レスポンシブ確認であったり、テキストが読みづらくないか？など。
スマホでアクセスしてくれたユーザーに、キレイにストレスレスでページを見てもらうためには必須な作業です。
どのデバイスでユーザーがアクセスされるかは、ウェブサイトのジャンルによって異なります。
ちなみにこのブログでは、スマホ（モバイル）で見てくれているユーザーは26.5%。
約4人に1人はスマホからアクセスされているデータです。
近況ではパソコンをスマホ市場が逆転しつつある流れなので、特にスマホユーザーに対するユーザビリティは高く維持しておく必要があります。
そこで今回は、ものすごく簡単にスマホ表示できる方法を2つご紹介します。
今までスマホ本体で確認していた方は、確認作業時間が「天と地」ほど短縮できますので、ぜひ試されてください。
Google Chromeでスマホ表示確認する方法
ウェブブラウザ「Google Chrome（グーグル・クロム）」を利用することで、簡単にスマホ表示を確認できます。
またGoogle Chromeの良いところが2つあり、スマホでも各機種ごとで表示してくれることと、タブレット端末表示もしてくれる優秀な機能にあります。
スマホも機種によって横幅サイズが異なるので、スマホの中で一番シェア率の高い機種に合わせたサイズで表示確認できるというのは、非常に大きなメリットですよね。
では早速確認方法を見ていきましょう。
step
1パソコンブラウザに「Google Chrome」を追加します。
既にブラウザがGoogle Chromeなら次に行きましょう。
Google Chrome ダウンロード
step
2スマホ表示で確認したいパソコン画面で、右上の「Google Chromeの設定」から「その他ツール」＞「デペロッパーツール」をクリックします。
step
3次に画像右上にある「デバイスデペロッパー」をクリックすることで、画面中心にスマホ表示が確認できます。さらに「レスポンシブ」をクリックすれば、スマホ機種ごとのサイズでも確認ができます。
step
4レスポンシブにあるリストの「Edit」を選択すると、右側へさらにデバイス機種を選択できるようになります。
更に！もっと簡単にスマホ表示できる方法が「ショートカットキー」です。
便利なショートカットキー
- キーボードにある「F12」を1回押すだけで、現在の画面をスマホ表示に切り替えが可能。
- ショートカットキー「Ctrl」＋「Shift」＋「I」でもスマホ表示を確認できます。
慣れてしまえば、実はショートカットキーで表示した方が早いです（笑）
ぜひ試してみてください。
WordPressカスタマイズ画面でスマホ表示する
WordPressのカスタマイズ画面上からスマホ表示を確認することもできます。
カスタマイズしながらスマホビューを確認できるので、スマホ専用のカスタマイズ設定をするときには重宝できるので便利です。では見ていきましょう。
step
1WordPressダッシュボードから「外観」＞「カスタマイズ」へ進みます。
step
2カスタマイズメニューの下にある「スマホ表示アイコン」をクリックすれば、右側の画面でスマホ表示が確認できます。
まとめ
スマホから訪問された方から高いユーザビリティを得るためには、スマホ表示にも細心の注意を払うことは絶対必要ですね。
そこでもう一度おさらい。スマホ表示で最低限確認しておきたいことは・・・
- 画像やイラスト、広告などがレスポンシブでキレイに表示されているか？
- フォントサイズ、改行などテキストがストレスなく読みやすいか？
この2点は確認しておきたいところですね。
今後はクイックでスマホ表示を確認しながら、ユーザービリティにも努めていきましょう。
