ノウハウ情報

【クリックだけ】パソコン画面でスマホ表示を確認する簡単な方法

alt=パソコン画面,スマホ表示

パソコン画面をスマホ(モバイル)表示する確認作業で、一番簡単で表示精度の高い方法を2つご紹介していきます。

こんにちは。WordPressテーマ研究家SHINです。

 

ブログやウェブサイトでページをスマホ(モバイル)表示で確認することは非常に大切ですよね。レスポンシブ確認であったり、テキストが読みづらくないか?など。

スマホでアクセスしてくれたユーザーに、キレイにストレスレスでページを見てもらうためには必須な作業です。

alt=各デバイス,セッション

どのデバイスでユーザーがアクセスされるかは、ウェブサイトのジャンルによって異なります。

ちなみにこのブログでは、スマホ(モバイル)で見てくれているユーザーは26.5%。

約4人に1人はスマホからアクセスされているデータです。

近況ではパソコンをスマホ市場が逆転しつつある流れなので、特にスマホユーザーに対するユーザビリティは高く維持しておく必要があります。

 

そこで今回は、ものすごく簡単にスマホ表示できる方法を2つご紹介します。

今までスマホ本体で確認していた方は、確認作業時間が「天と地」ほど短縮できますので、ぜひ試されてください。

 

Google Chromeでスマホ表示確認する方法

ウェブブラウザ「Google Chrome(グーグル・クロム)」を利用することで、簡単にスマホ表示を確認できます。

またGoogle Chromeの良いところが2つあり、スマホでも各機種ごとで表示してくれることと、タブレット端末表示もしてくれる優秀な機能にあります。

スマホも機種によって横幅サイズが異なるので、スマホの中で一番シェア率の高い機種に合わせたサイズで表示確認できるというのは、非常に大きなメリットですよね。

 

では早速確認方法を見ていきましょう。

 

step
1
パソコンブラウザに「Google Chrome」を追加します。

既にブラウザがGoogle Chromeなら次に行きましょう。

Google Chrome ダウンロード

 

step
2
スマホ表示で確認したいパソコン画面で、右上の「Google Chromeの設定」から「その他ツール」>「デペロッパーツール」をクリックします。

alt=Google Chrome,デペロッパーツール

 

step
3
次に画像右上にある「デバイスデペロッパー」をクリックすることで、画面中心にスマホ表示が確認できます。さらに「レスポンシブ」をクリックすれば、スマホ機種ごとのサイズでも確認ができます。

alt=Google Chrome,スマホ表示

 

step
4
レスポンシブにあるリストの「Edit」を選択すると、右側へさらにデバイス機種を選択できるようになります。

alt=Google Chrome,デペロッパー,editリスト

 

更に!もっと簡単にスマホ表示できる方法が「ショートカットキー」です。

便利なショートカットキー

  1. キーボードにある「F12」を1回押すだけで、現在の画面をスマホ表示に切り替えが可能。
  2. ショートカットキー「Ctrl」+「Shift」+「I」でもスマホ表示を確認できます。

慣れてしまえば、実はショートカットキーで表示した方が早いです(笑)

ぜひ試してみてください。

 

WordPressカスタマイズ画面でスマホ表示する

WordPressのカスタマイズ画面上からスマホ表示を確認することもできます。

カスタマイズしながらスマホビューを確認できるので、スマホ専用のカスタマイズ設定をするときには重宝できるので便利です。では見ていきましょう。

 

step
1
WordPressダッシュボードから「外観」>「カスタマイズ」へ進みます。

alt=WordPress,スマホ表示

 

step
2
カスタマイズメニューの下にある「スマホ表示アイコン」をクリックすれば、右側の画面でスマホ表示が確認できます。

alt=WordPress,カスタマイズ,スマホ表示

 

まとめ

スマホから訪問された方から高いユーザビリティを得るためには、スマホ表示にも細心の注意を払うことは絶対必要ですね。

そこでもう一度おさらい。スマホ表示で最低限確認しておきたいことは・・・

  1. 画像やイラスト、広告などがレスポンシブでキレイに表示されているか?
  2. フォントサイズ、改行などテキストがストレスなく読みやすいか?

この2点は確認しておきたいところですね。

今後はクイックでスマホ表示を確認しながら、ユーザービリティにも努めていきましょう。

\ 記事はお役に立ちましたか? /

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-ノウハウ情報
-

© 2020 WordPress theme NAVI