« あなたのWEBページの横幅はおいくつ? | メイン | レイアウトは、漫画のコマワリだ!2 »
2005年10月07日
レイアウトは、マンガのコマワリだ!
ええと。またまたいきなりわけのわからないタイトル付けて、と思われそうですが。
でも、まったくの素人からわけもわからずストレスに泣きながら勉強してきて、あ、これマンガのコマワリじゃん、と思えたらなんとなく仕事がはかどるようになったのは事実です。
ゾーニングという考え方があります。
たとえば、上のほうはトップメニュー。真ん中上がメインのコンテンツで、その下にサブコンテンツ。右のサブメニューが入るコラムの一番上はバナーの宣伝スペース、それからサブメニューが来て、その下が相互リンク、その下がアドセンスなど・・・。
ブログなんかも、ここはヘッダー、このエリアが更新記事。右コラムの上がカレンダーと、役割が分かれています。
そういったゾーン事に役割をわけて、混ぜない。たとえば、相互リンクがあって、その中に更新記録があってまた相互リンクというようにごちゃごちゃにまぜるとユーザーは混乱します。
さすがに今はそこまで変な構成のページはありませんが、5・6年前はそういう面白いページがあったりしました。
いまは、みんな真似しあって意識的に考えていなくてもゾーニングというか、領域わけをしています。
と、このゾーニングを教えてくれたのは、先輩ですが、これをさらにユーザビリティと合わせて考えると、これは「マンガのコマワリだ!」とひそかに心のうちで思いました。
マンガでも、WEBページは横に読みますから、外国のコミックみたく左上からはじまって右下へ行く流れです。
だから、企業やポータルサイト、あるいはいかにもプロがデザインしました、というようなサイトは大抵、左上にロゴがあります。だいたい、横が80ピクセル~縦が60ピクセルくらいとか、それくらいの大きさで。
なぜなら、視線はマンガのコマワリを負うように、左上から右下へ流れていくから。
一番重要なものを、左上にもってくる。そこから、人の視線が、ゾーン毎をマンガのコマのように追っていく、と想定してゾーニングをする。
たとえば、、大ゴマに相当するのがメインコンテンツで、いちばんクリックしてほしいバナーやメインの記事などを大きく取る。
メニューやトップのバナー、ロゴなどは、左上、上に存在するので最初に目に入ってきますが、これを小さくすることで、メニューとしてすぐに納得し、必要なとき意外は無視してもらう。
少年ジャンプとかの上の、コマの外にあるマンガのタイトルとかとおんなじです。
で、右の端っこにある宣伝の柱とか、下の欄外のメッセージ欄とか、これはたとえばアドセンスでしょうか。
もちろん、これはバナーの矢印をピコピコさせたりとかで、ある程度コントロールもできます。けれど、まあ、シンプルにそういう法則を頭に置いておいたほうが、時間がかからなくていいです。
残業は、いつもいやですからね・・・。(^^;;
すいません、睡眠時間がまた足りなさそうなので、ちょっと続きます。
投稿者 itoh : 2005年10月07日 12:02
トラックバック
このエントリーのトラックバックURL:
http://www.beyond-yourself.com/cgi/mt/mt-tb.cgi/8