黄金比をサイトのデザインに取り入れる簡単な３つの方法
黄金比をサイトのデザインに取り入れる簡単な３つの方法を紹介します。
黄金比とは、「1:1.618」からなる比率で、最も美しい比率と呼ばれています。
赤線は、黄金螺旋。
その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。
黄金比を矩形に使用する
サイトで使用する画像などの矩形に黄金比を適応します。
サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。
黄金比を横長の矩形に使用
黄金比を縦長の矩形に使用
黄金比をマージンに使用する
レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。
その際、１つの値を基準とし、それ以外のマージンに対して黄金比を用いて算出する例を紹介します。
黄金比を元にマージンのパターンを算出：例１
5, 8, 13, 21, 34, 55, 89, 144, 233、を適応したスケール
黄金比を元にマージンのパターンを算出：例２
6, 10, 16, 26, 42, 68, 110, 178, 288 を適応したスケール
グリッドシステムとは、下記のエントリーを参照ください。
グリッドシステム -サイトへの有効活用方法
黄金比をパーツに使用する
サイトに使用するパーツのデザインに黄金比を導入します。
黄金比を見出しの画像に使用
左横に罫線を入れた見出しの例です。
罫線を「1」マージンを「1.6」として黄金比を導入しています。
２番目のものは罫線が太いので、点線にしています。
黄金比をナビゲーションの画像に使用
よくあるナビゲーション画像をサンプルにしています。
文字の高さに対して、「1」「1.6」の黄金比のマージンをもたせ、画像を作成しています。
２番目のものは、さらにグラデーションの開始地点を黄金比で算出しています。
Post on:2007年3月29日
Comments
adamrocker::blog
on 2007年3月30日
黄金比をサイトのデザインに取り入れる時に覚えておく１つのこと…
黄金比とはフィボナッチ数列の隣り合う二項の比の収束値です。
ということで
黄金比をサイトのデザインに取り入れる簡単な３つの方法
で紹介されている、たくさんある数をメモす (more…)
つきあたりを右に
on 2007年3月30日
[書評]黄金比の謎（と黄金比についてのメモ）…
黄金比をサイトのデザインに取り入れる簡単な３つの方法 | コリス はてなブックマーク – 黄金比をサイトのデザインに取り入れる簡単な３つの方法 | コリス このブクマ (more…)
ちく
on 2007年3月30日
オウム貝のやつとか一部は俗説なので気を付けてください．
http://www.weblio.jp/content/黄金比
links for 2007-03-31 « eight and half
on 2007年3月31日
[...] 黄金比をサイトのデザインに取り入れる簡単な３つの方法 | コリス (tags: Design 黄金比) [...]
コリス
on 2007年3月31日
ちくさん
情報、ありがとうございます。
オウムガイの記載は、削除しました。
「翻訳会社、やってます！」奮闘記 Part2
on 2007年4月2日
改めて、黄金比とデザインのお勉強をしてみようかと。…
coliss さんの『黄金比をサイトのデザインに取り入れる簡単な３つの方法』を読んで、ちょっと感動でした。黄金比やフィボナッチ数列といった数字の配列法則は不思議 (more…)
Web coder's Dictionary
on 2007年6月15日
謎が解けた！…
さて、コーダーがメインの仕事なので、デザイナーさんが作ったカンプデザインを元にHTML+CSSを作成する作業を日々こなしていますが、ちょっと不思議に思うことがあります。 (more…)
can pass note
on 2008年7月28日
黄金比を使ったパーツ・マージン作成
coliss | 黄金比をサイトのデザインに取り入れる簡単な３つの方法
デザインの分野でよく語られる「黄金比」。
タテ×ヨコ、もしくはヨコ×タテが「1:1.6」の比率になると、
それが人間の…
Webメモ - Weby【ホームページ作成-HTML+CSS+Perl+PHP+AJAX-】
on 2008年11月12日
黄金比
サイトを作る時、一応意識する分割比率、黄金比と白銀比。
いつも比率を忘れるのでメモ。
黄金比「1:1618」
白銀比「1:1414」
こちらのサイ…
最も美しいサイドバーの幅は？（黄金比のデザインへの応用） ≪ 未分類 ≪ MOMA Labs
on 2009年10月28日
[...] ちなみに上記ページで紹介されている、「5, 8, 13, 21, 34, 55, 89, 144, 233、を適応したスケール」の数列は実はフィボナッチ数列といいまして、こちらも黄金比に収束していくという大変面白 [...]
今年も高い山越えれますように。 | ＰＯＰＢＩＮＧＯＷＥＢ
on 2010年1月4日
[...] http://coliss.com/articles/build-websites/operation/design/206.html コリス様 [...]
ウェブデザインに黄金比やフィボナッチ数列など数学的な要素を取り入れる方法 - TSC
on 2010年2月28日
[...] てどうぞ。 黄金比をサイトのデザインに取り入れる簡単な３つの方法 [...]
黄金比&白銀比トリミングアクション | Dearps ～Adobe Photoshopに関するTipsや便利な裏技を紹介するサイトです～
on 2010年5月16日
[...] い綺麗なデザインになるといわれています。 コリスさんのサイト黄金比をサイトのデザインに取り入れる簡単な３つの方法でも紹介されているようにWEBデザインにおいても多く取り入れ [...]
黄金比を使ったレイアウト作成方法 | LonelyComet
on 2010年10月7日
[...] コリスさんの黄金比をサイトのデザインに取り入れる簡単な３つの方法で マージンのとり方などの詳細説明がありますので、合わせて読んでみてください。 [...]
黄金比を使って作ってみたら、ギャラクティカゴールデンレイティオマグナムが炸裂した | Satoc Blog
on 2011年5月10日
[...] コリス：黄金比をサイトのデザインに取り入れる簡単な３つの方法 [...]