Affinity Publisherの魅力を紹介中!

人気ブログサイトのサイドバー(サイドメニュー)はなぜ右側が多いのか?キーワードは「Fの法則」

Web
この記事は約4分で読めます。
スポンサーリンク

学生時代から運営しているこのブログですが、実はサイドバーの配置を何度か変えて運営していました。

例えば下記のデザインのときはサイドバーは左側に集約していました。

逆に、初代のブログのみの構成の場合は右側に集約していました。

そこでこう思いました。結局サイトのサイドバーメニューは左側がいいのか、それとも右側がいいのか。

今回はそんな疑問をある法則を用いながら解説していきたいと思います。

スポンサーリンク

まずは結論から

では、まず結論からお話します。

記事を主役にしたい場合(ブログなど)はサイドナビゲーションは右側、サイト内のコンテンツをまんべんなく見てもらい、回遊率を高めたい場合(ECサイトや専門性の高いメディア)は左側に置くようにしましょう。

これには、広告業界でもよく使われている「Zの法則」や「Fの法則」が強く関わっています。

スポンサーリンク

Zの法則とFの法則とは?

Zの法則とは、例えば広告のようなチラシを見るときの視線の動かし方が左上→右→左下→右と「Z」の順番に視線を動かすという法則のことを指します。

このとき、Zの導線上に重要な要素を配置するを配置すると、効果的であると言われています。

主に雑誌の記事やポスターのデザイン、商品の陳列などにも活用されています。スーパーで物を選んでいるとき、無意識にZの視線で見ていたりしませんか?

Zの法則の視線

Fの法則とは、左上から右に視線を移し、その後また元の場所の少し下に視線を動かして再度右に視線を動かす法則のことを指します。

ウェブサイトの場合はこの「Fの法則」が重要とされており、左側のコンテンツを中心に読み進められて行きますが右側のコンテンツはあまり見てもらえなくなります。

Fの法則の視線
スポンサーリンク

ブログはなぜサイドバーが右側にあることが多いのか

さて、ではなぜこのブログを含め右側にサイドメニューがあるブログが多いのでしょうか?

それは、他のページではなく今見ているこの記事自体に集中してほしいという管理人の気遣いです。

例えば左側にサイドメニューがある場合、まず最初の視点は左上のサイドメニューの要素になります。もしそこに広告があり、閲覧者の興味をそそる内容であればその時点で記事から離脱してしまいます。

このブログは広告をサイドバーの一番上に表示していますが、そのまま左に持ってきたらほぼ確実に離脱率が高くなります。

たいしょん
たいしょん

おっ、好きなカメラのセール情報が!この記事はあとでいいや!

サイドバーが右側の人気ブログの例

gori.me

私もファンであるゴリミーさんのブログも、この法則に則って右側にサイドバーがありますね。

ゴリミー | Appleニュース&ガジェットレビューのテック系ブログメディア
新型iPhoneの噂、新しいMacBookシリーズ、iPadの次期モデルなど、Appleの最新情報を中心としたテックニュースやガジェットのレビューをお届けします。
OZPAの表4

学生時代からよく見ていたOZPA様のブログもサイドバーが右側にあります。

記事自体に注目してほしいからこその気遣いと言えますね。

OZPAの表4
スポンサーリンク

ではサイドバーが左側にあってはいけないのか?

では、サイドバーが左側にあったらだめなのかと言われればそうではありません。

例えば先程お見せした昔のブログデザインの場合、実はブログだけではなく「ポートフォリオ」も見てほしい、あわよくばお問い合わせもほしいという目的を兼ねた就活特化型にしていたためです。

この場合、記事だけではなく他のページもまんべんなく見てほしいという意図があるので管理人としては目的にかなっている配置ということです。

また、AmazonなどのECサイトもこの配置であることが多いです。

スポンサーリンク

実例

Amazon

カテゴリが多く、色んな商品を見てもらいたいという意図があるからこそ左側にサイドナビゲーションを配置していますね。

これがもし右側にあったら、どこか不自然に感じる方もいらっしゃるでしょう。

楽天

意識していない方もいらっしゃるかもしれませんが、楽天市場もそうです。

Wikipedia

あとは、専門性の高いサイトの代表格とも言えるWikipediaもサイドバーが左側です。

とにかくコンテンツ量が多いので、いろんなページを閲覧してほしいという意思の現れかもしれませんね。

スポンサーリンク

まとめ

では、改めてまとめます!

記事を主役にしたい場合(ブログなど)はサイドナビゲーションは右側に置きましょう!

サイト内のコンテンツをまんべんなく見てもらい、回遊率を高めたい場合(ECサイトや専門性の高いメディア)はサイドナビゲーションは左側に置くようにしましょう!

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
この記事を書いた人
たいしょん

岐阜のTECPRESSO株式会社でWebエンジニアとして働いています。
1992年生まれ。学生時代は野球(副部長なのに補欠)と演劇をしていました。元技能五輪全国大会Webデザイン競技愛知県代表。
Apple製品をはじめとするガジェットやウェブサービス、デザインなどに関心があります。

たいしょんをフォローする
Web
スポンサーリンク
たいしょんをフォローする
たいしょんブログ
タイトルとURLをコピーしました