スマートフォンからの見え方を必ず確認しよう
ブログ記事を公開したら、必ずスマートフォンからの見栄えを確認する必要があります。
なぜなら、ブログを見ている人の7割から9割がスマートフォンからのアクセスだからです。
私のブログの解析結果
例として、私のブログのGoogleAnalyticsのデータを見てみましょう。

モバイルの割合を確認する画面は、GoogleAnalyticsにログインし、メニューの「オーディエンス」>「モバイル」>「概要」をクリックすることで表示出来ます。

右上に表示されている、年月日をクリックすると期間を指定することが出来るので、「カスタム」にして、過去1年間のデータを参照してみました。

結果、80%以上の方が、mobile(スマートフォン)からのアクセスとなっています。
desktop(パソコン)からのアクセスはたったの12.82%。
その他tablet(タブレット端末)からのアクセスが6.42%となっています。
さらに余談ですが「オーディエンス」>「モバイル」>「デバイス」を見ると機種もわかります。

iPhoneのシェア率が58.2%と、半端ないですね。
スマートフォンからの見栄えがもっとも重要
というわけで、いかにスマートフォンでの見栄えが重要かが分かるかと思います。
むしろパソコンで見たときの見た目はそこそこでも良いぐらいですね。
しかし、私を含め多くのブロガーさんは、パソコンで記事を執筆しているはずです。
スマートフォンで記事を作ったこともありますが、文字入力の速度が違いすぎて、ちょっと実用的ではないですよね。
すると、ついパソコンから確認しただけで、記事の確認を終えてしまうこともあるかと思います。
必ずスマートフォンからの見栄えをチェックする癖をつけるようにしたいところですね。
パソコンからの確認方法

GoogleChromeを使って、パソコンからスマートフォンの見え方を確認することが出来ます。
GoogleChromeで自分のWebサイトを開いてください。
そして、Macの場合、ファンクションキー+F12を押してください。
Windowsの場合、F12キーを押してください。

キー入力で表示されなければ、「Google Chromeの右上に表示されている赤いマーク」>「その他のツール」>「デベロッパーツール」を選びます。

すると、開発者モードという画面に切り替わります。記事ページのhtmlのソースコードや、スタイルシートなどのコードを確認できるモードです。
この開発者モードに、スマートフォンでの見栄えを確認することの出来る機能が備わっています。
右上の赤丸をしたマークをクリックしてください。

このマークですね!

すると、このようにパソコンから見ているのに、擬似的にスマートフォンで見ている状態を表示してくれるようになります。
responsiveというところをクリックすると、スマホの機種ごとの表示幅で表示することも出来ます。
ただし、実際にスマホで見た場合と完全に同じ表示になるわけではないことに注意が必要です。
あくまでも、ほぼ同じように再現してくれる、ということに気をつけましょう。
- 画像が小さすぎないかor大きすぎないか
- 文章がパソコンとは改行位置が異なる。改行によって見づらい箇所はないか
- テーブルを挿入した場合、幅がはみ出ていないか
- 行間、文字フォント、文字の大きさは適切か
- 貼り付けた画像の文字が、スマートフォンから見て小さくないか
ちょっとした見辛さが、スマートフォンユーザーにとって致命的なストレスを与えることもあるでしょう。
少しでも見にくいWebサイトだったら、すぐに他のサイトへ行ってしまうかもしれません。
というわけで、以上のポイントをしっかりと確認したいところです。見た目にしっかりとこだわることで、読者の満足度が上がります。
すると、アフィリエイトの成約率や、記事の滞在時間が向上しますので、必ずチェックしましょう。
まとめ
- ブログ記事は、7割〜9割もの読者がスマートフォンで読む
- ブログ記事は、スマートフォンからの見た目を必ず確認する
- GoogleChromeから、擬似的にスマートフォンでの見た目を確認することが出来る
- パソコンとスマートフォンからの見栄えを必ずチェックする癖をつけよう
takotonoを最後までお読みいただきありがとうございました。