Webデザインについて勉強していくと必ず出会うのが*「グリッドデザイン」*あるいは「グリッドレイアウト」「グリッドシステム」という言葉です。
グリッドとは「方眼」を意味する言葉で、画面やページを縦横に分断する直線で分割し、これを組み合わせてブロック内の要素の大きさや配置を決定していく方法のことです。

ところが、Webデザインにおいては*「グリッド」(方眼)*という言葉が使われながらも、実際には縦の線で分割しただけのものでも「グリッド」と呼んでいました。
水平位置に関してはテキストのベースラインは考慮されることもありましたが、基本的にはあまり考えられていない場合が多いようです。

確かに縦の線を意識することでレスポンシブデザインに簡単に対応することができるのですが、単にデスクトップサイトとモバイルサイトの互換性だけを考えていては、非常にもったいないです。
というのも、せっかく縦の線を均等の割合で分割しているので、それに合わせて水平の線も均等に分割したほうがデザイン的にも美しく見えるからです。

今回は、美しくデザインできる新しいフレームワークとして使われている*「8ポイント方眼デザイン」*をご紹介します。
あえて「グリッド」ではなく「方眼」という言葉を使っているのは、従来の縦分割のデザイン手法ではなく正方形の組み合わせによるデザインをイメージしていただきたいからです。
果たして、このフレームワークを採用することでどんなメリットが生まれるのでしょうか。

参考：
見やすい・読みやすいデザインを極めたいなら「バーティカルリズム」を学ぼう

「8ポイント方眼デザイン」とは？

「8ポイント方眼デザイン」(The Eight-Point Grid)は、デザインに関するポッドキャストを配信しているSpecのBryn Jackson氏によって提唱された考え方です。

BootstrapやFoundationといったグリッドレイアウトを採用しているフレームワークを取り入れるのは非常に便利ではありますが、便利ではあるのにデザイン上のバランスが悪かったり、サイト全体にパーツの一つひとつがフィットしないように感じるのは、水平位置のバランスが悪いからです。

デザインにおいて重要なことは一貫性です。
従来のグリッドシステムでは、水平位置まで統合することは難しかったので、縦にはフィットしても、横の位置に微妙なズレが生じるため、一貫性が崩れてしまっていました。
これがバランスが悪く感じてしまう理由です。

例えば、以下の図は8ポイントごとに水平線を引き、その線に合わせて並べてみた場合と、そうではない場合を比較した図です。
実際、一つひとつの要素を大雑把に配置してみると、バランスが悪く見えてしまうのではないでしょうか。

figure1.png

縦にも横にも8ポイントの倍数に合わせよう

この「8ポイント方眼デザイン」では、8の倍数を使って文字の大きさや余白など、あらゆる要素を縦横に設計していく方法です。
これには、height(高さ)やwidth(幅)だけでなく、margin(マージン)やpadding(パディング)も含まれます。

しかし、もしかしたら次のような疑問を感じているひともいるのではないでしょうか。

「なんで8の倍数なんだろう？」

実は、8ポイントの倍数を採用する理由は、画面の解像度にあります。

ピクセル密度やスクリーンサイズはさまざまなので、デザイナーにとっては解像度ごとにアセットを作成するのは面倒に感じるかもしれません。
8のような偶数を利用するのは、こうした解像度の異なるスクリーンで表示する際の問題を解決するからです。

例えば、4ポイントのグリッドと5ポイントのグリッドを比べてみましょう。
奇数である5ポイントは、1.5倍に引き伸ばした場合、以下の図のように縁がぼやけて見えてしまう場合があります。

figure2.png

また、6ポイントや10ポイントではない理由は、その逆です。
半分の解像度になったときに、3ポイントや5ポイントと奇数になってしまうからです。
8であれば、半分の半分であっても、偶数を保ちつづけることができるので、ちょうどよい数字かつ、デザインしやすい数字であると言うことができます。