ブログで最適なカラム数は?

layout

Betz では今のところ、ホームページとアーカイブページが2カラム、記事ページが1カラムの構成になっています。

カラム数に関してはそれぞれ特長があるので、どれがブログに最適なのかというのは一概に言えません。ただ、もし個人ブログだとしたら記事ページは1カラムがいいんじゃないかなーと思ってただいま実験中です。

僕が今まで作ってきたサイトを思い出しながら、各カラム数のメリット・デメリットをご紹介します。

3カラムのメリット・デメリット

左右にサイドバーがあり、中央にメインコンテンツがあるような3カラムは情報量の多いサイトに向いています。

Yahoo! JAPAN のようなポータルサイトで採用されることが多く、ブログでは一時期主流だったものの、どんどん数が減っている気がします。

3カラムで構成されているYahoo! JAPAN トップページ

3カラムで構成されているYahoo! JAPAN トップページ

ブログで3カラムを採用するデメリットは2つ。

  • ゴチャゴチャしがちで記事に集中してもらえない
  • メインカラムがせまくなり、文字サイズも小さくなりがち

ブログの命は記事そのものですから、左右に広告や人気記事を表示していると、読者の目線は左右にちらつくことになります。

また、記事本文の表示幅が狭くなってしまうと、それに合わせてフォントサイズが小さくなりがち。たまに 10 ~ 12px ほどの小さい文字を使っているブログがありますが、読みづらくてしようがないです。別に老眼ってわけじゃないんですけど……。

今後は高解像度のモニターが主流になっていくので、フォントサイズは気をつけたいですね。

トップページを華やかにしたい場合は、3カラムタイプがよいと思います。

2カラムのメリット・デメリット

左右のどちらかにサイドバーをおく2カラムタイプは、表示できる情報量が3カラムに劣るものの、現在の主流といっていいかもしれません。

サイドバーを左右のどちらかにおくかに関しては意見がわかれるところですが、以前は左サイドバーが多かったのに対し、右サイドバーが徐々に増えてきた気がします。

Naifix でも採用している右サイドバーの2カラム

Naifix でも採用している右サイドバーの2カラム

3カラムに比べるとメインコンテンツ幅を大きくとりやすく、フォントサイズも 14 ~ 16 px あたりが多く見られます。

それぞれの幅はブログによって違うものの、こんな感じ。

全体幅 メイン幅 サイド幅
900 ~ 1200 px 500 ~ 800 px 250 ~ 350 px

レスポンシブWebデザインだったり、リキッドレイアウトだったりで変わりますが、広告の幅を基準に決めているところが多いかもしれませんね。

たとえば、メイン部分に 728px のビッグバナーをおきたいとか、サイドバーに 336px のレクタングル(大)をおきたいとか。

追尾型サイドバーは時代遅れ?

3カラムの場合もそうなんですが、メインコンテンツ部分に対する縦の長さが気になるところ。

記事がぐわぁーっと長くなると、スクロールと共にサイドバーは隠れてしまいます。反対に記事が短いとサイドバーのほうが長くなってなんだかアンバランスな感じに。

で、この余白を埋めるために「追尾型」サイドバーが開発されまして、スクロールしてもサイドバーが追いかけてくる形のものが流行りました。今でも多くのブログで採用されています。

ただ、これは運営者目線では満足のいくものですが、読者目線で考えるとたんにウザいだけの存在だったりします。とくに広告が追ってきた場合にはかなり印象が悪い。しねよアフィカスとか罵倒されます。

今後少しずつ採用するブログが減っていくんじゃないかなーと思いますです。

1カラムのメリット・デメリット

2カラム・3カラムは目線を横に広げられるのに対し、1カラムは縦にしか広げられません。

でも冒頭で述べたように、これが(個人)ブログの最適解ではと思って1カラムにしてみました。アクセス数の大半を占めるスマホの表示が1カラムですし、記事を読んでもらうには余計な情報は不要かな、という考えです。

目線が縦に動いていくぶん、記事を読み終わったその下に何を置くか、というのがポイントです。

PV数を増やしたいなら関連記事などの表示、収益を上げたいなら広告、シェアしてほしいならSNSボタン……。ここら辺はデザインと共に徐々に改良していく予定で、僕としてはブログ運営で一番面白い部分。

仕上がったら、Gush3 として当テーマを無償配布いたします! まあ、今のところ Gush2 をちょろちょろっと改造すれば簡単にできるんですけど。

まだ横幅とフォントサイズのバランスを決めかねているので、試行錯誤中です。たぶん、30 ~ 35 文字だと読みやすくなるんだろうなぁ。画像の大きさもいろいろ試してみます。

まとめ

ブログの目的によっても変わりますが、できればデータをとりながら最適解を探すのがベストです。

目安としてはこんな感じでしょうか。

1カラム 記事本文だけに集中してほしい!という場合におすすめ。記事下CTAの作り方がポイント。
2カラム おそらく標準タイプ。決めかねているならこれにしておけば問題なし。追尾型サイドバーは何を追尾させるかで読者の印象が大きく変わります。
3カラム とにかくいろんな情報を載せたい!という場合におすすめ。左右を広告で挟んじゃうと印象が悪くなるので、広告とその他コンテンツでわけるのがいいかも。

いろいろ試してみましょー。