ZAPAブログ2.0

1.カラム別Webサイトデザイン

2.昔はたくさんあったWebサイトデザイン

3.ページ単体を見に来たときのユーザーの目の動き

4.サイト全体を見たくなったユーザーの目の動き

5.ミリオン単位でユーザーを獲得しているサイトのデザイン

6.左上の魔術師とは

1.カラム別Webサイトデザイン

現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。
このうち「2カラム型」のサイトでは、サイドバーを左に置くかで右に置くかで印象も効果も大きく違ってきます。
ヘッダー、フッターの有無や大きさの違いなどはありますが、大雑把に分けるとするなら、カラム数別に以下のように分けることができます。

1カラム型Webサイトデザイン
ヘッダー ページコンテンツ フッター 余計なサイドバーが無く、記事本文を読みやすいデザイン。 可変長のデザインとして横幅に自由度を取りやすい。
2カラム型Webサイトデザイン
ヘッダー 左サイドバー ページコンテンツ フッター 左側にメニューがあるデザイン。 右側に記事本文がある。	ヘッダー ページコンテンツ 右サイドバー フッター 右側にメニューがあるデザイン。 左側に記事本文があり、ブログデザインとして一般的。
3カラム型Webサイトデザイン
ヘッダー 左サイドバー ページコンテンツ 右サイドバー フッター 左にも右にもサイドバーがあるデザイン。 記事本文が小さくなりがちだが、ページを派手にできる効果がある。	ヘッダー ページコンテンツ 右サイドバー1 右サイドバー2 フッター 右に二つもサイドバーがあるデザイン。 一番右が全て広告だったりする不思議なデザイン。

2.昔はたくさんあったWebサイトデザイン

また、現在ではかなり少数派になってきてはいますが、昔は主流だったデザインとして、「トップページメニュー羅列型」と「フレーム分割型」があげられます。

トップページメニュー羅列型Webサイトデザイン
ヘッダー メニュー1/メニュー2/メニュー3/メニュー4/メニュー5/メニュー6/メニュー7/メニュー8メニュー9/メニュー10/メニュー11/ フッター トップページにほぼ全てのコンテンツへのリンクがあるデザイン。 ゲーム攻略サイトなどで多く取り入れられている。 記事本文は→のようになっていることが多い。	ページコンテンツ 戻る 記事本文とトップページへの「戻る」リンクで構成されている。 余計なヘッダー、フッター、サイドバーなどがないことが多い。 このデザインは、全てのページに同じメニューを揃えにくい時代に多かった。
フレーム分割型Webサイトデザイン
左メニューフレーム ページコンテンツ トップページメニュー羅列型と同様、全てのページに同じメニューを揃えにくかった時代に考え出されたフレーム型メニューのデザイン。 ブログシステムなどシステム面での改善や検索エンジン対策として、かなり少数派のデザインとなってしまった。

3.ページ単体を見に来たときのユーザーの目の動き

さて、それぞれのWebデザインをあげたところで、次は現在主流であるカラム数別各デザインごとにユーザーの目の動きを追ってみます。
近年では、検索エンジン、RSSリーダー、ニュースサイト、ブックマーク、リンク集などが流行したことにより、サイトトップページへ来ることよりも直接対象ページへと来ることが多くなりました。

サイト全体として読まれるのではなく、単体記事だけが読まれる

状況が多く発生しています。

では、初めてそのページに訪れたユーザーは最初にどこを見るでしょうか？
答えは、「左上」です。
これは、Webブラウザが横文字で左から右へと文字が進み、端まで行くと下に進んでいく構造が一般的であることに起因しています。

ユーザーはまず左上を見る

ユーザーはそのページのコンテンツを見に来たわけですから、余計な情報を見ることなく、直接記事本文を読めるWebデザインがもっとも優れていると言えます。
つまり、「1カラム型」と「2カラム型（右サイドバー）」のWebデザインが、ユーザーにとってもっとも優しいデザインとなります。

1カラム型	2カラム型（右サイドバー）
ヘッダー ページコンテンツ フッター	ヘッダー ページコンテンツ 右サイドバー フッター

ページに訪れた後、まずヘッダーをパッと見てサイトのイメージを確認します。
次に、ヘッダーの下へと目を移し、左上のページコンテンツへとすんなりと入っていけます。

逆に、ヘッダーの下側の左上部分にサイドバーがある場合、ヘッダー→左サイドバー→ページコンテンツと「目の動き」が複雑になってきます。

2カラム型（左サイドバー）	3カラム型
ヘッダー 左サイドバー ページコンテンツ フッター	ヘッダー 左サイドバー ページコンテンツ 右サイドバー フッター

ページ単体でユーザーを意識する場合、左上に記事本文があった方が良いと言えます。
ブログデザインとして右側にサイドバーがあるのも、こういったページ単体での読みやすさを意識した部分もあると思われます。

4.サイト全体を見たくなったユーザーの目の動き

次に、ページ単体を読み終わり、そのサイトに興味を持ち「もっとこのサイトの記事を読みたい！」と思ったユーザーの動きを追ってみます。

ページ単体の読みやすさで優れていた1カラム型ではどうでしょうか？
1カラム型では、多くの場合ヘッダーやフッターからサイトトップページへと戻ります。
サイトトップページも同様の構造をしていた場合、ユーザーはページ移動に苦労します。
例えばヘッダーにカテゴリ別のメニューがある場合などは、横に並んだリンクをクリックしながら記事本文を読み進めるため、「目の動き」は非常に複雑で、古い記事を読もうとする気力がなくなってしまいます。

1カラム型
ヘッダー ページコンテンツ フッター

次に、2カラム型（右サイドバー）の場合はどうでしょうか？
記事本文を読み終わった後、すぐ右に目を移すだけでページ移動に移れます。
記事本文と、プラス1ページくらい読む時にはわかりやすいデザインです。
ところが、右サイドバーに存在するカテゴリ別のリンクを、次々にクリックしてページを確認したい場合はどうでしょうか？
右サイドバーのリンクをクリックし、記事本文が存在する「左上」へと目を移し、また右サイドバーへと目を移しながらサイトを巡回していきます。
サイト全体として記事を読んでいく場合には、左と右の目の移動量が増え、やや疲れがたまります。

2カラム型（右サイドバー）
ヘッダー ページコンテンツ 右サイドバー フッター

次に、2カラム型（左サイドバー）はどうでしょうか？
ページ単体としてはやや読みにくいデザインでしたが、サイト全体を辿っていくときには実は一番優れています。
左サイドバーに存在するカテゴリ別のリンクを、次々にクリックしてページを確認したい場合、左サイドバーから記事本文の始まりの位置が非常に近く、「目の動き」が最小限で済みます。
サイト全体を読んでもらいたい場合、左サイドバーにメニューがあるとユーザーは楽にサイト全体を巡ることができます。

2カラム型（左サイドバー）
ヘッダー 左サイドバー ページコンテンツ フッター

最後に3カラム型の場合はどうでしょうか？
2カラム型（左サイドバー）と同じように左サイドバーにメニューリンクがある場合は、2カラム型（左サイドバー）と同様の効果が期待できます。
右サイドバーにはメニューリンクではなく、プロフィールや他サイトへのリンク集などを置いておくと良いと思われます。

3カラム型
ヘッダー 左サイドバー ページコンテンツ 右サイドバー フッター

5.ミリオン単位でユーザーを獲得しているサイトのデザイン

以上のことから、ヘッダー下の「左上」部は非常に重要であることがわかったと思います。
ユーザーは左上からページを見ていくわけですから、当然のことでもあります。

逆の考え方をすると、

左上に何があるかを確認することで、そのサイトが主張したいものがわかる

と言えます。

実際に、ミリオン単位でユーザーを獲得しているサイトのデザインを見てみましょう。

Google
まさに、左上を意識した典型的なデザインです。 ユーザーは検索結果を知りたいだけですから、そのための最適化がなされています。 検索結果1位のクリック率の高さは、みなさんの知るところだと思います。
YouTube
ユーザーが求めている動画が左上に来ているため、動画が主であることを主張しています。 また、動画の右側には関連する動画が表示されていて、もう少し動画を見たい人の欲求も満たすことができています。 YouTubeの検索結果ページでは、右サイドバーに結果を出さずに、真ん中に検索結果を表示するなどの工夫も見られます。
Yahoo!JAPAN
Yahoo!JAPANでは、今では廃れ気味の「トップページメニュー羅列型」を貫いています。これは、日本ではすでに確固たる地位を確保していることと、Yahoo!JAPANコンテンツ内のメニューにも自信があることを意味しています。人気のニューストピックスを右サイドバーに配置することにより、左上に存在する「Yahoo!JAPANコンテンツ内のメニュー」を意識させています。
海外Yahoo!
Yahoo!JAPANと比べて興味深いのは、海外のYahoo!です。日本とは違い左サイドバーにメニューが配置されています。Yahoo!は死にかけているのか?に書かれたりもしているように、日本のヤフーだけデザインが違うことは、国によってサイトで主張したいものが違うことを意味しています。
mixi
今まであげてきたサイトがユーザーのことを考慮して最適化されていたのに対し、mixiでは全く逆の手法が採られています。「あえてわかりづらい」デザインにすることで、PV数を稼いでいます。 まず、mixiのメニューが「上部」に存在していること、新着記事が右コンテンツ部に表示されていること。そして、一番重要な「左上」には、なんと「自分のプロフィール画像」が表示されています。 サイトに訪れたときに「自分」を意識させることで、「他人」との結びつきを意識させます。その上で、移動しづらいヘッダーメニューが存在しています。リンクが横へ横へと設置され、その配置の優先度も謎の仕様です。ユーザーはちょっと移動すると、すぐ「迷子」になります。迷子になる度に、自分のトップページへと戻ってきます。右コンテンツ部からマイミクの日記を読んだ後も、迷子にならないよう自分のトップページへと戻ってきます。トップページに戻る度に「自分」を確認することになります。 もしこれが、livedoor Readerのように左サイドバーのクリックだけでマイミクの日記を確認できる仕様だったらどのように感じるでしょうか？快適な操作性と引き替えにPV数が激減します。mixiの1人当たりPV数が異常なほど高いのも、このユーザービリティの悪さが原因であり、逆に、だからこそユーザーが何ページも確認してしまうほどの中毒性を生んでいる現状もあります。 一番重要な「左上」に自分のプロフィール画像を持ってきているところが、ミクシィのSNSとしての主張だったわけです。
ほぼ日刊イトイ新聞
ほぼ日のサイトもmixiと同じように、ユーザーにとってわかりづらい構成でヒット数を保っています。一つ一つの記事自体が良質であるため、記事を探すこと自体が宝探しのような気分になって常連ユーザーを満足させています。

6.左上の魔術師とは

以上の解説から、「左上」がどれだけ重要かがわかったと思います。
自分でWebサイトをデザインする場合、

何を一番主張したいのか？

を考えると、自然に「左上」に配置するものが決まってきます。
例えば、記事単体を重視したいのであれば、1カラム型や2カラム型（右サイドバー）が最適で、サイト全体を意識させたいのであれば2カラム型（左サイドバー）、3カラム型、トップページメニュー羅列型などが最適だと言えます。
また、SNSや動画サイトなどであれば、それぞれ主張させたいものを「左上」に配置することで、そのサイトとしての主張をユーザーに印象づけることができます。

この効果こそが、「左上の魔術師」と呼ばれている理論になります。

Wikipebia-左上の魔術師によれば、

左上の魔術師

左上の魔術師とは、そのサイトの左上に何が配置されているかを確認することで、そのサイトの主張したいものがわかるという理論。またこの理論を逆手にとって、主張したいものからWebデザインを決定する手法のこと。

Wikipebia-左上の魔術師より

と解説されています。

「左上の魔術師」を理解することで、そのサイトの主張を理解することが出来、Webデザイン時の手助けにもなるということです。