2005年10月14日
レイアウトは、マンガのコマワリだ！3
さて、左上、右下へのレイアウトの流れで、も少しだけ続きを、・・・。
さて、目線が左上から右下へ、自然の流れとして流れていく、ということをお話しました。
あくまでも、私の限られた経験と、先輩からの教えを元にしたセオリーですが。
で、もうひとつ、考えといたほうがいいこと。
マウスもまた、右下へ行きたがる、ということです。
いや、これも万人がそうだというわけではないのですが・・・。
たとえば、最初は、お気に入りとかからなんかのサイトを開きます。
その後、そのページにあるリンクをクリックして、べつのページをひらき、それがブログなんかだったりして、下へスクロールするとします。
マウスは、どこへ行きますか？
そう、右端です。
もちろん、ホイールマウスなんかを使用している場合は、その必要はないかもしれません。
でも、マウスをテキストの上から避けたりはしませんか？ そのとき、マウスは左に行きますか？ 右に行きますか？
また、ホイールマウスを使っていても、右端の棒や矢印を使ってスクロールすることはありませんか？
そして、ウィンドウがいくつも開いているとき、大きさを調節したいと思ったら、どこをクリックしますか？
全面化をするためには右上に行きますか、そうじゃなければ、当然右下です。
これは、ほとんどの人が右利きのせいなのか、それとも単純に文章が左から右にながれるせいなのか、よくわからないですが、とにかく、マウスも右にいきたがる性質がある、ということです。
だから、右下って結構美味しい場所だったりするんです。
でも、HTMLになれてないころとか、右下にどうやって置くんだ？などと思っていましたが・・・。
で、アメリカ版ヤフーを見たら、右下にクレジットカードのバナーがおいてありました・・・。気が付くと、ちょっとおっとなってクリックしてしまいたい位置ですね・・・。
あとメニューを左コラムにするか、右コラムにするかで、昔は圧倒的に左コラムが多かったし、進められてもいました。
でも、ブログなんかは気軽にいじれるせいか、右コラムが増えてきています。
個人的には、自分はこれからばんばん右コラムメニューを使っていこうと思います。
まず、最初に左のコンテンツを見せて、それから右にメニューを置いてやる。
これも、人間は左を最初に見る、それでマウスは右に行きたがる、という法則の応用例だと思います。
ほかにもいろいろと応用があると思います。
みなさんも、よろしければ、あたまの片隅にでもちょろっとおきながらページのレイアウトなど考えて・・・も効果の保証はいたしません！（＾＾；；
結局、人が相手の物事に確実なのはありないですからね・・・。
以上、レイアウトに関する図解つきの解説はメルマガのほうでまたいつかやりますので、登録のほうよろしくお願いします！
お役に立った！と思われたら・・・
ブログランキング、ご協力をお願いします。
投稿者 itoh : 22:34 | コメント (0) | トラックバック
2005年10月12日
レイアウトは、漫画のコマワリだ！２
前回のおさらいです。
人の視線は、左から右、上から下へ流れるようになっている。
これは、WEBが横書きだからで、戦前の日本のように右から左へ読むという文化だったら、当然右と左は逆になります。
でも、いまは欧米式なので、左上から右下へという流れになります。
それで、闇雲に要素をそういう流れで指定するのでは無しに、まず相互リンクなら相互リンク、宣伝なら宣伝と要素ごとに分けて、その分けられたゾーン・四角ごとに配置していく。
そのとき、漫画のコマワリを意識すると、なんとなくレイアウトがうまくいく。と。
もちろん、ビジネス系のサイトによくある、2コラムとかそういうおおまかな分け方も考慮して、です。
ここでさらに考えたいのが、そのゾーンのなかでも人間の目が左から右へ動くということです。
amazonとか、BK1とか、みんな本の紹介の右っかわに購入ボタン（ショッピングカートに入れる）があります。
さらに、たとえば小さなテーブルの左側に写真、右上に商品タイトル、とくると短い説明のあとに、右下に購入ボタン、もしくは詳細を見るボタンがあります。
ついでに、バナーなんかでも、クリックしてくださいという矢印は、だいたい右下に付いています。
クリックするのは、右下、と。こう意識しながら大手ショッピングサイトやポータルを見ていくと、いろいろと気づかされます。
もちろん、すべてがこれに当てはまるわけではありません。
マーケティング理論にしろデザイン理論にしろ、完璧な原理原則なんて、ありえないのです。
むしろ、デザインは漫画のコマワリ！というくらい強引で、細かい例外を無視したものの方が信用できます。（って少し自画自賛ですが・・・）
左から右への流れで、もうひとつ心に入れといたほうがいい項目がありますので、もうちょっとだけ、続きます。
の前に、ブログランキング、参加しました！
投稿者 itoh : 11:14 | コメント (0) | トラックバック
2005年10月07日
レイアウトは、マンガのコマワリだ！
ええと。またまたいきなりわけのわからないタイトル付けて、と思われそうですが。
でも、まったくの素人からわけもわからずストレスに泣きながら勉強してきて、あ、これマンガのコマワリじゃん、と思えたらなんとなく仕事がはかどるようになったのは事実です。
ゾーニングという考え方があります。
たとえば、上のほうはトップメニュー。真ん中上がメインのコンテンツで、その下にサブコンテンツ。右のサブメニューが入るコラムの一番上はバナーの宣伝スペース、それからサブメニューが来て、その下が相互リンク、その下がアドセンスなど・・・。
ブログなんかも、ここはヘッダー、このエリアが更新記事。右コラムの上がカレンダーと、役割が分かれています。
そういったゾーン事に役割をわけて、混ぜない。たとえば、相互リンクがあって、その中に更新記録があってまた相互リンクというようにごちゃごちゃにまぜるとユーザーは混乱します。
さすがに今はそこまで変な構成のページはありませんが、5･6年前はそういう面白いページがあったりしました。
いまは、みんな真似しあって意識的に考えていなくてもゾーニングというか、領域わけをしています。
と、このゾーニングを教えてくれたのは、先輩ですが、これをさらにユーザビリティと合わせて考えると、これは「マンガのコマワリだ！」とひそかに心のうちで思いました。
マンガでも、WEBページは横に読みますから、外国のコミックみたく左上からはじまって右下へ行く流れです。
だから、企業やポータルサイト、あるいはいかにもプロがデザインしました、というようなサイトは大抵、左上にロゴがあります。だいたい、横が80ピクセル～縦が60ピクセルくらいとか、それくらいの大きさで。
なぜなら、視線はマンガのコマワリを負うように、左上から右下へ流れていくから。
一番重要なものを、左上にもってくる。そこから、人の視線が、ゾーン毎をマンガのコマのように追っていく、と想定してゾーニングをする。
たとえば、、大ゴマに相当するのがメインコンテンツで、いちばんクリックしてほしいバナーやメインの記事などを大きく取る。
メニューやトップのバナー、ロゴなどは、左上、上に存在するので最初に目に入ってきますが、これを小さくすることで、メニューとしてすぐに納得し、必要なとき意外は無視してもらう。
少年ジャンプとかの上の、コマの外にあるマンガのタイトルとかとおんなじです。
で、右の端っこにある宣伝の柱とか、下の欄外のメッセージ欄とか、これはたとえばアドセンスでしょうか。
もちろん、これはバナーの矢印をピコピコさせたりとかで、ある程度コントロールもできます。けれど、まあ、シンプルにそういう法則を頭に置いておいたほうが、時間がかからなくていいです。
残業は、いつもいやですからね・・・。（＾＾；；
すいません、睡眠時間がまた足りなさそうなので、ちょっと続きます。