やってみたいがここにある

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

やってみたいがここにある

やってみたいこと、行ってみたいところ、してみたいことを紹介するという設定の雑記ブログ。略称は「やってここ」

レスポンシブデザインにしたことによる収益とデザインへの影響

ブログ運営

【スポンサーリンク】

やあみんな、ふーかだよ

最近カスタマイズにも手を出したいと思ってはてなブログのテーマをNakedに変更してみた

ついでにレスポンシブデザインも適用してみた

スマホから見てもおしゃれで見やすくなったので気にいってる!

その中で気になったことが二つあったので書き起こしておくよ! 誰かの参考になればいいなあ

 

謎の右余白

スマホから見た時にサイトの右に謎の余白スペースができていた

 

f:id:hu_kaa:20170308104427j:plain

 

実際は画像よりひどくて記事が見えないくらい右までスクロールできてしまう

下にスクロールしようとしてもなにもない右にスクロールされたりして激しくうざい

僕が読者ならいらいらして離脱すること待ったなしである。絶対離脱率上がるよこれ

 

おそらく原因はレスポンシブにしたことだろうとぐぐっていろいろとコードをデザインCSSにぶち込んでみたりしたけど効果なし

というかこのテーマ作った人ははてなブログカスタマイズで有名なゆきひーさんである

www.yukihy.com

 

そのゆきひーさんがレスポンシブ時に右余白ができるなんて凡ミスを残したままテーマをリリースするわけがない!

となるとデザインCSSのどっかのコードが悪さしてるのかなーと思って、いろいろなコードをデザインCSSに入れてみたり、逆にデザインCSSのコードを取っ払って見たりしたけど変化なし

 

数日がんばってみたけどまったく直らないしもうレスポンシブデザインを諦めようかと思ってた

 

 

帰ったらレスポンシブ外して今までどおりのスマホデザインでがんばろう・・・と思っていたら鳴り響いた携帯電話。嫌な予感はよぎらなかった

 

 

これだーーー!!!

昔貼ったわー! ここからは一切発生してない無駄広告だー!

とりあえず外してみるか!

 

f:id:hu_kaa:20170308104524j:plain

 

直ったあああああああああ!!!

 

OMGさんありがとうございますううううううう

感謝してもしきれない。多分一人じゃ見つけるまで数週間かかったであろうバグ

おかげでスマートなレスポンシブデザインになりました

 

原因はノリでフッターの適当な空きスペースに広告を貼ったことでした

適当に貼っても意味ないのにねえ。反省してます

広告のサイズは固定で728px×90pxだったのでレスポンシブがサイトの横幅をこいつに合わせてたみたいだね

 

見つけられなかった理由はデザインCSSが原因と勝手に決めつけてしまっていたこと

実際はフッターに貼っていた広告だった

今後はデザインが狂ったときはデザインCSSだけではなくてコードを書ける場所すべての箇所を確認して、ブログ全体をしっかり見直すことにします

 

アドセンス収益が倍増した

アクセス数はそのままにアドセンスだけが倍になった。うまい

 

レスポンシブデザインにして2週間くらい経つけど安定して2倍以上をキープしてるから偶然ではなさそう

どうやらブログのデザインをレスポンシブデザインにしたことによってスマホでブログを見たときのアドセンス広告枠にPC用のレクタングル大が表示されていたことが要因になってたっぽい

スマホ用に用意していたのはレスポンシブ広告だったので広告サイズが大きくなった分クリック率が上がったみたい

 

単価はほとんど変わりなかった

大きいほど単価が高いと思っていたけど広告サイズで単価がほとんど変わってないのは意外だったなあ

 

広告サイズは収益に直結するとは聞いてたけどここまでとは思わなかったのでびっくり

単価そのままにクリック率が倍増したことで収益も倍増したよ! 元が平均以下だったのは秘密

 

ただいいことばかりじゃなくて心配事もいくつかある

レクタングル大は336×280とスマホにはかなり大きいサイズである

これはiPhone5Sなんかの小さいスマホだと横幅が足りなくなってしまうのだ

 

僕のブログのアクセス解析を見てみると336未満の画面サイズ端末からのアクセスはだいたい11.5%

つまり10人に1人くらいの割合で広告が画面をはみ出てしまう

これは結構ユーザビリティー的に問題な気がするので検討中

 

またレクタングル大はスマホから見るとサイズがかなり大きい

僕のブログではタイトル下にアドセンス広告を配置しているのでファーストビューの占有になってしまわないかも心配である

これについてはおすすめ記事の挿入なんかでなんとかなるはず

問題になりそうなのでグーグル神の怒りを買わないうちに直しておきたいところ

 

やっぱりスマホから見たときにレクタングル大は邪魔かなーという気持ちもあるけど収益も大事だしとりあえずこのままで行ってみようかな

今後の離脱率や滞在時間が極端に落ちるようならレスポンシブに変えようと思います

 

スペシャルサンクス

OMGさん

感謝しかない。わざわざブログを確認してご指摘いただきありがとうございました!!

OMGさんは現役のデザイナー!
そしておしゃれなロゴの作り方やデザイナー目線での記事を書いているブロガーでもある!

個人的にはロゴの作り方記事が素晴らしいと思う。僕も時間ができたら正円でロゴを作ってファビコンに設定したいなあ

www.omg-ox.org

 

ちなみにこのブログ紹介は勝手にやってる!

怒られたら消します

  

まとめ

f:id:hu_kaa:20170308110606p:plain

 

というわけでこんな感じでレスポンシブデザインが形になりました

前はレスポンシブでもなくスマホデザインのカスタマイズもしてなかったから今のデザインはかなりお気に入り(ほぼNakedデフォルトだけど)

それに今後はスマホとPCのカスタマイズを一元管理できるので楽ちんになる

これからもガンガンカスタマイズはしていきたいなあ

もちろん右側余白のようなバグを出さないように慎重に修正をかけていこうと思います

ほかにもカスタマイズしたことは別記事でまとめるからよろしくね!