高知で働くフリーランサーのブログ

何故ニュースサイトや人気ブログは2カラム/右メニューなのかを考察する

      2016/07/09

多くのサイトは画面左に本文、右側にカテゴリ等のサイドメニューを配置するレイアウト、2カラム右メニューを採用しています。

Yahoo!ニュース 、ライブドアニュース(livedoorニュース) 、ITmedia日経ビジネスオンライン:総合トップ 、現代ビジネス [講談社]ハフィントンポスト 等等・・・

それぞれトップページに違いはあれどもニュースサイトの記事本文のレイアウトはほとんどが2カラム右メニュー。

人気のある個人ブログ、Chikirinの日記gori.me(ゴリミー) 、男子ハック 、More Access! More Fun! 等でもやはり基本は2カラム右メニュー。

私が使用しているブログデザインのstingerでも2カラム右メニューが採用されていて、もはやディファクトスタンダードになりつつある(というのは言い過ぎか)。

とにかく何で2カラム右メニューなのか気になったので考察する。

現代ビジネス

 

スポンサーリンク

何故2カラムなのか

ブログレイアウトとかほとんど気にしない(しなくていい)タレント系ブログ以外では最近はほとんど見なくなった(ような気がする)3カラム。

1カラムってのもほとんど見ない気がしますがそれぞれ大きく変わってくるのはやはり本文の文字列の幅ですよね。

なのでまずは何故2カラムなのかを文字列の幅から考えてみます。

読みやすい本文の幅とは

例えば1カラムで左端から右端まで本文があるサイトってすごい読みにくいですよね。最近PCでスマホ用サイトを読み取ってしまうことがあるんですがその時に画面左端から右端まで文字が並んでしまうってのをたまに見ます。

こんな感じ。画像をクリックすると拡大されます。

画面

これなんで読みにくいかって言うと人間の視野角の問題だと思われます。

人間の視野角(水平)は180度を超えて約200度ありますが情報をしっかり認識する角度においてはわずか30度程度しかないようです。

参考:Snufkinski Note

これがまあどういうことかって言うと目と画面の距離が40cmだった場合情報をしっかり認識出来る幅は約29cmしかないってことになります。

3.3.2 15° の三角比とその周辺 を基に計算(数学ロクに勉強してないけど多分だいたいあってるはず)。図は上から見た所。

 画面距離

つまりモニターのサイズにもよりますが文字列の幅は29cm以内に収めないと非常に読みにくいんじゃないかと思います。眼球スゲー動かさないといけない。

ニュースサイトやブログサイトは記事の本文を読んでもらえるよう読みやすさを考慮して作られています。

多くの有名サイトでは本文の幅は約600pxくらいに設定されているようです。

これが読みやすいブログデザイン!有名サイトの記事幅と余白設定を大公開

600pxは19インチのモニターで解像度がSXGA(横1280px)だとだいたい20cmくらいになります多分。

一文の長さを考慮すると?

視野角を考慮すれば横幅がありすぎると読みにくいことがわかります。じゃあ3カラムにありがちな300pxくらいはどうなのってことですが、1文の長さの目安を60文字とした場合、一文が4行にも5行にもなってしまうと読みにくいようにも思えます。

が、スマホは当然幅が狭いので一文が4行、5行ってことザラですよね。字が小さくなければPCサイトでも幅がスマホみたいに狭くてもそれほど読みにくくはないと思ってます。

まあそれでも1行で読みきれる文章は1行で書かれてた方が読みやすいに決まってますよね。

だから19インチの画面だと大体20cm~25cmくらいの幅が読みやすいんじゃないかなあと思います。

何故右メニューなのか

本文の幅に合わせると2カラムがベストだということがわかりました。

次に何故右メニューが人気なのか考えてみる。右メニューがいいのは右利きの人はマウスカーソルが右にある方が落ち着くと聞いたことありますが本当なのか。

マウスカーソル位置

ツールを使って実際にどの位置にマウスカーソルがどのように移動しているのかを調べてみました。するとやはりやや右側に居ることがわかります。

実際私もそうなんですが右手でマウス使っていると自然と右側に居座っちゃいますね。メニューの上を通らないのは誤クリックを防ぐためだと思われます。

マウス位置

目線を考慮すると?

横書きのテキストを読む時当たり前ですが左から右に読み、次の行に移る際一番左に目線が行きます。

目線

左に目線が移った時、左端に同じような文字列があると視界に入ってきて気が散ってしまうかもしれません。左カラムにする場合、色分けをする等の工夫をしないととても読みづらいサイトになってしまいます。

ニュースサイトの場合、背景を白で統一している場合が多いので左メニューだと読みづらくなってしまうのかも知れませんね。

まとめ

というわけで読みやすさを考慮するとやっぱり2カラム右メニューがベストかなと思いました。

実はこの2カラム右メニューのサイトが多すぎて「どこも同じようなデザインのブログばかり」という声を聞くことがありますがちゃんと理由があるんだよってことを言いたかっただけ。

なんとな~くみんなやってるからそうしてるわけではないのだよ私はw

本当はもっと個性出したい気持ちもあるんだけどね。

 - ブログ運営

TKalice

TKalice

高知県でブログ及びアフィリエイトアフィリエイト収入で生活してます。

Feedlyで購読

関連記事

wordpress無料テーマはどれが良い?優良テーマ4種類ほど特徴等を解説

ちょっと要望があったので実際使ってみたwordpress無料テーマの特徴とか感想とか書きます。 こちらで紹介しているモノはすべて無料でダウンロード出来ます。無料 …

自尊心が満たされている人はブログを継続することが難しいのではないか?

このブログを開設したのは去年の12月1日、今月末で著丁度半年を迎えます。 アクセス数もおかげさまで毎月上昇傾向にあり、大したこと書いてねえ癖に出来すだろってくら …

no image
ブログの直帰率を気にする人をみて思うこと。気にする必要ないんじゃない?

ここ最近なんとなく、ブログの直帰率を気にする人が多いように感じます。 このブログの直帰率は約85%。これ多分運営当初からそれほど変わってないと思います。で、先月 …

no image
SNSで3倍読まれるようにするブログ記事タイトルの付け方

SNSを如何に活用するかでブログの成長速度が大きく変化する。 このブログは解説して一年ちょっとになるけど、多くの人に読んで貰えるようになったのはtwitterを …

どうしてもアクセスが伸びない人のためのブログスタートアップ法

こんにちは。 今月に入って一日当たりのPVが安定して2000くらいになってます。正直出来過ぎで結構驚いてます。 でもまだまだスゲー人はたくさんいて3ヶ月で月間P …

月間10万PVのブログを作る方法を雑に説明する

最近twitterでよく「月間10万PV」という言葉を目にするので書くことにしました。 10万PVってすごいのか、すごくないのかなんてのはあくまで主観的な意見で …

バカでも無知でもブログが書けるようになる方法

文章ってのは頭がよくないと書けない。特に人から評価されるような文章はね。 そのせいかブロガー界隈で有名な方々は高学歴な人が多い。 ちきりんさんとかイケハヤさんと …

批判を受け入れない人は成長できないは本当なのか?

以前記事にもしましたが私は批判コメントは無視すべきだと思ってます(何度でも言ってやるw)。 参考記事:ネガコメと上手に付き合っていく方法 この記事のコメントにも …

雑記ブログで手堅く稼ぐコツ(初心者編)

こんにちは。 ブログとかアフィリエイトとかやっている人です。 最近ブログアフィリエイトがお盛んです。高知にいる私でも、今年だけでも「ブログで稼ぎたい」、「アフィ …

お役立ち系の記事が書けない人が読まれるブログを書く方法

読まれるブログとか言われても私には専門的な知識もないしweb関係も詳しくない。文学も歴史も何も勉強してこなかったし、これといって誇れる知識もない。 どうやったら …