Webデザイン白銀比計算ツール
2008年06月07日 プログラミングTIPS
重要なお知らせ：このページのツールは、Flashの技術を用いて表示させていたため、現在は動かすことができません。申し訳ございませんが、ご了承下さい。
自然界でもっとも美しいのが「黄金比」なら、人工物や建造物で安定した美しさを持ち、日本人にも古来から浸透しているのが「白銀比」。
白銀比は、用紙サイズ（A3やA4など）や建物などに採用されている比「1:√2」のことで、近似値は1:1.4142、約5:7です。日本建築には古くから白銀比が用いられ、法隆寺の五重塔を上から見た投影平面図における辺（短辺と長辺）の関係も白銀比になっています。白銀比は別名「大和比」と呼ばれるくらい日本に浸透しています。「絞り値、シャッター速度、被写界深度の関係を覚えよう！」に登場した「絞り」も、ルート2が大きなポイントでした。
Webデザインに白銀比を取り入れようとした場合、全体の横幅と横幅の比からそれぞれの幅を求める必要があります。Flashサイトなどで縦幅も固定する場合は、縦方向の比も計算する必要があります。
そこで、どこか1ヶ所の幅さえ決めれば、残りの幅を全て自動で計算してくれるツールを作りました。その名も「Webデザイン白銀比計算ツール」。
自然界でもっとも美しいのが「黄金比」なら、人工物や建造物で安定した美しさを持ち、日本人にも古来から浸透しているのが「白銀比」。
白銀比は、用紙サイズ（A3やA4など）や建物などに採用されている比「1:√2」のことで、近似値は1:1.4142、約5:7です。日本建築には古くから白銀比が用いられ、法隆寺の五重塔を上から見た投影平面図における辺（短辺と長辺）の関係も白銀比になっています。白銀比は別名「大和比」と呼ばれるくらい日本に浸透しています。「絞り値、シャッター速度、被写界深度の関係を覚えよう！」に登場した「絞り」も、ルート2が大きなポイントでした。
Webデザインに白銀比を取り入れようとした場合、全体の横幅と横幅の比からそれぞれの幅を求める必要があります。Flashサイトなどで縦幅も固定する場合は、縦方向の比も計算する必要があります。
そこで、どこか1ヶ所の幅さえ決めれば、残りの幅を全て自動で計算してくれるツールを作りました。その名も「Webデザイン白銀比計算ツール」。
4ヶ所入力欄がありますが、どこか1ヶ所に幅を入力（半角数字で）してみてください。残りの幅が全て自動で計算されます。なお、計算は1.4142の近似値を採用しています。
このように白銀比を取り入れることで、美しいWebサイトができるかもしれませんね。
白銀比の良さ
昨日、「黄金比」は究極の美であると言われているため、「Webデザイン黄金比計算ツール」を作りました。けれど、どうもブログのような2カラムのWebサイトには使いにくいような感じがしました。美よりも使いやすさ重視というか、本文が大きなメインでサイドバーが補助的なものと考えると、黄金比ではサイドバーが広すぎるような気がしました。今使っているディスプレイが16:10のワイドではなく、4:3であることもひとつの原因かもしれません。このブログもそうですが、個人的には「黄金比」よりも「白銀比」の方が落ち着いて使いやすく感じます。A3用紙を半分に折るとA4、A4を半分に折るとA5と、半分に折っていっても永遠（折れるところまでですが）に白銀比が現れ続けるところも芸術的です。白銀比について詳しく知りたい人は、下記ページも参考にしてみてください。
2カラムのWebサイトを作ろうとして、サイドバーをどれくらいの幅にするか迷ったときは、このツールに全体の横幅を入力して、白銀比で幅を決めてみるのも良いかもしれませんね。
ローカル版、黄金比・白銀比計算ツール
「Webデザイン黄金比計算ツール」「Webデザイン白銀比計算ツール」ともに、ブラウザ上で簡単に数値を求めるために作ったものです。はてなブックマーク - Webデザイン黄金比計算ツールを見ていたら、このようなコメントもありました。2008年06月06日 silvetjude わがままを言わせてもらえるのなら、これローカルで欲しい。それくらい便利。わがままを聞いて、デスクトップ上で黄金比と白銀比を計算ツールも作りました。アプリを透明にさせて、他のウィンドウに重ねるだけで比を確認できるようになっています。デスクトップ版黄金比・白銀比計算ツールで紹介しました。下記サイトからダウンロードできます。