ブログ運営とーく

【ほぼスマホ】ブログ記事はスマホからの見た目もチェックしよう

・ブログ記事ってスマホからの見た目も気にした方がいいの?

・自分のブログってどのくらいの人がスマホから見てくれてるんだろう?

・いちいちスマホで見るの面倒くさいんだけど、いい確認方法ない?

 

こんな人のための記事です。

 

結論から言うと、スマホからのブログの見た目は絶対確認しておくべきです。

なぜなら、思っている以上にスマホからの読者が多いから。

 

本記事では、読者のうちどのくらいの人がスマホユーザーなのか?というデータを見ていただきつつ、自分のブログ読者のデバイス確認方法や実際の作業手順について解説します。

スマホを制するものはブログを制すので、ぜひ最後までご覧になってみてください。

ブログ読者はほぼスマホ

当ブログ「まねとーく」のデータを見ていただくと一目瞭然です。

  • モバイル:91.53%
  • デスクトップ:6.95%
  • タブレット:1.52%

なんとモバイルが91.5%を占めています。僕のブログの場合は、スマホからの見た目が極めて重要ということになります。

この数字はサイトによって違うので、まずはあなたのブログの状況を確認してみましょう。

 

確認方法:自分のブログ読者のデバイス分布

確認には「Googleアナリティクス」を使います。

デバイス分布の確認方法

手順は簡単です。

Googleアナリティクスにログインして、「オーディエンス → モバイル → 概要」の順にクリックです。

これで先ほどの画面になり、読者が「何を使って」ブログを見ているかがわかります。

機種の特定方法

表示を変えると、スマホの中でも「どの機種で」見ているかまでわかります。

操作は先ほどとほぼ同じで「オーディエンス → モバイル → 概要」です。

当ブログではダントツでiPhone(68.57%)ですね。

こんな感じで、まずは「あなたのブログをスマホで読んでいる読者」がどのくらいいるのかを確認してみましょう。

多分ですが、少なくても60%は超えてるんじゃないかなと思います。

 

確認方法:スマホでの見た目確認方法つ(PCからも可能)

方法は3つあります。

  1. 直接スマホで開いてみる
  2. WordPressの「外観」を使う
  3. GoogleChromeを使う

言うまでもなく一番手っ取り早いのは①ですが、説明不要ですね。ちなみに僕も①です。

②と③の方法について少し補足します。

② WordPressの「外観」を使う

こちらはPC画面上でスマホでの見え方を確認する方法です。

お使いのテーマによって操作方法や表示場所が違う場合があります。

機能自体は備わっていると思うので、下記の手順で見つからない場合はテーマのマニュアル等をご確認ください。

ダッシュボード左のメニューバーから「外観 → カスタマイズ」と進みます。

僕のテーマの場合は、次に開くページの左下に切り替えボタンが表示されています。

左から順に「デスクトップ・タブレット・スマホ」です。

WordPressのテーマはいくつか使ったことがありますが、どれもこの機能は付いていたような気がします。

③ GoogleChromeを使う

こちらもPCから、ブラウザ「GoogleChrome」を使って確認する方法です。

拡張機能とかアドオンとかは使わずに「ほぼ」スマホの見た目を再現できます。

Windowsパソコンの場合

F12を押す(または「Ctrl」+「Shift」+「I(アイ)」同時押し)

Macパソコンの場合

  • デフォルト設定:「Command」+「Option」+「I(アイ)」同時押し
  • Windowsキー設定:F12

 

上記のコマンドを入力すると画面が切り替わります。

この時点ではまだスマホの見た目にはなっていません。

この画面でスマホとタブレットのマークをクリックして、さらに画面を切り替えます。

ちょっとわかりにくいですが、画面右側の一番上です。

これで画面左側に、ほぼスマホの見た目が表示されます。

余談ですが、画面左一番上の「Responsive」を選択するとデバイスを切り替えられます。

iPhone、Galaxy、Pixel、iPadでの見た目を確認できます。

 

参考:僕の作業工程と確認・修正ポイント

僕は100%パソコンで記事を書いています。

フリック入力でも書けないことは無いんですが、タイピングの方が遥かに速いのと、頻繁に画像編集をするので。

作業工程

僕はいつも以下のような手順です。

  1. PCで記事を書く
  2. PCから誤字脱字のチェック
  3. スマホで開いて見た目をチェック
  4. スマホを見ながらPCで最終調整する

こんな感じでして、書いた記事を2〜4回くらい読み返します。

誤字脱字はPCからチェックしてその場で直しますが、スマホで改めて見ると明らかに目に付く箇所が出てくるんですよね。

修正ポイント

スマホで見た時に修正しているポイントは以下の4つです。

  • 行間
  • 一文の長さ
  • スクリーンショットに書き込んだフォントの大きさ
  • 表を作った時の見栄え

行間

特に、文末と次の見出しのスペースを見ています。

PC上で離れて見えていても、スマホだとほぼ隙間が無かったりするので。

一文の長さ

スマホはPCよりかなり画面が小さいので、PC上では十分余白があるように見えても、スマホだとギュウギュウに文字が詰まっている場合があります。

↑ちなみにこの一文、PCだと2行ですがスマホだと4〜5行になります。

スクリーンショットに書き込んだフォントの大きさ

これもPCでは「ちょっと大きいかな?」と思ったフォントが、スマホだと拡大しないと見えなかったりします。

画面サイズがあまりに違うので、ある程度は仕方ないんですけど。

表を作った時の見栄え

PC上で全部のセルが1行で収まっていたとしても、スマホで見ると1文字だけ改行されていたりして割とイライラします。

どうしても調整できない時は、いっそ画像にするのも手ですね。

補足:画像も超大事

余談ですが、画像の良し悪しは読者のテンションに大きく影響します。

画像編集ド素人の僕ですが、読者さんによく画像を褒めていただくので、作業手順をまとめてみました。よかったら参考にしてみてください。

>> フォトショもイラレも使えない!ド素人でもできる画像編集・加工法

ちょっとしたことがスマホ読者のストレスに

文章にとって最大の天敵は「ストレス」です。

見た目のバランスが気になって、肝心の内容が入ってこなかったり、読みづらさが続くとあっさり読むこと自体を辞めてしまいます。

この辺りは下記にチラッと目を通していただけると、重要性が理解しやすいと思います。

>> 【重要】良い文章と読者ストレスの関係性

 

パソコンでもスマホでもストレスを与えない記事を書こう

ということで、スマホ読者は僕たちの想像よりも多く、見栄えの悪さは読者に余計なことを考えるキッカケを作ってしまったり、離脱させてしまいます。

そうかといって、「スマホからの見た目だけ整えればいい」というわけではありません。どちらから見てもストレスを感じないレイアウトを心がけましょう。

なぜなら、以下のようなことに繋がっていくからです。

  • ストレスを与えないレイアウトにする
  • 離脱率が下がり、滞在時間が延びる
  • 検索エンジンからの評価が上がる
  • 検索順位が上がり、アクセスも増える

本記事では「レイアウト」にフォーカスしましたが、メインの文章でストレスを感じさせてしまっては本末転倒です。

以下の記事も合わせて読んでいただくと、ライティングスキルが大幅に上がり、より魅力的な記事が書けるようになるはずです。

初心者から副業ブログを作るロードマップ

なお、本記事は「ブログのアクセスアップ(SEO)」「収益化の手順」の一部でして、以下の記事でやるべきことを順序立てて網羅しています。

>>「初心者が副業ブログで月5万円を稼ぐまでの完全ロードマップ」

 

上記のロードマップから本記事を読んでいる方は、「フォトショもイラレも使えない!ド素人でもできる画像編集・加工法」に進みましょう!

フォトショもイラレも使えない!ド素人でもできる画像編集・加工法 ・ブログの画像をもっとおしゃれにしたい! ・でもフォトショップとかイラストレーターとか使えない… ・ド素人でもできる画像加工...

この記事が参考になったら
\Follow me!/

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA