1. グリッドレイアウト
「栅格化布局（グリッドシステム）」を「グリッドレイアウト」と呼ぶ方がより適切であると言われています。グリッド（網目）が与える直感的な印象は縦横に交差する正方形のマス目ですが、「栅（中国語でshan/zha）」という言葉の印象は（読み方にもよりますが）縦方向のみに感じられるかもしれません。実際、グリッドレイアウトの応用は一般的に縦方向のみ、つまり列の幅を固定するものが中心ですが、本来は行の高さも固定して真のグリッドを実現することも可能です。
本文の末尾に、便利なオンライン生成ツールおよびクラシックな960px幅24列グリッドの例を掲載しています。
2. 起源
1692年、即位したばかりのフランス国王ルイ14世は、フランスの印刷レベルが不十分であると感じ、印刷を管理するための王立特別委員会を設立するよう命じました。彼らの最優先任務は、科学的で合理的、かつ機能性を重視した新しい書体を設計することでした。
委員会は数学者のニコラ・ジョジョン（Nicolas Jaugeon）が率い、彼らはローマ体を基礎とし、方眼（マス目）を設計の根拠としました。各書体のマス目は64の基本単位に分割され、各単位はさらに36の小刻みに分けられました。これにより、1つの印刷版面は2304の小さなマス目で構成されることになります。この厳密な幾何学的グリッドネットワークの中で、書体の形状、版面のレイアウト、伝達機能の効率を設計・試験しました。これは、世界で最も早い書体と版面に対する科学的な実験活動であり、グリッドシステムの最古の原型でもあります。
グリッドレイアウトはもともと印刷業界で使われていたものです。例えば、新聞のレイアウトは厳格にグリッドレイアウトに従っています。新聞には大小さまざまなコンテンツブロックがありますが、全体的な印象は心地よく、バラバラな感じがありません。また、グリッドに基づいた厳格なレイアウトは、ページスタイルを統一し、異なるページ間での視覚的な違和感を軽減することができます。
グリッドレイアウトは主に、ポータルサイトのトップページのように、大量の情報を表示するウェブページで使用されます。見た目はまさに新聞のようです。
3. 960とグリッドレイアウト
グリッドレイアウトについて調べると、「960」という数字が繰り返し登場することに気づくでしょう。一部の記事では、960は黄金比に関係があると言われていますが、実はそうではありません。
960ピクセルという幅は市場の選択によるものです。1024x768の解像度が主流だった時代、960はほぼフルスクリーンの幅（正確にはビューポートの幅）に相当し、黄金比とは直接の関係はありません。
2008年当時、以下のように多くのサイトが960px幅のグリッドレイアウトを採用していました：
| ウェブサイト | トップページの幅 px |
|---|---|
| Yahoo! | 950 |
| 淘宝（Taobao） | 950 |
| MySpace | 960 |
| 新浪（Sina） | 950 |
| 網易（NetEase） | 960 |
| Live Search | 958 |
| 搜狐（Sohu） | 950 |
| 優酷（Youku） | 960 |
| AOL | 960 |
今後、画面がさらに広くなり（解像度がより高くなれば）、より大きな幅のグリッドレイアウトが登場することが予想されます。
4. 実現原理
総幅（width）をW、列の幅（column width）をc、列間の余白（column gutter）をg、左右の余白（margin）をm、列の数（column number）をNとすると、以下の式が得られます：
W = c * N + g * (N - 1) + 2 * m
一般的に、Gutterの幅はMarginの2倍（g = 2m）に設定されることが多く、上記の式は以下のように簡略化できます：
W = c * N + g * (N - 1) + g = (c + g) * N
ここで c + g = C と置くと、式は非常に単純になります：
W = C * N
クラシックなグリッドレイアウトにおいて、950は実際のコンテンツ幅（左右のmarginを除いたもの）、960は総幅Wとなります。これは非常に単純な算術式であり、神秘的なものではありません。最も一般的な24列グリッド（列幅40px、余白8px）は、この単純な式で算出されています。
5. タタミレイアウト
畳（たたみ）は日本の家具（敷物）ですが、3行4列のグリッドレイアウトでもあります。これは見ていて非常に心地よいレイアウトであり、例えばWindows PhoneやWindows 8のMetro UIのようなレイアウトに似ています。
3x4のグリッドを分割することで、3164通りの異なるレイアウトが得られ、タブレット端末などのコンテンツのレイアウト設計に広く応用されています。
6. 黄金比
黄金分割（黄金比）は数学的な問題に帰結します。長さ1の線段をxと1-xの2つの部分に分けたとき：
x / 1 = (1 - x) / x
これを二次方程式に整理すると：
x^2 + x - 1 = 0
正の解は以下の通りです：
x = (sqrt(5) - 1) / 2 ~= 0.618
黄金比はデザインにおいて非常に高い地位を占めており、グラフィックデザインも例外ではありません。グリッドレイアウトにも黄金比を応用できます。例えば、クラシックな960px幅24列グリッド（列幅40、余白10）において、黄金比（363/587）に��も近い2カラムの分割方法は、9列（350）+ 15列（590）となります。
コメントはまだありません