【スマホの表示意識してる?】スマホからのブログやサイトの表示(見え方)をパソコン上で超簡単に確認する方法

スポンサーリンク

こんにちは、WEBマーケッター山田祐輔です。

今回は、「PC上でスマホからのサイトやブログの表示を超簡単に確認する方法」について書いていきます!

 

はじめに

 

まず、なんでスマホでの表示を確認する必要があるかというと、2016年現在、スマホがめちゃくちゃ発達してユーザーの大半がスマホから見られているからです。以下が、2015年時点のスマホ普及率のデータでっす!

 

0831sp_zu02s

引用元:日経BPコンサルティング

 

利用率に目を向けると、日本人の約6割がスマホを利用しているというデータが出ていますね。

もちろんこれは老若男女のデータですので、若者をターゲットにしている場合は、もっとスマホの普及率が高くなります。

性年代別では10歳代、20歳代の若年層でのスマートフォン利用率が高く、特に女性の20~24歳では94.0%、同25~29歳では90.0%、また男性の15~19歳では89.0%、同20~24歳では85.0%に上っている。

引用元:日経BPコンサルティング

 

ですので、特に30歳以下の若者をターゲットにしている場合は、スマホでの表示はかなり重要になってきます。

特に若い女性はスマホでサイトを見ている傾向が高くなりまっす!

 

ちなみに僕のサイトはこんな感じ。

スクリーンショット 2016-08-28 13.48.31

 

約56%がPCでスマホやタブレットが約44%という感じです。

ただしこのブログはビジネス系の話題が中心なので、PCで見ている人が多いんですよね。

 

・自分のサイトがどれぐらいスマホで見られているか知る方法はこちら

→ 【Googleアナリティクス講座】Googleアナリティクスでデータを抑えておくべき項目10選【サイト・ブログ分析はこれだけ見ておけばOK!】

※上記の記事の「5、サイトがどのモバイル端末から見られているかを調べる」に記載してまっす!

 

ちなみに今回の機能は「GoogleChrome」の機能を使いますので、インストールしていない場合は下記からインストールしておいてください!!

→ https://www.google.co.jp/chrome/browser/desktop/

 

では、今からPC上で確認する方法について解説していきます!

 

PC上でスマホからのサイトやブログの表示を確認する方法

 

まずは、表示を確認したいサイトやブログ記事を選択します!

今回はこちらの記事を使って解説しまっす!

 

スクリーンショット 2016-08-28 13.33.36

 

では、この記事がスマホでどのように表示されているか確認していきます。

まずは、記事内のどこでもいいので、

・Windowsの方は「右クリック」

・Macの方は「二本指でタップ」

します。

 

すると、下記のような項目が出てきますので「検証」をクリックします。

 

スクリーンショット 2016-08-28 13.37.37

 

すると、このような画面になります。

左側に「PCでの表示」、右側に「サイトのソース(htmlコード)」が表示されています。

次に、下記の画像のようにソースの左上の「画面切り替え」のアイコンをクリックします。

 

スクリーンショット 2016-08-28 13.39.43

 

すると、左側の画面が切り替わってデフォルトは「レスポンシブ」での表示になっています。

※レスポンシブとは、スマホでも自動的にサイズを合わせてくれる機能(デザイン)の事です。2016年現在、ほとんどのワードプレスのテンプレートはレスポンシブ対応のデザインが採用されています。

ですが、場合によっては端末によって見え方が変わってくる可能性がありますので、スマホの端末別で表示を確認する方法を今から解説していきまっす!

画像のように「レスポンシブ」の右側の▼をクリックします。

 

スクリーンショット 2016-08-28 13.42.15

 

すると、下記のような項目が出てきますね。

この用意された項目で表示を見ていきます!

(今回は現在日本で使用率の高い”iphone6”で検証します)

 

スクリーンショット 2016-08-28 13.42.59

 

「iphone6」を選択します。

すると、こんな感じの表示になっています。

 

スクリーンショット 2016-08-28 13.43.22

 

さらに、下も見ていくと、、、

 

スクリーンショット 2016-08-28 13.43.53

 

うん、特に問題はないですね!笑

特に問題なければ、以前の画面に戻します。

右側のソースの方のページの右上の×ボタンをクリックします!

 

スクリーンショット 2016-08-28 13.45.18

 

すると、こんな感じでPCで見た時の通常の記事の画面に戻ります。

 

スクリーンショット 2016-08-28 13.33.36

 

これで、今回の解説は以上になりまっっす!

 

まとめ

 

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

今回の方法はブログの記事の見え方だけではなく、

 

・LP

・セールス(販売)ページ

なんかの表示も確認することができます!

 

特に上記のようなページは表示が崩れていたり、スマホで見にくいと集客や売り上げに大きく影響します!

(個人的にPCでいい感じだなっと思ったページがスマホで見た時に表示が崩れていたり、文字数が多いなと後からガッカリすることが結構あります。。)

ぜひ、今回の方法を使って、きちんとスマホでも表示されているか確認してみてください!!

 

ではでは!

 

スポンサーリンク

参考になりましたら、「ツイート」や「シェア」お願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

IT企業でメディア運営を行いながら個人でもWEBデザインやネットビジネス、映像など色んなことを勉強中!(特に海外のマーケティング情報が大好物)このブログでは主に学んだことを中心に、個人や小規模ビジネスを対象にしたコンテンツマーケティングに関する情報を中心に書いています!