レスポンシブデザインにしたことによる収益とデザインへの影響
【スポンサーリンク】
やあみんな、ふーかだよ
最近カスタマイズにも手を出したいと思ってはてなブログのテーマをNakedに変更してみた
ついでにレスポンシブデザインも適用してみた
スマホから見てもおしゃれで見やすくなったので気にいってる！
その中で気になったことが二つあったので書き起こしておくよ！ 誰かの参考になればいいなあ
謎の右余白
スマホから見た時にサイトの右に謎の余白スペースができていた
実際は画像よりひどくて記事が見えないくらい右までスクロールできてしまう
下にスクロールしようとしてもなにもない右にスクロールされたりして激しくうざい
僕が読者ならいらいらして離脱すること待ったなしである。絶対離脱率上がるよこれ
おそらく原因はレスポンシブにしたことだろうとぐぐっていろいろとコードをデザインＣＳＳにぶち込んでみたりしたけど効果なし
というかこのテーマ作った人ははてなブログカスタマイズで有名なゆきひーさんである
そのゆきひーさんがレスポンシブ時に右余白ができるなんて凡ミスを残したままテーマをリリースするわけがない！
となるとデザインＣＳＳのどっかのコードが悪さしてるのかなーと思って、いろいろなコードをデザインＣＳＳに入れてみたり、逆にデザインＣＳＳのコードを取っ払って見たりしたけど変化なし
数日がんばってみたけどまったく直らないしもうレスポンシブデザインを諦めようかと思ってた
スマホの右余白が消せねえ…なぜだ…
— ふーか＠はてなブログ (@yattekoko) 2017年3月1日
これ絶対ユーザビリティ最悪だし早く直さねばならんというのに…
レスポンシブにしたせいなのは間違いないしとりあえずレスポンシブ外すしかないかなあ
帰ったらレスポンシブ外して今までどおりのスマホデザインでがんばろう・・・と思っていたら鳴り響いた携帯電話。嫌な予感はよぎらなかった
@yattekoko 一番そこの広告がくっそはみ出てるので多分原因これだと思う。 pic.twitter.com/voF431zybJ
— OMG👁🗨 (@omgoxorg) 2017年3月2日
これだーーー！！！
昔貼ったわー！ ここからは一切発生してない無駄広告だー！
とりあえず外してみるか！
直ったあああああああああ！！！
OMGさんありがとうございますううううううう
感謝してもしきれない。多分一人じゃ見つけるまで数週間かかったであろうバグ
おかげでスマートなレスポンシブデザインになりました
原因はノリでフッターの適当な空きスペースに広告を貼ったことでした
適当に貼っても意味ないのにねえ。反省してます
広告のサイズは固定で728px×90pxだったのでレスポンシブがサイトの横幅をこいつに合わせてたみたいだね
見つけられなかった理由はデザインCSSが原因と勝手に決めつけてしまっていたこと
実際はフッターに貼っていた広告だった
今後はデザインが狂ったときはデザインCSSだけではなくてコードを書ける場所すべての箇所を確認して、ブログ全体をしっかり見直すことにします
アドセンス収益が倍増した
アクセス数はそのままにアドセンスだけが倍になった。うまい
レスポンシブデザインにして２週間くらい経つけど安定して２倍以上をキープしてるから偶然ではなさそう
どうやらブログのデザインをレスポンシブデザインにしたことによってスマホでブログを見たときのアドセンス広告枠にPC用のレクタングル大が表示されていたことが要因になってたっぽい
スマホ用に用意していたのはレスポンシブ広告だったので広告サイズが大きくなった分クリック率が上がったみたい
単価はほとんど変わりなかった
大きいほど単価が高いと思っていたけど広告サイズで単価がほとんど変わってないのは意外だったなあ
広告サイズは収益に直結するとは聞いてたけどここまでとは思わなかったのでびっくり
単価そのままにクリック率が倍増したことで収益も倍増したよ！ 元が平均以下だったのは秘密
ただいいことばかりじゃなくて心配事もいくつかある
レクタングル大は336×280とスマホにはかなり大きいサイズである
これはiPhone5Sなんかの小さいスマホだと横幅が足りなくなってしまうのだ
僕のブログのアクセス解析を見てみると336未満の画面サイズ端末からのアクセスはだいたい11.5％
つまり１０人に１人くらいの割合で広告が画面をはみ出てしまう
これは結構ユーザビリティー的に問題な気がするので検討中
またレクタングル大はスマホから見るとサイズがかなり大きい
僕のブログではタイトル下にアドセンス広告を配置しているのでファーストビューの占有になってしまわないかも心配である
これについてはおすすめ記事の挿入なんかでなんとかなるはず
問題になりそうなのでグーグル神の怒りを買わないうちに直しておきたいところ
やっぱりスマホから見たときにレクタングル大は邪魔かなーという気持ちもあるけど収益も大事だしとりあえずこのままで行ってみようかな
今後の離脱率や滞在時間が極端に落ちるようならレスポンシブに変えようと思います
スペシャルサンクス
OMGさん
感謝しかない。わざわざブログを確認してご指摘いただきありがとうございました！！
ＯＭＧさんは現役のデザイナー！
そしておしゃれなロゴの作り方やデザイナー目線での記事を書いているブロガーでもある！
個人的にはロゴの作り方記事が素晴らしいと思う。僕も時間ができたら正円でロゴを作ってファビコンに設定したいなあ
ちなみにこのブログ紹介は勝手にやってる！
怒られたら消します
まとめ
というわけでこんな感じでレスポンシブデザインが形になりました
前はレスポンシブでもなくスマホデザインのカスタマイズもしてなかったから今のデザインはかなりお気に入り（ほぼNakedデフォルトだけど）
それに今後はスマホとPCのカスタマイズを一元管理できるので楽ちんになる
これからもガンガンカスタマイズはしていきたいなあ
もちろん右側余白のようなバグを出さないように慎重に修正をかけていこうと思います
ほかにもカスタマイズしたことは別記事でまとめるからよろしくね！
