ayanpaci_50.gif

空間の魔術師(1) 面積の黄金比

屁持論:
恋も画面も割り切れないからいとをかし

画面構成において、面分割は見せたい物に優先順位をつけ、メリハリをつけ、見る人の目線にリズムをつけることができるんだがね。

限られたキャンパスの上にどんだけの情報を載せることができるかは、そのサイトの内容にもよるし、視覚的に意図するところでその都度変わってきてまうがな。そのためにコンセプトはしっかりたてんとかんとかんのだが、言いたい内容に順番をつけることも必要になってくるがね。

ロゴがあって写真があって、イラストがあって、広告があって、タイトルがあって、リードがあって、メインがあって、サブがあって、その下に本文があって、キャプションがあって…。でも、そん中に必ず同等な扱いをしなきゃいかんもんが、画面の半分以上占めることが多々あるんだがね。
そうなると画面はのっぺりとしちゃって動きのない画面になってまう。そうならんために、枠に凝ったり、配置に凝ったり、色に凝ったりするんだがね。

面積の黄金比とは、もっとも理想的な画面分割(スライス)のことだがね。彫刻でも八頭身とか頭にたいして体がその8倍であるのが人体の黄金比(諸説あり)とか言われとって、ローマからルネッサンス時代くらいに打ち立てられた理想の形だがや。(ちょっと自信にゃーけど)。


a001.gif

芸術作品にも、この黄金比にのっとって作られとったもんが多々あるでよ。
平面に立体を表現するための”パースペクティブ(透視法)”の技術も、確かそんとき確立されたと思う。

黄金比(上の図))を参考にしてもらうと、例えば内容のエレメント(要素)を分けて優先順位が<1>番から<6>番まであったとするとよ、画面分割では<1>は一番いいたいことなので、画面の半分を占めることになるんだがや。
<2>は半分の半分、<3>は半分の半分の半分…とドンドン割っていくと、<1>と<6>の間では32倍の差ができてしまうんよ。
そうなると<6>はほとんど見えんで意味もたんくなるでかん。でもこれが理想だでしゃーにゃーわ。
だで、一つの画面で表現できるエレメントは多くても5つまでじゃ。<6>はどれかに付帯する形でキャプションなどに使うようにしなかん。逆に言やあ、どんだけ情報量がいっぱいでも、エレメントを5つまでにまとめて順番つけてしまえば画面分割はできたようなもんだがね。

でも、扱いが<5>でも、<2>くらいの面積食ってまう時があるでよ、情報量によってその画面分割がうみゃーこといかにゃー時がほとんどだでかんわ。
まさに「あっちを立てればこっちが立たず」状態に陥ってまうんよ。そんなときは内容削るか黄金比無視するしかしゃーにゃーでかんね。


--------------------------------------------------------------------------------


golden1.gif

golden3.gif

golden4.gif

バナーを例に例えて話をする。
上の図のバナー作成例で「ワレワレハ友好的ナ宇宙人デス」は、「ワレワレハ」と「友好的ナ」と「宇宙人」と「デス」に分けることができるがね。
ほんで優先順位を<1>「宇宙人」として、「ワレワレハ」と「友好的ナ」は同等とみなし<2>が二つとすると面積的に「デス」が入らなくなるけど<1>にかかる言葉だで<5>か<6>の扱いで付帯させる。
「ワレワレハ」を<1>にした場合、「友好的ナ」を<1>とした場合などの例も載せてわかると思うんだが、何を主体にするかで配置やイメージがかわってまうということが言いたいんだがね。そのために内容が入りきらんくなったりして見にくくなるとアウトだで、いくら理想の形だからといって無理に合わせる必要はにゃー。ただ、この黄金比を頭の片隅に置いといてもらってちょっと意識しながら作るか作らんかで出来栄えは変わってしまうっちゅうこっちゃ。

関連コラム  空間の魔術師 その3 面積の黄金比Ⅱ

なんかわからんことあったらメールしてちょー! 
じゃあ、頑張ってちょー!バイちゃ!written by あやんぱ


Post Script :昔話。 
チーフ:あやんぱ!この13個の文章コラム、10ページでレイアウトしとけ!全部同等扱いだぞ!
あやんぱ:同等だと3つ入りきらないっすよ! 
チーフ:それをどうにかするのがデザイナーだろ(怒)
あやんぱ:…はい…(泣)。



Posted by ayanpa | 構成編 |2005年08月24日 | Comments [4] | Trackbacks [0]



トラックバック

このエントリーのトラックバックURL:
http://ayanpa.com/cgi/mt/mt-tb.cgi/13

コメント

あのー、とっても文章が読みにくいっす。方言なのかな?
こういう説明する文章は、できれば標準語で書いてほしいです

投稿者 わたる : 2006年01月21日 02:23

んちゃ!わたるさん。
読みにくいのがおいらのサイトなのだ!(えへん!←威張るところか?)
ってやっぱり読み辛いかも~~。
わたるさんには申し訳にゃーがこれがおいらだで勘弁してちょ!
もし、参考になりそうなら頑張って解読してみてちょ~~!

投稿者 あやんぱ : 2006年01月26日 16:41

初めまして。
グラフィックデザインの勉強をしています。
質問なのですが、この四角の中にただ一つだけ小さいイメージをおくとしたらどこら辺にちょこんとおけば一番バランスがとれた感じに成りますか?
1から6の中の枠の中ですか?それとも線が混じり合ってるところですか?

投稿者 ふみ : 2006年02月24日 13:22

んちゃ!ふみさん。
?申し訳にゃー、ふみさんの質問の意味がようわからせん。
一個だけをバランスよく…安定のバランスなのか、不均衡のバランスなのか、どれくらいの大きさで、どれくらいの画面に対して、どのような形態で、どんなメッセージを言うために必要なバランスなのかを考えればええと思うなも。
線は実際あってもなくても、仮想的な枠を思い浮かべ、枠内に収めた方がいいのか、それとも、飛び出た方がいいのか、それはコンセプト次第だなも。
だで、バランスと一言で言っても、何のバランスか?がにゃーと結局アンバランスになってまうんよ。
均等にということなら、画面のど真ん中にちょんと上下左右同じマージンを空ければええがね。
ふみさんの聞きたいことに答えがずれとったらごめんちゃい!

投稿者 あやんぱ : 2006年02月24日 19:30




当サイトの内容・構成・デザイン・画像の無断転載、複製(コピー)は一切禁止です。
Copy right (C) Since 2004/8/1 ayanpaのデザインうんちく All Right Reserved.