つれずれなるままに… このページをアンテナに追加 RSSフィード Twitter

自身をYuichirouと名乗る謎の男が文字通り「つれれなるままに」書くよくわからん日記。

検索サイトから来た方、こんなページでゴメンナサイ。下にあるフォームに検索ワードを入れて検索すると、情報が得られるかも。

なお、タイトルに打ち間違いはありません。

1000 | 01 | 02 | 03 | 04 |
1504 | 01 | 02 | 03 |
2003 | 10 | 11 | 12 |
2004 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2005 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2006 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2007 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2008 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2009 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2010 | 01 | 02 | 03 | 04 |

2007年4月11日

今話題のあのサービス 12:25 今話題のあのサービスを含むブックマーク

に手を出してみたんだけど、携帯から更新できない(らしい)ので、今大学にいることが書けない…

「左上の魔術師」よりむしろ「ユーザーは中央を見る」 00:54 「左上の魔術師」よりむしろ「ユーザーは中央を見る」を含むブックマーク

Web業界デザイン手法として、密かに流行し始めている「左上の魔術師理論

サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。

「左上の魔術師」理論

初めに言わせてもらいます。そんな理論存在しません

それは最後にある「左上の魔術師-Wikipebia」を見れば一目瞭然です。


まぁ、冗談混じりにもっともらしさを出したかったのかもしれませんが、それ以前に、私は「ユーザーはまず左上を見る」という説に異論を述べたいです。

私はむしろ、「ユーザーは中央を見る」と思います。


人はまず、中央に視点を動かす

簡単な実験をしてみましょう。↓のリンク先にある写真を見てください。

http://f.hatena.ne.jp/Yuichirou/20050629205819


あなたは一番最初に、どこに視点を向けましたか?


大抵の人は、「0」とか「80」とか「100」、あるいはその左の空白、そのあたりにまず目を向けたはずです。それから目線を動かして、この写真が何かを把握したことでしょう。

なぜなら、写真中央であるそこに視点を取ると、写真全体を視野に収めることができるからです。


人(動物?)は、まだ見たことのない物を見るとき、まずその対象全体を視野に収めようとします。

その結果、人はまず対象の中央に視点を動かすことになるのです。


では、初めてそのページに訪れたユーザーは最初にどこを見るでしょうか?

答えは、「左上」です。

これは、Webブラウザが横文字で左から右へと文字が進み、端まで行くと下に進んでいく構造が一般的であることに起因しています。

「左上の魔術師」理論

この理由づけは、頭で考えて左上を見る場合を述べています。

しかし思い出してみてください。特に初見サイトアクセスして、表示された瞬間、無意識的に中央を見てはいませんか?


中央に本文があると読みやすい

404 Blog Not Found」と「はてなダイアリー日記」。

これらのブログ日記)を以前から見たことのある方。最近それぞれがデザインリニューアルをした際、読みにくくなったと感じませんでしたか?

(今初めて見る人も、読みにくいと感じませんか?)


人はまず、対象の中央に視点を動かします。

ウェブページの場合、表示領域の中央あたりに視点を動かすでしょう。

そして全体のデザインを把握した後、目線を本文に移して読み始める。


そう、その中央に記事の本文があると、目をほとんど動かすことなく読み始めることができるのです。

また、基本的に閲覧者はディスプレイにまっすぐ向かって見ているので、目や首を動かすことなくニュートラルな状態で読めるのも重要です。


404 Blog Not Found」と「はてなダイアリー日記」、これらは以前はサイドバーが左側にありました。しかし、それぞれ別の理由で、現在は右に置いています。

その結果、本文の始まりは中央より左に移動してしまい(Blog Not Foundの方なんて表示領域の左辺です)、そこまで目を移動させ、その状態を続けないといけなくなっているのです。


『「左上の魔術師理論』では、

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

「左上の魔術師」理論

なんて言っていますが、それが書かれた「[Z]ZAPAブロ〜グ2.0」は面白いことにサイドバーが左側にあり、その結果本文の行頭が中央付近に来ている、とても読みやすいデザインになっています(笑)


ミリオン単位ユーザーを獲得しているサイトデザイン(改)

さて、ここまで「ユーザーは中央を見る」という理論を説明してきましたが、実際ミリオン単位ユーザーを獲得しているサイトデザインはどうなっているのでしょうか。『「左上の魔術師理論』のように調べてみましょう。


screenshot

Google トップシンプルデザインはまさに「ユーザーは中央を見る」にベストフィットしています。

表示された後、上のロゴから下の著作権表示までの「対象全体」に目を移すと、検索ボックスが視点ど真ん中に位置しています。


screenshot

IT総合情報ポータル「ITmedia」Homeは、左サイドバーに各種カテゴリーへのリンク、右サイドバー広告系のリンクを配置した3カラムであり、TOP STORIES」以下が自然と目に入る構成になっています(左右サイドバーの幅の差で若干読みにくいですが)。


(画像なし)

mixiユーザーページは、『「左上の魔術師理論』では『「あえてわかりづらい」デザイン』なんて言われていますが、「ユーザーは中央を見る」の観点からすれば、新着記事などの特に「いつ・誰が」の情報自然に目に入るデザインになっているといえます。


screenshot

ほぼ日刊イトイ新聞のページは、ITmediaのような左右サイドバーのずれもなく本文が完全な中央配置になっているため、この上なく読みやすいです。しかも1行の長さが短く、視線の移動がほとんど不要となっています。


中央は重要

こう考えてみると、昔から多くのサイトで使われてきた「左サイドバー」や「ページ全体のセンタリング」、あるいは「表示領域での(上下方向でも)中央表示」というデザインは、「ユーザーは中央を見る」という理論によく合っていると言えます。

このように、同じ理論で裏付けできる複数のデザインが長く使われていることは、その理論の正当性を証明していると思います。

ぜひ、この理論を(も)、ウェブページデザイン時の手助けにしてみてください。

sasadasasada 2007/04/12 02:52 リンク先にある写真、まず最初にモザイクを見てしまいました。ぐーぜん、目に入ったんだもん、しょーがない。新理論「ユーザーは最初にモザイクに目を凝らす」ということで。f(^^)
応用すると、懐かしの『もんたメソッド』になるのかも。

sasada的には、ウェブページのデザイン的には左右に多少の余裕があって、しかも本文が読みやすいのが一番ですー。でもこれがムズカシイ。故にhatena2テーマに安住する毎日でーす。