「pukiwiki、はてなトップページの妙な恐怖感」の原因

Togetter - まとめ「pukiwiki、はてなトップページの妙な恐怖感」
http://togetter.com/li/8513

気づいた点をまとめてみました。

要因1　ロゴマークが認識できないため、Webサイトの「存在」も認識できない

GoogleにもYahooにも、Webサイトのシンボルとしてロゴマークがあります。「いやいや、そんなんpukiwikiにもはてなにもあったじゃん」と思うかも知れませんが、この2つのWebサイトのロゴマークの位置に注目してください。左上の隅にピタッとくっついてますよね。これだとページをパッと見た瞬間に、視界に入らないはずです。つまり認識できません。

※実際に自分のブラウザで開いてみてください

はてな http://www.hatena.ne.jp/

Twitterクライアント - TwitterまとめWiki http://usy.jp/twitter/index.php?Twitter%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88

特にpukiwikiの方は視界いっぱいにテキストが入り込んできます。わけのわからない知らない文字列で視界が埋め尽くされてしまいます。

YahooやGoogleのWebサイトはどうでしょうか。両サイトとも同じように上部にロゴマークを配置していますが、注意してみるとロゴマークの上にスペースがあることがわかります。この影響でロゴマークが人間の目に認識しやすい位置に配置されています。

Yahoo! JAPAN http://www.yahoo.co.jp/
ロゴマークの上に一本のエリアがあり、画像切れてますが、右端にはヘルプのリンクがついています。

Google 検索 http://www.google.co.jp/search?aq=f&sourceid=chrome&ie=UTF-8&q=google&esrch=FT1
Googleはロゴマークの上にメニューバーの様なエリアがあり、さらにその下にスペースがあります。

Webサイトの「存在」を認識する。こういう発想を持ったことはあるでしょうか？WebサイトにはURLというユニークな住所があり、更新され、変化し続けるものです。個として認識するのには十分な存在です。一般ユーザーは、訪問するWebサイトにボンヤリとここが何なのかという「存在」を確認しているんじゃないでしょうか。
ただのテキストの中から存在を認識することはできません。存在を認識させるためのシンボル、ロゴマークが必要です。視覚的にわかりやすい位置にロゴマークがあることで、そのWebサイトは「やぁ！ぼくはYahooだよ！！」と言ってるのと等しい効果がある。存在を認識できることで、「あぁ、ここはYahooなんだな」と安心できるんじゃないでしょうか。
しかし、テキストとリンクが主だった場合どうでしょうか？あまり見かけない文字列、そしてそこからどこかへと通じる入口が無数にある。ここがどこなのか、何があるのかがさっぱりわからない。存在が認識できないことで、何者とも知れない感覚、得体の知れない感覚に陥り、気味の悪さや恐怖感が生まれるのではないでしょうか。

要因2　ページの区画が曖昧

pukiwikiやはてなはページの区画が曖昧です。実際には項目ごとに分けられているのですが、白い背景が繋がっているため、情報もすべて繋がっている様に見えてしまいます。

※実際に自分のブラウザで開いてみてください

はてな http://www.hatena.ne.jp/

Twitterクライアント - TwitterまとめWiki http://usy.jp/twitter/index.php?Twitter%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88

これは色による区分けが明確にされていないことが原因です。Yahooのページと比べてみましょう。

Yahoo! JAPAN http://www.yahoo.co.jp/
四角形の枠組みで完全に区分けされています。すべてに枠線が書かれているというだけではなく、左のサービス一覧の区画は背景色があることで周りとの違いをより明確に認識させてくれます。

Googleの検索結果はどうでしょうか。

Google 検索 http://www.google.co.jp/search?aq=f&sourceid=chrome&ie=UTF-8&q=google&esrch=FT1
一見、はてなと同じように白い背景で繋がっています。ですが、このページ構成は検索結果の数十件を縦に並べたものです。それぞれの検索結果がまったく同じ構造で、ひとつのボックスになっています。
タイトルは太字、しかも下線が引いてある。そして重要なのがURLが緑色になっていることです。これによって、ボックスの始まりと終わりが明確に認識できます。はてなと違い、上から下までまったく同じ構造のボックスが並んでいるシンプルな構造だからこそ、区画が白背景で繋がっていても認識できるんですね。

まとめ

一般ユーザーはロゴマークを見て、Webサイトを個として認識し、その存在を確認しているのではないか。
画面上部にピッタリくっついたロゴマークでは視界に入らないため、その存在を認識できないのではないか。自分が何をみているのかわからない、どこにいるのかわからない、という感覚が恐怖を生んでいるのではないか。
また、情報量が多いページをみた瞬間、明確に色付けされ、区画で分けられていないページでは、情報過多で軽いパニックを起こしてしまうのではないか。

デザイニング・ウェブナビゲーション ―最適なユーザーエクスペリエンスの設計