「Balance in Design 美しく見せるデザインの原則」に触発され、「黄金比によるWebレイアウト」を実践してみました。黄金比とは「最も美しい比」と呼ばれている比率で、具体的には5:8（1:1.618…)の縦横比をさします。バランスが良く安定した形で、人工物のみならず自然物にも美しいと感じるものの多くに黄金比が存在するそうです。
さて実践。最初に全体のレイアウトから。縦幅を800pxに想定して、そこから横幅を計算してみました。800pxを長辺とすると、短辺は1.6で割って500px。しかし横幅500pxだとなんとなく狭い感じがしたので、800pxを2で割って、短辺を400pxとした2つの黄金長方形として考えることにしました。400pxを短辺とすると、長辺は1.6をかけて640px。最終的に微調整をして横幅を650pxとしてみました。
次に横幅650pxを5:8に分けて、メインカラムを400px、サイドバーカラムを250pxとしてみました。厳密には5:8ではありませんが、10px単位でレイアウトを分けた方が楽なので。サイドバーカラムに250pxも必要ないように感じたので、250pxをさらに160pxと90pxに分割。
次にロゴを入れる箇所を作るために、縦幅400pxを150pxと250pxに分けて、上の5の部分にロゴを入れることにしました。最初はページ全体の上をロゴ部分にしようと思っていましたが、最終的にはサイドバーカラムの上だけをロゴ部分にしました。
そして下記のデザインが完成しました。少しメインカラムが狭いようにも感じますが、まあまあのできばえ。横幅760px、縦幅を950px（475+475）ぐらいでレイアウトしても良いかもしれませんね。これだと逆に縦に長くなりますが。
コメント