2006年11月26日
黄金比を使ったWEBデザインと効果的WEBデザイン
自著「WEBデザインレイアウト
美術的数学的観点から黄金比を解説されたサイト：
かたちのココロ：黄金比
幸いにして脚光を浴びることとなった「黄金比」に関して、このブログにも多数の方が「黄金比」を検索キーワードして訪れる率が多くなり、ボクとしても、すこし書籍の補足をここでしておきたい。
| ■黄金比を利用したレイアウト いくつかのサイトでも、これに準ずる解説をしているところがある。要するに、1：1.618の比率で分割される直線上にアイテムを配置しなさいとか、エリアを分割しなさいというたぐいのものである。 これは、言葉で言うと非常にもっともでもありわかりやすいことであるのだが、 この記述自体には実践での利用価値は無いと言っても良い。 非常に、乱暴な言い方をしているが、実際のデザインの世界において、物事がそんな単純なことで解決できないのが実際だからだ。 という理由から、実際のレイアウトにおける黄金比は、デザイナーが持つ「感覚（感性というべきか）」に依存するため、デザイナー自体がカラダでその比率を習得していないとなかなか現実として用途にはなりにくい。 |
そんな背景をふまえて、本書では、黄金比をできるだけ素人に近い人でも感覚的にレイアウトに活かせるような方法を記述しているし、それの利用方法を解説している。詳しくは、本書に譲るとして、ざっくりとお話しすると、黄金比を覚えやすい比率に変換して、その比率をレイアウトの基準としてアイテムの配置に関しての基準線として利用するというものです。
言葉で書くと一見難しいのですが、
単純に黄金比の基準線にアイテムを配置するだけでも何通りものやり方があり、これが個人差や個性になると言うことなのです。
美しいデザインを再現する場合、杓子定規にレイアウトするのではなく、このあたりの「ゆらぎ」というかアバウトさも効果的なデザイン表現になりうると思いますので、鍛錬は必要なのでしょう。
■黄金比を応用する「重心」という考え方
さて、ここでこの「黄金比」をどう利用することが効果的なのかということが問題となってくるのではないでしょうか。その点を本書では「重心」を利用することにより解決しています。「重心」とは、ものには必ず重さがあり、複数のモノがある場合には「やじろべえ」のようにあるポイントで釣り合うというのはよくご存じの事と思いますが、この物理的な考え方をデザインレイアウトに取り入れた発想を指すのです。
レイアウトをする上で、画面上に配置する各要素を集合体と考えていったときにその画面が持つ重さの中心（バランスの中心）が画面のどのアタリに位置するのかということを問題として、「黄金比」で分割される基準線に沿う位置にその中心をもってくる利用方法を解説してます。
また、この重心はレイアウト上の重さの中心を指すだけでなく目線移動の中心にもなる点に着目し、もっとも押してもらいたいボタンなどをその重心に配置したデザインレイアウトの実例も紹介しています。
これを世間一般に
「目立たせる」
ともいいます。
ただ、結構この「目立たせる」という手法を勘違いしている人も多く見受けられます。どういう事かというと、周りのデザイン性とちがう異質なモノを配置することに寄る「ギャップ」を利用して「目立たせている」という事なのです。これは、黄金比の理論で言うと、釣り合ったバランス関係を崩すことでも再現できるのですが、だれでも美しいと思うレイアウトを黄金比とするなら、
だれもが違和感を感じ得ないアンバランスなレイアウトや表現を「目立たせる」
と読んでいるということなのです。
デザインの本質から言うとこのやり方はナンセンスなのですが、実際のデザインの現場では容易にできる（素人的発想）ために横行しているのが現実です。
しかし、デザイン的センスによる「目立たせ方」は、黄金比の理論上の上にあったとしてもそれは十分可能で、先ほどの重心にレイアウトすることも一つではありますし、配色などを利用して補色の関係にある要素を持ってくるのも一つの方法でしょう。この補色も、デザインの概念で言えば立派なバランス比の上に成り立った配色バランスですので、闇雲に目立たせたいからと金赤ばかりを利用するのとは訳が違います。
配色に関しての考え方についても、本書でも実例を交えて解説しているので是非目を通していただけると幸いです。
出版からすでに2年経ってますが、これからデザインを本格的にマスターしたい方やデザインの本質をもう一度整理したい方などには、まだまだおすすめの書籍だと自負しています。
お近くの本屋さんで目にとまることがあったら是非立ち読みして中をご覧になってください。きっとあなたのデザインの一助になるかと思います。
投稿者 continue_kozai : 03:10 【コメント (2)】 【トラックバック (0)】
2006年05月30日
ダ・ヴィンチ コードと黄金比とWEBデザインレイアウト
今はやりの「ダ・ヴィンチ コード」をココにつなげてきましたか〜って感じだけど。まあ、訊いてよ。
ダ・ヴィンチコードの中で、暗号解読の糸口になっていたのが、「フィボナッチ数列」でした。そして、ここから話は「黄金比」へと発展して世界一美しい数値「1.618」へと話が向かう。
この一連の流れを、本書WEBデザインレイアウトでも『うつくしいデザインをつくる魔法のレイアウトバランス』として取り上げ、デザインやレイアウトを美しく仕上げるためのコツとして紹介しました。特に、「フィボナッチ数列」から導き出される比率をレイアウトバランスに置き換え、厳密な黄金比でなくても、レイアウトとしての完成度を増す理由であることを解説しています。
この魔法のレイアウトバランスは、最初は意識しないとなかなか実行できないものではありますが、なれてくると、黄金比のバランスを目が覚えて、自然にそのバランスを図れるようになるでしょう。そうなると、いちいち採寸しなくても自然な感覚で黄金比のバランスを持ったデザインレイアウトを組むことができます。
また、だれもが美しいと感じる完璧なデザインバランスを微妙に崩すことで生まれる「違和感」を如何にして自分らしさとして確立するかが、その人らしさなんでしょうね。
デザインを志しながらも、挫折してうまくいかないとお嘆きの貴兄に、騙されたと思って試してみてください。
投稿者 continue_kozai : 03:53 【トラックバック (0)】
2006年05月15日
タイプミス（表示間違い）のお知らせ
■第２版で修正されましたが、初版では表記が間違っています。
20ページの下から6行目
誤：アイデアラッシュ
正：アイデアフラッシュ
■以下の部分は、第２版後に発見されたため表記がまだ間違っています。
2ページの図1-1 グラフィックデザイナーとWEBデザイナーに必要な知識の違い
誤：サーバなど知識
正：サーバなどの知識
■ちょっとかなり恥ずかしい初歩的タイプミスですが (--;)
154ページ目著者プロフィール4行目
誤：若干25歳で
正：弱冠25歳で
投稿者 continue_kozai : 05:10
ただいま絶賛発売中です！！
2004年2月2日にソフトバンククリエイティブ社より発売された
ウェブクリエーターズバイブルシリーズ WEBデザインレイアウト
ただいま好評発売中です。
デザイン上達への早道は、決まったデザインパターンをまる覚えするのではなく「そのパターンの成り立ち」を理解すること。デザイナーとして忘れがちなポイントやよりクウォリティの高いデザインをするために必要な基礎知識をどう理解するかのヒントをより多く掲載!!WEBデザイナーを目指す人なら必読です。
お求めまたは詳しくはアマゾン・ドット・コムにて
WEBデザインレイアウト
投稿者 continue_kozai : 04:35