異なる画面サイズに応じてブログを自動で調整してくれる「レスポンシブWebデザイン」。
最近のはてなブログテーマはレスポンシブデザインが多いですよね。
かくいう僕も、ここ半年ほどお世話になっておりました。
Brooklynを使っていたり（参考：【カスタマイズ記事】はてなブログのデザインテーマをレスポンシブ対応の「Brooklyn」に変えてみた）、つい先日はNaked（参考：Naked！にはてなブログテーマを変更してからやったカスタマイズまとめ）にしたばかりだったり。
レスポンシブデザインの最大のメリットは「カスタマイズが楽」ということ。この快適さにハマってしまい、なかなか抜け出すことができませんでした。
PCとスマホ、別々にHTMLやCSSを調整する必要がないので、ものすごく気楽なんですよね。
ですが、僕には何としてもやり遂げねばならないことがありました。
そう。
それは、ずっと憧れだった「アドセンス広告を記事直下に2つ並べて配置」すること。
つまり、ダブルレクタングルだ！
- ダブルレクタングルとは？
- レスポンジブデザインやめました
- 変更前のGoogle AdSense広告表示サイズと配置場所(PC&スマホ)
- アドセンス広告のカスタマイズについて
- レスポンシブデザインWebテーマを実質廃止、広告表示サイズ＆配置場所を調整
- 収益とまとめ
- 関連記事
ダブルレクタングルとは？
ダブルレクタングルとは、アドセンス広告を横並びに2つ記事直下に表示する方法のこと。個人ブログだけに限らず、大手メディアでもこの手法が取り入れられていることもしばしば。
正方形に近い長方形（300×250や336×280）はレクタングル広告と呼ばれており、これを横並びに2つ配置するので"ダブルレクタングル"というのだそう。
かっこいいよね。ダブルレクタングル。
名前がかっこいいだけでなく、収益アップに効果的な配置になるのもポイント。むしろこっちが本命。
言葉だけでも分かりにくいと思うので、図を使って説明します。
はい、これがダブルレクタングル。
皆さんも一度は見かけたことがあるのではないでしょうか。
Google AdSenseの広告配置数の上限は撤廃されたものの……
2016年8月中旬頃からGoogle AdSenseの広告配置数の上限が撤廃されました。ビビリな僕は未だに3つをキープ。
これにより4枚以上の広告を配置することが可能になったわけですが、「スマホの画面にアドセンスが2つ表示されるとアウト」という点は依然変わっておりません。
つまり、「レスポンシブデザインのテーマでダブルレクタングルを取り入れると、スマホで見た時に広告が2つ表示されてしまう」わけです。
レスポンシブデザインテーマを使っている以上、ダブルレクタングルは実質的に不可能。
「PCではダブルレクタングルで表示させ、スマホでは広告を1つだけ表示させる方法」というのもあることにはあるのですが、ちょっと難易度が高すぎて僕には無理でした。
WordPressであれば可能なようですが、はてなブログの場合、そのような記事自体もほとんど見つかりませんでしたね。
レスポンジブデザインやめました
ということで、レスポンシブデザインやめました。
となると、PCとスマホを別々に管理せねばなりません。
しかし、その一方、「PCではダブルレクタングル、スマホでは任意の場所に広告を配置できる」というメリットが発生。
PC・スマホのデザインを別々にカスタマイズするのは少々骨が折れますが、今後のことを考えるとおそらく早めに手を打っておいた方が良いでしょう。
実質、このブログの約8割はスマホからの流入ですし。むしろ、スマホデザインだけ綺麗にまとめておけば何とかなるんじゃないかという幻想。
この際にスマホで行ったカスタマイズ等はまた別の機会に紹介するとして、今回はPC・スマホのアドセンス広告配置についてご紹介していきます。
なお、この配置によってどれほどの効果が現れたのかについては、こちらも後日まとめて報告できればと思います。
変更前のGoogle AdSense広告表示サイズと配置場所(PC&スマホ)
まずは、レスポンシブデザインでPCとスマホ両方のバランスを取っていたBeforeの状態。
- 目次下（一番初めの見出しの上）
- 記事中
- 記事直下
PC、スマホともにこの配置です。設置してあるアドセンス広告は、すべてレスポンシブタイプの広告。
アドセンス広告のカスタマイズについて
PCでは「レクタングル(大)336×280」、スマホでは「レクタングル(中)300×250」で表示されるようにそれぞれ調整（Before時点）。以下の記事を参考にさせていただきました。
アドセンス広告を文中に自動で挿入する方法については以下の記事から。
レスポンシブデザインWebテーマを実質廃止、広告表示サイズ＆配置場所を調整
そして、こちらがPC・スマホ、それぞれアドセンス広告を調整した結果。
PCでのアドセンス広告配置
- タイトル下に「ビッグバナー（728×90）」
- 記事直下に「レクタングル（大）336×280」を2つ横並び（ダブルレクタングル）
スマホでのアドセンス広告配置
- 目次下（一番初めの見出しの上）に「レクタングル（中）300×250」
- 記事中に「レクタングル（中）300×250」
- 記事直下に「レクタングル（中）300×250」
レスポンシブデザインテーマの時と変更なしですね。スマホでは、これに加えて「nend」も採用しておりますが、これについてはまたの機会に。
収益とまとめ
ブログによって収益が上がりやすい配置は変わってくると思います。
スマホ流入が8割の僕のブログの場合、記事内がトップで、次いで記事上、最後が記事下の順です。しかし、これも時期やタイミングによって差が生じてくるので一概には言えません。
レスポンシブデザインテーマを使用していた時とスマホでのアドセンス配置場所は変わっておりません。
あとは、PCの方をダブルレクタングルにした結果がどう出るか、ですね。とは言っても、PCからの流入は2割程度なので微々たるものかもしれませんが……。
ちなみに、本日設置した「PC側タイトル下ビッグバナー広告」、未だにクリック数0です。僕のブログ、タイトル下ってほとんどクリックされないんですよね。不覚。
とりあえずは様子見です。