【FAQ】ブログのサイドバーは必要?左右どちら?人気記事を入れるには?デザインは?

  • ブログのサイドバーって何を配置したらいい?
  • そもそもブログにサイドバーは必要なの?
  • 左右のどちらに設置するのが正解?
  • 人気の記事を表示したいけど、テーマにその機能がない!

など、ブログのサイドバーは悩みがつきないものです。

本記事ではサイドバーについてのよくある疑問・悩みを一つ一つ回答していきます。

個人的な考えではありますが、根拠はある回答をしたつもりですので参考にしてみてください。きっとモヤモヤしていたものが少しはスッキリするはずです。

サイドバーとは
サイドバーとは

ブログでよくみられる「サイドバー」は図の赤い部分のことです。

「メニューバー」・「右カラム」・「左カラム」など様々な呼び名があるので、混乱しないように本記事では「サイドバー」とします。

本文のある領域ではない垂直方向の領域のことを指す前提でお読みください。

このページの内容(目次)

質問1:ブログのサイドバーはそもそも必要ですか?

スマホの閲覧割合・PCでの役割を考慮すると、必要か不要かがわかる

スマホではサイドバーはほぼ機能しない

スマホでは下に回り込む

サイドバーはスマホ表示の際には本文の下に回り込ませるか、スマホ用のメニューに退避させるかのどちらかになります。

従って、スマホ表示でサイドバーは、ページを開いた直後に見えない(ファーストビューにない)領域になるので、不要なのでは?という議論が良く出ます。

現在はスマホファーストと言って、閲覧者の主体がスマホユーザーになってきているため、スマホ画面の設定を優先するべきという考え方が浸透しています。

もし運営しているサイトが90%以上がスマホユーザーなのであれば、思い切って削除してしまっても良いでしょう。

余計なソースを出力しなくて済むのでスピードも上がり、SEO効果も多少期待できるかもしれません。

PC画面での役割と、記事の傾向について考慮する

PC画面でのサイドバーの役割は、主に「補助」となります。

  • 回遊の補助
  • 運営者情報の表示の補助
  • 記事閲覧の補助(目次の設置)
  • 広告設置の補助

サイト内の記事の傾向を考慮してみると設置するべきかどうか判断できるようになります。

サイドバーが不要になる条件
  • 各記事は、その記事だけで完結するものが多く、関連リンクを張ってもほとんどリンクがクリックされることがない
  • 運営者やサイト名を読者に覚えてもらいたいわけではない
  • 記事本文が2000文字以内になることが多く、目次項目が3つ以下になることがほとんど
  • 全ページで特に誘導をかけたいページがあるわけではない場合

ワンカラムにする際の注意点

視線の移動が増える

PC版の表示をワンカラムにしたときに、画面幅を変えずにそのまま広げているブログをよく目にします。

この設定をすると、1行あたりの文字数がかなり増え、PCでの閲覧時に視線の移動が非常に大きくなるので「読み疲れしやすい」サイトになります。

1行が短いとむやみにスペースができやすくなる

また、1文をかなり短めにして改行している場合、右端まで文章がないので、右側に大きな無駄スペースが生まれることにもなります。

1行飛ばしで改行しているブログが「バカっぽくみえる」ように、内容全体が薄っぺらい印象を与えかねないので注意が必要です。

ワンカラムにする場合は、1行の表示があまり長くなりすぎないようにしましょう

質問2:ブログのサイドバーは右に置かれることが多いですが、左はダメですか?

サイドバーの位置役割
右サイドバー補助
左サイドバー回遊

役割を意識して決めればOK。

サイドバーを右に置くか、左に置くかは、役割を考慮して決めると納得できます。

Fの法則・Zの法則

Fの法則Zの法則はご存知でしょうか。視線の誘導についての法則になります。

日本語は横書きの場合は左から右に向かって文章を読みます。

左上ほど目に留まりやすい

このため、左側にあるものの方が目に入る確率が高くなります。

左にサイドバーを設置すると、意識がいきやすいため、何らかの行動につなげるべきで、役割としては「回遊」となります。

一方右側にサイドバーを設置すると、最悪読まれなくてもいいもの、ということになるので、役割としては「補助」となります。

ECサイトの場合だと左側にサイドバーが設置されることがほとんどです。これは、単一の商品購入だけでなく、「ついでにこれも買おうかな」と商品があることを左サイドバーで表示して気づきを与え、複数の商品購入を促すためです。

個人ブログの場合は、基本的なサイト設計は検索意図に対する答えを提示する形です。ユーザーは繰り返しそのサイトに訪問しない限りサイト名を覚えることもなく、単ページで閲覧を終了することの方が多くなります。

よって、通常の個人ブログであれば、基本、右サイドバーにしておくのが正解です。

例外があって、例えば案件特化ブログ(ミニサイト)の場合です。

案件特化型ブログとは、広告案件に特化した内容のブログです。

格安SIMジャンルで言えば、「格安SIMの比較」のようにするのではなく、「マイネオ」について集中的に記事を作るブログの形態です。

こういった案件特化ブログの場合、サイトに訪問してきた時点ですでに検索ワードで「マイネオ」まで絞り込んでいる可能性が高く、回遊を強化して最後の後押しや不安解消を行う方が成約率が高まる可能性が高くなります。

左サイドバーの方が良いサイトの例
  • ECサイトなど、回遊が前提になる・気づきになるようなサイトの場合
  • リファレンス型サイトのように、サイトの内容がユーザーにとってある程度予測がつくようなサイトの場合
  • 案件特化サイトのように、ユーザーが最後の一押しや不安解消があれば購入に踏み切れる状態で訪問するようなサイトの場合

質問3:サイドバーには何を置くべきでしょうか

左サイドバーの場合、優先順位としては、下記のものになります。

  1. 目次やプロフィール等、記事を読む際に「補助」になるような項目
  2. 全ページに表示される特性を活かし、特に見てもらいたいページへの導線
  3. 収益記事への導線
  4. 収益バナー

右サイドバーの場合はメインのナビゲーションを設置するのがいいです。

サイドバーはPCの場合でのみ機能するレイアウトです。

役割は「補助」がメインであり、左サイドバーの場合は本文が主体となるので、本文を読む上での補助になるものを優先して設置しておくのが良いです。

サイドバーに、他のページに遷移するリンク、「カテゴリ」「人気記事」「検索」「新着記事」などは設置しなくてもOKで、経験的にはこういったウィジェットは設置してもあまりクリックされないことがほとんどでした。

ただしスマホの場合は本文の下に表示されるので、本文を一通り見た上で他のページへの回遊を促すために人気記事やカテゴリリストを表示するのはありです。

補助以外の役割として、運営者が強くお勧めしたいものを置く場にもなり得ます。どうしても見てもらいたいページとか、直接マネタイズできないまでも画面の中に入れること自体に意味があるような要素があれば入れてしまってOKです。

質問4:サイドバーに人気記事を表示したいです

テーマに標準でついている機能を使うか、WordPress Popular Posts プラグインを使えばOK

サイドバーに設置する項目で特に人気なのは、「人気記事」の項目です。

WordPress Popular Posts」プラグイン(無料)を使うか、WordPressテーマに含まれている人気記事の表示機能を使うと実現できます。

Cocoon・SWELL・THE THORは人気記事を挿入するウィジェットが用意されています。

プラグインを入れるか、テーマの標準機能を利用するかして導入すればOKです。

注意点としては、人気記事のリストは「ページの外に移動するリンク」であり、表示中の記事との関連性も低くなりがちなので、設置目的を明確にしてから設置することをお勧めします。

質問5:サイドバーに関連記事を設置する方法は?

関連記事を表示するには「Yet Another Related Posts Plugin (YARPP)」プラグイン(無料)がおすすめです。

ただし、ほとんどのWordPressテーマでは関連記事の表示をサポートしているため、わざわざサイドバーに表示する必要は少ないはずです。

質問6:サイドバーのデザインやサイズは?

サイドバーのサイズ

サイドバーのサイズ(幅)は、テーマによってさまざまですが、サイズ変更に対応しているテーマであれば変更することができます。

おすすめのサイズは280~330px前後。

目次の項目を表示するなら250pxだと少し狭すぎる印象があり、かといって大きくとると、記事をアイキャッチ付きで表示した際に画像部分が大きくなりすぎるので、300pxあたりがちょうどバランスの取れた感じになるはずです。

サイドバーのデザイン

サイドバーのデザイン要素として、背景色と見出しのデザインが印象を決める重要な要素になります。

サイドバーの背景色

本文のある中央カラムは白抜きにされることが多く、引き締めるために薄いグレー系の背景色を引くテーマが多いです。

サイドバー全体の背景色を背景色と同じようにすると「補助」感が強くなり、中央カラムと同じ白抜きにすると、視認性が高くなる分、中央カラムへの集中度が下がります。

サイドバーの見出しデザイン

サイドバーには複数のウィジェットを設置することほとんどです。

各ウィジェットには見出しを設定することになります。見出しのデザインを、本文よりも「あっさり」したデザインにすると本文カラムが強調され、本文カラムと同じデザインにするとサイドバーへの視認率が高くなります。

本ブログでは中央カラムに最大の注意が行くようにサイドバーには多くの情報を入れすぎず、見た目も背景に溶け込む程度のデザインに設定しています。

デザインなので正解は効果測定をしながら決めればいいのですが、どういう効果があるのかは言語化して設定すると迷いが減ります。

質問7:サイドバーに広告を入れるべきですか?

個人的には不要だと考えます。というのも、サイドバーの広告はほとんどクリックされることがなかったので・・

サイドバーに広告を入れ、尚且つ追従サイドバーにしているサイトも多く見かけますが、広告を押してほしい気持ちが前面に出すぎではないかな、と感じることが多いです。

このあたりは「個人の感想」の域を出ないので、設置したければ設置してみると良いのですが、効果測定はしっかりしたほうがいいです。

実際クリックされるのかどうか、もしほとんどクリックされることがないのであれば、あえてサイドバーに広告を設置する必要はないのではないでしょうか。

このページの内容(目次)
閉じる