美しいバランスを生み出す黄金比をウェブページのレイアウトに使ってみたい人に役立つ -The Golden Grid

黄金比(1:1.6180)をベースに作成されたグリッドを使った、ウェブページのレイアウトに役立つテンプレートとツールを紹介します。

サイトのキャプチャ

The Golden Grid

The Golden Gridの仕組み

「The Golden Grid」は960 Grid Systemに水平方向のガイドを加えたもので、グリッドを構成するカラムと溝を黄金比ベースにしたものです。

黄金比については以前の記事で少し取り上げました。

「The Golden Grid」は長方形の幅と高さ(a/b)が黄金比(1.6180)をベースに構成されており、マージンの横と縦(x/y)も黄金比をベースにしています。

サイトのキャプチャ

「The Golden Grid」のグリッド

カラム数は、12カラム、16カラム、24カラムの3タイプが用意されており、それぞれのa/b, x/yの値は下記のようになります。

サイトのキャプチャ

カラムごとのサイズ

「The Golden Grid」は邪魔になるものは一切設けず、創造力を妨げないようにしています。
カラムは複数を繋げて利用することもできます。

サイトのキャプチャ

グリッドの展開例

The Golden Gridのセット内容

ダウンロードできる「The Golden Grid」のセットには、下記のものが入っています。

  • テンプレート
    Photoshop用、Fireworks用、Illustrator用、Flash用、InDesign用、OmniGraffle用、Pixelmator用
  • アクション
    Photoshop用

各テンプレートには3タイプ(12, 16, 24カラム)が揃っており、Photoshop用のアクションは1クリックで幅960pxの黄金比ベースのグリッドを生成します。

Photoshopのキャプチャ

「The Golden Grid」のアクションを実行

top of page

©2017 coliss