おはようございます。じぇいかわさきです。
あなたは、自分のサイトがスマホでどう表示されるか確認していますか？
自分は、つい最近までしてなかったんです。
画面が切れたりして最悪状態じゃない！
自分のサイトがスマホでどのように見えるか、スマホを使わないで確認する方法を紹介します。
スマホでの見え方、なぜスマホ画面確認が必要か？
スマホでの見え方、確認したことありますか？ ここで突然ですが、あなたはGoogle Analyticsを使用していますか？
使用している方なら分かると思いますが、最もよく使われるデバイスを確認すると、なんとスマホがダントツ1位なんです。
パソコンから見ている人が多いかなって思うじゃないですか。
でも、実際には自分の場合など、スマホで見ている人が75％にもなるんです。残りの22%くらいがパソコンで、残りがタブレット。
そう考えると、自分の書く記事はスマホに最適化したほうが良いということになるんです。
実は、今まで出来上がった記事を、スマホで確認するってことは無かったんです。
当然、自分でもスマホで見ますが特に気にすること無かったんです。
しかし、ある時に自分の記事を見ていると、なんだ文字がやけに多いな。アドセンスもうざいしって、自分で感じました。
と、自分で感じたということは、他の読者はもっとそのように感じていたんではないかと推測されます。
文字が塊で表示されると、ウッって成り、その場で読む気が失せますよね。
そう、自分のブログはそんな感じだったんです。
それは、ブログ運営で致命的な欠点だと、遅まきながら、今更気がついたんです。
どうにかしなくては！
公開するまえに、スマホ画面で確認するには
スマホでの見え方、確認していますか？しかし、無知な自分としてはどうすればよいのか、まったく分かりませんでした。
しょうがないので、一旦公開後に自分のスマホで表示させて、おかしなところを修正していました。
しかし、この方法では2度手間になることはもちろん、やたら更新になってしまいます。
自分のブログの仕様で、更新した際には、更新日時が付加されるようにしてあるのです。
そうすると、数分で更新された記録が残ってしまい、読者を混乱させてしまう可能性があると、自分でも認識しました。
困りましたね？
プラグインとか有るのか？調査してもみましたが、いまいち見つけることができませんでした。
はて、どうしたら良いのか？
記事を公開する前に、スマホでどう表示されるのかを確認するのが、簡単にできそうでできない。
それがその時の結論でした。
スマホでの見え方から意外な方法を発見、さすがGoogleさんです
スマホでの見え方を確認する方法で、相変わらず公開後にチェックをしたりしていたのですが、スマホ画面のチェックの場合は、更新方法を更新日時消去という方法を取っていました。
何か良い方法はないのかな？
時間が有るときには、キーワードを変えて、教えてGoogleさんと、検索を繰り返しました。
そして、意外なところに解決策が眠っていたんです。
自分は、ブラウザをずっとChromeを使用しているのですが、このChromeにはスマホ画面で確認する方法が有ったんです。
完全に目からウロコ、灯台下暗しでした。
それでは、その方法を紹介します。
最初に断っておきますが、条件としてwordpressで記事を書き、その際に使用するブラウザがChromeであることが絶対条件です。
申し訳ないですが、これ以外ではわかりかねます。
１．書き終わった記事をプレビューさせる。
まず、書いた記事をプレビューボタンを押し、表示させます。
そすると、別タブで一般的なパソコン用のプレビュー画面が表示されると思います。
２．Chromeの右上メニュー表示をさせ、その他ツールでデベロッパーツールを選ぶ
右上に有る、Chromeのツールを表示させる立てに３つ・が並んだ所をクリックし、メニューを出す。
その中で、その他ツールを選択し、更に開いたメニューからデベロッパーツールを選ぶ。
※その他のツール（L） ＞ デベロッパー ツール（D）の順です。
３．プレビュー表示をデベロッパーツールに切り替え、表示をスマホにする
デベロッパーツールを選択すると、半分にソースコードが表示されるモードに切り替わります。
その真中にメニューバーがあり、左から２番めのアイコンがパソコンとスマホ画面の切り替えになっております。
この部分をクリックする毎に、トグルスイッチになっており、パソコン表示とスマホ表示を切り替えて確認ができるようになります。
先程のプレビュー画面が、このようにスマホ画面に切り替わります。
このツールを使うことにより、わざわざ投稿後に実画面を見て確認しなくても良くなるのです。
100%同じではないかもしれませんが、大凡の表示の仕方は確認できるのです。
後は、このプレビュー画面でスクロールしながら、全体の表示状態を確認します。
この方法を覚えたので、スマホ画面への最適化をするのが非常に簡単になりました。
スマホでの見え方、確認していますか？ まとめ
スマホでの見え方、確認していますか？について今回は記事を書きました。たしかに、世の中はスマホでブログやニュースを確認することがほとんどの状態になりました。
理由は、場所を選ばずにどこでも簡単に見ることができるからです。
従って、パソコン画面に最適化したものではなく、スマホ画面に最適化したものが読まれる確率が向上すると思われます。
つまり、パソコン画面で最適化したものは、スマホで見ると、文字多すぎで見やすさが激悪になるからです。
今回のツールを使用し、表示状態を確認するようになってから、有ることに気が付きました。
それは、行間を更に広げると見やすくなるということですね。今は、行間を2行開けるようにしていますが、まだまだ改善の余地はあります。
今回の記事で言いたかったことは、スマホ画面を意識して記事を書かなければいけないと言うことですね。
人気記事 何でwordpressはセルフピンバックするんだ？無駄なピンバックを回避してみた。
人気記事 Google Search Consoleでエラーを修正してくれと怒られた
