Re:Webデザインに黄金比を取り入れよう、そして白銀比を取り入れよう

hiloki — Fri, 06 Jun 2008 09:54:52 +0000

どうもおせっかい焼きのhilokiです。
ミキさんの「Webデザインに黄金比を取り入れよう」の記事が巷で話題のようです。（）
さすがミキさん、僕たちににできない事を平然とやってのける、そこにシビれるわけなんですが、そんな僕は同ブログでそれに便乗するという形で人間をやめてみます。

ということで元記事で触れらていない黄金比と、日本の美におけるもう1つの「比率」について書いてみたいと思います。

それは白銀比ッッッッッ！

黄金比が　縦：横＝1:1.618　であるのに対し、
白銀比は　縦：横＝1:1.414　という比率。

黄金比がパルテノン神殿やダヴィンチの絵、回転の力を生むためのモノの比率であるように、白銀比は「大和比」とも呼ばれ、法隆寺や四天王寺や、生け花の美のバランスにも反映されているといいます。

また「紙」でも、名刺は黄金比、A4用紙は白銀比で構成されています。
※A4サイズ用紙を半分に折るとA5サイズ、A5サイズを半分におるとA6サイズ、と半分にあった場合でも同比率を保つのが白銀比の特徴です。

余談ですがこれが日本で生まれた比率であるかは文献不明で調べようがなかったので、そのうち考えるのをやめました。

Webデザインにおける白銀比

さて実際にこれらの美の比率をWebデザインにあてはめると、という話なのですが元記事にあるように黄金比の縦横比率は、歴史的に美しさを持つ安定した比率でありがながらも、そのままだと使いにくいようなイメージもあるんじゃないでしょうか。

黄金比が単純にページのカラム比率に割り当てるとサイドバーにあたる方が若干広く感じるのに対して、白銀比の場合だと、

このように数字で見ても、特にSVGA（800×600）に合わせた760から780pxのページ幅のときには220から240pの幅というのは見慣れているのではないかと思います。

そういう意味では導入しやすさを考えると個人的に白銀比の方を推すねっ！って感じなんですが、黄金比よりも優れてるとかそういう話ではありません。

ミキさんもおっしゃるように、

実は過去に一度提案でこの黄金比をデザインロジックとして、提案したことがある。
意思決定するキーマンが複数いたり、デザインについて検討する人が多数プロジェクトメンバーにいる場合には有効な手段ではないかと思う。
だって、昔から多くの人たちが、これは安定していると思ってきているからだ。

というように、ただなんとなくな数字でレイアウトするよりは、プレゼンテーションできる根拠ある数字で示すのが良いのではないでしょうか。

電脳狂想曲 Webデザインの小技で提供されている計算ツールです。
こちらもシンプルで、少なくとも数字を割り出すだけなら十分すぎるツールだと思います。

じゃないんですけど、今後とも是非フィードを登録してエントリを追いかけてもらえればと思います。

kennsu — Wed, 04 Jun 2008 13:08:29 +0000

みなさん。初めまして。

水曜日担当のkennsuさんのいきなり代打で記事作成します。（苦笑

日本語が苦手なのでおかしい文面があったらご容赦ください。

Smashing magazineで黄金比に関する記事があったので簡単な翻訳とともにご紹介したいと思います。

僕は大学で専攻が建築だったので、なじみがあるのですが、ルネッサンスの時代から多くのアーティストや建築家によって安定したデザインの特性として「黄金比」を取り入れている。この黄金比をWebデザインに活用することで、劇的に変化させましょうという記事です。

黄金比とは「1：1.618」の比率で構成される割合のことで、一般的なWebページレイアウトに当て込むと以下のような数値になるそうです。

しかし実際には完全なグリッドデザインを用いない限り、読みにくかったりする。そこでサンプルとしてThe 404 Blogを紹介。余白部分に共通の31pxを適用し、以下のようなシンプルな数値に設定している。

このように、レイアウトサイズに根拠を持たせると、プレゼンテーション時に役に立つ場合もある。（すべてではないが）しかし、いつも感覚でレイアウトを決めているデザイナーにとっては、黄金比の感覚をもつことも必要かもしれない。そんな強制的に覚えたい人に役立つツールをいくつか紹介します。

シンプルに黄金比レートを算出できるツール。WinやMacで利用可能です。

実は過去に一度提案でこの黄金比をデザインロジックとして、提案したことがある。

意思決定するキーマンが複数いたり、デザインについて検討する人が多数プロジェクトメンバーにいる場合には有効な手段ではないかと思う。だって、昔から多くの人たちが、これは安定していると思ってきているからだ。

ひとまず「黄金比」についての解説を。（そのままだが汗）

３分割の法則についてはまた次の機会にでも取り上げたいと思います。

以上、適当な訳で非常に読みづらかったかと思いますが、急に作成しないといけなかったので勘弁してやってください。次の機会にも、ちょくちょくピンチヒッターで記事かきますので、次のタームでご期待してください。

主に海外で取り上げられるデザインに関するトピックスなどを紹介したり、情報デザインに関する内容を取り上げていきたいと思います。

ミキチョクシ（Chokky!Blog）