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選

まとめ

以上、美しくデザインできる新しいフレームワークとして使われている*「8ポイント方眼デザイン」*をご紹介しました。

縦・横ともに8ポイントの倍数にすることで、一貫性のあるデザインにすることができ、結果的にホームページを美しく見せることができます。
どうしてもコードにすると面倒な部分もありますが、慣れてくればデザインも早くなるので、ぜひ採用を検討してみてください。