かっこよくなきゃデザインじゃない!? そんなのは誤解だ!
デザインとは何ぞや?を考える、ayanpaの独断と偏見のデザインうんちくです。

空間の魔術師 その3
面積の黄金率U(ゴールデンだでよ!)
屁持論: 
トンネルをぬけると、そこは黄金率だった

今回は、「02 ) 空間の魔術師その1」で話した黄金率の補足事項として、二つの長方形の理屈をこねるがや。
ややこしいかもしれんが、ここは、「♪奇妙奇天烈摩訶不思議〜♪ 奇想天外四捨五入〜♪出〜前迅速落書無用〜♪」の世界だで、「♪ホンワカパッパ〜」で読んだってちょ!
(ドラ○もんより抜粋)。

大きさはデザインにとって必要不可欠な問題だがや。





1つ目の理論:
ピラミッドやパルテノン神殿の基台の長さと高さの比率は1対1.618。これを
黄金比といい、もっとも安定して美しくみえるらしい。
A点とB点を繋ぐ線上に中点Cを置いたとき、AC:CB=CB:ABとなるように計算すると、AC:CB=1:1.6180339…となるそうな。
名刺や国旗など美しく見せたいものは縦をこの比率に合わせてある(十字架はどうなんだろう?持ってる人は調べてみてちょ!)。
でも、はがきとかは1:1.5で下記の理論との中間、テレビやモニターは4:3、ワイドは16:9、本は1.4:1。まあ、普段から知らず知らずに黄金率に近い形とお付き合いしとるということだがや。

2つ目の理論:
紙には、A版(A4やA3など)とB版(B4やB5など)サイズがあるけど、
A判はドイツの物理学者が、長辺を真ん中で折って半分にしても縦が、折る前と変わらない比率(ルート2対1)の長方形を発見して、面積が1平方メートルの紙を「A0サイズ(841ミリ:1189ミリ)」と定めたもんだがや。普段使ってるA4サイズはA0を4回長辺を折ったサイズ(1/16)ということだがね。
そんで、A4をA3に拡大コピーするときは「141%(ルート2)」になるんだがや(A3をA4に縮小は70%)。
B判は日本の障子紙が基準になっとって(B0は1030ミリ:1456ミリ、1.5平方メートル)A判より面積が1.5倍でかくて、4つ切りとか8つ切りとかあって日本人にはなじみ深い(今は違う?)。

約8:5(1.618対1)の比率がもっとも安定して見えて、約10対7(1.414対1)の比率が分割しても比率がくずれない理想的な形のだ。ややこしや〜〜!
要は美しい画面の縦横比は1:1.4〜1.6にすれば間違いにゃー!っちゅうこっちゃ。




また、構図は臨場感をだすために、縦構図は目線を誘導し、視界のポイントの幅に合わせるように、真四角は目線が止まるから動きはなくなるけど凝視させるのに向いとるがね。
絵画のキャンパスではF型(Figure)の人物、P型(Paysage)の風景、M型(Marine)の海景、S型(Square)の正方形と、色々な種類があって使い分けしとるんよ。

も1つおまけに、ピクセル(pixel、px)という単位はモニター画面を構成する「粒」の数だがや。
800*600なら、面全体を480,000粒の電球でおのおの緑青赤と光を発して画面に色を表現しているようなもん。
ドット(印刷上の粒、解像度はDpi: Dot per inch)はプリンタやスキャナーなどに使われるが、1200Dpiのプリンタなら、1平方インチ(2.54*2.54センチ)当たり1,200粒(ドット)でCMYKのインクを吹き付けるということ。
ピクセルはモニター上、ドットは印刷面上で使い、似ているようで似ていにゃー。

さて、それを踏まえて、このウェブの世界では、モニターによってもマチマチだが、800px *600px、1024px *768px、1280px *1024px、1600px *1200pxとかの様々な設定がある。
でも、共通して見せるには最小の800px *600px(4:3)を想定して考えた方が、誰もがスクロールバーを出さずともええ大きさなんだがね。
ウィンドウを開くと、上部に出てくるツールバーなどで100px位高さを取られるので、表現できる1画面を800px *500px(1.6:1)とすると、こりゃ黄金比だがね!
それに、最大画面で見なかったり、履歴やお気に入りのウィンドウを左側に表示させる人のことも考えると、も100pxくらいの余裕が欲しい。
となると、作成できる1画面の大きさは、700px *500pxとなって、約ルート2対1の関係になるがね!
理想を言えば、1スクロール下の画面も700px *500pxが望ましいので、700pxに対して、縦500・1000・1500…と500pxの倍数で1画面におけるレイアウトをまとめていくとええと思うがや。
欲を言えば、シャカシャカシャカと、3スクロール位までで下端に到達した方がリズムがええので、高さは1000〜1500pxくらいまでがええだろうと思うんだがや。



そんで画面を縦に分割していく作業になるのだが、キッチリ黄金率で割っていくと、幅700pxにおける黄金2分割は、267px:433px、高さ500pxに対しては、191px:309pxだがや。すると、画面が4つに割れるから、そこにエレメントを配置していくだけで済む。
もちろん、これに合わせて作らんとあかん!というものじゃにゃー。
じゃあ、なんでこんな理屈をこねるのかというと、この比率の関係を知っていることで作成においての一つの指針となるからなんだがや。
まったく画面のことを気にしない人でありがちなのが、全体のバランスを考えず、文字や写真の幅に枠を合わせようとするので、まとまりのにゃー画面になってまうことだがや。
画面全体における隣り合うエレメントの大きさの比率は気にしたほうがええなも。





体の大きさでモノの大きさを計る「身度尺」。
机の上に大人の手を軽く開いて置くと、個人差は多少あるにしろ、親指と中指の先を結ぶ距離が約15センチ(1咫{あた}=5寸)になることがわかると思うんだぎゃ。
奇妙まことに、親指と中指の先を結ぶ直線上で、人差し指が当たる部分は、中指から約6センチ、親指から約9センチ、その比はほぼ黄金率になっていて、またその他の部分でもこの比率が見うけられる。両手の親指と人差し指で「」(カッコ)を作っても黄金率…不思議だなも。
ちなみに1寸は約3センチ、1尺(2咫=10寸)は約30センチ。
シャクトリ虫は、尺を計る人の指の動作に似ているために付けられたがや。
1寸法師はお椀の深さより背が足りんで、箸で川を漕げんくなってまうが…。
指を軽く曲げたときの手幅は12センチくらいで、CDの直径12センチと同じになるがね。これを超えるサイズは片手では持てなくなっていくということだなも。
余談で、畳は地方によっても変わるが、平均3尺×6尺の人間一人分。
畳2枚分(6尺{=1間}×6尺)が1坪(人1人が1日に消費する米をつくるのに必要な田の広さ)で、3合(180グラム×3食分)の米が出来、1年約360坪(=1段)で1000合=100升=10斗=1石(人1人を1年養える米・金。加賀は100万石)となる。海外にはインチとかフィート・ヤード…という単位などがある。

黄金率は普段の生活に自然に溶け込んでいる比率なので、一つの理想形としてそれに近い形で表現することによって、誰もが見やすい・分かりやすい画面になると思うんだがや。
自分の身の回りにあるモノの比率を気にして見てみると、「何故、それがその大きさで存在するのか」という疑問と発見が出来てDTP(画面編集:Desk Top Pubrishing)においても役に立つがや。
時代が移り大きさは変化してってまうけど、モノの大きさには必ず人に必要な基準があるでよ、見せる大きさにこだわってみても損はにゃーと思うんだがや。
ブラジャーの大きさや、比率にこだわってみても…。
ここで一句、「べっぴんさん そこはダメよと 尺をとり」。
おいらも「みのほど」を知らんとかんなあ。
お後がよろしいようで…。

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




Post Script : 
朝7時起床!朝日を浴びて気持ちよく背伸びする。
娘も嫁も起きて顔を洗ったり教育テレビを見ながら朝の準備をする。
8時仕事にでかけ一生懸命働く。
夜7時飲み会、みんなで集まってどんちゃん騒ぎ。
9時帰宅、風呂も飯も用意してあって三つ指立てておで向かえ。
10時自分の時間、趣味事や勉強や娘と遊んだりする。娘はそのうちに眠る。
夜1時就寝、一日の疲れをゆっくりほぐしながら休む…。
おお、ゴールデンな時間分割だがね!
(現実)
朝7時娘と嫁をむりやり起こす。ねぐせ髪のまま朝日を眩しそうに浴びる。
8時仕事にでかけ一生懸命働く。
夜7時に仕事が終わるはずもなく、友達も金銭的理由で飲み会は中止。
10時帰宅、嫁はパソコンに向かってモクモクと作業中、娘はそれを邪魔して遊んでいる。
11時明日の準備や娘と遊んだりする。
深夜3時、まだ娘は眠らない。昼と夜を間違えているらしい。目を閉じようとすると、遊んでくれと顔面をひっぱたいたり、髪の毛を引っ張ったりする。たまに顔の前にお尻を向けて屁をこく。
…そのうち限界がきて落ちる…。
チュラ チュラ チュラ チューラーラー♪
このページのTOPへ戻る 次(でら偏見 その4)へ進む
01 ) コンセプトは
    むちゃんこ重要
02 ) 空間の魔術師 その1
   面積の黄金率
★ でら偏見 その1
   デザインとは何ぞや
03 ) フォントのホント その1
   文字と黄金率の関係
04 ) 空間の魔術師 その2
   目線を誘導するんだぎゃ
05 ) 色もイロイロあるけれど
   その1 グレースケール
06 ) 色もイロイロあるけれど
   その2 イメージカラー
★ でら偏見 その2
   雑誌を読もう!
07 ) 色もイロイロあるけれど
   その3 カラーと対比
★ でら偏見 その3
  おいたち 〜追憶〜
08 ) フォントのホント その3
  文字組み
09 ) CI戦略
10 ) 空間の魔術師 その3
   面積の黄金率U
★ でら偏見 その4
   ライセンス
11 ) 空間の魔術師 その4
   空白と余白
12 ) 空間の魔術師 その5
   空白と余白U
★ でら偏見 その5
   劣等感
13 ) 色もイロイロあるけれど
  その4 配色
14 ) フォントのホント その4
  統一感
15 ) コンセプトは
  むちゃんこ重要 その2
  コンセプトと技術




01 ) 光と影 その1
02) 光と影 その2
03 ) 発想法 その1
★ でら偏見 その1
   芸術と裸の王様
04 ) 発想法 その2
05) 光と影 その3
06) デッサン表現 その1
07) デッサン表現 その2
★ でら偏見 その2
   尊敬する人
08) 色の魔術師 その1
   色占い
09) 表示図法その1 図形
10 ) 発想法 その3 
 
  リスクは逃げず乗り越えるもの
11 ) 表示図法その2 
12 ) 表示図法その3 
13 ) 表示図法その4
14 ) 表示図法その5
★ でら偏見 その3
   幸福への才能
 
15 ) 空間の魔術師 
   空白と余白3



ayanpaのデザインうんちくHOMEへ戻る