【はてなブログ】ちゃんとスマホ対応しないとお客さん素通りしていくぞ!

きりんの自由研究ではブログを使って何かしたいと思っている人のために、ブログ運営してて気づいたTIPSも公開していきます。

その中でも今回は、はてなブログのスマホ対応について書きます。

はてなブログを使っている人は、バズった時お客さんが素通りしていくので、ちゃんとスマホ対応しておかないとヤバいです。

はてなブックマーク発で記事がバズるとほとんどモバイル経由になる

これはある日のこのブログのGoogle Analyticsのリアルタイム状況です。注目すべきは丸で囲んでいる所。PC/モバイル比率と、アクセス元です。Gnousy/smartnews経由の流入がメインになり、携帯電話比率がPCを超えます。

最近いくつか、はてブ経由での流入を狙った記事を幾つか書いています。これとか↓

この時は男女共に興味のあるテーマだったので、Smartnews/Gnousyから同時に大きく取り扱われました。

リアルタイムアクセス状況を見てないんだけど、Analysticsの当時の2日間のアクセス数が残っていました。

赤い丸に注目してください。Desktop=PC比率が3割を切って7割がモバイルアクセスになっています。

以下に直前のブログ開始一ヶ月未満、12月後半の二週間。牧歌的な頃のデータを合わせて掲載します。

PC/モバイル比率が逆転しているのが分かると思います。

もう1つ注目すべきは、直帰率・セッション・平均セッション時間の悪化です。バズ記事の定着が悪いのは仕方ないですが、明らかにはてなブログのスマホ版のインターフェイスも影響していると思います。

こうやってせっかく来てくれたお客さんがサイトを素通りしてしまわないよう、スマホ版のインターフェイスをしっかりしておきましょう。

別の日の別記事のブクマが多くついた記事の例。ホッテントリ入り/Smartnewsが同時進行だったけど、それでもこのPC/携帯電話比率です。

はてブ経由で流入が増えていく流れ

このページがはてなホッテントリの仕組みに詳しいです。推移を確認していましたがほぼ同じ流れでした。

ホッテントリするとその後、連動しているSmartnews/Gnousyに拡散し、さらにそこからTwitter/Facebookなど、とにかくモバイルデバイスに強い・専門のサービスに拡散し続けていきます。支流の河川からやがて本流へ、そして大海に出るような流れです。

もう1つのデータ。はてブと、拡散した先からの流入の差はどれくらいか。

今回の件では、はてブと拡散先からのアクセスボリュームは、はてブ5,304に対し全体セッション23,892だったので、22%がはてブ、それ以外が78%でした。きりんのブログはSEO流入がほとんどないので、それ以外に与える影響は軽微です。

この比率、はてブと拡散先の数値は、拡散されればされるほど開くのはご理解いただけると思います。そして、それはモバイルのアクセス比率と相関関係にあります。

なんとなくバズる時はモバイル比率が上がるだろうと思っていましたが、のほほんと運営していたため、油断していました。

はてなブログのスマホ対応状況について

初期状態のブログは以下のような画面デザインになっています。

そういえば、ブログを運営するときは、デザイン他のテスト用にプライベートに設定したブログをもう1つ開設しとくのをおすすめします。お客さんの入りを気にせずカスタマイズテストできます。

赤い枠は、おおよそのスマホ1画面に映るサイズだ。アプリ経由だともっと狭いかもしれない。

画面の2/3が、タイトル画像によってオサレ感出すだけのお客さんが喜びそうにないデザインになっています。

SNSやアプリ経由で記事ページに直接来たと仮定しても、タイトルすら見切れている。どのページに移動してもこのフォーマット。タイトル画像を入れなければだいぶマシになる。少なくともはてなブログの機能のスマホタイトル画像は絶対入れるべきじゃない。広告のほうがまだマシ。

フッターにはプロフィールと、注目記事(たぶん直近のPVベース)が5件のみ。カテゴリリンクも無し。これでユーザーが定着すると考えるほうが間違ってます。

はてなブログのスマホデザインカスタマイズについて

お客さんのモバイル比率が判明して泣きながら急いで調整した例が以下です。レスポンシブデザインテーマでは無く、基本のテーマをCSSで調整しました。

  • トップの画像とアイコンを全部消して細長いブログタイトルに差し替え
  • ブログ内を回遊できるようにナビゲーションを上部に設置
  • 下部プロフィールは別ページを作ってリンクにした
  • 下部に記事カテゴリ一覧ページへのリンクを設置

ブログタイトル差し替えは以下のページが参考になりました。
はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法

ナビゲーションの追加は以下のページを参考にさせてもらいました。
はてなブログのスマホ表示にグローバルナビゲーションを設置する

プロフィールの消去は、以下を参考にしています。
【はてなブログ】スマホ用ページ下部分のプロフィール(id)とかを非表示にしてみました

本当は、注目記事も続きを読むがあるべきだし、別ページで数十件見れるべきだろうし、新着記事にもフッターから導線があったり日付順にも見れるインターフェイスがあるべきだと思います。フッター導線読み込み速度に影響がなければ邪魔にならないし、あるに越したことないです。

とにかくこの変更で、ページセッションが1.5を越え、平均セッション時間が1.3分まで戻しました。


▼▼▼▼▼

というわけで、お客さんがいっぱい来た時のために、スマホ対応は是非しっかりしておきましょうという話でした。本当は、はてな運営さんが、スマホテンプレートを専用で設置できるようにしてくれたら、有志がテンプレートを投稿してくれて、スマホ対応も良い状況になると思います。

未来のお客さんのためにも、皆さんもお早めに。

【この記事に関連する記事はこちら】

こぼれ話や解説、ブログ更新をツィッターで毎日配信中