空間の魔術師
その５ 空白と余白U |
屁持論：
あなたの視界も黄金率
前回のあらまし
| 50センチ離れて見て、700ピクセル×500ピクセルの画面で、幅438ピクセル以内の行幅に設定し、両幅125ピクセルづつのマージン（空白）を作り、文字サイズは10pｔ以上にすると、黄金率に則った画面になり、安定して疲れず読みやすい。 |
さて今回は前回に引き続き書いていくがや。
読みやすい文字数というのは、一呼吸（一目）で読める文字の数となるんだがや。その一呼吸とは、両目の目から目までの幅の1.618までの間となるがや。
前回では見る距離と視力の関係から見やすい文字の大きさを提示したが、では、この両目の幅を基準にすると読みやすい文字数は何文字だろう？
目の認識範囲は約80ｍｍとして、意識範囲は約129.44ｍｍである。
ピクセルに換算すると、認識範囲は、80÷0.3528＝226.757ｐｘ、意識範囲は129.44÷0.3528＝366.89ｐｘとなる。
これを前回の結果「3.75ｍｍ角（10.63ｐｔ）」の文字の大きさでこの範囲を割ると、認識範囲226.757÷10.63＝21.33文字、意識範囲366.89÷10.63＝34.51文字となり、第8章の文字組みのところで書いた、人間が読みやすいと言われる文字数は、一行あたり１２〜２４文字くらいまでらしいんよ、という理屈に近似する。
見る距離を計算すると、80×（1.618×2）＝258.88ｍｍとなるが、この距離以上に離れても認識・意識範囲は変わらにゃー。
これをまとめて前回の結果に掛け合わせてみると、26センチ離れて見て、227ｐｘの認識範囲内の行幅に設定し、意識範囲である両幅70ｐｘづつのマージン（空白）を作り、文字サイズは10pｔの場合、文字数は約21文字で黄金率に則った画面になり、安定して疲れず読みやすい、となる。
離れてみたりする人のことを考えて文字大を12ｐｔにする場合、一行における文字数は約19文字が適正となる。ほんでもって行間も1.618かけてやると、とっても黄金率な文字組みになるがね！
長文を枠内に表現するときは「サイズ」「文字数」「行間」「文字間」を気にしてほしいんだなも。
それで、「ぎゅっと詰まって」しかも安定した画面にすることができたとしたら、今度は空白（マージン）によって「すっきり」見せることが重要になってくる。
参考に意識範囲まで文字を並べると、10ｐｔで35文字くらいになるが、ここらへんが限度だと思っていてちょ。
意識範囲ぎりぎりまで文字幅を取ると、上図の下の方のように狭苦しく見えるのがわかるだろう。
黄金率のようにここまでマージンをおおきくとらんとかん！というわけじゃなくて、せめて枠いっぱいに文字は並べにゃーで、上下左右に1〜2文字分の空白は空けてほしいなも。
いくら黄金率だからといって幅いっぱいに文字を埋めてしまうと、「逃げ」のない画面になってまって、満員電車状態になってまうんよ。
ほんでその満員電車状態が下図右。
枠線や隣り合うエレメントとぴったりくっつく画面は読み辛いっちゅうこっちゃ。武道で言えば「間合い」をとらなかんちゅうこっちゃ。
そうすれば四方八方どんなものが隣にきても、「個」となって、たとえ枠線がなくても独立した見せ方ができるなも。
画面を700ｐｘの幅でつくったとき、認識範囲（227ｐｘ）で割ると、約3分割、意識範囲（366.89）で割ると約2分割。
ayanは知ってか知らずか画面幅を4分割し、一枠が180ｐｘ前後になるようにして認識範囲に収まるようにしているなも。
こうしておくと、二枠（約360ｐｘ）いっぺんに認識・意識することができるし、マージンがついているので、一枠を見ながら隣の枠へ目線が移動しやすいがや。
しかーし！ どうせ「ホームページビルダーの限界」とか言われるかもしれにゃーから口には出さにゃーが、枠・エレメント間における「空白（マージン）」は全て均等に空けないとバラバラに見えるのである。
この「余白（デッドスペース）」もなんとかしなかんね。
なんかわからんことあったらメール（または掲示板）してちょー！
じゃあ、頑張ってちょー！バイちゃ！written
ｂｙ あやんぱ
Post Script :
高校時代、満員電車で四方八方べっぴんさん達に囲まれて身動き取れなくなったことがある。ＯＬさん達の帰宅時間だったのかなも？
真正面で向かい合わせのべっぴんさんの顔見るの恥ずかしいのでと目を逸らすと、別べっぴんさんと目が合ってまう。うー困った、目のやり場がにゃー。しかも体をちょっとでもよじったら痴漢扱いされるかもしれん。
どこをみても変態の目つきにみられるかもしれん。
いくらべっぴんさんとはいえパラダイス気分にはなれないぞ！
呼吸が荒い。落ち着け！目を閉じて気を平常に保つんだ！
うっ…、汗が出てきたけど拭けない、あっ…、下腹部に圧迫感が…。
これじゃあ、蛇の生殺し＆八方塞がりではないか！
ガタンガタン、プシュー！
＜な〜ごやえき〜な〜ごやえき〜名鉄線・近鉄線・ＪＲ線は乗り換えです＞
ふうぅ！やっとメ〜駅（名古屋駅）に着いたがね！
ぶわ！どわ！ゴキ！バコ！（←降りる人たちにシッチャカメッチャカにされている）あいたたたた…、ふう、えりゃー目にあったなも。
ん？あ〜！キップが汗まみれでクッシャクシャになってまっとる！
はぁ〜、汗でシャツぐっしょりだがね、あ〜！肩に口紅ばっちりついとる！
…というわけで嬉しいやら悲しいやらのひと時でした。
皆さんも中身がいくらよくても、「間合い」は大切にしてちょ！
べっぴんさんとデートするとき、肩寄せ合ってぴっとりくっつくのはいいが、歩き辛いがね！
|
| このページのTOPへ戻る |
次（でら偏見 その５）へ進む |
|
|
