すぐに取り入れよう！美しいデザインを実現する「8ポイント方眼デザイン」とは？

更新日: 2018年01月31日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8ポイントでデザインすれば「三方よし」

縦横ともに8ポイントでデザインすれば、デザイナーもチームメンバーも、ユーザーにとってもメリットがあります。

例えばデザイナーにとっては、縦横をリズミカルに配置することができるので、パーツの大きさや余白の幅の広さを効率的に取ることができ、モックアップもデザインしやすくなります。
チームメンバー間のコミュニケーションでも、デザイナーとエンジニアでの大きさに関する齟齬がなくなります。
ユーザーは一貫性のあるデザインに触れることになるので、ブランドに対する信頼性も増し、拡大してもピクセル崩れがなくなります。

すべてのステイクホルダーにメリットがあるため、まさに8ポイントの倍数でデザインすることは「三方よし」と言えますね。

各要素における8ポイントの取り方

ところで、やっかいなのはHTMLやCSSでホームページをデザインする場合、IllustratorやPowerPointのような自由配置ではなく、数値を使ってレイアウトを行なっていくので、要素の大きさをコードで指定したときにどのようにレンダリングされるかを理解していないとズレが生じてしまうというところです。

それでは、それぞれの要素で8ポイントの倍数を取っていくにはどのような考え方を持てばいいのでしょうか。

1. テキスト

複数行にまたがるようなテキストは、特に注意して設定しておきたいものです。

CSS3で新たに追加された、フォントを可変にする単位「rem」は、フォントサイズを指定する上で非常に便利です。
「rem」はルートであるhtmlで指定されたフォントサイズを基準に大きさを判別するからです。

例えば、ルートでテキストサイズを「16ポイント」(これも8の倍数です)に設定しておけば、「0.5rem」ごとに増減を繰り返していけば8ポイントグリッドシステムにフィットします。
また同様に、line-heightもポイント数ではなく「0.5rem」ごとの増減で指定したほうがグリッドの狂いがなくなります。

2. ボックス

ボックスはちょっとやっかいです。
ボーダーを8ポイントの中に入れるか外に出すかで、計算の仕方が変わってくるからです。

仮に、ボタンのボーダーが1pxだとしましょう。
アプローチとしては、2つの考え方があります。
ひとつは、ボーダーも含めて8pxのpaddingを取るという考え方です。
この場合は、正確には7pxのpaddingと1pxのborder-widthを合わせて8pxになります。
そしてもうひとつは、ボーダーを含めずにpaddingだけで8px取ってしまう方法です。

この1pxをどうするかという繊細な問題は、一般的に後者の考え方を採用することで解決されています。

8ポイント方眼デザインを提唱しているBryn Jackson氏によれば、この1pxは見かけ上のもので、実際には埋め込まれていると考えてもらっていいとのことです。

ただし、「box-sizing: border-box;」を指定すれば、widthやheighyはpaddingやborderも含めて計算することになるので、注意が必要です。

参考：
意外と盲点!? あまり知られていないけど”知ると便利”なCSSプロパティ19選