広告の視認率を改善する為にレスポンシブからスマホ専用デザインに変更しました！

はてなブログのデザインをレスポンシブデザインからスマホ向け専用デザインに変更したのでその経緯と、スマホ向けおすすめカスタマイズについて紹介します！

はてなブログを始めた頃は、何も分からずパソコン向けとスマートフォン向けのデザインをそれぞれを変更していましたが、その後レスポンシブデザインに対応したテーマが登場し、僕もレスポンシブデザインに変更しました。

はてなブログデザイン

レスポンシブデザインの良いところは何と言っても管理が楽なところ！

レスポンシブデザインでない場合には、PC向けとスマホ向けそれぞれのCSSを変更する必要がありますが、レスポンシブデザインの場合は一つのCSSで両方のデザインを管理しているのでそれだけでもすごく楽です！

そして僕がレスポンシブデザインを使っていた一番の理由は、

はてなブログではPC向けとスマホ向けで表示出来る機能が異なるからです。

例えば「最新記事」PC向けページでは任意に設定できますが、スマホ向けページでは設定できません。

Why？！

他にも「関連記事」「カテゴリー」「月別アーカイブ」なんかも、はてなブログの機能としては表示することが出来ません。（出す方法はいろいろありますが…）
後は無駄なリンクや配置が移動できないなど不満を言い出したらキリがないですが…ｗ

上記のような問題もレスポンシブデザインなら全て解消してくれるので使っていたわけですが、ここに来てレスポンシブデザインにも少し不満を感じ始めました。

レスポンシブデザインに不満を感じている点は”広告”です。

レスポンシブデザインの場合、広告もPCページと同じ広告ユニットがスマホページでも表示されます。
この点はAdSenseのレスポンシブ広告を設定していれば、画面サイズに合わせて自動的に広告が切り替わるので問題ないのですが、アクティブビュー視認率が大きく変わってきます。

”アクティブビュー視認率”と言うのは簡単に言えば広告が表示された割合の事。

例えばPC向けページでサイドメニュー上部に広告Aを掲載しているとします。

その場合はPCページではファーストビューに広告Aが表示されるので視認性は高いですが、スマホページの場合メインの記事の下に広告Aが表示されるので、視認性は非常に低くなります。

例）広告Aの視認率
・PCページ視認率：80％
・スマホページ視認率：30％

その結果、本来PCページでは視認性が高い広告枠でも、スマホページが視認性を低下させてしまっていることで視認性を最大限に高めることが出来なくなってしまいます。

視認性とアクティブビューが低いと収益にどのような影響を与えるかというと、それはGoogleさんが説明されているのでそちらを記載しておきます。

最近の広告主は閲覧できるインプレッションの購入を求める傾向にあり、視認可能な広告枠を持つサイト運営者は、この傾向を利用してより多くの収益を得ることができます。
AdSenseヘルプより

簡単に説明すると、広告主は視認性が高い広告枠を買う傾向があるから視認性が高い広告枠は収益が上がるかもよ！ということです。

せっかくPCで視認性が高い広告枠（広告主に好まれる）があってもレスポンシブデザインによってスマホページが視認性を下げてしまい、結果的にその広告枠の収益を下げてしまうことがあるのです。

AdSenseからもたまに通知が来ますよね！

「広告がユーザーの目に触れていることを確認してください。」

これは視認性を上げれば収益が上る可能性がありますよ！という案内です。

このようにレスポンシブデザインによって広告の視認性を低下させてしまう可能性があるので、レスポンシブデザインをヤメ、PCとスマホ専用デザインに変更することにしました。

※1. アクティブビュー視認率はAdSenseの管理画面で確認出来ます。
※2. 収益が向上する事を保証しているわけではありません。

レスポンシブデザインをヤメてスマホ向けページを作るとなると面倒なのがカスタマイズです。

先にも書きましたが、まぁはてなブログのスマホ向けページはイケてない…。

そこで『はてなブログスマホカスタマイズ』で調べていたら素晴らしいカスタマイズ方法を公開されている記事を見つけました！

タイトルにも「最強」とありますが本当に最強ですｗ

不要なリンクの削除から、イケてるカスタマイズ方法まで1～10まで全て説明されていて素晴らしい！

はてブ数も942件と凄まじいのでご存知の方も多いと思いますが、僕もこちらのカスタマイズを利用させて頂きました！

途中カスタマイズ方法でちょっとつまずいてしまい、図々しくも id:codomisu さんにtwitterで質問したら丁寧に回答もしてくださり本当に助かりました！

初心者向けからベテラン向けまで、非常にわかりやすく解説されているので、スマホ向けページを利用されている方は是非御覧ください！

スマホ向けページで一番気になっていた「関連記事」の表示については、AdSenseの「関連コンテンツユニット」で対応しました。
（何でデフォルト機能でないんだぁ！）

■PCページの記事下に関連記事を出す方法はこちらで詳しく説明しています。

いかがだったでしょうか？レスポンシブデザインからスマホ専用ページに変更したからといって、必ずしも収益が上がるわけではないと思いますが、たまには広告の単価やクリック数だけでなく、アクティブビュー視認率にも目を向けてみてください！

もしかしたら収益が上がるかもしれませんよｗ