空間の魔術師
その4 空白と余白 |
屁持論:
あなたの視界も黄金率
今回は自分が読んでもややこしいので見出しを作ってみた。
各見出しをクリックするとそれぞれの項目にジャンプするでよ。
興味あるところをよんだってちょ!
注意点:
これはおいらの独断と偏見による「仮説」である。(ちゃんと調べてにゃー)
1. 今回は「間合い」について考えていこうと思うんだがや。
第8章で「空白の部分が多いとすっきり見える」と書いたが、これを「余白の多い画面」と勘違いせんように注意して欲しいんだがや。
その違いは、「意図的に空けた空間」か、「漠然と空いた空間(デッドスペース)」か、だがね。
また、「意図的」に空けたつもりでも、全体として無駄な空間に見えれば「余白(デッドスペース)」なんだがや。
*****************************************
2. そうならないように、どうやったら空間をすっきり見せつつ、内容をぎっしりさせるこができるかおいらも含めて四苦八苦すると思うんだがね。
空間における「空白」の役割は、エレメント(要素)間の仕切り/目を休憩させる/空間に余裕(広さ)を持たせる/目線を誘導させるなどだがや。
これは「部屋のレイアウト」を考えるのに似ている。
「画面は自分の部屋そのもの」だと思うからだがや。
荷物や家具がいっぱいの部屋では、くつろげんし、狭くなるし、行き場がにゃーがね!
逆に何にもにゃーと、がらんとしてまって、体育館の中一人で体育座りしているみたいにさみしくなるがね。
自作のHPには、その人の生活習慣が何気に出やすいから、何気ない枠や罫線や配置が、その人柄を表現してまうから面白いでかん!
プロの人はどうすれば良く見せれるかという術を知っているのでごまかすことは出来る(たとえ、自分の部屋はきたなくても)。
おいらはプロじゃにゃーのでこれに限らにゃー。
*****************************************
3. 隙間があればそこに詰め込んで、他の人が見て、どこに何があるかわからにゃーではあかん。
部屋の幅にきっちりと隙間なく家具を並べる人もいると思うが「逃げ」のない空間はぎゅうぎゅうしてまってせまくるしく感じてまうでかんて。
でも、タンスや棚の中は詰まっている方がええがね。「本の少ない図書館」状態ではかんでよ。
中身は詰める、外身は空けるというメリハリが、「空白」を「余白」とさせないコツだがね。
*****************************************
4. どんな感じで空けていけばいいのかは、「目の動きと頭の動き」を基準に理論立ててみるがや。
まず、人間は画面を凝視するとき、必ず真正面で見ようとするがや。
そのため、高さがあったり、幅が広い画面を見るときは頭を動かすことになる。
頭を動かすということは、結局目にも首にも負担をかけてしまうから、「読み辛い、疲れる」画面だということだがや。
*****************************************
5. ここで思い出して欲しいのが第10章の「黄金率」。
見やすさは黄金率と関係があると仮定し、まず結論を言うと、
「人間の視界自体が黄金率」だから「黄金率の物体は安定して見える」のである。

おいらを基準に計算しとるで誤差が生じる恐れがあるが、人差し指と小指で両目のまぶたを触ってみて欲しい。するとちょうどぴったり指の位置が目の中心に合うことに気づくだろう。
おいらの場合は約80mmだったが、この幅こそが「真正面で認識できる範囲」である。
*****************************************

6. 人間は真正面で何かを集中して見るとき、目と目の間以上のものは感覚として意識はできるが、この認識範囲を超える幅のものを同時に見ることはできにゃーのである。
これに黄金率を独断と偏見で組み合わせると、この幅80mmに対し1.618倍した約130mm(認識範囲外の左右上下25mm分)の範囲が意識すれば見れるがピントが合ってない部分(意識範囲)となる。
それ以外は見ているようで実は見てない感じるだけの部分(視界)。
この認識・意識範囲なら目線だけで対象物全部を見渡せる。
こう考えると、130mm四方のものは縦構図のものも、横構図のものも、視界の上下左右の幅に対して黄金率のものはぴったり収まることになる。
*****************************************
7. そして、最も近い「焦点」は目から目までの距離の約1.6倍の距離の所(約130mm)になる。
パースペクティブの関係から、一点を見るのではなく面を見る場合はその距離のまた倍となる。
*****************************************
8. また、下図のように、「見える物の大きさは、見る距離に反比例する。

*****************************************
9. 最初の図のように指の形を作って目の前に突き出して見てみるとわかると思うのだが、人差し指と小指両方が認識範囲いっぱいにちゃんと見える距離は、両目の幅の3.236倍(1.618×2)の所である。
この距離より近いと大きく見えて輪郭はぼやけるし、遠いと小さくみえて他の景色も認識する。
何故大きく見えたり小さく見えたりするかというと、見る距離によって視界の広さが決まり、対象物の空間における比率が変わるからである。
黄金率の関係から、「実際の大きさ×(1.618×2)=認識範囲に収まる距離・見える大きさ」となるから、
例えば、1メートル四方の物体Aを見るとき、3.236メートル離れると認識範囲(おいらの場合は80mm)に収まるから、「Aは80mm四方の大きさとして見える」となるがや。
だから、ワイドテレビなんかはほぼ黄金率になっとるで、高さの約3倍くらいの距離で見ると、横の意識範囲分にも画面幅が収まるで臨場感が出るがや。
4:3の従来のテレビでシネマサイズの映画観るときも、普段より近い所(映像の縦幅×3.236)で観ると臨場感が味わえる。映画館行ったときでも、スクリーンの大きさで良い席がどこか判断できるがね。
パソコンモニターにしても画面の3.236倍のところが、「頭を動かさなくてもちゃんと見える」距離だと言えるがや。
HPの1画面が700px×500pxだとすると、500px(高さ)×3.236=570.8mm(1618px)の距離が適正。
(横幅に認識範囲を合わせようと縦幅が合わなくなる)
(注:見える大きさはモニターの質や設定によって変わる{一般基準 1px=1pt=0.3528mm})
でも、おいらの場合、約200〜500mmの距離で見るので、認識範囲に収まる適正な大きさは、61.8mm〜154.5mm(175.17px〜437.93px)。これに意識範囲を加えると、99.99mm〜249.981mm(283.42px〜708.56px)となる。
要するに、全体の枠幅を700pxで取って、本文を438pxの幅以内で表現する画面は、モニターから500mm離れて見てもらえば「頭動かさにゃーてもええ構成」であるというこっちゃ。
*****************************************
10. でもちょっとまってちょ!みんな500mmのところで見ろ!とは言えんし、「視力」という問題があるから文字の大きさも考えんとかんがね。
視力検査に使う直径7.5mm、太さ・隙間1.5mmの「C」を5メートル離れたところで見えれば視力1.0になり、500mmでは視力0.1なるというランドルト環。
これを基に考えてみると、視力0.1の人は500mmの距離では文字の大きさが7.5mm角(21.26pt)でないと読めにゃーことになる。逆に、みんながメガネでもかけて視力1.0だとしても、500mmの距離で0.75mm角(2.126pt)のちっちゃな文字の文章を目を凝らして読み続けれんがね。
そこで中間とって「視力0.5の人が500mm離れて読める大きさ」と基準を設けると、
「3.75mm角(10.63pt)以上の文字」であれば「大抵の人が読める大きさ」になると思うんだがや。
これは視力1.0の人が500mm離れて「余裕」で読めることになる。0.1以下の人はメガネかけてちょ!
まとめると、50センチ離れて見て、700px×500pxの画面で幅438px以内の行幅に設定し、両幅125pxづつのマージン(空白)を作り、文字サイズは10pt以上にすると、黄金率に則った画面になるということだがや。
それにより安定して疲れず読みやすく、ハッキリバッキリスッキリギッシリ見えることになる。
*****************************************
ふうぅ!今回はこれまで!
次回はこの理屈を踏まえた「理想モデル」を考えてみるがや。
なんかわからんことあったらメール(または掲示板)してちょー!
じゃあ、頑張ってちょー!バイちゃ!written
by あやんぱ
Post Script :
遠ければ各パーツの詳細が見えず、近ければ全体が見えにゃー。
おいらは対象物を全体として記憶するよりパーツとして記憶するタイプだと思うんよ。だから、「牛の角は耳の前にあるか後ろにあるか?」と言われても「角」と「耳」は出てきても位置関係がよくわからにゃーがね!
街で見かけたべっぴんさんの全体を見ようとすると、身長が165センチあるとして、165×3.236=533.94で、5メートル以内に近寄れにゃーがね!そんなのイヤ!
だで、近寄って各パーツを記憶する作業になってまう…。
ほんでもって後で、「べっぴんさんの顔をデッサンしろ」といわれても、鼻・口・目・耳…と部分部分で思い出せても、各パーツの位置関係は全体として認識していにゃーので、目の前にちゃんとおってもらって、何回も見ながらじゃないとうまく描けにゃーがね。
べっぴんさんの体のライン見るには5メートル、パーツを見るなら13センチの距離で見よう!
あ、どちらにしても 0mmにはなれないのね…。 べっぴんさんとはお近づきにはなれても「おくっつき」にはなれにゃーのであった…。
|
| このページのTOPへ戻る |
次(空間の魔術師 その5)へ進む |
|
|