最近制作されたWebサイトの多くは950px前後の幅で制作される事が多いです。 以前は750px前後でした。
それは何故でしょう?

モニターサイズの平均値が上がった

前は15インチモニターが主流で1024 × 768だった解像度が19インチが主流になってきて1280 × 1024の解像度でパソコン見てる人が多くなったからって事ですね。
後、この前電気屋さんで聞いたところによると、各メーカーもワイドモニターに力を入れてるとの事。 んでなんで前は750pxで今は950pxかって言うと。

IEで左サイドにお気に入りを開きながらサイトを閲覧する人の事を考えてるんですね。 もちろんその左サイドお気に入りバーの横幅は使用者の任意で変える事が出来ますが、あくまでデフォルトの値って事で。 なので主流のモニターサイズが変わった事が制作にも影響してるんですね。

黄金比

よく見てみるとすごい名前です。
黄金比は人間が美しいと思ってしまう比率なんて言われています。

有名なところだとレオナルド・ダ・ヴィンチのモナリザも黄金比でつくられてたり、皆さんが日頃なじみ深い名刺やカード類などもこの黄金比でつくられてます。 その他にも美容整形の分野でも黄金比が使われてますし、建築などでも使われる事が多いようです。
前にTVで見ましたが、オードリー・ヘプバーンの顔の比率はほぼ完璧な黄金比らしいですw

さて豆知識はここらへんにしといて、Web制作と黄金比の関係をいってみましょう。

黄金比は「1:1.618」

Webサイトの横幅を決めた時に使ってみましょう。
例えば960pxの場合

でも実際にはグリッドデザインを用いないと、読みにくかったりします。
そこでサンプルとしてThe 404 Blogを紹介。
このサイトは各余白部分に31pxを適用してシンプルな値にしています。

元ネタ:http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

グリッド好きな人も多いと思いますが、一度試してみてはいかがでしょう?

白銀比

別名「大和比」!
日本建築なんかでよく使われてます。
代表としては法隆寺の五重塔です。日本の大工道具の指矩(さしがね)の裏面には白銀比の目盛がある等、日本と非常に深いかかわりのある比率だと言えます。
実はA4用紙も白銀比です。
A4用紙を半分に折るとA5更に半分に折るとA6・・・半分にしてもその比率を保つのが白銀比の特徴と言えます。

白銀比は「1:1.4141」。

さて黄金比と同じく横幅960pxと仮定してみましょう。

こんな感じです。
よく和物のサイトなんかでこの比率をあえて使ってるのとかあります。
黄金比でサイドが広いなんて思ったらこっちを使ってもいいかもしれませんね。

トラックバックURL

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

コメント

WEBデザイナー7ヶ月の者です。黄金比の話、とっても為になりまして、コメントしちゃいました!!
http://www.studycss.net/
とか見つつ、CSS奮闘勉強中です!
また、こちらのブログ覗きにきます~


コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)


画像の中に見える文字を入力してください。

pagetop