ブログを1カラムに変更した理由と、変更した結果

ブログを1カラムに変更した理由と、変更した結果

ブログを1カラムに変更した理由と、変更した結果

少し前に、ブログのレイアウトを2カラムから1カラムに変更しました。

1カラムにしたのは記事のページのみで、トップページやブログ内検索結果のページは2カラムのままにしました。

この記事では、上記のように変更した理由と、その結果直帰率がどうなったかなどを紹介したいと思います。

結論としては、

直帰率はほぼ変わらず、記事ページはすっきりして読みやすくなった(気がする)

です。

※追記(2022/7/3)
平均ページ滞在時間の変化も追記しました。

目次

2カラムから1カラムに変更した理由

今回、記事ページのレイアウトを2カラムから1カラムに変更した理由は以下の通りです。

  • 2カラムだと、ページが窮屈で読みにくいと感じた
  • サイドバーのコンテンツはほとんど見られていないと思われた
  • 最近1カラムのレイアウトを見ることが増えてきた

先日、ノートパソコンを買い替えたんです。これまで使っていた11インチの MacBook Air から、14インチの Windows に変えたんですが、これまでと違うパソコンで初めて自分のブログを見たときに、

うわっ、窮屈すぎて読みにくい!

と思いました。MacBook Air で見ていたのとは全然見え方が違っていて...。

余白を調整すれば良いとは思いましたが、余白を細々と調整するくらいならいっそ1カラムにして読みやすくしようかなと思い始めました。

また、今年に入ってから Google Analytics をちゃんと見るようになったのですが(遅い)、計測データを見る限りサイドバーのコンテンツはほとんど見られていないように思われました。

正確にサイドバーのクリック数を計測したわけではないですが、ページ遷移などから推測する限り、サイドバーはなくても良さそうだなと。

当ブログでは、読者にクリックされているのは記事内のリンクのほうが圧倒的に多かったです。

まぁ、サイドバーは記事の上のほうにしかなく、PC で少し読み進めたらすぐ見えなくなるので当然かもしれません。

また、以前よりも1カラムレイアウトのブログが増えてきているように感じます。

note は以前から1カラムですが、何か調べ物で検索して出てきたブログが1カラム、というケースが多くなっているような。

多数派はまだ2カラムだと思いますが、1カラムのほうが余計な情報がなく、記事本文が読みやすいのは確かだと思います。

というわけで、記事は1カラムに変えてみることにしました。

ブログを2カラムから1カラムに変更するイメージ図

補足:Microsoft Clarity を使って判断するのも良いかも

ブログのレイアウトを検討する際には、Microsoft Clarity という無料ツールを判断材料にするのも良いかもしれません。

このツールを導入すると、ユーザーのクリックや行動を可視化できるとのこと。

https://clarity.microsoft.com/

Microsoft Clarity

サイドバーがどの程度見られていそうか、クリックされているのか、なども確認できるのではと思います。

導入方法は調べるとたくさん出てきます。

※ 私は1カラムに変更後にこのツールの存在を知ったので、判断材料にはできていません。

1カラム化のデメリット

今回、1カラムにレイアウトを変更する目的は「記事を読みやすくする」というところですが、デメリットとしては以下が考えられます。

1カラム化のデメリット

  • サイドバーからは回遊できない
  • サイドバーのプロフィールをパッと見できない

当ブログの場合、サイドバーからの回遊はほとんどないと思われましたが、念のため直帰率がどの程度変化したかを確認することにしました。

プロフィールに関しては、もともとサイドバーにはたいした情報を載せていなかったので、良いかなと。。プロフィールページへのリンクはナビゲーションとフッターに置くことにしました。

1カラムに変更後のレイアウト

1カラムに変更し、記事ページはこのようになりました。

ブログを2カラムから1カラムに変更

すっきり!

レイアウト変更の際に意識したことはこちら。

1カラム変更時に気を付けたこと

記事幅については1カラムのブログをいろいろ見て決めてみましたが、どのくらいの幅が良いのかは人によりそうです。

個人的には幅が広すぎないほうが、視線の移動量が少なくて読みやすいと感じますが、広いほうが一度に表示できる文字量が多くスクロール量を減らせるというメリットを感じる人もいるようでした。

記事下には関連記事を置き、その下にフッターです。

最初はフッターにカテゴリー、タグ、人気記事、最新記事なども置いていたのですが、ごちゃごちゃしていたし結局見られてない気がしたので、プロフィールとカテゴリーへのリンクという最低限のものにしました。

トップページは2カラムのままにする

今回、トップページは2カラムのままにしました。

トップページは2カラム

理由は、1カラムだと回遊を促せるようなレイアウトにするのが難しかったため。

トップページは、できるだけファーストビューで目的のページを見つけられるようサイドバーも使ってリンクを配置したいと考えました。

というわけで、こんな感じにレイアウト。

トップページのレイアウト変更内容

トップページへの訪問はリピーターの方が多かったので、メインカラムの一番上には最新記事を大きく載せてお知らせしてみました。

PC ユーザーの方向けに、サイドバーの右上にはブログ関係の記事リンクを。

メインカラムの最新記事の下は、主にスマホユーザーの方向けのリンクを置きました。スマホ向けリンクは、サイドバーでは見てもらえないため。

このあたりのリンクの配置も、クリックされているのか今後検証して変えていくのが良いのかもしれません。

1カラムに変更した結果。直帰率の変化

1カラムに変更して良かったと思います。

「読みやすく」の目的は達成できたと思いますが、特に数値に現れるわけではないので自己満足的な部分も大きいかもしれません。

一応、変更前より PV は上がりましたが、レイアウトは関係ない気がします。笑

さて、直帰率です。

5月中に少しずつレイアウトを修正していったので、4月と6月で直帰率を比較しました。

直帰率
全体の直帰率 PCの直帰率
4/1~30 66.71% 62.49%
6/1~30 65.79%(-1.38% 向上) 63.08%(+0.95% 悪化)

※ PC の直帰率は Google Analytics の「タブレットとPC」の数値です。PC だけの数値はどう出すかわからなかった...

※ 変化の % は、Google Analytics の数値そのままです

1カラムに変更後の直帰率の比較

PC の直帰率はほんの少し悪化していますが、この程度であれば誤差の範囲じゃないでしょうか。たぶん。
全体の直帰率はなぜか微妙に上がっている...

というわけで、当ブログでは想定していた通り直帰率はほとんど変わりませんでした。サイドバーの有無によって回遊は左右されなかった(サイドバーは意味なかった)ということっぽいですね。

当ブログの場合、訪問者の約半数はスマホユーザーなので、サイドバー変更の影響力はそもそも半分程度です。

サイドバーをもっと有効に活用されていたり、訪問者のほとんどが PC ユーザーというブログであれば、また結果は変わるかもしれませんね。

平均ページ滞在時間の変化

今回、直帰率はサイドバーからの回遊が減っているかの確認のため使用しましたが、直帰率という指標自体は、ブログにおいてはあまり重要ではないようです。

理由としては、記事を1ページ見て自分の知りたかったことがわかり満足していれば、直帰しても問題ないと考えられるため。

アナリティクスのヘルプにも記載がありました。

直帰率の高さが問題になるかどうかは状況によります。

直帰率の高さが問題になるのは、ユーザーがサイト内の複数のページを閲覧することが必要な場合です。たとえば、サイトのトップページがサイト内の他のページ(ニュース記事、商品ページ、購入手続きなど)の入り口として機能している状況で、多くのユーザーがトップページのみを閲覧しているとすると、高い直帰率は望ましくありません。

一方で、ブログのような 1 ページのみのサイトや、その他の 1 ページのみのセッションが想定されるようなコンテンツを提供している場合、直帰率の高さはまったく問題になりません。

直帰率 - アナリティクス ヘルプ

調べてみると、ブログにおいては直帰率よりも平均ページ滞在率のほうが、指標とするには良いようです。

というわけで、平均ページ滞在時間も比較してみました。

平均ページ滞在時間
全体 PC
4/1~30 04分04秒 03分42秒
6/1~30 04分19秒(6.20% 向上) 04分13秒(14.09% 向上)
1カラムに変更後の平均ページ滞在時間の比較

どうやら、PC の平均ページ滞在時間が劇的に向上していたようです。

これは1カラム化の効果ありと言っても良いのか...?

いろんな要素がありそうなのと、まだ1カ月だけの数値なので、1カラム化の効果と判断するにはもう少しウォッチする必要があるかもしれません。

ただ、思いがけず良い結果が出ていて良かったです。

補足:読了率を指標にする?

今回、記事の読みやすさを目的にレイアウトを変更したので、記事の読了率などを指標とするのが良かったかもしれません。

ただ、読了率は計測していませんでした。。
(これから計測できても変更前の計測がもうできない)

といっても今回はサイドバーを消すだけで記事そのものは大きな変更をしてないし、1カラム化後も直帰率はほぼ変わらなかったことから、読了率を含むユーザーの行動は大きく変わっていない気はしますが。

一応、GA4 には scroll というイベントが設定されており、次のような説明がありました。

ユーザーが各ページの最下部まで初めてスクロールしたとき(垂直方向に 90% の深さまで表示されたときなど)に記録されます。

[GA4] 測定機能の強化イベント - アナリティクス ヘルプ

当ブログでも一応 GA4 のデータは取れていて、scroll のデータもあるのですが、レイアウト変更により記事ページの長さ自体が変わっているので読了率の数値としては不正確なのかなと感じています。

GTM で設定すれば、読了率を計測することはできるようです。

(記事下の要素などに読了タイミングを定義づけ、要素が表示された際にタグを発火させるという方法のようです)

気になる方は調べてみてください。

記事へのコメント・ご質問は こちら まで
NEXT PREV