Webデザイン黄金比計算ツール
2008年06月06日 プログラミングTIPS
重要なお知らせ：このページのツールは、Flashの技術を用いて表示させていたため、現在は動かすことができません。申し訳ございませんが、ご了承下さい。
Webデザインに黄金比を取り入れよう - Re:Creator’s Kansaiに、黄金比をWebデザインに活用する海外の記事の翻訳が載っていました。
黄金比とは、最も美しいとされる比「1:(1+√5)/2」のことで、近似値は1:1.618、約5:8です。「その美しさをWebデザインでも」というのがエントリの趣旨です。
Webデザインの場合、横幅を固定し、縦幅は固定しないデザインが一般的です（ディスプレイサイズを考え、文字数の増加は横方向のスクロールなしに、縦方向へのスクロールで対応している）。Flashで作られたサイトなどは、縦幅も横幅も固定している場合があります。
Webデザインに黄金比を取り入れようとした場合、全体の横幅と横幅の比からそれぞれの幅を求める必要があります。Flashサイトなどで縦幅も固定する場合は、縦方向の比も計算する必要があります。
そこで、どこか1ヶ所の幅さえ決めれば、残りの幅を全て自動で計算してくれるツールを作りました。その名も「Webデザイン黄金比計算ツール」。
Webデザインに黄金比を取り入れよう - Re:Creator’s Kansaiに、黄金比をWebデザインに活用する海外の記事の翻訳が載っていました。
黄金比とは、最も美しいとされる比「1:(1+√5)/2」のことで、近似値は1:1.618、約5:8です。「その美しさをWebデザインでも」というのがエントリの趣旨です。
Webデザインの場合、横幅を固定し、縦幅は固定しないデザインが一般的です（ディスプレイサイズを考え、文字数の増加は横方向のスクロールなしに、縦方向へのスクロールで対応している）。Flashで作られたサイトなどは、縦幅も横幅も固定している場合があります。
Webデザインに黄金比を取り入れようとした場合、全体の横幅と横幅の比からそれぞれの幅を求める必要があります。Flashサイトなどで縦幅も固定する場合は、縦方向の比も計算する必要があります。
そこで、どこか1ヶ所の幅さえ決めれば、残りの幅を全て自動で計算してくれるツールを作りました。その名も「Webデザイン黄金比計算ツール」。
4ヶ所入力欄がありますが、どこか1ヶ所に幅を入力（半角数字で）してみてください。残りの幅が全て自動で計算されます。なお、計算は1.618の近似値を採用しています。
このように黄金比を取り入れることで、美しいWebサイトができるかもしれませんね。
追記（白銀比について）
白銀比とは、用紙サイズ（A3やA4など）や建物などに採用されている比「1:√2」のことで、近似値は1:1.414、約5:7です。日本建築には古くから白銀比が用いられ、法隆寺の五重塔を上から見た投影平面図における辺（短辺と長辺）の関係も白銀比になっています。白銀比は別名「大和比」と呼ばれるくらい日本に浸透しているため、もしかすると日本人には黄金比よりも白銀比の方がなじみやすいかもしれません。白銀比計算ツールは、こちらの記事でアップしました。
追記2：ローカル版、黄金比・白銀比計算ツール
「Webデザイン黄金比計算ツール」「Webデザイン白銀比計算ツール」ともに、ブラウザ上で簡単に数値を求めるために作ったものです。はてなブックマーク - Webデザイン黄金比計算ツールを見ていたら、このようなコメントもありました。2008年06月06日 silvetjude わがままを言わせてもらえるのなら、これローカルで欲しい。それくらい便利。わがままを聞いて、デスクトップ上で黄金比と白銀比を計算ツールも作りました。アプリを透明にさせて、他のウィンドウに重ねるだけで比を確認できるようになっています。デスクトップ版黄金比・白銀比計算ツールで紹介しました。下記サイトからダウンロードできます。