« au W44Sにこころ奪われた!↑(^^_)ルン♪ | メイン | 【日常写真観ー2】娘からの手紙 »

2006年11月26日

黄金比を使ったWEBデザインと効果的WEBデザイン

自著「WEBデザインレイアウト」が出版された当時は、まだ黄金比や黄金分割を語るサイトなんて言うのは、美術系のサイトとか数学系のサイトしかなかったのが、今や「Wikipedia」にも載るようになってしまった。やはり、「ダ・ヴィンチ・コード」のパワーだろうか。

美術的数学的観点から黄金比を解説されたサイト:
かたちのココロ:黄金比


幸いにして脚光を浴びることとなった「黄金比」に関して、このブログにも多数の方が「黄金比」を検索キーワードして訪れる率が多くなり、ボクとしても、すこし書籍の補足をここでしておきたい。



■黄金比を利用したレイアウト
いくつかのサイトでも、これに準ずる解説をしているところがある。要するに、1:1.618の比率で分割される直線上にアイテムを配置しなさいとか、エリアを分割しなさいというたぐいのものである。 これは、言葉で言うと非常にもっともでもありわかりやすいことであるのだが、

この記述自体には実践での利用価値は無いと言っても良い。

非常に、乱暴な言い方をしているが、実際のデザインの世界において、物事がそんな単純なことで解決できないのが実際だからだ。

  • 1:1.618なる数字を実際のレイアウトに落とす際に電卓片手にいちいちやってられない
  • デザインの要素自体は複雑に絡み合い、単純な配置で整理できないケースが多い
  • 感覚で処理しているところが多い

    という理由から、実際のレイアウトにおける黄金比は、デザイナーが持つ「感覚(感性というべきか)」に依存するため、デザイナー自体がカラダでその比率を習得していないとなかなか現実として用途にはなりにくい。

  • そんな背景をふまえて、本書では、黄金比をできるだけ素人に近い人でも感覚的にレイアウトに活かせるような方法を記述しているし、それの利用方法を解説している。詳しくは、本書に譲るとして、ざっくりとお話しすると、黄金比を覚えやすい比率に変換して、その比率をレイアウトの基準としてアイテムの配置に関しての基準線として利用するというものです。
    言葉で書くと一見難しいのですが、

    単純に黄金比の基準線にアイテムを配置するだけでも何通りものやり方があり、これが個人差や個性になると言うことなのです。

    美しいデザインを再現する場合、杓子定規にレイアウトするのではなく、このあたりの「ゆらぎ」というかアバウトさも効果的なデザイン表現になりうると思いますので、鍛錬は必要なのでしょう。

    ■黄金比を応用する「重心」という考え方
    さて、ここでこの「黄金比」をどう利用することが効果的なのかということが問題となってくるのではないでしょうか。その点を本書では「重心」を利用することにより解決しています。「重心」とは、ものには必ず重さがあり、複数のモノがある場合には「やじろべえ」のようにあるポイントで釣り合うというのはよくご存じの事と思いますが、この物理的な考え方をデザインレイアウトに取り入れた発想を指すのです。
    レイアウトをする上で、画面上に配置する各要素を集合体と考えていったときにその画面が持つ重さの中心(バランスの中心)が画面のどのアタリに位置するのかということを問題として、「黄金比」で分割される基準線に沿う位置にその中心をもってくる利用方法を解説してます。
    また、この重心はレイアウト上の重さの中心を指すだけでなく目線移動の中心にもなる点に着目し、もっとも押してもらいたいボタンなどをその重心に配置したデザインレイアウトの実例も紹介しています。
    これを世間一般に

    「目立たせる」


    ともいいます。
    ただ、結構この「目立たせる」という手法を勘違いしている人も多く見受けられます。どういう事かというと、周りのデザイン性とちがう異質なモノを配置することに寄る「ギャップ」を利用して「目立たせている」という事なのです。これは、黄金比の理論で言うと、釣り合ったバランス関係を崩すことでも再現できるのですが、だれでも美しいと思うレイアウトを黄金比とするなら、
    だれもが違和感を感じ得ないアンバランスなレイアウトや表現を「目立たせる」
    と読んでいるということなのです。
    デザインの本質から言うとこのやり方はナンセンスなのですが、実際のデザインの現場では容易にできる(素人的発想)ために横行しているのが現実です。
    しかし、デザイン的センスによる「目立たせ方」は、黄金比の理論上の上にあったとしてもそれは十分可能で、先ほどの重心にレイアウトすることも一つではありますし、配色などを利用して補色の関係にある要素を持ってくるのも一つの方法でしょう。この補色も、デザインの概念で言えば立派なバランス比の上に成り立った配色バランスですので、闇雲に目立たせたいからと金赤ばかりを利用するのとは訳が違います。
    配色に関しての考え方についても、本書でも実例を交えて解説しているので是非目を通していただけると幸いです。


    出版からすでに2年経ってますが、これからデザインを本格的にマスターしたい方やデザインの本質をもう一度整理したい方などには、まだまだおすすめの書籍だと自負しています。
    お近くの本屋さんで目にとまることがあったら是非立ち読みして中をご覧になってください。きっとあなたのデザインの一助になるかと思います。

    投稿者 continue_kozai : 2006年11月26日 03:10

    ビジネスブログ100選にほんブログ村 デザインブログ Webデザインへビジネスブログランキング

    GoogleAdsence

    コメント

    はじめまして、こんにちは!
    はじめてコメントいたします。
    プロフェッショナルなデザイン論、とても共感しました。
    「WEBデザインレイアウト」ぜひ参考に読んでみたいと思います。
    応援しています!

    投稿者 パーシー : 2006年11月26日 15:12

    >パーシーさん
    初めまして。コメントありがとうございます。
    ブログ村でパーシーさんのトラコミュを拝見しました。
    発想的にこんなにも似た考えをお持ちの方がいらっしゃることに共感しました。
    今後ともよろしくお願いします。

    投稿者 こうざい : 2006年11月26日 15:45

    トラックバック

    このエントリーのトラックバックURL:
    http://www.continue.jp/mt/mt-tb.cgi/52

     
    Powered by Movable Type 3.2-ja-2 | RSS2.0 | ATOM