Screenflyでデバイス別表示を確認しよう～モバイルフレンドリー最適化

私はメインでブログを書くのはPCなんですが閲覧はスマホが多いのです。
なので最近ブログの巡回が増えたのですが、そのせいかやたら気になることが。

みなさんデバイス別の表示画面を確認していますか？？

モバイルフレンドリーとは

モバイルフレンドリーとは – 意味 | IT用語辞典 サバナビ

まとめると、

・スマホ表示に対応していること
・横スクロールがないかどうか
・読みやすい文字の大きさ
・リンクをタップしやすいかどうか

これらに対応させるのがモバイルフレンドリーだということ。
このモバイルフレンドリーというのはかなり重要で、グーグルさんも言及しています。
今後モバイル対応していないサイトやブログは、検索順位が落ちていくと思います。

コンソールツールでモバイルテストをしてみて、以上のような表示になればOK！

今はもうスマホでブログを見る時代です。
モバイルに対応されていないということは、多くの読者に不便を強いていることになります。
自分が使用しているデバイスでの表示方法は確認できても、それ以外の表示確認をしていない人は結構いると思うので、以下のサイトと簡単な使い方を紹介しておきます(･∀･)

デバイス別表示の確認方法

私はスマホはiPhone７そしてiPad、ノートPCを持っています。
私が持っているすべての端末でのこのブログの表示に不備はないはずですが
所有していない端末ではどうなのか気になりますよね。
その時は以下のサイトを使って確認します。

Screenflyで表示を確認する

Screenfly / Test Your Website at Different Screen Resolutions

ダウンロード・登録不要です。簡単な使い方を以下に書いておきます。

まずアクセスした先にて確認したいブログのURLをいれてGoを押します。

そうするとこういう画面がでてきます。これはメニューバー。
実際の表示確認画面はこの下にでてきます。

なんとなく分かると思うのですが、左からPC、タブレット、モバイル、テレビ。
この中で表示を確認したいものをクリックすると

このような端末選択画面になるので選択してクリック。

今回はgalaxy s3-7というのを選択しました。
ヘッダーに横スクロールバーがついている以外は大丈夫そうですね。
しかしこのスクロールバー消した方がいいかなとも思っています。

というのもこのブログはアナリティクスでみると
7/1～8/11までのモバイルユーザーのうち約7割がiPhoneかiPadユーザーなんですよね。
そのうち横スクロールバーがでていないのはiPhone7と同じピクセル数のiPhone６。
それ以外のiPhone3～5利用者に横スクロールが出ている状態なのです。
（そしてこのiPhone3～5の利用者がかなり多い）

ブログが読めないわけじゃないので少数派ならいいかなと思っていましたが
これだけ多いとやはり気になるので何かしらの調整はするつもりです。

全てに対応するのはもちろん不可能

全ての端末・デバイスに対応するのは不可能ですよね。ええ、わかっています。
でも自分が使っている端末で大丈夫だからといってその他も大丈夫とは限りません。
せめてアクセスのメインデバイスくらいは最適化をしたほうがいいかも。

特に上で書いた横ずれは早急に対処した方が良いです。
すんごい読みにくくて私はいつも読むのをあきらめます(‘ω’)

モバイル表示速度も大事ですよ(‘ω’)

はてなブロガーさんにぜひお願いしたいこと

えっとですね、ぜひ読者登録ボタンを分かるところに設置してほしいなーなんて。

というのもですね。
わーこのブログおもしろい！読者登録したい！と思ってもですね
読者ボタンのかけらもないブログがかなり多いのです(‘ω’)

ヘッダーにもなければ記事内にもないしサイドバーにもない。
そもそもスマホだとサイドバーそのものを非表示にしているブログ多いですよね？
PCでは見えていますがスマホで見るとアレ消えてますよ。

いや、もちろん読者登録は重視していない方もいらっしゃるのは承知。
その反面読者が増えると励みになる人もいるはず。
なのでそういう人は読者登録ボタンを見えるところに設置した方がいいです。
（私は記事下とサイドバーに設置しています）

ちなみに読者登録ボタンは、ブログ管理画面の左バーにある
設定→詳細設定の下部に読者になるボタンのところにコードがあるので
これを設置したい場所にコピペすればOKです(‘ω’)

スマホ表示画面を固定してほしい

なぜかスマホの表示画面が横にずれてしまうブログが結構あります。
恐らくスマホの表示画面のサイズ以上のサイズ指定がその記事にあるからだと。

画像とかではなくおそらくページ要素そのものだと思うんですが
その横ずれするブログのCSSまでは確認しないので理由は分かりません。
ただ見るのを辞めるだけです。

スマホ表示で画面が横スクロールする現象の原因と直し方
詳しい対処法はこの辺りをどうぞご覧なすって。

今日はここまで。それでは、また！