WordPressの始め方を分かりやすく解説!こちらをクリック

[右サイドバー・左サイドバー・3カラム]どれが正解かテストしてみた結果は?

  • URLをコピーしました!
この記事のまとめ

サイドバーの位置カラムのレイアウトは何が正解なのか?

初心者ブロガーなら一度は疑問に思ったことがある悩みではないでしょうか。

本記事では、右サイドバー左サイドバー3カラムの3パターンを実際に試してみて、

どのレイアウトがもっとも効果的なのか? それぞれのメリット・デメリットにはどんなものがあるのか? を検証してみました。

WordPressでブログやアフィリエイトを始める際に、最初に悩むことの1つがWebサイトのデザインレイアウトですよね。

そのなかでもサイドバー(メニューバー)の配置を右にするのか? 左にするのか? それとも3カラムにするのか?

…は、初心者ブロガーが悩むポイントの1つだと思います。

そこで今回は、カラム構成やサイドバーの配置について解説したいと思います。

実際に僕のブログでテストした結果も公開しておりますので、ぜひ参考にしていただければと思います。

目次

SEOに強くて、お洒落で、記事制作スピードも速いテーマ!
マクサンでも使っている超おすすめテーマ「SWELL」はこちら!

1976年生まれ。東京都出身。合同会社田舎暮らし代表。複数の業界にて20年近くWebマーケティングの仕事に携わる。2013年より副業でブログを開始。 複数のブログ・SNSを運営した経験を活かし、ブログやアフィリエ イトのノウハウを発信する当ブログを開設。またブロガーのためのオンラインサロン「マクサン」の共同オーナーを務める。フォロワー10万人を抱えるInstagram「ベランダ飯」も運営。借金地獄のどん底からブログ一本で這いあがり、月収300~400万円を稼げるように。2020年2月には累計収益が1億円を突破。著書に『マクサン式Webライティング実践スキル大全(マクサン本)』(大和書房)などがある。GMOのオウンドメディア「ワプ活」で全記事の監修も務める。本名は吉岡 智将

いや、俺なんてそんな、どこにでもいるただのマクリンですよ。 副業でガジェットサイト「マクリン」の運営を2017年5月に開始し、2019年12月に副業を株式会社makuriに法人化。2020年4月に合同会社レイテラスを設立し、コワーキングスペース「レイテラス」を開店。撮影スタジオ「レイテラススタジオ」もスタート。ブロガー向けオンラインサロン「マクサン」の共同オーナーをつとめ「マクサン本」の共著者。

※当ページの情報は執筆時点のものであり、最新の情報は各サービスの公式サイトよりご確認ください。
※当ページのリンクには広告が含まれる場合があります。

サイドバーを3種類の配置方法でテスト

メニューバーの配置

ごちゃごちゃ考えるよりも実際に検証してみよう!ということで

サイドバーの位置を右カラム・左カラム・3カラム(両サイド)にした際に、

それぞれユーザーの動向にどんな変化が起こるのか?をテストしてみました。

スクロールできます
サイドバー位置滞在時間直帰率離脱率1訪問あたりPV
4:1453.7%26.3%3.77
3:9751.6%24.9%3.81
3カラム3:0362.8%35.5%2.96

※滞在時間…1ユーザーが平均どのくらいの時間サイトに滞在したか
※直帰率…そのページを入り口にして、そのまますぐに直帰してしまった割合
※離脱率…そのページを最後にサイトを離脱してしまった割合
※訪問あたりPV…1ユーザーあたりが平均で何ページ閲覧したか

どうでしょう?

それぞれの差異は小さいものの、比較的分かりやすい理想的な結果が出たと思います。

今回のABテストによって得られた示唆をテキストにまとめると、以下のようなことが言えると思います。

右サイドバー(2カラム)

  • ユーザーの滞在時間がもっとも長い
  • 直帰率・離脱率がやや高くなる
  • 他ページへの遷移は普通レベル

左サイドバー(2カラム)

  • ユーザーの滞在時間はやや短い
  • 直帰率・離脱率はもっとも低い
  • 他ページへの遷移はもっとも良い

両側サイドバー(3カラム)

  • ユーザーの滞在時間はもっとも短い
  • 直帰率・離脱率はもっとも高い
  • 他ページへの遷移はもっとも悪い

このように、今回の実験では3カラムのレイアウトが独り負けするという結果となりました。

右サイドバーと左サイドバーの差異は僅差ではあるものの、

右だと滞在時間が長くなり、他ページへの遷移がやや減る

左だと滞在時間は短くなるが、他ページへ遷移しやすくなると言えますね。

ではなぜ、このような結果になったのでしょうか?

ユーザーの視点移動(Fの法則/Zの法則)

人間がインターネット上でWebページを閲覧するとき、ある特徴的な視点の動きをします。

視点の動きをなぞるとアルファベットの「F」と「Z」に似ていることから、

それぞれ「Fの法則」「Zの法則」と呼ばれているものです。

Fの法則
Zの法則

Webマーケティングを少しでもかじったことがある人であれば、常識とも言える有名な法則です。

人間はWebページを見るとき、下記のように視線が流れるということですね。

  • 左側に意識が集中する
  • 左から右、上から下へと視線が動く

つまり、ページの左側や上部はよく読まれるが、

ページの右側や下部はあまり読まれないと言い換えることもできます。

なので、大切な要素はページ左側や上部に配置した方が良いということですね。

ではこれらを踏まえて、右サイドバー・左サイドバー・3カラムの

それぞれの目的やメリット&デメリットをまとめてみましょう。

右サイドバー(2カラム)の特徴・利点

右メニューバー

読まれやすいページ左側にコンテンツ(記事本文)が配置される形になります。

つまり記事を読んでもらうことを優先させたい場合は右サイドバーにするのが良いでしょう。

左側にユーザーの視線や意識を邪魔するものがないので、

ユーザーは記事を読むことに集中でき、読後の満足感も高まる配置です。

あまり目に触れることがない右側に他ページへのリンク

(人気記事・新着記事・カテゴリーメニューなど)が配置されることになるため、

他ページへの誘導がやや弱い配置ではありますが…

記事が最後までしっかり読まれれば、

記事下のリンク(タグ付けされた関連記事など)からのページ遷移に期待することができます。

また、世の中のブログのほとんどは右サイドバーを採用していますので、

読者に“安心感”をあたえるという心理効果もありますね。

ごく一般的なありふれたレイアウトではありますが、

ブログにとってもっとも大切な“記事コンテンツ”を最優先させたおすすめレイアウトです。

迷ったら右サイドバーで良いのではないでしょうか。

左サイドバー(2カラム)の特徴・利点

左メニューバー

視点や意識が集まる左側に、メニューや他ページへのリンクが配置されるレイアウトです。

人気記事や新着記事などのリンクをクリックさせて、1ユーザーあたりの閲覧ページ数を増やす=ユーザーの回遊を促進したり、

サイドーバー内の広告をクリックさせて収益を上げたい場合などには、左サイドバーが有利と言えます。

個人的には「ブログは記事がメインでしょ!」と思っているので若干“邪道”のような気もしますが…

例えばメニューリンクを中心に各コンテンツへの誘導をおこなうノウハウ系サイト専門特化サイトに関しては、

メニューが左側にあった方がユーザーにとって分かりやすく親切なのかもしれません。

今回のテスト結果を見ても、

他ページへの遷移を促すには左サイドバーが有利だということが証明されています。

ただし、読まれにくいページ右側に記事コンテンツがくることになるため、

離脱率や直帰率が高まる要因にもなってしまいます。

両側サイドバー(3カラム)の特徴・利点

3カラム

3カラムは、各種リンク・特集ページ・キャンペーン・広告などの見せたい情報がたくさんある場合に有利なレイアウトです。

逆に言えば、通常のブログなどのようにシンプルなコンテンツ構成で作られたメディアには、あまりメリットがないとも言えますね。

左右両側にサイドバーがあり、メインである記事コンテンツはそれに挟まれるように中央に配置されているため

ユーザーが記事コンテンツに集中しにくい(あちこちに目が移って気が散ってしまう)というデメリットがあります。

また情報量が多いためページ全体がゴチャゴチャしてしまい、乱雑で窮屈なイメージをあたえてしまいます。

結果的にユーザーの離脱や直帰をまねいてしまうのですね。

3カラムの構成は、インターフェースをしっかりと作り込む必要のある上級者向けのレイアウトです。

素人にはなかなか上手くまとめることは難しい(Webデザインの知識や手間ひまが必要)ため、

あまり個人ブロガーの方にはおすすめできませんね…。

まとめ

さて、いかがでしたか?

たかがサイドバーの配置ではありますが、なかなか奥が深いものだと分かっていただけたかと思います。

それぞれのメリットとデメリットを正しく理解し、あなたのブログ・サイトの問題や目的に合わせた選択をしたいですよね。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメント一覧 (6件)

  • 記事とは関係ないですが・・・漫画(ブラックジャックによろしく)を引用して改変するのって、引用元を表記していればOKなのでしょうか?それとも原作者の方に了解を得ているのでしょうか?

  • 「ブラックジャックによろしく」は原作者が完全二次使用フリーにしている?との情報もみかけました。きっとOKなんですね。失礼しました。

    • 京介さん、コメントありがとうございます!
      はい、当ブログで使用している「ブラックジャックによろしく」の素材は著作権フリーのものを使用しています。
      ぜひみなさんも活用してみてください。

  • ツイッターで引用させていただきます!
    ちなみに、OGPは設定しないのでしょうか?
    サムネ画像がでないので、お手数ですが設定していただければクリック率上がると思いますのでご検討おねがい致します!

コメントする

コメントは日本語で入力してください。(スパム対策)

目次