大阪・東京を拠点とし、webサイト企画・デザイン・コンテンツ制作・マーケティング・システム開発などの ホームページ制作をはじめ、グラフィックデザイン・映像制作など幅広くあなたのお手伝いをします。

私の愛するグリッドシステムのことを。

好きというか…インスピレーションが微弱すぎるから、
グリッドシステムや黄金比のような体系から攻めるしか足掻きようがないとも…。

 

グリッドシステムは、初めて「デザイン」を教えてくれた人から最初に伝授された手法でした。

 

「紙面のデザインをするときは、文字数を数える」からはじまり

ページ内に収めなければならない文字数から逆算して基本の文字を何Qにするか決め
基本の文字を最小単位としグリッドを敷き、それに合わせてレイアウトしていく。

 

印刷業界には あんまり首をつっこんでないので、認識があやふやなんですが
…たしか、そんな感じできいていたような。

 

このたび、A4紙面のレイアウトを組むときは12Qの3mmグリッドを敷いてみました。

12Qは、わりとキリよく分割できたし文字サイズ的にも読みやすいので、かなり気持ちよかったです 。

 

webは画面が無限に伸びてくれるため、文字数は関係ないんですが
私はいつも基本の文字サイズを12pxとして、その倍数でグリッドを敷くようにしています。

これも、キリよく収まりやすくて気に入っています。

「12」なんて素晴らしい数字なんだ…ww

 

Webで文字サイズ基準のグリッドを用いると…

文字数サイズを基準にグリッドを組むと、いくつか良いことがあります。
まずはサンプルの全体像を。（クリックで原寸表示）

 

 

左右の余白が揃う

文字サイズ基準だと、ピッタリ割り切れるので右と左の余白が均等になります。

ただし、12pxグリッドで14pxや20pxの文字を使えば変則になりムラがでます。

 

文字の先頭が揃う

正確には揃ってないですが、まあ。

キリよくどこかの文字目の先頭とピッタリ合うと、きもちいいです。

 

 

 

上下の端が揃うことがある

これは、個人的にかなりきもちいい。

 

12の倍数できっちり組んでいると、
サブカラムとメインカラムの行の開始位置や、
ブロックの端と文字の端、
ブロックのはしっこどうしが
ピッタリ揃うことがあります。

 

この端がそろう現象が頻発するように仕組むのがたまらない…ww

もう、ここまできたらメリットなのか何なのか分からなくなってきて
自己満足の領域に突入していますが。

そんなわけで、私は個人的に
余白5pxとか10pxをキリが悪いと感じてしまいます。

12pxはいいですよ！

気が向いたら試してみてください。