ayanpaci_50.gif

あなたの視界も黄金比

前回「空白と余白」のあらまし

50センチ離れて見て、700ピクセル×500ピクセルの画面で、幅438ピクセル以内の行幅に設定し、両幅125ピクセルづつのマージン(空白)を作り、文字サイズは10pt以上にすると、黄金率に則った画面になり、安定して疲れず読みやすい。

さて、今回は前回に引き続き書いていくがや。

読みやすい文字数というのは、一呼吸(一目)で読める文字の数となるんだがや。
その一呼吸とは、両目の目から目までの幅の1.618までの間となるがや。
前回では見る距離と視力の関係から見やすい文字の大きさを提示したが、では、この両目の幅を基準にすると読みやすい文字数は何文字だろう?

目の認識範囲は約80mmとして、意識範囲は約129.44mmである。
ピクセルに換算すると、認識範囲は、80÷0.3528=226.757px、意識範囲は129.44÷0.3528=366.89pxとなる。

これを前回の結果「3.75mm角(10.63pt)」の文字の大きさでこの範囲を割ると、認識範囲226.757÷10.63=21.33文字、意識範囲366.89÷10.63=34.51文字となり、第8章の文字組みのところで書いた、人間が読みやすいと言われる文字数は、一行あたり12~24文字くらいまでらしいんよ、という理屈に近似する。

見る距離を計算すると、80×(1.618×2)=258.88mmとなるが、この距離以上に離れても認識・意識範囲は変わらにゃー。


これをまとめて前回の結果に掛け合わせてみると、26センチ離れて見て、227pxの認識範囲内の行幅に設定し、意識範囲である両幅70pxづつのマージン(空白)を作り、文字サイズは10ptの場合、文字数は約21文字で黄金比に則った画面になり、安定して疲れず読みやすい、となる。

離れてみたりする人のことを考えて、文字大を12ptにする場合、一行における文字数は約19文字が適正となる。ほんでもって行間も1.618かけてやると、とっても黄金率な文字組みになるがね!


11_11.gif

11_13.gif


長文を枠内に表現するときは「サイズ」「文字数」「行間」「文字間」を気にしてほしいんだなも。
それで、「ぎゅっと詰まって」しかも安定した画面にすることができたとしたら、今度は空白(マージン)によって「すっきり」見せることが重要になってくる。

参考に意識範囲まで文字を並べると、10ptで35文字くらいになるが、ここらへんが限度だと思っていてちょ。意識範囲ぎりぎりまで文字幅を取ると、上図の下の方のように狭苦しく見えるのがわかるだろう。

黄金比のようにここまでマージンをおおきくとらんとかん!というわけじゃなくて、せめて枠いっぱいに文字は並べにゃーで、上下左右に1~2文字分の空白は空けてほしいなも。
いくら黄金率だからといって幅いっぱいに文字を埋めてしまうと、「逃げ」のない画面になってまって、満員電車状態になってまうんよ。


11_05.gif

ほんでその満員電車状態が下図右。

11_06.gif


枠線や隣り合うエレメントとぴったりくっつく画面は読み辛いっちゅうこっちゃ。
武道で言えば「間合い」をとらなかんちゅうこっちゃ。
そうすれば四方八方どんなものが隣にきても、「個」となって、たとえ枠線がなくても独立した見せ方ができるなも。

画面を700pxの幅でつくったとき、認識範囲(227px)で割ると、約3分割、意識範囲(366.89)で割ると約2分割。
例えば、下記サイトは、知ってか知らずか画面幅を4分割し、一枠が180px前後になるようにして認識範囲に収まるようにしているなも。
こうしておくと、二枠(約360px)いっぺんに認識・意識することができるし、マージンがついているので、一枠を見ながら隣の枠へ目線が移動しやすいがや。


11_14.gif

11_15.gif

しかーし! どうせ「ホームページビルダーの限界」とか言われるかもしれにゃーから口には出さにゃーが、枠・エレメント間における「空白(マージン)」は全て均等に空けないとバラバラに見えるのである。点線で丸をつけてある「余白(デッドスペース)」もなんとかしなかんね。

じゃあ、頑張ってちょー!バイちゃ!written by あやんぱ


Post Script :
高校時代、満員電車で四方八方べっぴんさん達に囲まれて身動き取れなくなったことがある。
OLさん達の帰宅時間だったのかなも?
真正面で向かい合わせのべっぴんさんの顔見るの恥ずかしいのでと目を逸らすと、別べっぴんさんと目が合ってまう。うー困った、目のやり場がにゃー。しかも体をちょっとでもよじったら痴漢扱いされるかもしれん。
どこをみても変態の目つきにみられるかもしれん。
いくらべっぴんさんとはいえパラダイス気分にはなれないぞ!
呼吸が荒い。落ち着け!目を閉じて気を平常に保つんだ!
うっ…、汗が出てきたけど拭けない、あっ…、下腹部に圧迫感が…。
これじゃあ、蛇の生殺し&八方塞がりではないか!

ガタンガタン、プシュー!
<な~ごやえき~な~ごやえき~名鉄線・近鉄線・JR線は乗り換えです>

ふうぅ!やっとメ~駅(名古屋駅)に着いたがね!
ぶわ!どわ!ゴキ!バコ!(←降りる人たちにシッチャカメッチャカにされている)あいたたたた…、ふう、えりゃー目にあったなも。
ん?あ~!キップが汗まみれでクッシャクシャになってまっとる!
はぁ~、汗でシャツぐっしょりだがね、あ~!肩に口紅ばっちりついとる!
…というわけで嬉しいやら悲しいやらのひと時でした。
皆さんも中身がいくらよくても、「間合い」は大切にしてちょ!
べっぴんさんとデートするとき、肩寄せ合ってぴっとりくっつくのはいいが、歩き辛いがね



Posted by ayanpa | 構成編 |2005年09月17日 | Comments [0] | Trackbacks [0]



トラックバック

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

コメント




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