Webデザインに黄金比を取り入れよう

みなさん。初めまして。

ペタビット株式会社ナフタリンのミキチョクシです。

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

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

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

(via http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

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

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

黄金比

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

404blogデザイン

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

Phiculator

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

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

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

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

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

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

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

ミキチョクシ(Chokky!Blog

コメント / トラックバック 7 件

この記事へのコメント・トラックバックを追いかけることができます。(RSS 2.0

コメントをどうぞ

トラックバック URL

トラックバック

  1. […] 簡単な翻訳とともにご紹介したいと思います。 (via http://www.smashingmagazine.com/2008/0… original article « iPhoneは(あまり)売れないかもしれないという話 – Thirのはてな日記 クローズ […]

  2. Webデザイン黄金比計算ツール

    Webデザインに黄金比を取り入れよう – Re:Creator’s Kansaiに、黄金比をWebデザインに活用する海外の記事の翻訳が載っていました。

    黄金比とは、最も美しいとされる比「1:(1+√5)/2」のこと…

  3. […] Webデザインに黄金比を取り入れよう – Re:Creator’s Kansai (tags: webdesign) […]

  4. […] どうもおせっかい焼きのhilokiです。 ミキさんの「Webデザインに黄金比を取り入れよう」の記事が巷で話題のようです。() さすがミキさん、僕たちににできない事を平然とやってのけ […]

  5. […] 簡単な翻訳とともにご紹介したいと思います。 (via http://www.smashingmagazine.com/2008/0… original article « ブラック会社に勤めてるんだが、もう俺は限界かもしれない まとめ 書籍化:ハ […]

  6. 鮟?≡豈肉1.618 縺ョ鄒弱@縺輔r繧オ繧、繝域ァ狗ッ峨↓蜿悶j蜈・繧後※繧?¥縲ゅ◎縺ョ縺溘a縺ョ繝??繝ォ縺ョ閠?ッ ?・?・?・ 縲晋eb繝?じ繧、繝ウ縲

    縲?鮟?≡豈斐?
    縲?縺泌ュ倡衍縺ァ縺励g縺??
    縲?霑台シシ蛟、縺ッ 1:1.618縲
    縲??医b縺?ー代@隧ウ縺励¥譖ク縺上→縲 1:1.61803399?

    縲?荳悶?荳ュ縺ォ縺ッ縺薙?豈皮紫縺ァ縲∫セ弱@縺乗ァ…

  7. […] ありますが、黄金比を使うとあっさり解決して収まりが良くなる事もあります。 ちょっと古い記事ですが、こちら、Re:Creator’s Kansaiのブログより、 Webデザインに黄金比を取り入れよう […]