ayanpaci_50.gif

空間の魔術師(4) ピクセル

ピクセル(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くらいまでがええだろうと思うんだがや。

102.gif

そんで画面を縦橫に分割していく作業になるのだが、キッチリ黄金率で割っていくと、幅700pxにおける黄金2分割は、267px:433px、高さ500pxに対しては、191px:309pxだがや。すると、画面が4つに割れるから、そこにエレメント(要素)を配置していくだけで済む。

もちろん、これに合わせて作らんとあかん!というものじゃにゃー。
じゃあ、なんでこんな理屈をこねるのかというと、この比率の関係を知っていることで作成においての一つの指針となるからなんだがや。

まったく画面のことを気にしない人でありがちなのが、全体のバランスを考えず、文字や写真の幅に枠を合わせようとするので、まとまりのにゃー画面になってまうことだがや。画面全体における隣り合うエレメントの大きさの比率は気にしたほうがええなも。


続いて、次ページ「手のひらの黄金率」へどうぞ~。




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



トラックバック

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

コメント

はじめまして
「学生でも出来るお小遣い稼ぎ」の運営者ホットクッキーです
今回はサイトデザインについて
ぜひアヤンパさんに意見してもらいたく
思い書かせていただきました
まだ出来てはいないのですが、
アヤンパさんのサイトに書かれていたことなどを
参考に作らしていただきました
http://hottokukki.fc2web.com/index4.htm
どうでしょうか?

投稿者 hottokukki : 2005年12月09日 22:57

はじめましてホットクッキーさん。
おいらのサイトを参考にしてもらって本当にありがとうだなも。
なぬ!おいらの意見とな!…。
おいらの独断の意見で言わせてもらうと、
ホットクッキーさんはとても吸収力があって素直な人なんだなあと思ったなも。マージンや枠の扱い方、文字の並べ方や配列など、なるほど、おいらの言っていることを忠実に再現するとこんな感じになるのかあとおいら自身が勉強になるような形に仕上がっているなも。
ただ、出来すぎているなも。それだけに逃げがない。
そのために、各コンテンツの文の右側の空白が余白になってまっとるなも。
観やすさや作りこみ自体に何の遜色もにゃー。
しかし、”遊び”やそこに何を訴えていくかという”コンセプト”それと見せたい順に目立ち度を変えるという”目線の流れ”というものがにゃーような気がするなも。
ホットクッキーさんの”個性”というものが抑えつけられているような気がするなも。
だから、ここまで作りこめるのならば、あとはその”遊び”をどう入れていくか?を考えていけばええと思うなも。
わざとずらしてみたり大きさの差をつけてみたりZ型に目線が流れるようにしたり…、シンメトリー(左右対称)でとても均衡のとれた画面だけどそこに”ずれ”の美学があるともっと面白いなも。
完璧な美人よりも、ちょっとずれのある女の人の方がぐっと魅力的に見えるようなもんで、”ずれ・逃げ”のあるものは均衡を崩しつつよりはっきりとアピールするものでもあるんで、是非この画面を活かすような崩し方を考えてみてちょ!
勝手なこと言ってもし不機嫌になってまったら申し訳にゃーなも。


投稿者 あやんぱ : 2005年12月09日 23:56

わざわざ答えていただいてありがとうございました
うぬ~難しいですね(特に”目線の流れ”が)
二日間、四六時中考えた末・・・・・
何も浮かびませんでした。
ゆっくり考えるとします
あと二つ質問してよろしいでしょうか?
「遊び」とはわざとずらしたりして”目線の流れ”にあわせた
形にすることなのでしょうか
「逃げがない」とは「空白と余白の3」でも書かれていますが
どういう意味なのですか?
こんなぼんくらサイトをかまっていただいて
ありがとうございます

投稿者 hottokukki : 2005年12月11日 21:29

こんばんは、ホットクッキーさん。
逃げとは、もうこれ以上変更にゃーとするならば必要にゃーものなんだが、コンテンツの追加や削除など、なんらかの変更をした場合にも対応できるようにということだなも。
サイトは常に変動のあるものなんで、その逃げがにゃーとたった1つの変更で画面が崩れてしまうんよ。
もし、今のホットクッキーさんの画面にバナーをポンと置いたら縦横の今の綺麗な状態を保てるか?ということだなも。
それを最初からわざとずらして枠を組むなりすることによって、縦横の枠のずれが気にならずにそのまま変更ができると思うんだなも。
シンメトリーの格調はあくまでも両側の重さが一緒でにゃーといけにゃーので、文章の量や色、形までも揃えなければならないという制約ができてまっていわゆる”逃げ”ができんのだがや。
う~ん、なんかうみゃーこと言えたか自信ないなも…。

投稿者 あやんぱ : 2005年12月12日 00:06

うむ~
こんな感じでしょうか
http://hottokukki.fc2web.com/index6.html

投稿者 hottokukki : 2005年12月16日 17:40

う~ん、今現在の投稿者をクリックして見えるサイトと、書いてあるURLの方とどっちが好きかと言うと、投稿者の方のURLの方だなも。
シンプルでとても観やすいサイトを目指している人に”遊び”とわかりにくい説明をしてまってごめんちゃい!
ちょっと参考にしてほしいのが下記URL

http://buttya.com/

これとどここが違うんだよ!と言われるかもしれにゃーが、コンテンツの文章の長さを観てほしいなも。
ホットクッキーさんのタイトル文の長さだと、どうしても右側にできる余白が気になってまうんよ。
これだと、3列配置で組んでも十分観やすい画面ができるとおもうんだがや。

http://hottokukki.fc2web.com/index6.html
について言わせてもらうと、レイアウト自体に問題はにゃーけど、色に頼って作っているような気がするなも。
遊び→派手と解釈してまったのかもしれにゃーけど、一度白バックで色なしで作ってみてちょ!枠線も色も罫線もにゃー状態できちんと見せることができたら、どんな枠線も罫線も色も映えることになるがや。
遊びとは”仕掛け”だなも。
目線が流れるであろう場所に、アイコンや線や違った色や枠をわざとずれさすなど、目線に”ひっかかり”をつくる作業なんだなも。
逆にホットクッキーさんの良いところを崩してまってもうしわけにゃー!

投稿者 あやんぱ : 2005年12月18日 08:38

あと、

http://syarousi-ol.com/

シェラさんのサイトなんかも参考になるかもしれにゃー。
3段組で枠付と枠なしの配置でずいぶん見せ方が変わることがわかると思うなも。
静と動のような関係で、
囲む関係と、囲まない関係…説明が難しいがそれで目線の流れがぐっと違ってくるなも。
ホットクッキーさんの場合、全部枠付で動きがなかったもんで、キチッとまとめられて観やすいのにおしい!と思ったんだなも。

投稿者 あやんぱ : 2005年12月18日 08:45

3列枠無しにしてみました↓
http://hottokukki.fc2web.com/index6.html

投稿者 hottokukki : 2005年12月18日 18:47

すごい!
簡単に組むことができるんだなも~。
そこまでできるんなら、あとは作りこみだけでええんでないかい?
正直、この段階でええか悪いか判断できせんけど、コンテンツや画像など配置してみてホットクッキーさんの納得のできるまで作りこんでみてちょ!
おいらは方向性としてはええと思う。

投稿者 あやんぱ : 2005年12月18日 23:47

はじめましてあやんぱさん、シゲチです!

黄金率の説明とても参考になりました、私も禁煙のサイトを

作成しようと意気込んではいるのですがとても数学が苦手な

もので黄金率をどうピクセルに当てはめていいか解りません。

横幅が500ピクセルなら黄金率では高さはナンピクセルなんだ・・・?

てっ感じなんです何か公式があるのでしょう?

どうか御教授願えないでしょうか?御願いします。(-人-;)

投稿者 シゲチ : 2006年06月06日 00:59

>てっ感じなんです、何か公式があるのでしょうか?

すいません・・・あせって文章確認せずに投稿してしまいました。

投稿者 シゲチ : 2006年06月06日 01:03

最近ダ・ヴィンチ・コードのおかげでおいらの黄金比のコラムが賑わっているなも~~。
公式というか、1.618倍すればええんだなも。
フィボナッチ数列というもので、自然界にあるものはこの数列に支配されとるんだなも。
隣り合う数字の和が次の数字になり、それを割ると1.618・・・となるんだなも。

1 2 3 5 8 13 21 ・・・

詳しくはダ・ヴィンチ・コードを読んでみてちょ!

投稿者 あやんぱ : 2006年06月06日 22:03

あ、今更こんなことを言うのもなんだが、
あんまり黄金比にこだわってしまうと、よけいに作るのがややこしくなってまうで気をつけてちょ!
大体でええんよ。
500×1.618が黄金比だなも。

投稿者 あやんぱ : 2006年06月06日 22:07

あやんぱさんありがとうございました!

そうですね黄金率にとらわれてはよけいにヤヤコシイかもしれない・・

簡単な質問に答えてくれてありがとうございました!

これからも参考にさせてもらいます。それでは!

投稿者 シゲチ : 2006年06月07日 10:08

よろしくだなも!
これからもこんなおいらでよければ!

投稿者 あやんぱ : 2006年06月29日 21:19




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