- グリッドシステムとは？
- 手順と考え方
- ポイント
- 自分の気づきと行動
１.グリッドシステムとは？
レイアウトを行う際、画面上に架空の縦横線をガイドラインとして引き、そのブロックごとに文字や図版を配置し、無駄なくスッキリした画面を作る手法。スイスのグラフィック・デザイナー、ヨゼフ・ミューラー＝ブロックマン（1914～1996年）は、デザインされる媒体の面積と文字の大きさの比例を研究した。後に「Grid systems」でその理論を発表する（画像）。グリッド・システムは、エディトリアルなどの分野で広く使用され、現在のWEBデザインの基本にもなっている。
2.手順と考え方
まず考えるのは、最小サイズ文字の大きさ。
要素として一番共通して使われ、かつ印象を左右する文字サイズから決める。
今回の例としては13pxを文字サイズの最小サイズとする。そして字間を1pxに設定する。
以下のように13pxのボックスには文字がぴったり入る(ここはデバイスフォント)
要素として一番共通して使われ、かつ印象を左右する文字サイズから決める。
今回の例としては13pxを文字サイズの最小サイズとする。そして字間を1pxに設定する。
以下のように13pxのボックスには文字がぴったり入る(ここはデバイスフォント)
次にこの文字たちの最大の横幅を決める。つまりこんなかんじに。
横幅は中途半端なサイズになってもかまわない。そのサイズでないといけない理由はないので。
横幅は中途半端なサイズになってもかまわない。そのサイズでないといけない理由はないので。
981px そして行間は最小を11pxとする。
このあたりの数値の設定は、デザインで伝えたい印象によって調整する。
今回は読みやすい文字の大きさ(でも大きくなりすぎるとざっくりとした印象になるので14pxではなく13px)
高さの余白を大きく取る、もしくはもう少し狭く取る、と印象が変わる。
この段階で行間の11pxを下回ると、全体のグリッドも縦幅が狭くなりソリッドな印象になる。
疑問(ここでは文字の大きさは13pt(ポイントではないのか？))
このあたりの数値の設定は、デザインで伝えたい印象によって調整する。
今回は読みやすい文字の大きさ(でも大きくなりすぎるとざっくりとした印象になるので14pxではなく13px)
高さの余白を大きく取る、もしくはもう少し狭く取る、と印象が変わる。
この段階で行間の11pxを下回ると、全体のグリッドも縦幅が狭くなりソリッドな印象になる。
疑問(ここでは文字の大きさは13pt(ポイントではないのか？))
実際文字を使う部分は、人が読みやすいように15文字20文字などの部分を使う。
この横幅で最大のボックスサイズを決めたら、余白は11pxと決めたので
11pxの余白はマストでグリッドを決めていく。
11pxの余白はマストでグリッドを決めていく。
981pxのボックスを12分割(もしくは24分割する)
＞これを使うと便利。http://guideguide.me/
＞これを使うと便利。http://guideguide.me/
つまりこうゆうかんじ
基本のレイアウトはこのグリッドに合わせて決めていく。
決めるラインはボックスのサイズやグリッドのサイズであり、マージンラインでは原則合わせないこと。例外的に気持ち良くないと思ったらマージンラインに合わせるが、それもすべてラインに合わせることで秩序が生まれてくる。
では高さのマージンはどうする？ということで
このように文字の最小サイズで作成したグリッドが生きてくる。
webはどうしても可変になるので縦ラインは柔軟にしていかなければならない。横幅のようにきっちりボックスの中を決めることはできないので
文字サイズに合わせて柔軟に変えていく
決めるラインはボックスのサイズやグリッドのサイズであり、マージンラインでは原則合わせないこと。例外的に気持ち良くないと思ったらマージンラインに合わせるが、それもすべてラインに合わせることで秩序が生まれてくる。
では高さのマージンはどうする？ということで
このように文字の最小サイズで作成したグリッドが生きてくる。
webはどうしても可変になるので縦ラインは柔軟にしていかなければならない。横幅のようにきっちりボックスの中を決めることはできないので
文字サイズに合わせて柔軟に変えていく
ここでのルールは
最小のマージンは11px、11の倍数である22px,33pxなどを保つこと
文字に関しても13pxが最小サイズであれば、
見出しは13px×4=52px となる。倍数にしていくこと
暗黙のルールを課していくことで秩序が生まれてリズムができる。
見出しは13px×4=52px となる。倍数にしていくこと
暗黙のルールを課していくことで秩序が生まれてリズムができる。
ここまでが基礎。
Sさんは要所要所で12カラムと24カラムを使い分けて、視覚的に心地いいポイントにしていた。マージンも11pxでは厳しいところは11×3=33pxなどで臨機応変に対応。ただ元となっているルールにはずれがないため違和感がない、ということになる。
ポイント
グリッドシステムのポイントとして
- 最小サイズから考える(最小サイズである程度画面の印象がわかっているということ)
- グリットで位置レイアウトを決めるので理由のないレイアウトはない
- 文字サイズ、画像サイズ、ボックスサイズも最小サイズの倍数などで設定されている。
自分の気づきと行動
＜気づき＞
今まで見よう見まねでグリッドシステムを使っていたが、明確なルールをどう儲けるのかが理解できておらず、システムに合わせているつもりでもうまく余白があっていない、サイズ感に統一性が見いだせないなどはあった。
今回のシステムのルールを見て、どうやって統一性とルールをもたせているのかがやっと見えた気がした。細かいながら、余白・マージンなどが均一なこと、画像サイズにもルールがあるが動きをもたせることも可能なことを理解した。
今回のシステムのルールを見て、どうやって統一性とルールをもたせているのかがやっと見えた気がした。細かいながら、余白・マージンなどが均一なこと、画像サイズにもルールがあるが動きをもたせることも可能なことを理解した。
感覚的にデザインする、といったことに納得ができなかった自分には非常に相性が良い方法論だと感じる。
ただSさんも言っていたけれど、これは一つの方法論であって
これが使えれば劇的にデザインがうまくなるというものではないことは肝に銘じておくべき。
これが使えれば劇的にデザインがうまくなるというものではないことは肝に銘じておくべき。
＜行動＞
最小サイズのマージンと文字からスタートしたグリッドシステムだが、
このサイズとマージンによる印象づけの違いが想像できていないと
このシステムを自分で作ることはできないと思うので
まず印象づけがどう変わるのか作ってみること。
このサイズとマージンによる印象づけの違いが想像できていないと
このシステムを自分で作ることはできないと思うので
まず印象づけがどう変わるのか作ってみること。
丁寧な作業が必須になるが、これは下準備が大きく関わってくるところだと思った。どういった下準備をして効率的にパズルを組み合わせるか。
自分に合ったやり方とツールの利用を見つけられれば効率化になると思う。
自分に合ったやり方とツールの利用を見つけられれば効率化になると思う。
0コメント