左サイドバーと右サイドバーの歴史的背景

このブログは、2014年8月時点では、ワンカラムデザインになっています。個人的にはワンカラムが一番いいと思っているのでそうしているのですが、最近ブログのレイアウトに関する記事をいくつか読んだんですよね。

左サイドバーと右サイドバーとサイドバー無し、どれが好き?サイドバーの目的について - 鈴木です。

シングルカラムから始める情報設計 : could

記憶ベースですが、サイトのレイアウトに関する歴史を振り返ってみたいと思います。

左サイドバーの誕生

まず、上で紹介した1つ目の記事では、「左サイドバーはまれだけど最近増えてきた」と書かれていますが、個人的にはちょっと印象が違います。昔から左サイドバーがメインで、その後右サイドバーの大逆転があって、近年左サイドバーが盛り返してきた、というのが個人的な印象です。

ここでいう昔というのは、今から15年くらい前です。2000年前後でしょうか。そのころのウェブサイトは、左サイドバーがほとんどだったと思います。それが、2000年代半ばくらいから、右サイドバーに変わってきたという感じですかね。

この変化は、YahooからGoogleへの変化だと思っています。

「ググれ」という言葉があることからもわかる通り、今なら何かを調べるときに多くの人はGoogleを使います。しかし、2000年頃は、Yahooの力が絶大でした。Yahooは手動で優良なサイトを選別し、それをカテゴリー別に登録していくという、ディレクトリサービスを提供していました。人間の目で選別しているので、だましや悪意のない優良なサイトだけが掲載されている、というのがウリでした。

サイト作成者としては、このYahooに採用されるというのが、人を呼びこむ一番の方法でした。Yahooは外部のロボット検索と提携しており、検索もできていたのですが、ディレクトリから外部サイトに移動していくというのが多かったと思います。

つまり、サイトの訪問者がまず行きつくのは、サイトのトップページなんです。

調べたいことをワードで検索するのではなく、カテゴリーを選んで選んでサイトを選択して飛んでいく。そこで目にするのはサイトのトップページ。そこから、そのサイトの中で、自分の欲しい情報を探していく、と。

こういう行動をとるので、一番大事なのは、「サイトがどういう構造になっているか」をまず示すことだと思うんですよね。

なので、重要なナビゲーションを左に置く、つまり左サイドバーが昔は主流だったのだと思います。

右サイドバーの誕生

ところが、Googleのロボット型検索エンジンが主流になってくるうちに、「訪問者が一番はじめに目にするのは、サイトのトップページとは限らない」という状況が出てきます。キーワードがあるページを直接見に来るというわけです。

「直接ページに来る」というのを想定していない人はたくさんいました。例えば、昔よく使われていたものに、「フレーム」があります。ブラウザの画面を2つに分割し、ナビゲートのページとコンテンツのページとをそれぞれ用意していたんですよね。ところがGoogle先生からすると、そんなレイアウトのことは知らず、ページしか解析しないので、コンテンツページだけを検索結果に出すわけです。そこにはナビゲートのページがないため、そのサイトに行ってもGoogle検索に戻る以外の道がないという残念な作りになっていたんです。

今はフレームを使っているサイトはほとんど見ませんが、昔はcssが発達していなかったので、サイドにナビゲートを置くためにはフレームで画面分割するというのが一番楽だったんですよね。なので多くのサイトで採用されていました。Google検索が主流になるにつれて、消えていきましたけども。

こうして、直接ページに来る人が増えると、サイトの構造、つまり、ナビゲーションよりも、キーワードのあるページ自体が重要になってきたわけです。さらに、ブログの登場により、一つ一つの記事の独立性が増したこともあり、ページそのものの重要性が増してきました。

この結果、右サイドバーが主流になっていった、と考えています。

ワンカラムについて

人がやってくる経路が、トップページか、それとも、キーワードのあるページか。これによって、重要なものが、サイトの構造提示なのか、ページそのものの表示なのかが決まり、それに応じてサイトのメジャーレイアウトが決まってきたのかなと思います。

その一方で、ワンカラム、シングルカラムというレイアウトも昔からあります。昔のはブラウザの左端から右端までテキストが伸びていて、とても見やすいとは言えませんでした。しかし、最近は最大幅を設定し、読みやすくなっているものが増えていると思います。(このサイトも、最大幅を設定しています)

ワンカラムにするのは、「ページに集中してほしい」というのがあると思います。検索してきてくれた人に、必要な情報を見せる、と。もしサイト全体に興味があるのであれば、読み終わった後、記事の下の方にナビゲーションがあるのでそこから飛んでもらえばいい。こういう考えがあるのだと思います。検索してやってきたけど、下まで読まないのであれば、他のページにもいかないだろう、つまり、ナビゲーションを横に置いてもたいして意味がないだろう、と考えるわけです。

また、レスポンシブデザインのためというのもあると思います。今、デスクトップPCだけでなく、タブレットやスマホからサイトを見る人が多いです。こういう人たちでもサイトが見れるように、画面の幅に応じて動的にレイアウトを変えるレスポンシブデザインをとりいれているサイトが多いんですね。このとき、PCでは横にあるサイドバーを、スマホやタブレットで見る時には下に移動させたりするんですよね。それだったら、始めから下でいいかな、という気がするんですよね。

サイドバーがあると、メインコンテンツとの長さの違いが気になります。メインコンテンツが短くてサイドバーが長いと、デザインがかなりいまいちです。メインコンテンツが長いと、サイドバーの下は空白なので、メインコンテンツが真ん中からずれた位置にあるように見えてしまいます。これを防ぐためには、そもそもサイドバーをなくそう、というのが一番手っ取り早いんですよね。

え? 3カラム? メインコンテンツにほとんどテキストがないのであれば、3カラムもいいと思いますが、テキスト多いですからね。却下ですね。ちなみに、3カラムについては、昔記事を書いています。[web]アメブロは3カラムが一番いいんだろうな

というわけで、個人的には、ワンカラムいいよ、ワンカラム、とおススメしたいところなんですけども。あんまり盛り上がりませんね。

まとめ

昔を思い出しながら、左サイドバーと右サイドバーの歴史的背景を見てみました。大事なものが変わると、デザインも変わるんですね。

そもそも、大事なものを左に置くのは、左が一番初めに目に入るから、という理由がありますが、もう一つ重要なポイントがあります。それは、右側は画面に表示されていない可能性がある、という点です。昔は、モニターの画面が小さかったこともあり、横幅を600pxとか800pxとかにしましょうとか言ってましたからね。懐かしい。今はそんなことはあまり気にしなくてもいいはずなんですけどもね。

時代が変わっても、大事なものが左にあるというのは変わらないんだなぁ。

前の記事:
PHPUnit・スケルトンジェネレータのインストールでつまづいたメモ
次の記事:
NetBeansでプロジェクトファイルの場所を動かして怒られた時の対処