3/20 被リンクサービスリスト更新 新たに1サイトを追加

ブログに最適なカラムレイアウトは1カラムである【検証してみた】

ブログに最適なカラムレイアウトは1カラムである

ユーザーをこの記事に誘導したい、商品を売りたい、広告をクリックしてほしい…etc

最終目標は色々あると思いますが、まずは「苦労して書いた記事を読んでほしい」というのが全ブロガー共通の認識だと思います。

そんなブロガーの皆さんにおすすめしたいのが”1カラム“です。実際に当ブログで2カラムから1カラムへ変更した結果、記事の読了率が上がりました

ということで、この記事では1カラムのすばらしさを伝えるべく、以下のことを解説します。

目次

カラムレイアウトとは

カラム(column)とは英語の「」のことであり、WEBページ上のデザインにおける「段組み」のことです。

記事だけが表示されていれば1カラム、そこにサイドバーが加われば2カラム、もう一つサイドバーが並べば3カラムとなります。

カラムレイアウトの種類

つまり、コンテンツを縦長に並べた領域を「カラム」、そのカラムを使った縦長のレイアウトを「カラムレイアウト」と呼びます。

現在のWEBページでは、このカラムレイアウトが一般的ですね。特にブログにおいては2カラムがほとんどです。

横長のブログを見かけた人は超ラッキーなので、宝くじでも買ってみましょう。

1カラムにするメリット・デメリット

メリットとデメリット

それでは、なぜ1カラムを勧めるのかについて、マルチカラム(2・3カラム)との違いも含め解説していきます。

1カラムのメリット

1カラムレイアウトの特徴は、目移りする要素がなく余白が大きく取れることです。

たったこれだけのことですが、それが以下のようなメリットに繋がります。

訴求力が高い

1カラムだとサイドバーなどの余計な要素がなく、色々と目移りしてしまうこともありません。

そのため、ユーザーがメインコンテンツ(本文)に集中しやすくなり、商品やブランドへの訴求力が高くなります。ランディングページ(LP)が1カラムなのも、これが主な理由ですね。

余白が大きい

周囲に余白がある要素は1つのグループとして捉えられ、注目されやすくなるという性質があります。

1カラムなら余白のある要素はメインコンテンツだけ。その余白も2・3カラムより大きめに取れるため、ゆったりと読むことができます。

デバイス間のギャップが小さい

横幅の小さいスマートフォンでは1カラムレイアウトが基本です。それに合わせてPCも1カラムにすれば、デバイス間のギャップが小さくなり統一感を持たせることができます。

レスポンシブデザインというやつですね。

今風のデザインっぽい

PCも1カラムにすればスマホと同じような表示画面にできるじゃないか!

こう考えたブロガーたちが今1カラムレイアウトを採用し始めています。そのため、今は1カラムがトレンドと言われることもしばしば。

1カラムにしておくだけで、今風のデザインを装えるということですねw

1カラムのデメリット

では、これだけメリットの多い1カラムがなぜ主流になれなかったのか?

その原因は以下のようなデメリットにあります。

サイトの回遊率が低下する恐れあり

1カラムではサイドバーを設置しないので、他コンテンツへの導線(リンク)が相対的に少なくなります。

関連記事などのパーツ(ウィジェット)は、必然的に記事下に設置することになるでしょう。

そのため、サイトを回遊するのは主に「記事を読み終わった人」に絞られます。その結果、離脱率・直帰率が上がると考えられています。

フロート(追従)パーツが設置できない

サイドバーがないことで、フロート目次やフロートバナーなどが使用できなくなります。(正確には”しにくい”ですが)

特にフロート目次(画面に追従する目次)は便利なので、これが使えないのは大きなデメリットだと思います。

当ブログでは、目次ボタンを設置することでカバーしています

2カラム・3カラムとの違い

マルチカラムと1カラムは、その性質もメリット・デメリットもほぼ正反対です。

マルチカラムが巡回性を重視したレイアウトであれば、1カラムはコンテンツ・世界観への没入に重きを置いたレイアウトと言えます。

どちらも一長一短なので、サイトの特徴に合わせて設定するのがベストですね。

メリットデメリット
1カラム集中しやすい他コンテンツへの導線が少ない
2カラム他コンテンツへの導線が多い集中しにくい
3カラム他コンテンツへの導線が多い集中しにくい

実際に1カラムにしてみた

2カラムから1カラムへ変更

実際に2カラムから1カラムへ移行させ、ユーザー行動がどう変わるかを当ブログで検証しました。

サイドバーの活用が難しいため

1カラムへの移行を考え出したきっかけはヒートマップでした。

ヒートマップのClarityでクリック箇所を計測してみると、「サイドバーの関連記事があまりクリックされていない」という問題が見つかったのです。

サイドバーの悪い使用例

コンテンツ数も決して多くないことから、フロート目次以外の活用法も見つからずじまい。結果、サイドバーを切り捨てて1カラムへと移行してみた次第です。

計測結果

実際の計測結果は以下の通りです。

なお、計測開始日はブログ開設の2週間後を目安にしました。(落ち着いてからじゃないとまともに計測できないので)

2カラム1カラム変化量
計測期間10/18~11/1911/20~12/23
離脱率70.29%69.91%+0.38%
直帰率80.32%78.73%-1.59%
ページ滞在時間3分42秒4分7秒+25秒
赤字は悪化青字は改善

さて、懸念されていた離脱率・直帰率はほぼ変わらず。直帰率に至ってはわずかに改善しているぐらいです。

そして、一番気になるのは「ページ滞在時間」が改善されたこと。割合にして11%も増えています

1カラムにして読了率が改善!

結果をまとめると、以下のように考えられます。

  • 離脱率はほぼ変わらず → サイドバーがサイト回遊に貢献していなかった
  • ページ滞在時間が大幅に改善 → 1カラムにしたことで読了率が上昇した
  • 直帰率が少し改善 → 記事下まで読まれ、関連記事から回遊されるようになった(?)

1カラムに変えてもデメリットはほぼ受けず、「読了率を高める」というメリットだけを享受できました。

ちなみに、今回は「サイドバーを上手く活用できていない」という条件あってのものですが、一般的にクリック率が最も高いのは記事下です。

クリック率が比較的低いサイドバーを取り払い、記事に集中してもらうというのも悪くないと思いますよ。

見てほしいのはサイドバーじゃないですよね?

どんなサイトが1カラムに適している?

1カラムの素晴らしさは理解していただけたかと思いますが、それでも1カラムには向き・不向きがあります。

1カラムが向いているサイト

1カラムは「文章をじっくり読ませたい」、「ブランドイメージを促進したい」といった場合に最適です。

具体的には以下のようなサイト(ページ)が挙げられます。

  • 長文の多いブログ
  • ランディングページ(LP)
  • ペラサイト
  • ティザーサイト
  • コーポレート(企業)サイト

1カラムはコンテンツ数が少なくてサイドバーをうまく活用できていない場合にも有効です。一度サイドバーが必要かどうか考えてみましょう。

1カラムが向いていないサイト

反対に、「色々なコンテンツへ誘導したい」、「情報の豊富さを見せたい」といった場合はマルチカラムが向いています。

具体的には以下のようなサイトです。

  • 本文が短いブログ
  • ニュースサイト
  • ECサイト(LP以外)
  • 辞書サイト
  • アダルトブログ(エログ)

この中では、アダルトブログが2・3カラムの典型例ですね。

どのページからも収益が上がりやすいため、嗜好・性癖にマッチしたページが見つかることを重視しています。アダルトジャンルでは、未だに3カラムを採用しているサイトも珍しくありません。

ページ毎にカラムを変えるのも有効

必ずしもカラムレイアウトを全ページで統一する必要はありません。

noteを例にすると、トップページは3カラムで回遊性を上げて、記事は1カラムで集中して読ませるというレイアウトになっています。

全ページ同じカラムにすれば統一感は出ますが、必ずしもそれが正解という訳ではありません。臨機応変にカラムを変えるのも有効です。

1カラムに対応しているWordPressテーマ

最後に1カラムレイアウトが使用できるWordPressテーマを一部紹介します。(順不同)

  1. JIN
  2. SWELL
  3. SANGO
  4. AFFINGER5/6
  5. The Thor
  6. Cocoon
  7. Luxeritas
  8. STORK19
  9. Lightning
  10. Grazioso
  11. Twenty Nineteen

この他でも最近のテーマなら大体1カラムレイアウトを実装しています。また、当ブログで使用しているSWELLのように、ページ毎にカラム数を設定できるテーマもあります。

いざという時に「1カラムにできない!」とならないように、テーマ導入前にはカラムレイアウトを変更できるか確認しておきましょう。

ちなみに、当ブログでおすすめしているテーマは全て1カラムに対応しています。

まとめ

デザインの中でもレイアウトは、ユーザーに与える影響が特に大きい要素です。

「ブログといえば2カラム」といった固定観念は捨てて、1カラムという選択肢も持っておきましょう。

きっと今より記事が読まれるようになると思いますよ。

目次