トップページ > ロジックオブデザイン【目次】 > レイアウト【目次】 > グリッドシステムの詳細
グリッドシステムの詳細
グリッドシステムの簡単な説明は グリッドシステムを活用しようを参照していただくとして、 さらに細かいグリッドシステムの活用方法について解説してみたいと思います。
グラフィックデザインにおけるグリッドシステムについて詳しく調べてみると、 画面全体を構成するグリッドは文字サイズと行間のスペースを合わせたサイズを単位として 作成するとあります。下の図で説明すると、 「文字サイズと行間のスペースを合わせたサイズ」 というのは図に示す灰色の部分のことになります。
fig.1これを単位としたグリッドを構成し、 レイアウトの骨組みを作るのが厳密なグリッドシステムです。 単位を用いたグリッドとそうでないグリッドではやはり美しさに違いがでてきます。 無秩序にグリッドの大きさをいじるよりも、 単位によってグリッドの大きさをそろえた方が何故か整然としていて美しく見えるのです。 伝統のなせる技ですね(妙に感心)
また、グリッドシステムを活用しようでは説明を簡単にするため、 単純な正方形を組み立てただけの純粋な格子を例として紹介しました。 しかし、本来のグリッドシステムで生み出すグリッドは単純な格子状のものではありません。 もっと緻密に組み立てられたfig.3に示すような少し複雑な形になります。 （単純な格子状のグリッドでも素人の僕たちには大変便利なものですが。）
fig.2グリッドと要素
fig.3グリッドのみ
このへんのグリッドを組む技術はやはり知識や経験、 センスの問題で、誰でも精巧なグリッドを作れるかというと、 そうではありません。素人の僕にはアドバイスはできませんし、 未知の世界ですね。 一応自分なりにグリッドを組み立ててみたりということはしますが、 できが良いのか悪いのかはわかりません。 とにかく一度グリッドを組んでレイアウトしてみて、うむ使いやすい！ と自分が感じることができたり、 誰かに見せて美しい！と感じてもらえれば成功なのではないでしょうか。 試行錯誤でがんばりましょう(笑)
レイアウトスペースも、 文字サイズも固定のグラフィックデザインの世界において 上記のような単位を使うことは大変有効だと思います。 しかし、基本的にこれらが可変のWebの世界においては、 この単位を守ることが非常に難しい…というのが現実です。 文字サイズを固定してしまえばある程度守ることはできますが、 それが必ずしもいい方法だとは思えません。 Webにおいてグリッドシステムを活用する場合は 上記のような単位のことは気にしなくてもいいのではないかと思います。 ただし、無秩序にグリッドの大きさをいじるのではなく、 最小グリッドの大きさを決めておき （例えば、文字サイズに関係なく 15px * 20px と決めるとか）、 それを単位にグリッドを調整することをオススメします。
