読者です 読者をやめる 読者になる 読者になる

Life is colourful.

Inspire yourself

スマホユーザーに優しいブログ運営と便利なツールを紹介

f:id:mtasam:20161013225347j:plain

 

今や世の中モバイルアクセス全盛の時代。Webサイトの管理は、モバイルユーザーを大切にしなくてはいけません。

これは、Webが生業の人だけの話ではなくて、インターネットという同じ土俵の中にいるブログ運営者も同じ姿勢である必要があります。スマホユーザーがあなたのブログをどう見るか、ブログ内でどういう操作をするか、を優先的に考えた方がいいです。

 

このブログの訪問者も6割以上はモバイル端末からのアクセスです。タブレットも含めれば7割。下の図のように、朝の通勤時間なら9割近いアクセスがスマホからきます。(毎日こういう感じではありません…)

f:id:mtasam:20160630105653j:plain

 

数の多い方をメインターゲットにするほうが賢いですよね。

もちろん、スマホユーザーもPCユーザーも両方を満足させることがベストですが、マジョリティであるスマホユーザーを最優先するのが普通です。

 

スマホユーザ目線でブログを作らないと、コンテンツと関係の無いところで思わぬ損をしてしまう可能性があります。


なぜこういうことを書いているかというと、ブログ運営者ってPCで自分のサイトを見ることの方が多いからです。多くの人はPCで記事を書いているでしょうから、自然と目線がPC画面基準になっているんじゃないかと思います。(自分がそうなので)

つまり、カスタマイズしたいけど時間がないと言うときは、スマホ表示を優先したほうがいいということです。 

 

 

スマホユーザー優先で意識すること

「スマホユーザーを意識!」と言っても、人によってできる対策の範囲が違います。ここでは、誰でも簡単にできることだけ書きます。

 

スマホユーザの特性を理解

f:id:mtasam:20161013225825j:plain

スマホユーザはとにかく待ってくれません。まずはこれを理解しましょう。

スマホユーザ-は、電車の中や喫茶店からスキマ時間にアクセスしてきます。PCユーザーと違って、じっくり読もうという姿勢ではないです。

文章も飛ばします、気に入らないことがあればすぐに離脱します。遅かったり、欲しい情報がすぐ見つからなかなければ他のサイトに移ります。もちろん、圧倒的なコンテンツを提供できていれば話は別です。

 

Google Analyticsで調べてみるとわかりますが、基本的にはPCユーザ-よりモバイルユーザの方が滞在時間が短いはずです。

 

スマホ用のレイアウト

PC用の表示とスマホ用の表示は違います。

PCで見たとき、多くのブログのレイアウトって記事部分とサイドバーに分かれています。こんな感じです。

f:id:mtasam:20161014164304g:plain

 

でもこの右のサイドバー、スマホ表示だと消えます。利用しているテーマによりますが、非表示になるか記事の下に移動するかのどちらかです。記事の下に回り込んだ場合でも、表示はされているもののそこまで目を通してくれる人ってほんの一握りだと考えた方がいいです。(これは、下で紹介するヒートマップ解析を導入すれば理解できます。下まで全然見てくれません。)


つまり、「このブログのおすすめ記事!」とかをサイドバーにおいても、6,7割の人は目に入っていないということです。これは、サイドバーが無駄といっているわけではないですが、「3割くらいの人にしか見られない場所」と認識しておかないと大きな誤算につながるということです。

 

 

 

軽量化

f:id:mtasam:20161013230319j:plain

スマホはPCに比べて非力です。回線も非力です。なので、軽量化しましょう。

 

誰でもできる軽量化は、ブログ内の写真(画像)に気をつけることです。とくに、コンピュータ系に疎い人は大きなサイズの画像を貼りがちです。デジカメの最大画素数で撮った数MBの写真を何枚も貼ってしまいますね。たまに見かけます。無料素材サイトの画像も可能な限りサイズを落とした方がいいですよ。

 

テキストだけのブログより写真はあったほうが見栄えもいいし効果的なので良いですが、重い画像はNGです。

同じ画像でも、見た目の劣化を感じさせずサイズを落とすことはできるので、せめてこれくらいは読者のために気をつけたほうがいいです。

 

もし、あなたのブログの特定のページの直帰率や滞在時間が極端に悪い場合は、そういうことが原因かもしれません。

 

 

モバイルファーストなブログ運営におすすめなツール

スマホ表示確認用ツール

https://blisk.io

f:id:mtasam:20160730165751j:plain

 

Bliskは、無料のWebブラウザです。Bliskの最大の利点は、スマホ画面とPC画面を同時に見れること

普段はChromeやFirefox、Safariを使っていればいいのですが、ブログをカスタマイズするときはBliskを使うのがいいですよ。デザイン編集やマネタイズ施策した後に、BliskでURLたたけば一発でPC表示もスマホ表示も確認できます。便利です。

f:id:mtasam:20161014165916j:plain


僕も記事を投稿する度にBliskで表示をチェックしています。

Download Blisk - a browser for web developers

 

 

 

画像軽量化ツール

f:id:mtasam:20160730165839j:plain

上でも書きましたが、ブログ内の画像はファイルサイズを落とした方がいいです。面倒ですけど、来てくれるユーザーのために一手間です。

この辺のツールを使うのが便利でいいと思います。

JPEG Optimizer - Compress and Resize Your Digital Photos

TinyPNG – Compress PNG images while preserving transparency

 

画像圧縮ツールの詳しい使い方は、過去記事で説明していますので参考にしてください。面倒といっても、画像ファイルをドラッグ&ドロップするだけです。

 

速度チェックツール

Mobile Website Speed Testing Tool - Google

f:id:mtasam:20160629235644j:plain

一度、自分のブログを速度チェックをしてみましょう。

あなたのブログが、どれだけモバイルユーザ-に優しいのかが数値でわかるサイトです。URLを入力するだけで、Googleが採点してくれます。

これも上と同じ過去記事で詳しく説明を書いています。

 

ユーザのサイト内の挙動解析

https://www.ptengine.jp

f:id:mtasam:20160730165918j:plain

 

Ptengineを使えば、サイト内でのユーザの動きがヒートマップで可視化できます。スマホユーザ-がブログ内のどこをじっくり見ているのか、どこをクリックしているのかが手に取るようにわかります。

こんな感じで色付けされます。図内の◯%という数値は、スクロール到達度で、そこまで読んでくれているユーザーの割合を示しています。

f:id:mtasam:20161014171459j:plain

 

これで自分のブログを解析して、ブラッシュアップしていくといいですよ。スマホユーザ-と同じ目線に立てます。

はてなブログユーザーは特別の入り口がありますので、こちらから申し込むと色々と特典があります。もちろん無料です。

はてなブログユーザー専用プラン|Ptengine

 

ちなみに、上で書いた「記事下まで見てくれるユーザーはほんの一握り」という事実もヒートマップで理解できます。

下の図はスマホ表示時の記事下のヒートマップ画像です。この記事の場合、本文を読み終わって、記事下部まで見てくれているのは、わずか1%です。これは極端な例ですが、平均数%と認識しておくのがいいです。もちろん、上質なコンテンツを提供しているブログの人は、この限りではありません。

f:id:mtasam:20161014171717j:plain

 

ヒートマップを導入してみると色々とオモシロイことがわかりますので、解析結果から判断して、自分なりに試行錯誤してみるのがいいです。

Ptengineの導入方法や検証に関してはこちらで書いています。是非ためしてください。

 

 

ここで紹介したツールを含めた、ブログ運営全般に関する便利ツールは、こちらでも紹介しています。よろしければどうぞ。