2016/01/12139 Shares

サイドバーの追尾は効果があるの?みんなは何を置いているのか調べてみた

サイドバーの追尾は効果があるの?

サイドバーを追尾式にしているブログはたくさんありますが、あれってどの程度効果があるのでしょうか。それ以前に、サイドバーには何を置けばよいのかという疑問も出てきますよね。

このブログでは当たり障りのないパーツを設置していますが、順番の変更やページごとの切り替えを定期的にテストしています。

いま一番悩んでいるのは、追尾エリアを作るかどうか。ひとりで悩んでいても答えが出ないので、ひとまずサイドバーを追尾させているブログを調べてみることにしました。みんな何を置いているのか気になりますね!

サイドバーに何を置くと効果的なの?

Naifixでは下記のパーツをサイドバーに設置しています。

  • 広告
  • SNSフォローボタン
  • 人気記事TOP10
  • カテゴリー・タグ一覧
  • 新着記事
  • 検索バー

良くも悪くも王道、という感じですね。

このサイドバー部分は、スマホ・タブレットで閲覧するとメインコンテンツの下側に表示されます。単にすべてを下側に移動させるのではなく、WordPress の分岐タグを使ってスマホでは非表示になるパーツもあります。

また、トップページとそれ以外でも分岐しています。

運営者と読者の目線は違う

サイドバーに何を置くのが効果的なのかは、ブログの運営目的で変わってきます。

僕はできるだけ記事を読んでほしいというのが主な目的なので、メインコンテンツを左にしています。もしお金を稼ぐことが目的であれば、レイアウトも設置するものも変わってくるでしょう。

参考これが読みやすいブログデザイン!有名サイトの記事幅と余白設定を大公開

いずれにせよ、忘れてはならないのが「お客様目線」です。

たとえば、サイドバーの上部に設置している広告はどのくらいクリックされているでしょうか。人気記事一覧はどれくらい見てくれているでしょうか。

その答えは常に数字となって表れます。アクセス解析を行うのは、何も毎日のPV数を見て一喜一憂するためではありません。目標を達成するための指針です。

参考これで解決!アクセス解析をアクセスアップにつなげる方法を大公開

Google Analytics を使っているなら、Chromeの拡張機能「Page Analytics」を利用すると便利です。

自分のブログのどこがクリックされてるのかが視覚的にわかるChrome拡張「Page Analytics」がなかなか面白かった

追尾式広告は読者目線でうざいと思われがち

さて、メインコンテンツが長くなると、どうしてもサイドバーの下側に余白が生じます。この余白を何とか有効活用したい!と思うのが運営者目線。

でも、読者にとっては『広告やシェアボタンが追いかけてくるのはジャマ!』と感じるだけかもしれません。全ユーザーの満足度を100%にすることはできないので、効果を見ながら導入を決める必要がありそうです。

ブログ開設当初お世話になっていた Stinger 使用時には Feedly ボタンなどを追尾させていましたが、あまり効果を実感できなかったのでオリジナルテーマに切り替えたのを機に追尾エリアはなくしました。

まあ、それでもやっぱりサイドバーの下が寂しいなと思ってしまうので、思い切って1カラムにしてしまうか、追尾エリアを再導入するか、まったく違う方法を考えるかで悩んでいます。

サイドバーを追尾させているブログは何かしらの効果があるから設置しているはずなので、どんなものを置いているか参考にしてみましょう。

サイドバーを追尾式にしているブログ参考例

広告追尾型

まずはメジャーな(?)広告が追尾してくるパターンです。

株式会社LIG

LIG サイドバー追尾エリア
台東区でウェブ制作なら 株式会社LIG

こちらのサイトはサイドバーが左側にあり、ウィンドウの高さでも変わりますが追尾部分には大小あわせて7個ほどの広告が設置されています。

通常の広告というより、「こんなバナーが作れます!」という自社の宣伝も兼ねているんじゃないでしょうか。WEB制作会社ならではと思います。

ENJIOUT

ENJIOUT サイドバー追尾エリア
実ニキビC 対策(ENJIOUT)

ENJI さんのセカンドブログ。Stinger シリーズのテストを兼ねているということで、追尾エリアには広告が1つ置かれています。

本家サイト ENJILOG では、はてブ人気記事一覧を表示しています。

SEO HACKS公式ブログ

SEOHACKS公式ブログ サイドバー追尾エリア
SEO HACKS 公式ブログ

こちらは右サイドバー追尾エリアに自社広告が2つ設置されています。

ちなみに、追尾式といっても、要素の上を基準にする方法と下を基準にする方法があります。LIG さんの場合は下が基準で、ENJIOUT さん(Stinger)と SEO HACKS さんは上が基準。

言葉では説明しづらいので、実際にスクロールさせながら比べてみてください。

記事一覧追尾型

つづいては広告ではなく、人気記事や新着記事へのリンクを追尾させているタイプ。

ゆめぴょんの知恵

ゆめぴょんの知恵 サイドバー追尾エリア
ゆめぴょんの知恵

フォローボタンと人気記事一覧が追尾型になっており、トップページでは記事一覧のかわりにSNSフォロー系のウィジェットが表示されます。

それぞれの目的が伺えますね。

ROOM9

room9 サイドバー追尾エリア
ROOM9

こちらは人気記事一覧と「トップへ戻るボタン」が追いかけてきます。個別記事やカテゴリーページでは同カテゴリーの人気記事一覧に切り替わります。

ブログで扱うカテゴリーの範囲が広いほど有効なんじゃないでしょうか。

Select *

select サイドバー追尾エリア
Select *

人気記事一覧が「Weekly」「Monthly」「ALL」のタブ型になっています。

追尾させるパーツの上下が見切れてしまっていては意味がないので、できるだけたくさん記事を見せたいならこのようなタブ型を導入すると良さそう。

同ブログ内では、サイドバーを追尾させる方法が紹介されています。

参考最近はやりのフッターに重ならない追尾するサイドバーをjQueryで作ってみました!

サイドバー追尾+上部ナビ固定型

追尾させるのはサイドバーのコンテンツだけとは限りません。上部に設置してあるグローバルナビなどが追尾(固定)式になっているタイプもあります。

OZPAの表4

OZPAの表4 サイドバー追尾エリア
OZPAの表4

サイドバーには広告とホームや人気記事へのリンクが置かれており、上部には各SNSアイコンと検索バーが固定されています。

一歩間違うとかなり見づらいブログになってしまうので、デザインセンスが問われますね。

prasm

prasm サイドバー追尾エリア
prasm

サイドバーにはタブ型の人気記事一覧と、SNSフォローボタンが置いてあります。また、一定量スクロールすると上部グローバルメニューのデザインが変わって固定されます。

追記現在はデザインが変わっています(2016/01)

その他

ハフィントンポスト

huffingtonpost サイドバー追尾エリア
ハフィントンポスト

サイドバー追尾型ではなく、シェアボタンが追尾式になっています。この形は一時期あっちでもこっちでも見かけましたが、最近はかなり減りましたね。

画面の幅によっては、見切れてしまったり、メインコンテンツと重なってしまうので扱いが難しいところ。僕も一時期使っていましたが、シェアボタンを記事下に固定したほうが反応率は高いです。

どうやっているかわかりませんが、ハフィントンポストさんでは記事本文が表示されている間だけ左側にシェアボタンが登場します。

追記はてブでコメントいただきました。ありがとうございます!

サイドバーの追尾は効果があるの?みんなは何を置いているのか調べてみた

追尾型コンテンツはこういうuserscriptで消してる。if ($e.data(“original-position”) !== “fixed” && $e.css(“position”) === “fixed”) { $e.remove(); }

2014/08/14 12:38

おまけ:Google AdSense の追尾は禁止

広告を追尾させる場合は注意が必要で、Google AdSense ではそれが規約違反であると明言しています。

そのような広告は「追尾広告」と呼ばれるもので、ポリシー違反に該当します。この種の広告が確認された場合は、何らかの措置を講じます。

AdSense ポリシーに関するよくある質問

その他ASPではとくに禁止の旨が書かれていないので、現状では「広告を追尾させるならアドセンス以外で」ということになります。

実は今回のエントリーを書くにあたっていろいろ調べていたら、こんな記事が出てきました。

よく、巷のブログで書いてあるのが、「サイドメニューに広告を掲載して、スクロールしないように、potision: fixed にしちゃダメ」という話です。これは「自動追尾型広告」とも呼ばれていますが、その呼び方自体も語弊があるでしょう。(よくあるサイドバーの広告は追尾ではなく「固定」なのです)

しかし、これはポリシー違反だとは書いてありません。

また、こちらのGoogleグループの投稿を根拠として、「Googleの中の人が禁止だと言っている」と主張するブログもありますが、投稿内容には一切そのような「禁止」をGoogle関係者が規定したものはありません。

そもそも、サイドメニューの最後までスクロールで表示されたら、もうコンテンツがないのだから、そこで止めて当然とも言えます。

そうしないと、スクロールの後半では、サイドバーはずっと空白になってしまいます。

サイドメニューの一番最後に「アドセンス広告」があれば、それはそこで止めるのは当たり前といえば、当たり前なのです。

勘違いされているGoogleアドセンスの規約違反(追尾型は違反ではない) | お墨付き!

言ってることがよくわかりませんが AdSense のポリシーは細かいのできっと見過ごしてしまったのでしょう。ほかにもツッコミどころ満載だったのでネタにしようと思って、とりあえず Twitter で流してみました。

そうしたら、数時間後に…

お墨付きの記事が削除されている

記事が消えていた!

僕のツイートがきっかけだったのが、たまたま消そうと思っていたのか、偶然ほかの人が見つけて通報したのかわかりません。

でも、サイドバーのアドセンスは追尾させたままの状態。

アドセンスポリシー違反例(広告の追尾)

これは悪い例ですので、くれぐれもマネしないようにしてください。

追記記事を公開したあとに追尾エリアの AdSense は外されていました。また、このブログから飛ぶと403で弾かれるようです。

サイドバー最適化に役立つ記事

「サイドバーに何を設置するのか」「追尾させるなら何を置くのか」の答えは、冒頭で述べたとおりブログの目的によって変わります。

サイドバーの追尾に関して検索すると、ほとんどが設置方法の情報ばかりで、具体的にどのような効果があるのかを公開している記事はあまり見かけません。

たいてい、効果がある“らしい”という言及で終わっています。

そんななかで、具体的に参考になるのはこちらの記事。


サイドバーのスクロール追尾型広告のクリック率

広告を追尾型にしたときにクリック率がどのように変化したのか、数字が載せられています。

また、サイドバー自体のデザインに関してはこちらが参考になります。


ホームページやブログで効果的なサイドバーをデザインする12のポイント

ちょっと古いエントリーなので、紹介されているサイトが消えていたりしますが、「何を設置するのか」のヒントになりますね。

記事本文を読ませたいなら追尾は不要かもしれない

記事を書きながら、結局このブログには追尾エリアを設置しようかどうしようか考えていたのですが、その悩みを一瞬で吹き飛ばしてくれるエントリーがありました。

余白は、スペースの無駄遣いに見えるため、何か配置したくなる気持ちは分かる。しかし、ページの残りの動きを促す効果があるため、実は貴重な存在である。人間の目は、ページの様々要素から、「休む」場所を求める。また、次に向かう場所を把握する必要もある。

そこで余白が役に立つ。

アイトラッキング調査で判明した8つの原則

そう、やっぱり余白って必要なんですよね。

読者目線で考えれば、“次に向かう場所”が複雑であっては迷わせるだけです。サイドバーの余白を埋めるのではなく、記事下のCTAを最適化したほうが良いのかもしれません。

まとめ

サイドバーの追尾やトップメニューの固定は一定の効果が期待できますが、それはブログ全体のレイアウト、とくに「記事下に何を置くか」で変わります。

何事もやってみなければわからないので、効果を測定しながら試していきましょう。ダメだったらすぐやめればいいのです。お金もかかりませんしね。

サイドバーを有効活用しているブログや、具体的な事例があればぜひ教えてください。一緒にカスタマイズを楽しみながらブログを運営していきましょー!

それでは、また。