グリッドシステムの使い方

こうして形成した基本のグリッドシステムは、メインカラムとサブカラム、マージンという 3つの基本サイズをもっている。それぞれのサイズは、マージンだけサイズを固定して、カラムの幅は相対的 に決めるなどいくつかの方法が考えられる。マージンをファースト ビ.ューの左右にももたせる設計もある。

こうして作成したカラムの縦方向のラインに沿って、ボックスの構成を決定する。 ボックスの高さにはルールはなく、文字情報を入れる場合は流し込む情報の量によって可変設定とするのが妥当である。また、 画像を配置するボックスのみ縦横比を先に決定しておくことで、 フォーマット化しやすくすることもできる。

画面設計の参考となるサイト

こうした作業をする前に、他のサイトがどのようなグリッドを使って画面を設計しているのか調べることは非常に参考になる。気に入ったホームページの商面キャプチャを撮影して下絵にし、グリツドを引いてみるのもよいだろう。 また、グリッドを表示して設計のひみつを解き明かしてくれるようなサイトも存在する。 960 Grid System (http://960.gs) というサイトは各種ぺージにカラムを重ねて、画面設計を見せてくれるサービスだ。 12 カラムと 16 カラムという数の違いがレイアウト 結果にどう反映するのかを確認するためにも有用なので、一度チェックしてみよう。