ラブ! Web開発

例えばサイドバーの幅を決めるとき、みなさんどうしてるでしょうか？
機能から？適当に？それもいいのですが、黄金比を使っても求められます。

黄金比とは？

具体例の前に軽く黄金比の説明を。

定義は、「a, bの長さで 2 つに分割するときに、a : b = b : (a + b) が成り立つように分割したときの比 a : b」です。

すいません、この図は適当なのであてにしないでください。

で、頭のいい人たちがごにょごにょすると、これは以下の式で表せます。

これはだいたいでいうと、1:1.168です。もっとだいたいでいうと5:8。

詳しくはここを：黄金比 – Wikipedia より

うん、小難しいですね。あ！数学嫌いな人、あきらめないでください。さっさと具体例示しますから。

具体例：サイドバー

要するにサイトのデザインをするとき、サイドバーの幅を求めるとすると、

( 横幅 – x ) : x = 1.168 : 1

で求まるわけです。

下図が横幅950pxとして計算したときの例。

このとき、950:363（緑＋青）がだいたい黄金比です。
これじゃあ太すぎるだろってことで更に分割して、224（緑）:139（青）もだいたい黄金比です。
幅950pxのサイトだったら、サイドバーの幅は224pxだときれいかもしれないですね。

縦はコンテンツ量によって変わるでしょうが、950:587も黄金比です。
そこから同じようにして求めたのが、86pxというヘッダ。

黄金比のサイトデザインへの応用

もっと応用すると、マージンやナビゲーションの幅にも使えます。
こちらで紹介されているようなので参考にして下さい。
黄金比をサイトのデザインに取り入れる簡単な３つの方法｜コリス

ちなみに上記ページで紹介されている、「5, 8, 13, 21, 34, 55, 89, 144, 233、を適応したスケール」の数列は実はフィボナッチ数列といいまして、こちらも黄金比に収束していくという大変面白い性質を持っている……のですが、そこまで書くともはや何のブログか本当に分からなくなってしまうので泣く泣く割愛します。

最初からバランスのいいデザインができる人は、感覚的にこの比率が感覚で分かるんでしょうね。
どうしてもなんだかバランスが悪い人は、あちこち黄金比を利用してみましょう。

やっとデザインの話が書けてうれしいですが、なんだか思った以上にO型っぽい解説になりました。

いやぁ、数学って美しいな……（理数オタク）
黄金比・フィボナッチ数列に関わらず、デザインってけっこう数字で計算できるものなんですよ。
だからそこ、私がPhotoshopを開いてエアーそろばんしながらガイドを引いてても笑わないように！